1.4　网页设计

1.4.1　网页风格设计

网页的风格其实就是网页给浏览者的一个整体形象，这个整体形象是由网页的版面布局、色彩搭配、文字编排和设计、图像的创意与设计、网页的多媒体元素等因素来决定的。对于信息量大的网站来说，页面的布局风格对网站影响较大。信息量小的网站，则可侧重于网站独特的元素（如有特色的导航，特别的布局设计，较大的插图和背景等）。目前比较流行的网页设计风格有以下一些类型。

1．全屏网页设计

全屏网页设计，利用精心挑选设计的漂亮背景，加上合理的页面布局，视觉冲击力大可很好地吸引观者注意。通常页面内的文字内容不会特别多（所出现的少量文字加上精美的排版将会变得更加吸引人），主要以图片展示为主。虽然页面精美，但是承载信息有限，通常个人网站和产品展示类网站使用此风格较多，而企业类的门户网站则较少使用。

2．响应式网站设计

由于用户都拥有多种终端：台式计算机、笔记本、平板电脑、手机，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。响应式网页设计就是一个网站能够兼容多个终端，而不需要为每个终端做一个特定的版本。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。

3．扁平化设计

扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。多数网站使用响应式设计来兼容平板电脑、手机等多平台浏览，而使用扁平化网页会更容易实现这些技术。

4．无限滚动模式（瀑布流）

当页面内容信息很多时，某些网站设计没有采用分页方式，而是采用一种垂直瀑布流的方式布局。将那些内容垂直排布，当滚轮滚到页面下方时，会自动加载新的内容，无须单击换页，用户可以无缝阅览。例如，在百度搜索图片时，搜索到的图片页面就采取垂直瀑布流的方式显示图片。这种滚动页面方式减少了分页的数量，对于信息量大，每日更新数据快的网站可采用此方案。

1.4.2　网页布局设计

网页中加入了文字、图片、动画，怎样才能合理地把这些元素整合起来，组成一个协调的页面呢？布局就是以最适合浏览的方式将图片、文字、动画等元素排放在页面的不同位置。布局时需要顾忌的事项很多，要注意字间距，文字、图片的数量，颜色的搭配，还要考虑页面留白等。

现在常见的布局类型有以下几种。

1．“T”字型布局

所谓“T”结构，就是指页面顶部为横条网站标志＋广告条，下方左面为主菜单，右面显示内容的布局，整体效果类似英文字母“T”，所以称之为“T”字型布局。这是网页设计中用得最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法。

2．“同”字型或“国”字型布局

所谓同字型布局就是指页面顶部为“网站标志＋广告条＋主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。“国”字型布局是在“同”字型布局基础上演化而来的，在保留“同”字型的同时，在页面的下方增加一横条状的菜单或广告。这种布局的优点是充分利用版面，页面结构清晰，主次分明，信息量大，通常用于一些企业门户网站或者大型网站布局。

3．标题正文型布局

这种布局的最上方是标题或广告等内容，下面是正文。通常文章页面或注册页面采用此种布局，其特点是简洁明快，干扰信息少，较为正规。

4．“川”型布局

“川”型布局是将整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，可以最大限度地突出主页的索引功能。“川”型布局和“国”型布局的主要区别是：把主内容区换成了各个二级页面的链接，其中的不足是二级栏目比例不易配置平衡，色彩不易协调。

5．宣传海报型布局

此类型是指页面布局像一张宣传海报，通常以一张精美的海报画面为布局的主体，是一种具有艺术感和时尚感的网页布局方式。这种类型基本上是出现在一些企业网站和个人网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。

6．Flash型布局

Flash型布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash，页面本身就是动态的，画面一般比较绚丽、有趣。这种布局与宣传海报型结构比较类似，不同的是由于Flash功能强大，页面所表达的信息更丰富更详尽。

7．框架型布局

框架型布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。

8．变化型

采用上述几种布局的结合与变化，布局采用上、下、左、右结合的综合型结构，再结合F1ash动画，使页面形式更加多样，视觉冲击力更强。

1.4.3　网页色彩设计

色彩的搭配，能体现出一个网页设计者的审美观，也会直接影响浏览者的观感，相同的颜色在不同的人看起来情绪反应可能是不同的，这与个人偏好有关，有时也与文化背景有关。无论是单个页面的色彩搭配，还是整个网站的色彩设计，首先都会确定一个主色调，用以配合网页的主题，其他的颜色辅以调节的作用。

