网页设计综合实践教程
上QQ阅读APP看书,第一时间看更新

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-1 “乐山乐水”网站首页效果图

网站设计的步骤如下。

1.确定网站主题

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

2.确定网站的布局风格

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

3.网站的色彩搭配

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

4.首页内容的设计

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

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

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

5.素材的应用

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

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