网页配色与版式布局的设计

2015-03-18张丽萍

产业与科技论坛 2015年3期

□张丽萍

在信息技术时代，互联网的使用越来越广泛，网页的设置已经不再是专业技术人员的专利，一般的用户同样也可以设计与制作出属于自己的网页。一个好的网页设计会给用户留下深刻的印象，并且让用户有好用易用的体验。对于刚开始学习制作网页的人来说，往往不容易驾驭。从网页设计的版式布局、信息主次层级、展示图片、色彩搭配等视觉方面的运用，直接影响到用户对网站的第一印象，而在这些内容中，色彩的配色方案是整个页面设计中的重中之重。本文根据学生制作的作品中出现的配色方案问题和版面布局问题进行分析。

一、网页配色

打开一个网站，给用户留下第一印象的不是网站丰富的内容，而是网站中的色彩和网站合理的版面布局，尤其是色彩对我们的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。

(一)色彩搭配原则。在制作网页时，除了考虑网站本身的类型、功能、定位以外还需要遵循一定的色彩搭配原则，进而设计出精美的网页。一是色彩的鲜明性。如果一个网站的色彩鲜明，这样很容易吸引用户眼球，使用户产生耳目一新的感觉。二是色彩的独特性。给网页用色必须体现页面独特的设计风格，这样才能让用户产生深刻的记忆。三是色彩的艺术性。按照内容决定形式的原则，在考虑网站本身特点的同时，还可以加入不同的艺术表现形式，设计出既符合网站要求，又富有一定美感的网站。四是色彩搭配的合理性。色彩具有强大的精神影响力。人们常常感受到色彩对自己心理的影响。这些影响总是在不知不觉中发挥作用，左右我们的情绪。对于网页设计者来说，色彩的心理作用尤为重要。因为网络是在高效率、快节奏的现代生活方式下产生的。所以不同的主题应该选用不同的色彩。比如，科技型网站用蓝色来体现，美食的滋味用橙色来体现，女性的柔情用粉红色体现等。

(二)色彩搭配方法。任何一种颜色都有色调、饱和度、明度三方面，颜色的运用是纯色之间的关系，以及它们混合在一起的效果。在教学过程中，通过从目前很多的网络应用中的经典案例，找到关于色彩运用的一些广泛的色彩关系以及搭配方法，以此作为实际工作学习中配色的指南。

1.同种色彩搭配。这里是指先选定一种色彩，然后调整透明度或者饱和度，也就是将色彩变淡或者加深，产生新的色彩，用于网页设计，这样的页面看起来色彩统一，且具有层次感。

2.邻近色彩搭配。先在色相环上任选一色，与此色相距90 度，或者彼此相隔五六个数位的两色，即称为邻近色。如:红色与黄橙色、蓝色与黄绿色等。采用邻近色搭配的目的可以使网页避免色彩杂乱，可以使网页达到和谐统一的效果。

3.对比色彩搭配。颜色对比一般指从纯度、明度、色相上进行对比，如明暗对比、深浅对比、冷暖对比等。对比色不仅可以突出重点，而且很容易激发视觉上的冲击，产生强烈的视觉效果。合理使用对比色，能够使网站的特色鲜明、重点突出。在设计网页时，通常以一种颜色为主色调，对比色仅仅作为点缀，以起到画龙点睛的作用。同时，颜色的对比原则从另一个层面上讲，也是一种衬托。

4.色彩的黄金法则6:3:1。所谓黄金法则，运用到网页中是指网页中主色、辅助色和点缀色。一般来说，一个合格的设计要有60% 的主色，30% 的辅助色和10%的点缀色，这是一个基本法则。比如在设计卧室时，墙壁用60%的比例，家居床品、窗帘之类就是30%，10% 就是小的饰品和艺术品，这10% 起到画龙点睛的作用，用来激活画面，提升设计层次和品味。这个法则就是黄金法则。当看到一个设计作品时，我们视觉上首先有一个颜色感受，即确定是暖色系的，还是冷色系的，这个色系就是我们说的60%的主色调，它可以被用来渲染画面气氛;另外的30% 是为了画面的平衡，来衬托主色调;至于那10%就是点睛之笔。

如果对颜色的搭配没有经验，可以使用Dreamweaver的配色方案来学习简单的配色，根据Dreamweaver 系统提供的多种背景、文本和链接的颜色来选择搭配。当然还可以使用一些专门的网页配色软件来辅助搭配好网站的色彩。

二、网页布局

除了学习网页配色的基本原则与方法之外，还应了解网页的版式布局，网站划分框架结构可以使网站内容层次清晰，使浏览者一目了然，方便浏览信息。网页的基本结构就好像盖房子要先打地基一样，有了坚实的地基方能万丈高楼平地起。网页布局就是在页面上划分出不同的区域，按照设计的原则和方法，把不同的内容放置到不同的位置上，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。

网页布局常用的方法有:使用表格布局、使用层布局、使用框架布局。需要用户根据页面特点而决定使用哪种方法，三种方法都有各自的优缺点。表格布局是简单易用，但后期维护和修改时就比较麻烦。层布局使用框架和样式分离的方法进行布局，后期容易维护。

设计首页的第一步是设计版面布局。这就像传统的报刊杂志编辑一样，首先要进行排版。所以我们必须要学习和掌握网页的版面设计。通过观察一些经典网站案例，和实际制作网页的过程中，列出几种常见的布局结构，供大家参考。常见的布局结构有“国”字型布局、“厂”字型布局、“框架”型布局、“Flash”型布局，下面对这些布局分别进行说明。

(二)“厂”字型布局。整个页面布局类似“厂”字，页面顶部和左部都可以设计为主导航栏，右下面是主内容区。

(三)“框架”型布局。一是左右框架型:这是一种左右分为两页的框架结构，一般左面是导航链接，最上面可以有标题或标起，右面是正文。一般见到的大部分的大型论坛都是这种结构。这种类型的结构非常清晰，一目了然。二是上下框架型:与上面类似，区别仅仅在于它是把页面分为上下两页的框架。三是综合框架型:是上面两结构的组合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”布局，只是采用了框架结构。几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活。

(四)封面型布局。这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，这种类型大部分出现在企业网站和个人主页，如果处理得好，会给人带来赏心悦目的感觉。优点显而易见，漂亮吸引人。缺点是速度慢，作为版面布局还是值得借鉴的。

(五)Flash 型布局。这种布局与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash，与封面型不同的是，由于Flash 强大的功能，页面所表达的信息更丰富，如果其视觉效果及听觉效果处理得当，并不亚于传统的多媒体。

当然，在实际设计中不要局限于以上几种布局格式，可以稍作适当的变化，这样会收到意想不到的效果，另外，平时在浏览网页时要多留心别人的布局方式，如果遇到好的布局就可以保存下来作为设计布局的参考。