1．需要了解的色彩知识

1）色彩的三要素

色相、亮度和饱和度是构成色彩的三要素。亮度也被称作明度，它是指色彩的明暗程度。亮度越大色彩越亮，反之则颜色越暗。色相是指能够比较确切地表示某种颜色色别的名称，也可以理解为颜色的相貌，每一个颜色所特有的与其他颜色不相同的表象。饱和度是指颜色的纯净程度，饱和度越高颜色越鲜艳，也可以把饱和度看成是色调的鲜艳或灰暗程度。

黑、白、灰只有亮度的差别，没有色相的变化，在配色中常常将这三种非彩色作为调和、隔离的因素来使用。

2）色彩的心理感受

不同的颜色会给浏览者不同的心理感受，当色彩在饱和度、透明度上略有变化时就会让人产生不同的感觉。以绿色为例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽宁、阴深。

色彩的冷暖感觉一般是由色相决定的。如火一样会让人产生温暖感称为暖色。暖色包含红、橙、黄以及这三种颜色的变种，它们通常象征活力、激情和积极。在网页设计中使用暖色以体现激情、快乐、热忱和活力的主调。如水一般冷淡的颜色称为冷色。冷色系包含绿色、蓝色和紫色，相对暖色，强度要弱，通常给人的感觉是舒缓，放松，以及有一点儿冷淡。在网页设计中使用冷色可以营造一种冷静或专业的感觉。

如淘宝、唯品会等购物网站使用的是暖色系，倾向于让人兴奋的配色。而政府、一些企业网站则适合选择冷静一些的冷色系。

2．网页的色彩搭配

网页设计中最根本的原则是，无论你创造了一个多么耀眼的设计，其最终的作用是发挥出内容的核心位置。配色方案永远不应该比它呈现的内容更加夺目，设计应该是辅助衬托作用，目的是帮助突出网站的内容。

配色方案有多种，可以根据网站主题进行配色。配色时通常将网页中的色彩分为以下4部分。

（1）主色调：页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉影响。

（2）辅色调：仅次于主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。

（3）点睛色：在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。

（4）背景色：衬托环抱整体的色调，协调、支配整体的作用。

网站的主色调有无数种颜色选择，和绘画一样，应该遵守近实远虚的原则。近就是网站要突出的内容，后面灰蒙蒙的远景就是网页背景。因此建议主色调选择简单又安全的颜色，如白色或浅灰色和深灰色的搭配文字背景。绝大部分大型网站，如京东、百度、腾讯等都采用了此类搭配方案。这种搭配对浏览者来说提高了内容的可读性，并且把图片突出在最前方。

在网页白色或者灰色主色调的前提下，可选择一种鲜艳的颜色来作为想要突出事物的辅色调，比如标题、菜单、LOGO标志等的色调。在上淘宝网购物时可发现，淘宝网选择了橙色作为辅色调。

当然在制作一些有个性的网站时，上面的搭配感觉太过于寡淡，可以采用另一种搭配方案。把颜色分为非彩色与彩色两类：非彩色指黑、白、灰，其他为彩色。搭配网页颜色时主要内容文字用非彩色，边框、背景、图片等用彩色。这样页面整体不单调，看内容时也不会觉得眼花缭乱。

3．网页配色的忌讳

（1）在进行网页配色时，并不是色彩越多越好看，应该尽量控制在三种色彩以内。

（2）红、黄、蓝三原色视觉冲击力最强，也较难搭配，大范围使用要慎重。

（3）背景和前文的对比尽量要大，不要用花纹繁复的图案作背景，以便突出主要文字内容。

1.4.4　网页内容设计

网页内容最主要由文字和图片两大要素构成，怎样合理安排文字和图片的大小、位置等是网页布局的关键之一。

1．文字

文字是网页设计的主体，对网页中的文字进行整体设计，可以更好地表达信息，增强视觉效果。对于文字内容，要考虑两点。一是简洁、明了，能够让用户读得下去；二是把握文字的数量，文字太少，会显得单调，文字多了，网页就会显得很乏味。

从网页文字的可读性来看，需要设计者考虑字体、字号、行距、间距、背景色与文字颜色对比等。

（1）字体、字号。长文本使用标准字体、字号。一般文字正文中文都采用宋体12px（像素）字体，标题或者是关键字可采用黑体14px，英文网页一般用11px。

（2）行宽。一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难；如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。每一行文字的长度建议控制在35~45个字之间。

（3）行距。设置时应该注意到，过宽的行距会让文字失去延续性，影响阅读；而行距过窄，则容易出现跳行。网页设计中，建议一般根据字体大小选1~1.5倍作为行间距，1.5~2倍作为段间距。

（4）对齐。排版中很重要的一个规范就是把应该对齐的地方对齐，比如每个段落行的位置对齐。通常情况下，建议在页面上只使用一种文本对齐，尽量避免两端对齐。

2．图片

图片的创意与设计在视觉上比文字更能吸引人的眼球，善用图片可以更加生动、形象、直观地表达网页主题。在某些突出的位置，可以放置一些比较出彩的图片，这样既能达到美观的效果，又能让浏览者对网页印象深刻，增强网页的宣传力、感染力。

使用图片时要注意以下一些原则。

（1）图片效果要清晰，在同质量下尽量选择文件最小的图片。对颜色细节要求小时选择.GIF格式。如果图片质量要求高则可选择.PNG或者.JPG格式图片。

（2）处理图片素材时，适当裁剪图片只保留与网页相关部分。尽量将图片在插入网页前就调整为网页所需大小，不要将大图片插入网页里再将图片缩小，这样会影响网页下载速度。

（3）图片内文字的装饰不要过分花哨，否则会造成文字辨识不易。

（4）图片运用要和谐。选择大图作网站背景时，图片要与网站主题贴切，与网站定位保持一致，在颜色搭配方面，如果色彩与主题不够融合的话，可以通过改变图片的亮度、饱和度等来平衡网站的整体风格特色。

3．多媒体元素

为了让网页能更吸引人的注意，网页中可放置音频、动画、视频等，这些就是多媒体了。网页中多媒体的动态效果能够在很大程度上增加对浏览者的吸引力，但是在普通的网页中放置过多的多媒体元素，会影响网页打开速度。

1.4.5　网页设计案例分析

下面以一个叫“乐山乐水”的旅游网站为例来分析一下，在制作网页时应该怎样应用这些网页设计原则。“乐山乐水”网站首页效果如图1-1所示。

网站设计的步骤如下。

1．确定网站主题

网站的内容是展示中国四川乐山这个城市的旅游相关信息。网站命名为“乐山乐水”，生动贴切地描述了网站的主题：乐山的山山水水，旅游文化。

2．确定网站的布局风格

由于网站信息量较大，“乐山乐水”网站首页采用了“同”字型布局风格。网页自上而下分别是：网页的LOGO标志、网站导航栏、Flash动画效果的横幅广告、主要内容（左边栏包括滚动效果的旅游新闻区域、友情链接区域，中间为景点推荐区域和旅游路线区域，右边栏是乐山美食区域和乐山酒店区域）、版权说明区域。

3．网站的色彩搭配

“乐山乐水”网站的背景色为白色，主色调是绿色，辅色调是同色系调节了亮度、饱和度的果绿色，搭配点睛色橙色。这种搭配方式色彩调和统一，但是又有微妙的变化，让网页有了层次感，不再单调乏味。整个网页给人的感觉自然、清新、别致。

4．首页内容的设计

在网站的首页中最吸引人目光的就是用三张乐山美景制作的Flash动画效果。用这种方式来展示图片更加引人入胜。

在左侧边栏的旅游新闻采用了滚动文字的动态效果，很容易吸引浏览者的目光，可以让浏览者首先关注乐山旅游的相关动态。

网页内文字数量适中，文字大小和间距恰当，不仅美观，浏览者阅读起来也清晰、流畅。如果只有文字网页会显得单调，在网页中间的三张风景图片起到了点睛作用。各子栏目中的小图标应用让网页看上去更加生动活泼。

5．素材的应用

网页里用到了Flash动画素材、滚动文字效果、LOGO标志图片、各子栏目和导航栏背景图片等。图片大小适中，动画元素只用了一个，不仅让页面充满动态美感，也没有影响到网页的下载速度。

网站设计时，不管是布局、内容还是配色，都应该突出网站的重点和特色。根据网站的风格来选择布局类型，要贴合自己的主题来选择内容，不要放一大堆信息，不管是否和主题相关。