见微知著

——Web用户体验解构

李清　著

ISBN：978-7-111-30112-7

本书纸版由机械工业出版社于2010年出版，电子版由华章分社（北京华章图文信息有限公司）全球范围内制作与发行。

版权所有，侵权必究

客服热线：+ 86-10-68995265

客服信箱：service@bbbvip.com

官方网址：www.hzmedia.com.cn

新浪微博 @研发书局

腾讯微博 @yanfabook

目　录

前言

第1章　网站解构入门

1.1　为什么要网站解构

1.2　网站解构的思路和纬度

1.2.1　整体界面布局及配色方案

1.2.2　主要功能区

1.2.3　页面元素

1.2.4　其他细节

第2章　整体界面布局及配色方案

2.1　界面布局

2.1.1　一栏式布局

2.1.2　两栏式布局

2.1.3　三栏式布局

2.1.4　设计要点

2.2　网站整体配色方案

2.2.1　不同颜色会产生不同的主观感受

2.2.2　网站特色

第3章　主要功能区域

3.1　头部

3.1.1　头部类型

3.1.2　头部的元素设计

3.2　页尾设计

3.2.1　需要规避的细节问题

3.2.2　设计新趋势

3.3　导航区

3.3.1　Tab导航

3.3.2　树状导航

3.3.3　鱼眼导航

3.3.4　面包屑导航

3.3.5　网站地图

3.3.6　推荐式导航

3.3.7　引导性导航

3.3.8　知名网站导航设计

3.4　搜索区

3.4.1　搜索的分类

3.4.2　设计要点

3.5　登录注册区

3.5.1　告诉用户注册的好处

3.5.2　用邮箱取代用户名，作为登录网站的唯一身份识别

3.5.3　不要忘记“记住登录状态”和“忘记密码”等细节

3.5.4　不必要的情况下尽量不要使用验证码

3.5.5　注册表单的优化

3.5.6　友好的提示信息

3.5.7　设计醒目的登录、注册按钮

3.6　信息内容展示区

3.6.1　首页

3.6.2　列表页

3.6.3　具体页面

3.7　广告区

3.7.1　广告类型

3.7.2　设计要点

第4章　页面元素

4.1　表单概述

4.1.1　表单布局设计

4.1.2　设计要点

4.1.3　知名网站表单设计

4.2　标签

4.2.1　什么时候使用模块标签

4.2.2　设计要点

4.2.3　知名网站标签设计

4.3　翻页

4.3.1　第一页

4.3.2　最后一页

4.3.3　上一页和下一页

4.3.4　页码显示的数量

4.3.5　翻页区域的醒目度

4.3.6　增大可点击区域

4.3.7　页码的间距

4.3.8　当前页码和总页码

4.3.9　快速跳转

4.4　链接

4.4.1　链接的颜色

4.4.2　链接的可点击范围

4.4.3　链接的下划线

4.4.4　链接颜色的变化

4.4.5　区分内部链接和外部链接

4.4.6　链接的交互方式

4.5　按钮

4.5.1　什么是按钮

4.5.2　如何增加按钮的点击率

4.5.3　按钮的主次关系

4.5.4　按钮摆放的位置

4.5.5　减少用户定位时间

4.5.6　相关性设计，增加按钮的可理解性

4.5.7　优化视觉效果，增加按钮的吸引力

4.5.8　操作的反馈

4.6　操作反馈

4.6.1　什么是反馈，为什么要反馈

4.6.2　反馈的种类

4.7　验证码

4.7.1　什么是验证码

4.7.2　为什么需要验证码

4.7.3　验证码带来的困惑

4.7.4　其他方式

第5章　其他

5.1　文字设计

5.1.1　字体类型

5.1.2　字号

5.1.3　字体颜色

5.1.4　字体的样式

5.1.5　设计要点

5.2　网站文字的语气

5.2.1　网站应该懂得基本的礼貌

5.2.2　网站应该是谦逊、亲切的

5.2.3　不要使用责怪用户的语气

5.2.4　网站有时也可以表现出幽默的一面

5.3　图片质感

5.4　文字标题

附录1　常用的设计原则

附录2　Nielsen可用性原则

附录3　延伸阅读（推荐网站）

前言

2008年编者在阿里巴巴工作期间，有几次产品经理拿着2套设计方案询问我：“从用户的角度来看，你觉得用户会喜欢哪一种设计？”

如果条件允许，那么可以邀请真实用户到实验室参与快速的测试和访谈，但对于网站而言，其迭代速度之快让我们很难针对每一个细节都进行测试验证，不论是时间、人力或者金钱都消耗不起。因此通常情况，我们会简单分析一下用户的使用场景和需求，有时这种方法可以奏效，但有时却不能很好地给出解决方案。此时往往只能根据以往的经验或者在借鉴国内外优秀网站设计的基础上快速给出答案，但有时候往往又无法说服“强势”的产品经理，毕竟这些解决方案可能会带来代码量的增加等额外工作量。

如果在设计前就能针对各个细节积累相应的设计方案和研究结论，那么在确定设计方案时就可以根据网站的实际情况选择最适合的方式，避免产品经理和设计师之间过多的争执，同时也减少反复修改设计的成本。在这些想法的基础上，我们开始参与对网站元素的解构以及导航、链接等细节元素的资料收集。

后来，在做咨询项目的过程中，随着与客户的不断接触和了解，我们发现目前业界关于用户体验的书很多从理论或者设计原则的层面上进行了很好的诠释，但对于网站来讲，仍然缺乏系统地针对用户体验设计实践的总结和归纳。

本书的写作思路

本书主要从整体到局部地对网站的元素进行解构，包括整体上网站的布局、配色方案，到网站各个功能区域，如登录区、内容区、广告区等，最后到按钮、反馈、验证码、字体、文字语气等多个细节元素。细节决定体验，因此每个细节都值得细细深究，很多时候一个细节的错误将直接影响到用户对网站的体验和认可度，当然直接反映在数据上就包括用户注册率、PV（页面浏览量）等。

针对每个细节元素的分析都参考了相应的书籍、研究论文、国内外优秀设计、网站博客等多种资源，最后从研究结论、知名网站的设计方案、设计要点等不同方面对其进行阐述。

在本书编写过程中，编者也经历了一段时间的重新学习和整理，很高兴能够和大家分享经验。当然，由于时间、篇幅以及个人经验的局限，本书还有很多不完善的地方，也希望能够和大家共同探讨，互相勉励，共同进步，更深入地解构更多设计元素，使本书更加系统、更加完善。

本书中每个部分都相对独立，如果设计新的网站，或者对用户体验感兴趣，您可以按照书中的顺序进行阅读；如果需要有针对性地对网站某部分进行改进，那么也可以直接跳到具体章节查看，针对不同细节元素，可以找到最适合的设计方案。

本书适合的读者群体

本书主要适用于用户体验设计从业人员、产品经理、网站设计人员等，可以为设计新的网站或者改进旧网站时提供一些参考和依据。

1.交互设计师

在设计线框图时，您可以参考解构的思路，同时结合网站自身的情况和目标用户群体的需求、喜好、使用流程等，选择合适的布局和细节元素的交互方式，或者对原有的进行局部优化。

2.用户研究员

除了对网站进行用户访谈、测试或问卷等活动来获取用户的反馈外，还可以针对每个细节元素进行对比验证，或者通过获取网站相关在线数据，对不同的设计方案进行对比分析，从而选取最合适的方式。

3.视觉设计师

在对网站进行视觉美化的时候，可以从用户体验的角度，来考虑视觉对于用户主观感受的影响。

4.产品经理

产品经理可对本书内容做基础地了解，在确定产品设计方案时，可以与用户体验设计人员有更多更深入的交流。

当然，如果您对网站设计和用户体验感兴趣的话，也非常欢迎您阅读本书。

最后，要非常感谢机械工业出版社华章公司的陈冀康，如果不是您的鼓励，我也没有勇气和精力来完成这本书。要感谢老板黄蜂，在项目非常忙的时间给我半年的时间来完成本书的写作。感谢爸妈，还有所有朋友在这段时间内对我的帮助和支持。没有你们，我不可能坚持完成本书的编写。

还有要对某些博主道歉，由于很多信息不断的转载，已经找不到原创的作者，因此如果原作者看到的话，请联系本人m.liqing@gmail.com，一定在再版时改进。

李清（Michelle）

2010年2月10日上海

第1章　网站解构入门

网站的用户体验指的是由于网站的作用、品牌形象、操作的便利性、网速的流畅性以及细节设计等综合因素，最终影响到用户访问网站时的主观体验，包括用户是否能成功完成任务、是否喜欢网站、是否还想再来。就像进入一家餐厅，除了菜式本身的可口之外，餐厅的装修、座位的分布、服务员的微笑，甚至一句简单的“请”或者“谢谢”，所有细节都会影响到用户整体的情绪体验。一个不起眼的细节，可能让用户倍感欣喜，却也可能导致错误，带来沮丧感。

我们在开车的时候，经常会遇到如图1-1所示的2种不同的红绿灯。

图　1-1

对比2种不同的情况：第一种很清晰易懂，代表绿灯可行驶，绿色的字体颜色和绿灯互相辉映，帮助用户更好的判断；但第二种红色字体往往容易让人迷惑，至少我每次都会下意识地犹豫，到底是红灯还是绿灯？该停车还是继续前进？如果判断失误的话，就可能在绿灯的时候停下来。要是换成红灯加上绿色字体，是否会容易造成直接闯红灯的现象？一个小小的红绿灯颜色的细节设计，却可能带来不同的后果。

网站也是如此！随着互联网的迅速发展，用户体验越来越成为影响网站竞争力的重要元素，也受到越来越多的网站的重视。要有好的用户体验，不仅需要更快的速度、更好的内容，更需要从细节处着手，设身处地从用户的角度来思考问题，体现出网站对用户的尊重和贴心，将会避免给用户带来沮丧感。

1.1　为什么要网站解构

网站的用户体验设计需要感性和理性的完美结合，但网站的用户体验设计在国内发展不过几年的时间，还处于起步阶段，存在很多的局限性。目前业界最通用的就是Nielsen（尼尔森）可用性原则，包括系统状态可见性、系统与真实世界的关联性、预防错误等[1]。这些原则虽然简洁通用，但每个原则在软件、网站等不同载体上的适用性以及各原则的权重也不一样，往往只能对设计师起到方向性的指导，很难落实到具体的设计过程中。其他ISO等工效学原则也存在同样的通病。

与此同时，网站自身也很少形成具体可实施的、适合自己网站特色的设计规范，往往更多依赖于交互设计师和视觉设计师的感性设计，也就是依赖于设计师的审美能力、想象力、创造力以及设计经验，不够规范。交互设计倡导的就是“It depends”的精神，没有最完美的设计，只有最合适的设计。因此交互设计时，需要理性地从用户的使用习惯、喜好、期望等角度，结合之前的设计、研究结果，选择最适合网站自身特色的交互方式。如果没有设计规范或者相关的设计、研究结果，设计师往往需要不断地尝试、借鉴和摸索，花费大量的时间和人力，对网站进行设计或者改进。

另外，还有一个常见的现象是很多互联网公司的产品经理比交互设计师来得强势，没有规范[2]、没有充足依据的设计方案，很难说服产品经理采纳您所推荐的设计，因为这很可能会增加开发人员的工作量。而且没有规范的约束，网站设计的统一性和最优化也很难得到保障。总的来说，交互设计无章可循是困扰很多交互设计师、产品经理的问题，这也是目前交互设计亟待解决的问题（当然，现在很多网站已经通过数据分析、可用性测试、深度访谈等方法获取相关依据来改进网站设计）。

因此本书希望从一个新的角度，将网站整体分解为相对独立的元素或者模块进行分析。因为不管是前沿的研究结果，还是成熟的设计方案，都是以网站中具体某一元素为对象，而正是这些基础元素组成了一个完整的网站，这也就是最初对网站进行解构[3]的想法的来源。

针对每个元素或者模块，我们将结合国内外前沿的研究结论和知名网站较为成熟的设计方案的分析对比，从中找出交互设计中的一些理性规律，包括设计要点，不同设计方案之间的优缺点等。设计师可以更加理性地根据网站自身的特点和需求，选择最优的方式，也为说服产品经理等提供了有力的依据。

对于全新的网站设计，您可以跟着本书的思路，先从整体上确定网站布局和配色方案，然后将网站所需元素进行解构，仔细斟酌每一个细节的设计，然后再从整体的角度来检验每个细节是否符合全局的需要，而后进行局部的调整。

对于已有网站进行改进设计，你可以有针对性地对某些元素进行分析，找到最适合改进当前网站的交互方式。为了更有针对性地改进各元素或者模块的设计，最好通过可用性测试或专家评估等方法先从全局的角度发现问题所在。

[1]具体参见Nielsen《可用性工程》一书（已由机械工业出版社出版，书号：ISBN 978-7-111-14792-3）。

[2]软件业的设计规范相对成熟，如微软、SUN等公司均已形成相应的设计规范，在网站设计中也可以参考。

[3]解构主义（Deconstruction）最早是在20世纪60年代，由法国的雅克・德里达在美国约翰・霍普金斯大学人文研究中心组织的学术会议上的讲演中提出的。

1.2　网站解构的思路和纬度

一个网站往往包含了非常多的元素，我们先从整体着手，然后再细化解构到各细节元素。

1.2.1　整体界面布局及配色方案

从整体来看，网站最重要的就是信息架构、内容和视觉设计。信息架构[1]作为网站最核心的骨架，代表了产品内容的组织形式，表现为产品功能信息分类、分层的关系，在设计上主要体现为界面布局和导航，视觉体现为网站的配色方案。这些都将在下一章中详述。

[1]信息架构最好通过卡片分类法等进行统计分析，使其符合用户的心理模型。

1.2.2　主要功能区

网站功能区指的是除整体布局之外，组成页面的主要区域，通常按照其功能进行划分。它包括头部、页尾、导航区、搜索区、登录注册区、主要信息展示区、广告区等主要功能区。

·头部：又叫做网站的Header，包括Logo、Slogan、Banner等相关元素；

·页尾：又叫做网站的Tailer，包括公司信息、举报等信息；

·导航区：包括树状导航、面包屑导航等，广义的导航包括搜索区；

·搜索区：主要指的是网站的搜索框；

·登录注册区：指的是注册登录的区域；

·信息展示区：指的是网页的主要区域，用于呈现网站希望展现给用户的信息；

·广告区：用于放置广告的区域，分散于页面不同区域；

这些区块组成了一个网站最主要的部分。

1.2.3　页面元素

页面元素比功能区域更详细一些，包括表单、标签、链接、翻页、按钮、反馈、验证码等，常用于各功能区域之中。这些元素的细节设计是交互设计中非常重要的一部分。如表单可用于注册表单、购买表单等。通过优化表单，可提升用户注册率或者商品成交率等。

1.2.4　其他细节

除了这些元素之外，字体、网站文字的语气等细节也都对用户体验起着非常重要的作用。其中字体包括字型、字号、字体与背景的颜色对比等。

第2章　整体界面布局及配色方案

用户体验良好的网站，应该从用户第一眼看到网站的时候，就给用户留下良好的第一印象。从网站整体上来看，给用户留下第一印象的就是页面的布局、内容和视觉设计等。

在社会心理学中，有一个知名的效应称为首因效应，指的是第一印象的形成导致的在总体印象形成上最初获得的信息比后来获得的信息影响更大。因此我们应该利用首因效应，着重设计好给用户留下第一印象的整体布局、内容和视觉设计等，这些也是网站最核心的部分。

正如第1章中讲过的，内容优劣很大程度上取决于网站编辑的选取和审核，这里主要讲界面布局和配色方案。

界面布局指页面的结构分布，可以按照分栏方式等不同的维度进行划分。合理的布局，应该符合用户的浏览习惯，合理地引导用户的视线流；清晰有效的布局能够让用户对网站内容一目了然，快速了解内容的组织逻辑，大大提升网站的可阅读性和整体视觉效果。

配色方案包括网站的主色调、辅助色、背景色等，适当的配色方案能够引起用户的共鸣，从情感上提升用户体验。

2.1　界面布局

界面布局指的是网页的整体结构分布。清晰有效的布局将大大提升网站的可阅读性和整体视觉效果。不同类型的网站、不同类型的页面使用不同的布局，才能在页面内容和视觉美观间取得平衡。最简单的，我们按照分栏方式的不同，将网站布局划分为一栏式、两栏式和三栏式。

2.1.1　一栏式布局

一栏式布局的页面结构简单、视觉流清晰，便于用户快速定位，但由于页面的排版方式的限制，只适用于信息量小、目的比较集中或者相对比较独立的网站，因此常用于小型网站首页以及注册表单页面等。

1.一栏式首页

采用一栏式布局的首页优点在于信息展示集中、重点突出。通常都会通过大幅的精美图片或者动态Flash来实现强烈的视觉冲击力，给用户留下深刻的印象，提升品牌效应，留住用户进一步浏览。但是，这类首页的信息展现量相对有限，因此需要在首页中添加导航或者重要的入口链接等，起到入口和信息分流的作用。

常见的一栏式首页包括企业网站及小型商务网站的首页。如A＆F网站采用的就是一栏式布局，信息展示区通过有吸引力的图片，引起用户的共鸣和认同感，进一步提升品牌形象（见图2-1）。

图　2-1

图片的选择是最为关键的因素。如Dell公司网站，首页将最新最热门的推广活动以图片的形式展现出来，同时提供常用入口，起到了分流和推广两大作用（见图2-2）。

图　2-2

除此之外，还有一些目的单一的网站，如搜索引擎Google，首页也采用一栏式布局（见图2-3）。

图　2-3

2.其他页面

除首页外，一栏式布局还适用于目的性单一、较为独立的二级页面或者更深层次页面，如注册表单页面，用户只聚焦在表单填写上，因此除表单外只需提供返回首页及少数重要入口即可。

如Yahoo！的注册页面（见图2-4）。

图　2-4

由于其排版方式和信息量的局限性，采用一栏式布局的大型网站较少。

2.1.2　两栏式布局

两栏式的排版是最常见的布局方式之一，它中和了一栏式和三栏式布局的优缺点：相对一栏式布局，它可以容纳更多内容，相对三栏式布局来讲，信息不至于过度拥挤和零乱，但它不具备一栏式布局的视觉冲击力和三栏式的超大内容量的优点。根据电子商务管理咨询公司Groove Commerce对全球100家电子商务网站的统计数据（以国外的电子商务网站为主），采用两栏式布局的电子商务网站占到79%，可见两栏式布局的流行。

两栏式布局根据其所占面积比例的不同，将其分为左窄右宽、左宽右窄、左右均等这3种类型。虽然从表面上看只是比例或者位置的不同，但实际上它影响到的是用户浏览的视线流以及页面的整体重点。

1.左窄右宽式

这种形式的布局通常采用左边是导航（以树状导航或者一系列文字链接的形式出现），右边是内容的设置。此时左边不适宜放次要信息或者广告，否则会过度干扰用户浏览主要内容。用户的浏览习惯通常是从左到右、从上到下，因此这类布局的页面更符合理性的操作流程，能够引导用户通过导航查找内容，使操作更具有可控性，适用于内容丰富、导航分类清晰的网站（见图2-5）。

图　2-5

注：至于左右区域的具体比例可根据内容和导航的重要性以及信息量来权衡。

2.左宽右窄型

和前面一种方式相对应的，左宽右窄型的页面通常内容在左，导航在右。

这种结构明显突出了内容的主导地位，引导用户将视觉焦点放在内容上。在用户阅读内容的同时或者之后，才引导其去关注更多相关信息。如UCD China（ucdchina.com）博客就采用了这种方式，突出当前内容，视线流非常清晰合理（见图2-6）。

图　2-6

当然，这种方式的右侧也可以放置次要信息或者广告，体现出信息的主次。

3.左右均等型

左右均等指的是左右侧的比例相差较小，甚至完全一致。这种类型采用的较少，适用于两边信息的重要程度相对比较均等的情况，不体现出内容的主次。同时也存在一些论坛，左边为帖子列表，右边为内容。如猫扑网论坛（见图2-7）采用的就是类似这种形式，其优点在于浏览内容时不需要页面跳转或者弹出新窗口；但缺点在于浏览内容时，列表仍然占据过多页面，从而导致用户注意力分散，并需要更多拖动操作。

图　2-7

对比这3种方式，我们可以看到每种方式的内容重点和视线流的方向都是不一样的。左窄右宽型的导航位置相对突出，引导用户从左至右地浏览网站，即从导航寻找信息内容；而左宽右窄型的左侧往往放置信息内容，可以让用户聚焦在当前内容上，浏览完之后才会通过导航引导用户浏览更多相关内容；对于左右均等型，如果两侧放置的均为内容，那么用户的视线流主要从上到下，两侧间存在一定的交叉性，如果左侧或者右侧放置了导航，那么左、右侧的视线会出现很多的交叉性，从一定程度上增加了用户的视觉负担（见图2-8）。

图　2-8

2.1.3　三栏式布局

三栏式的布局方式对于内容的排版更加紧凑，可以更加充分地运用网站的空间，尽量多地显示出信息内容，增加信息的密集性，常见于信息量非常丰富的网站，如门户类网站首页。

但是内容量过多会造成页面上信息的拥挤，用户很难找到所需要的信息，增加了用户查找到所需要内容的时间，降低了用户对网站内容的可控性。

由于屏幕的限制，三栏式布局都相对类似，区别主要是比例上的差异。常见的包括中间宽、两边窄或者两栏宽、一栏窄等。第一种方式将主要内容放在中间栏，边上的两栏放置导航链接或者次要内容；第二种方式将两栏放置重要内容，另一栏放置次要内容。

1.中间宽、两边窄

很多门户网站采用中间宽、两边窄的方式，常见比例约为1：2：1。中间栏由于在视觉比例上相对显眼（相应地、字体也往往比旁边两栏更大），因此用户默认将中间栏的信息处理成重点信息，两边的信息自动处理为次要信息和广告等，因此这类布局往往引导用户将视线流聚焦于中间部分，部分流向两边，重点较为突出，但却容易导致页面的整体利用率降低（见图2-9）。

图　2-9

2.两栏宽、一栏窄

这种布局方式也较为常见，最常见的比例为2：2：1。较宽的两栏常被用来展现重点信息，较窄的一栏常用来展现辅助信息。因此相对于前一种布局方式，它能够展现更多重点内容，提高页面的利用率，但相对而言，重点不如第一种方式那么突出和集中（见图2-10）。

图　2-10

2.1.4　设计要点

1.选择合适的布局方式

在设计布局时，最重要的是根据信息量和页面类型等选择适合的分栏方式，并根据信息间的主次选择合适的比例，对重要信息赋予更多空间，体现出内容间的主次关系，引导用户的视线流。

针对门户类网站首页，由于其具有海量的信息，目前较多采用三栏式，同时需要根据信息的重要程度，选择适合的比例方案。

针对某个新闻等具体页面，新闻内容才是用户最为关注的内容，导航等只是辅助信息，因此适合采用一栏式或者新闻内容为主的两栏式布局。

如果用户需求较为个性化和多样化，以上几种布局方式都不能满足用户的需求，那么可以考虑采用个性化定制的布局方式。目前如iGoogle等已经实现了让用户自由拖动版块内容，定制个性化布局的功能，将页面布局的选择权和控制权交给了用户（见图2-11）。

图　2-11

2.通过明显的视觉区分，保持整个页面的通透性

有时候，网站版块间的设计缺少统一的规范，就很容易导致各版块间的比例不一致，从而在视觉上给用户一种凌乱的感觉，也容易打断用户较为连贯流畅的视觉流（见图2-12）。

保持整个页面的通透性，可以增加用户阅读的流畅性和舒适性，只需要统一各版块间的比例，同时通过线条、颜色等视觉元素增加各栏间的区分度，就可以轻松做到。如图2-13所示的网站的分栏设计（此图只是为了示意结构，故模糊其内容），就能增加用户浏览网站的舒适感。

图　2-12

图　2-13

3.按照用户的浏览习惯及使用顺序分布摆放内容

根据眼动结果，用户的注意力往往呈现“F”型，最经典的就是Google搜索结果“金三角”现象。因此在页面布局设计时，应尽量将重点内容放在左上角，右侧放置次要内容（见图2-14）。

图　2-14

4.统一规范，提升专业度

对于网站内的不同页面类型，应该选择适合的页面布局。对于同一类型或者同一层级的页面，应尽量使用相同的布局方式，避免分栏方式的不同、甚至是各栏比例上的细微变化，以保持网站的统一性和规范性，使网站显得更加专业。

2.2　网站整体配色方案

颜色对于眼睛的刺激往往比文字来得更加直观，更能抓住用户的注意力。很多研究也证明，不同的颜色会让用户产生不同的情绪。因此好的配色方案不仅能够给用户带来美的视觉享受，同时也能够引起用户的共鸣，加深用户对网站的印象，增加对网站品牌的认可度和辨识度[1]。

对于整体的配色方案来说，网站主色调[2]是最重要的一个元素。到底该选择哪种颜色，鲜艳还是朴素，活泼还是庄重，大众化还是个性化都是配色方案所涉及的。

网站的类型、品牌形象、整体定位、目标群体等多种因素都会影响到颜色的选择，而颜色本身也具有自己的特性以及含义，因此需要匹配颜色特性和网站特色来选择适合的主色调。

2.2.1　不同颜色会产生不同的主观感受

随着冷暖、纯度、明度、色相等的变化，颜色会给人带来不同的主观感受。如暖色调会给人带来温暖的感觉，同时具有扩张感，使暖色的元素从背景中跳出来；而冷色调则给人冷清、冷静的感觉，具有收缩的作用，因此容易隐入背景之中。纯度高的颜色饱和度高，较为艳丽，纯度低的则较为柔和。明度高的颜色会带来轻快的感觉，而明度低的颜色则显得比较庄重。取有对比的色相和明度则令人感到活泼，取类似、同一色系则令人感到稳健。色相数多则会显得华丽，色相少则会显得淡雅、清新。

每个颜色都有自己的含义，带给用户不同的主观感受。下面是几种常见的颜色。

红色被认为是最热情的颜色，代表了兴奋、激情、奔放和欢乐，容易让人联想到旗帜、激情、危险、火灾、血液、竞争、侵略、警报等，对人眼刺激较大，容易造成视觉疲劳，使用时需要慎重考虑。因此不要采用大面积的红色，它常用于Logo、导航等位置。

橙色是非常温暖的颜色，通常代表着激情、欢乐、健康等。阿里系基本都采用橙色作为主色调，独特、识别度高，成为公司的一个象征。但和红色类似，也容易造成视觉疲劳。

黄色通常给人轻快、明亮、乐观的印象，有扩张的视觉效果，因此采用黄色作为主色调的网站也往往呈现出活力和快乐。通常黄色还容易让人联想到黄金、缎带，因此也往往代表着高贵和富有。不同的黄色往往会带来不同的效果，因此在设计时需要注意细节的差别。

绿色具有黄色和蓝色两种成分的色，作为中性的颜色，绿色往往代表着平和、恬静、谦虚、智慧和生命力。也常用财经网站或者那些代表富饶、康复和生态学的网站。

蓝色的色感较冷，通常代表着冷静、沉思、智慧、自信和神秘，就如同天空和海洋一样，深不可测。同时，蓝色也是现代科技的象征色，如IBM等科技公司都采用蓝色作为公司网站主色调。紫色的明度较低，给人以高贵、优雅、浪漫和神秘的感觉，同时也表示公正和真相。但眼睛对紫色光的细微变化的分辨力很弱，容易引起疲劳。

黑色往往代表着严肃、恐怖、冷静。它本身是无光无色的，当作为背景色时，能够很好地衬托出其他颜色，尤其与白色对比时，对比非常分明，白底黑字或者黑底白字的可视度很高。

白色是全部可见光均匀混合而成的，称为全色光，通常代表着明亮、简单、干净、纯真与和平。白色很少单独使用，通常都与其他颜色混合，纯粹的白色背景对于内容的干扰最小。

灰色往往代表中性、稳重和智慧。它不容易产生视觉疲劳，但是也容易让人感到沉闷。当然也有漂亮的灰色会给人高雅、精致、含蓄的印象。

当然颜色的略微变化，也可以带来不一样的感觉。在红色中加入少量的黑，会使其风格变的沉稳，趋于厚重、朴实；加入少量的白，会使其风格变的温柔，趋于含蓄、羞涩、娇嫩。如果在橙色中黄的成分较多，其风格趋于甜美、亮丽、芳香；在橙色中混入小量的白，可使橙色的感觉趋于焦躁、无力。在绿色中黄的成分较多时，其风格就趋于活泼、友善，具有幼稚性；在绿色中加入少量的黑，其风格就趋于庄重、老练、成熟；在绿色中加入少量的白，其风格就趋于洁净、清爽、鲜嫩。

[1]即使在没有网站Logo的情况下，用户仍然能够识别网站。

[2]主色调指的是页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉面积（白色背景除外）。

2.2.2　网站特色

网站目标用户群体、网站类型以及网站的品牌形象等因素在很大程度上决定了网站的色调选择。

1.目标用户群体

网站目标用户群体的特点也是影响颜色选取的一个重要因素，不同用户群体对颜色的审美喜好以及理解都有所不同。

在设计时需要考虑当地的文化因素。不同文化背景的用户，对于颜色的理解不一致。例如红色在我国文化中象征着吉祥、喜庆，国旗等都采用了红色；但在墨西哥，红色花表示符咒，在其他一些西方国家，红色也往往象征着残暴、流血，应尽量避免使用。

此外，不同的性别、年龄、教育背景等都会影响人们对于色彩的理解和偏好。例如：针对儿童的网站应该体现出童趣，更加偏好丰富绚丽的色彩（见图2-15）。

图　2-15

针对女性的网站应该温暖、浪漫，一般偏爱粉色、紫色等（见图2-16）。

图　2-16

针对年轻人的网站应该更加轻快、活泼，年轻人比较能够接受色彩鲜艳或是较饱和的颜色。

针对老人的网站应该宁静，不应过于花哨，一般老人对于灰色系的接受度较高。

针对商务人士的网站应该庄重，有质感。

2.网站类型

不同类型的网站以及网站的定位都会影响到颜色的选取，当然网站类型也与目标用户群体息息相关。

门户类网站通常给人大众、专业、稳重的印象，因此主色调也往往在常用颜色中选取，适合大部分人的品位。如腾讯的浅蓝色、新浪网的黄色、Yahoo！的紫色和MSN的蓝色，在保持网站品牌形象和个性的同时，符合了大部分用户的审美。同时，由于门户网站主要以资讯内容为主，因此应尽量减少颜色等元素对于内容浏览的干扰。可以看到如图2-17所示的网站除了导航以及其他少数元素外，内容区都采用了较为低调的背景色。

图　2-17

相对门户网站而言，电子商务网站的颜色非常丰富绚丽，给人激情、热闹、舒适的印象。如淘宝的橙色系、百度有啊的红色系（搭配部分绿色、橙色）、eBay红蓝黄绿4色搭配，Amazon的蓝色系（搭配部分橙色），较多使用暖色调，刺激用户的浏览和购买（见图2-18）。

其中，eBay的主色调非常巧妙将Logo中的4种颜色搭配在一起，互相呼应，整个页面看上去非常清爽、和谐。

淘宝主页从Logo到导航、按钮等一致地沿用了橙色系的元素。但到具体的垂直类别时，对不同分类都进行了个性化的设计。对于娱乐、女人等目标用户主要为女性用户的类别，采用较为饱和的红色，带来温暖、热情的感觉；对于亲子类别，目标用户群体主要为孕妇，采用了较为柔和的粉红色；对于男人、运动和汽车等目标用户主要为男性的类别，都采用了冷色调，给人更加冷峻、沉稳的感觉（见图2-19）。

而SNS（社会性网络服务）网站，一般都给人轻松、互动的氛围。除此之外，需要结合目标群体的特征，选择合适的颜色。如QQ校友的用户群体相对年轻，因此使用绿色较为轻快，有活力的颜色（见图2-20）。而Linkedin的用户群体主要为商业客户，因此颜色相对稳重，职业化。

图　2-18

图　2-19

图　2-20

垂直类网站由于范围较窄，因此与其领域的特色紧密相关，体现出相关性和专业性。如金融类网站需要体现出正式、庄重，因此往往采用稳重的颜色。中国工商银行网站就采用了银色和红色体现出金融以及稳重的感觉（见图2-21）。

图　2-21

汽车类网站则通过颜色、图片等共同体现出质感、稳重、速度等，给人造成强烈的视觉冲击（见图2-22）。

图　2-22

政府网站相对都比较严肃、庄重，因此适合使用颜色较深的沉稳基调（见图2-23）。

图　2-23

企业网站可以根据其产品特性创造独有的风格（在下面的品牌形象中会进一步分析）。

3.品牌形象

每个公司由于其产品特色以及企业文化等的不同，都会形成自身独特的品牌形象。尤其对于知名网站/企业来讲，多年的品牌营销使品牌形象/品牌色深入人心，因此网站沿用品牌色将有助于提升网站/企业的整体形象。

最常见的一种方式就是增加网站主色调与Logo之间的关联，因为Logo的设计本身就体现了其定位及品牌形象。如前面提到的eBay，网站主色调采用了Logo的4种颜色的组合，增加了用户对于网站的认知度和识别度。

对于科技类网站，通常选择蓝色、黑色等象征现代和科技的颜色，如IBM的深蓝色已经深入人心，因此网站的主色调也应该围绕着蓝色，使其更加符合品牌形象（见图2-24）。

图　2-24

注：在网站Logo、导航等多种元素间使用统一的颜色，可提升品牌形象和品牌认知度，使网站更加和谐。

网站还需要搭配辅助色、点睛色、背景色，形成完整的配色方案。其中：

·辅色调。仅次于主色调的视觉面积的辅助色，用于烘托主色调，营造网站整体氛围。

·突出色。在小范围内用强烈的颜色对比来突出重点元素，使页面更加鲜明生动，主要用于占用范围较小的按钮、标签等。

·背景色。用作背景的颜色，协调、支配整体的作用。

每一个颜色对于网站都至关重要，合理搭配才能使网站颜色更加赏心悦目，重点突出，因此设计时都需要仔细斟酌。

同时网站的图片、文字、按钮等元素的颜色都需要互相搭配，达到网站的整体和谐，提升网站的整体氛围。

具体的配色方案是一门学问，很多专业的视觉设计的书籍中已经有详细的介绍，在这里就不多加叙述了。如果时间、精力允许的话，也可以邀请用户参与访谈或者测试，使网站配色更加符合用户期望。

第3章　主要功能区域

网站上每个元素都是为了满足了用户、网站或者赞助商不同角度的需求而存在的。按照各部分作用的不同，可将网站划分成以下功能区域，包括头部、页尾、导航区、搜索区、登录注册区、信息展示区、广告区等。

3.1　头部

网页头部，也称为Header，简称头部，指的是网站页面的顶部区域，通常包含网站的Logo、Slogan、Banner、导航条等元素，有时还提供常用功能的快速入口，如登录、帮助等。头部主要用于网站展示品牌形象，告诉用户目前在浏览哪个网站以及该网站主要提供什么内容。

3.1.1　头部类型

目前网站常采用的头部设计主要包括以下2种类型。

1.实用型头部

顾名思义，实用型的网站头部设计简洁、不花哨，能够在合理有限的空间内起到必要的作用，一般其只包含Logo、导航条和快速入口等重要元素。

大型网站由于页面空间有限，而且品牌的知名度使其不需要使用过多的元素去渲染网站的特色和气氛，因此往往采用这种类型的头部设计。从新浪和Yahoo！的头部设计中，我们可以看到它们基本没有多余的设计元素，非常简洁清晰，尤其是Yahoo！的设计更为简洁，Logo更为醒目（见图3-1）。

图　3-1

2.设计型头部

很多网站，尤其是个性化的网站，往往会利用头部的设计体现出网站的特色，常见于博客、小型特色网站以及部分企业网站首页（见图3-2）。设计型头部的优点在于有很大的发挥空间，如果设计效果好，就会造成很强的视觉冲击力，给用户留下很深的印象；其缺点在于往往占用过多空间，削减了网站内容的重要性，造成喧宾夺主的效果，也容易产生头重脚轻的感觉。这种头部设计样式非常多变，往往依赖于设计师来设计，因此在这里暂不多加叙述。

图　3-2

3.1.2　头部的元素设计

不管是哪种类型的头部，一般包括Logo、Slogan、导航条等元素。其中导航条在后面的导航区部分会专门讲到，因此这里主要指的是Logo和Slogan的设计。

1.Logo

Logo对于网站的重要性不言而喻，是头部设计中不可或缺的一个元素。Logo的基本作用之一是返回页面首页，使用户在网站迷路时，可以找到回去的路，增加用户在网站上的方向感和安全感。更重要的是Logo代表着网站的品牌和形象，尤其对知名的网站来讲，Logo能够唤起用户对网站的品牌认知度，从而提升用户的信任感。

Logo本身的设计非常重要，必需清晰易辨识，能体现出网站的定位和特色，具体的设计更多取决于设计者，在这不多加叙述。

对于不同类型的页面或者网站，Logo的呈现方式也不一样。如独立的Logo，适用于网站首页等（见图3-3）。

Logo+文字，适用于网站子类目（见图3-4）。

图　3-3

图　3-4

Logo+Logo，较为少见，适用于合并后的网站等情况（见图3-5）。

图　3-5

除此之外，很多网站在节日期间会设计应景的节日Logo体现气氛，提升用户对网站的体验，包括知名网站Google、百度、淘宝等（见图3-6）。

图　3-6

2.Slogan

Slogan虽然只是一句简单的标语，但能够很好地体现出网站的定位和特色，显示企业文化、塑造网站个性，配合Logo一起使用能够达到更好的效果。Slogan一般要求朗朗上口，而且点出网站的最大亮点。好的标语往往能让用户更好地记住网站的特色及其提供的主要服务。如：

·阿里巴巴。“全球领先的网上贸易市场和商人社区”。

·淘宝。“淘我喜欢！”

·太平洋汽车网。“精准报价、权威评测，汽车世界，由此精彩”。

除了Logo和Slogan以上两个主要元素之外，总体上来讲，同一级别或者同一类型页面的头部设计应该尽量保持一致。对比Yahoo！不同频道之间的头部设计，其总体上相对统一，包括Logo的格式、各个快速入口、搜索条等。但导航条、搜索区还是存在一定差异，如果能够统一设计，效果应该会更出色、更专业。

图　3-7

3.2　页尾设计

页尾，也称为Tailer，指的是页面底部部分，通常放置联系方式和版权信息等补充信息。由于其位置不够显著、重要性较低，因此也往往成为设计师容易忽略的地方。

3.2.1　需要规避的细节问题

1.页尾的信息过多过杂

由于页尾不太重要，因此应该尽量简化它，节约页面宝贵的空间。图3-8中页尾信息量非常丰富，但给人过多、过杂、喧宾夺主的印象，很多信息存在的必要性值得斟酌。

图　3-8

而对比以下页尾设计，它们看上去虽然简洁清晰，却已经包含所有必需的信息（见图3-9）。

图　3-9

2.不同页面的页尾不统一

有时候，由于网站的迅速扩张，页面数量迅速增加，如缺乏统一的规范约束，往往容易导致页尾等元素在同一类型页面中表现得不够统一。这虽然只是一个很小的细节，却容易让用户对网站的专业度产生怀疑，这是页面设计中需要注意的问题之一。

3.版权说明格式

一般网站都会在页尾进行版权说明，目前国际上标准的格式是：Copyright[日期（dates）]by[作者/所有者（author/owner）]，其中Copyright通常可以用©代替，但是不可以用（c）。All Rights Reserved在某些国家曾经是必需的，但是现在在大多数国家，都不是法律上必须有的字样。常见的版权说明格式如图3-10所示。

图　3-10

3.2.2　设计新趋势

为了更好地利用网站的空间，目前有些网站在页尾除了放置联系方式和版权信息外，也放置网站的辅助导航，使页尾发挥更大的引导作用（见图3-11）。

图　3-11

3.3　导航区

广义上，在页面上能够起到指示和引导作用的元素都可以称之为导航。它就像商场中的指示牌和城市旅游地图一样，能够告诉用户“我在哪里？”还有“我该怎么去想要去的地方？”，以引导用户更好地浏览网站内容（见图3-12）。

导航也是对网站信息架构的一种反映，体现了网站内容的分类和组织方式。没有导航的内容就像一盘散沙，用户不容易找到所需要的内容，却很容易在网站上“迷路”[1]，失去方向感，有时只能后退或者关闭页面才能退出，这会增加用户的挫折感。

图　3-12

网站页面上存在很多导航元素，引导用户浏览，包括主导航、辅助导航、网站地图、搜索区、Logo和快速入口等。Logo起着网站指明灯的作用，使用户始终可以通过单击Logo返回首页；搜索区也是导航中非常重要的一个辅助元素；快捷入口通常包括登录、注册、帮助、联系方式等常用信息，用户能够快速单击链接进入目标页面。这些元素虽然也都起着导航的作用，但本节主要讲的是全局导航、辅助导航这些更为明确的导航元素。

全局导航，指的是在网站每个页面上始终保持同一位置的导航元素，常见的包括Tab导航、树状导航、鱼眼导航等不同的导航类型。辅助导航包括主导航下的分类筛选、面包屑导航、推荐式导航、引导性导航等，虽然其位置没有全局导航那么显眼，但却在用户浏览过程中起着不可替代的作用。网站地图指明了一个网站结构，集合了所有链接通道，能够让用户和网络蜘蛛更加清晰地了解网站的大致结构，也起到了对搜索引擎优化的目的。

以下是常见的几种导航类型。

3.3.1　Tab导航

目前国内大部分网站，包括门户网站、电子商务网站等都采用横向导航条，显示了网站的主要栏目。横向导航的缺点在于页面横向空间有限，因此为了保证各栏目间能够区分开，往往会使网站分类栏目的数量受到限制；还有当导航需要显示二级栏目时，简单的横向导航也很难满足需求。

当分类栏目过多的时候，横向空间放不下过多的栏目，因此演变出了门户类网站常用的多行导航栏[2]（见图3-13）。

图　3-13

当导航中需要显示二级栏目时，简单的横向导航已经不能体现出网站的结构，Tab导航也就应运而生了。通过切换Tab页就能够呈现出该标签页对应的二级栏目。

Amazon（亚马逊）向来被认为是Tab导航的鼻祖，Luke Wroblewski在《The History of Amazons Tab Navigation》一文中，精辟地分析了Amazon导航的变迁[3]。让我们跟着Luke对Amazon网站风格变迁的记录，来分析标签导航设计的重点。

1998年，Amazon网站通过Tab设计，优化了最初简单的横向导航条，在主导航中开始出现了能够呈现二级栏目的Tab导航。此时，Tab数量较少，页面上有足够的空间来放置各Tab页，整体结构还算清晰简洁（见图3-14）。

图　3-14

从图3-14中可以看出一些值得借鉴的细节设计要点：

·突出当前被选中的Tab页，用户可以快速确定目前所处的位置。

·一级标签页与对应的二级栏目之间使用相同的颜色，体现其相关性。

·使用不同颜色区分不同的一级栏目，增加区分度。

·通过适当的距离体现出各栏目间的分隔，增加可辨识度。

1999～2000年，Tab的数量迅速增长，横向的页面空间已经放不下所有Tab，甚至没有空间放置Logo，最终只能叠加成两行。这样不仅在视觉上显得比较拥挤，字体变小后可识别度也会降低，而且两行的标签切换等操作也非常不方便。这种双行的Tab设计并不值得提倡（见图3-15）。

图　3-15

2000～2001年，Amazon尝试了去掉所有Tab、减少Tab、采用下拉菜单等不同方式后，最终还是回到了单行Tab的导航设计。与前面的设计相比，此时提出了“我的店铺”（Personal Store）的个性化服务概念，同时对商店种类按照重要性或者用户的关注程度进行了划分，将其他类型的商店全部归入“更多的商店”类型中，提供了“See More Stores”的入口链接（见图3-16）。

图　3-16

2003～2004年，Amazon在优化后的单行Tab导航的基础上，使Tab项可以基于公司的促销活动以及用户的行为而变化，变得更加灵活和个性化，除此之外，还使用了图片Tab和更加绚丽的背景颜色。但导航的变化容易让人产生疑惑，绚丽的视觉效果反而没有之前的稳重，而且被选中的Tab与其他Tab的区别反而不如之前明显（见图3-17）。

图　3-17

为了解决Tab变化等带来的问题，Amazon开始试验一种可替代的方案，即单行动态Tab式导航。2004年之后，Amazon继续简化Tab导航，只留下主页、当前选中分类和所有分类的入口3个Tab页，使导航更加简洁清晰（见图3-18）。

图　3-18

Amazon不断尝试新的Tab导航方式，从中也给了我们很多启发：

·突出当前Tab页，并且对一级分类与对应的二级分类使用相同的颜色，体现其相关性。

·各分类间保持适当的距离，体现出各栏目间的分隔，增加可辨识度。

·使用不同颜色区分不同的Tab，增加辨识度，至少区分开当前选中分类和未选中分类。

·不要在导航上放置过多的Tab，更不要使用两行以上的Tab作为导航。Tab过于拥挤会影响用户定位和辨识。

·增加“My Store（我的店铺）”等个性化功能，并且分析用户的行为轨迹，使内容更加符合用户需求。

·通过“See More Stores”链接，隐藏重要性略低的分类，避免导航条过于臃肿。

·标签色彩的使用要符合网站定位，不要过于夸张。

更多Tab设计的要点，请参见第4.2节。

[1]迷路是指用户在游览信息网络时，不知道自己身处何处，如何达到目的地，或者在游览时因多次跳转而偏离目标主题。

[2]需要注意的是，导航栏行数过多的话会增加用户识别的认知负担，因此最好对所有类别再进行归纳分类。

[3]下面的截图全部来自Luke的文章。

3.3.2　树状导航

树状导航是纵向导航中的一种，因其形状像树的分支结构而得名。最典型的树状导航就是Windows资源管理器中的树状视图（见图3-19）。

相对横向导航来讲，树状导航项数量较少受到空间的约束，可以放置更多分类，适用于分类较多的大型网站。Amazon在最新的设计中采用了改良后的树状导航，不仅解决了栏目数量的问题，而且能够很方便地呈现出二级分类，弥补了横向导航的部分缺点，因此目前国外较多网站已经采用了这种导航方式（见图3-20）。

图　3-19

在设计树状导航时，需要注意以下两点。

1.排序规律

它的纵向导航的分类往往较多，因此需要将分类按照一定的规律进行排序，比如按照重要程度或者字母的顺序，便于用户快速定位。

Yahoo！还通过在每个分类前增加特色图标，增加了其辨识度（见图3-21）。

图　3-20

图　3-21

2.导航位置

目前大部分网站将其放在页面左侧，也有部分网站将其放在页面右侧。到底放在哪边比较适合是一个问题。

按照用户从左往右的浏览习惯，如果你希望用户从导航入手，找到所需要的内容，那么导航应该放在左边。大部分网站，尤其是大型网站都希望用户通过导航查找内容，因此这时放在左边较为合适。

反之，如果希望用户将注意力集中在当前内容上，之后再通过导航去浏览其他内容，那么导航应该放在右侧，甚至内容下方。很多博客目前都采用了右侧导航的方式，希望用户更多地关注在当前内容上（见图3-22）。

图　3-22

《Web的导航设计》一书中也提到奥迪，2002年对其网站（www.audi.com和www.audi.de）改版时，对导航的左侧版本和右侧版本进行了对比。结果显示，用户完成任务所需要的时间并没有显著的差异，甚至有些任务中右侧导航要比左侧导航表现更好。另外他们研究了参与者在屏幕上的注意力焦点，结果发现，用右侧导航时用户往往会多看有内容的一侧。

这也证实了前面的推测，在选择导航位置时，还是需要根据网站的类型，以及用户的浏览习惯等来确定。

3.3.3　鱼眼导航

鱼眼导航是HCIL（人机交互实验室，UMIACS的下属实验室之一）的研究成果，因其形状类似鱼眼而得名，对于目标区域的选项会有像放大镜一样的效果（见图3-23）。

图　3-23

鱼眼菜单适用于类目较多的导航，可以起到缩小目标区域、快速定位的作用。它通常可以有很酷的效果，具有强烈视觉冲击力，但导航中很少会出现这么多类目，如果生搬硬套的话，很容易成为华而不实的设计。

目前网站采用鱼眼导航的网站很少，但其在操作系统和软件中有些变化的应用，常见于Mac风格的设计（见图3-24）。

图　3-24

3.3.4　面包屑导航

面包屑导航来源于一个格林童话，Hansel知道后母要将他和Gretel带到森林的深处后丢弃，于是在去森林的路上将面包捏碎撒下，用面包屑作为回家的线索。网站上的面包屑导航与此类似，虽然不显眼，但却可以给用户提供返回首页以及各级页面的快捷入口，非常方便和实用。

面包屑导航通常出现在主导航和内容区之间，作为网站的辅助导航，它的一般结构如下：首页→一级分类→二级分类→当前页面，如果有更深层的页面就继续增加三级分类、四级分类，依此类推（见图3-25）。

图　3-25

1.面包屑导航的作用

·让用户了解目前所处的位置，以及当前页面在整个网站中的位置。

·体现了网站的架构层级，能够帮助用户快速学习和了解网站内容的组织方式，从而形成很好的位置感。

·提供了返回各层级页面的快捷入口，方便用户操作，减少操作步骤。

·Google已将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个级别的名称，多使用关键字，都可以优化SEO（搜索引擎优化）。

总的来说，面包屑导航作为网站的辅助导航，占用面积小，却起着不可忽视的作用，可以称作“性价比很高”的导航元素。

2.面包屑导航的适用条件

虽然目前很多网站都流行使用面包屑导航，但并不是所有网站都适用。符合以下2个条件的网站才适合使用面包屑导航。

（1）层级较深的网站

面包屑导航适用于层级较深的网站，如果只有一级分类的话，通过主导航就已经能够起到快速定位的作用，如豆瓣等扁平型架构的网站就没有使用面包屑导航的必要（见图3-26）。

图　3-26

（2）独立不交叉的网站结构

由于面包屑导航路径是线性结构的，即下一级分类必定只属于上一级分类，因此网站内容必须划分得非常清晰，且不存在交叉。否则，面包屑导航的路径是不唯一的，同一个分类可能出现在不同的路径中，让用户感到困惑。

目前常见的该结构网站包括门户类、电子商务类等层级较深，且内容的组织分类逻辑性强，独立不交叉的网站。

3.设计要点

·用＞、＞＞和--等符号分隔开各级别的文本，增加可识别度，便于用户定位。

·除当前页面外，其他各级别的文字链接都可单击进入相应页面，作为快速入口，同时还可能增加用户的浏览量，减少跳出率。

·各级别的文字颜色也需要进行区分，通常蓝色代表可单击的链接；当前页面不可单击，可选择黑色、灰色等颜色，以示区别（见图3-27）。

图　3-27

·面包屑导航作为辅助导航，不宜占用过多面积，避免与主导航争夺用户的注意力。

·面包屑导航的文字中尽量使用关键词，包括将“首页”改为网站名称，进行搜索引擎优化。

4.新趋势

Geoff Teehan在《The Tabbed Breadcrumb Navigation》中介绍了一种结合Tab导航的面包屑导航，使其能够呈现出二级甚至更深层次的结构，开始以网站主导航形式呈现，而不再是辅助导航（见图3-28）。

图　3-28

在操作系统中，Vista采用了类似的方式（见图3-29）。

图　3-29

Yahoo！曾在具体频道中使用过这类导航，它结合了Tab导航和面包屑导航的优点，既能够体现出网站的层次和结构，也能够通过各级别的入口进行快速跳跃（见图3-30）。

图　3-30

3.3.5　网站地图

网站地图（Site Map）通过对网站内容进行组织归类，以一个扁平的页面呈现出网站的主要框架，一般包含主导航下的一级和二级菜单。它能够让用户快速了解网站的内容与结构全局，同时也是对搜索引擎友好的表现，易于搜索引擎优化（见图3-31）。

图　3-31

豆瓣将简化的网站地图放置在页面底部，而不是用专门的网站地图页来呈现网站结构，能够在用户需要时随时提供引导的作用，却又不过分占据页面有效空间（见图3-32）。

图　3-32

网站地图的设计应该重视以下几点：

·分组归类。体现出菜单间的层级关系，而不是简单地堆砌和罗列，使网站结构更加清晰，有助于用户的理解和学习。

·呈现的层级不宜过多，也不宜过少。一般呈现到主导航下的二级菜单，过多的层级会使网站地图过于复杂，而过少的层级起不到应该有的作用，没有存在的必要。

·采用文本链接方式。搜索引擎蜘蛛爬过的时候，一般优先抓取文本方式的内容，因此采用文本链接作为网站导航的主要方式，有利于搜索引擎优化，提高网站内容被搜索到的几率。

除了以上讲到的几种导航之外，还有推荐式导航、引导型导航等。

3.3.6　推荐式导航

随着网站对用户行为分析的深入，推荐式导航也越来越成为一种流行趋势，尤其针对SNS网站。它能够根据你的浏览习惯和喜好，推荐你可能感兴趣的内容给你，这种推送式的服务更加人性化和个性化（见图3-33）。

图　3-33

3.3.7　引导性导航

引导性导航适用于流程型任务，通过“Step by Step”的引导，帮助用户完成任务。如表单的填写等（见图3-34）。

图　3-34

3.3.8　知名网站导航设计

对于用户来讲，他/她只关心如何到达目标页面，找到所需要的内容，而导航是到达目标页面的一种辅助手段。在浏览内容时，用户并不特别关注导航，只有在需要了解当前身处何处、找不到所需要的内容时，才会开始寻找导航。

导航可以说是一个完整的系统，除了每个导航元素本身设计到位之外，还需要各个导航元素的完美配合，才能使用户能够更加轻松地到达目标页面。在设计时，需要提供2种指示牌，一种是始终存在的导航元素，用户随时可以找到，如全局导航，始终保持在同一位置，用户寻找不需要成本。另一种是根据用户的使用场景，仅在用户需要时才呈现所需要的指示牌，如推荐式导航，在用户浏览完当前目标后，提供下一步浏览的引导和建议。

导航的选择与网站类型紧密相关，下面分别对比门户网站、电子商务以及SNS网站的导航设计。

1.门户网站类

国内门户网站基本采用了顶部的横向导航条作为网站的全局导航（见图3-35）。

图　3-35

从以上3个导航设计中可以看出，国内门户网站的导航设计差异较小。基本采用了多行横向导航。但也存在细节的差异：新浪对每个板块都进行分类组合，并通过加粗的方式区分不同的层级，而红色字体则凸现网站重点推广或者热门的频道。但缺点在于类目众多，分类标准不一致，查找较为费时费力。搜狐通过色块与网站主体内容进行区分，通过红色字体突出热门频道，但项目繁多，没有经过分类。腾讯的分类相对简洁清晰，与前面2个网站较大的差异在于更加突出搜索的地位。Yahoo！英文网站作为国外门户网站的代表，采用了纵向的树状导航，减少了分类项数量对于空间的限制，可以自由添加分类项（见图3-36）。

图　3-36

2.电子商务类

淘宝首页在全局导航部分突出其搜索功能，并通过经典的橙黄色作为色块，突出其横向导航，加上在首页采用的分类列表，给用户更多的引导，同时满足了目的明确型用户及浏览型用户的需求，使首页起到了最重要的分流作用（见图3-37）。

图　3-37

Amazon和Yahoo！采用了类似的树状导航方式，相对更为简洁，从而可以节约更多页面空间，使首页不仅仅是分流入口，同时也是产品展示的信息区域（见图3-38）。

3.SNS网站

目前SNS（社会性网络服务）网站都采用了比较类似的导航设计：横向导航和纵向导航结合的拐角式布局方式。将少量个人相关信息等通过横向导航展现，同时由于数量的限制，将所有应用单独使用纵向列表，便于用户的操作（见图3-39）。

图　3-38

图　3-39

除了选择适合自己网站的导航方式外，还应该规避一些华而不实的导航设计。不少网站喜欢使用图片或Flash作为网站导航，虽然提升了视觉效果，却影响到网站的SEO，而且有些用户会因为网速等限制无法打开图片或者Flash的导航条，从而失去了导航条的意义。最佳的方式是采用文本链接方式。

3.4　搜索区

在这个信息爆炸的时代，搜索功能已经变得越来越重要，搜索已经作为网站导航不可缺少的一部分。Jakob Nielsen在《Search：Visible and Simple》一文中分析了用户使用搜索的两种情况：一种是用户本身目的性比较明确，当然此类用户也有使用搜索的习惯；第二种是导航不够明确，导致用户迷路的时候，就可能会转向搜索功能。因此应该尽量在每个页面都放置搜索框，至少作为导航的一种辅助功能。

3.4.1　搜索的分类

根据网站类型以及作用重要性等，搜索区可分为以下几类：搜索引擎网站的搜索区、网站的全局搜索以及网站子类别中的局部搜索。根据类别的不同，在设计上也略有区别。

1.搜索引擎网站的搜索区

对于搜索引擎网站，搜索区就是网站的核心区域，因此都放在网站最为醒目的位置。最典型的如Google首页的设计就是以搜索框为主（见图3-40）。

图　3-40

2.网站内的全局搜索

网站内的全局搜索一般放在网站导航区[1]内，属于广义导航中的一部分。目前主流有2种不同的设计方式。

一种是将搜索弱化，仅作为导航的辅助手段，以防用户“迷路”，或者用户目标比较明确时需要直接使用搜索。适用于浏览型网站，或者不鼓励用户搜索的情况下（见图3-41）。

图　3-41

另一种是突出搜索区，将搜索作为与主导航并列的一种导航方式，甚至比主导航还明显，已经接近搜索引擎类网站。如淘宝网搜索框的设计（见图3-42）。

图　3-42

注：根据Fast Search研究的数据，30%的购物者进入电子商务网站后会立刻使用搜索框，超过30%的人通过导航没有找到需要的物品后转而使用搜索框。而这种用户的购物意图明确，购买的可能性也高于其他用户，因此淘宝采用了这种设计方式也是非常合理的。

3.站内局部搜索

站内的全局搜索相对覆盖面很广。局部搜索指的是某些网站内部的搜索只针对网站局部，由于缩小了搜索的范围，因此结果也往往更加精确，符合用户期望。目前使用这种局部搜索的网站如豆瓣、淘宝等。

豆瓣在不同分类下均提供相应的局部搜索。试想一下，当用户在浏览小组相关的内容时，较少去搜索书籍、电影和音乐，因此在小组页面提供“小组搜索”更符合用户的使用流程（见图3-43）。

同样的，对于淘宝的店铺来讲，每家店铺都是一个相对独立的子站点。用户在店铺内浏览时，就相当于在浏览一个相对独立的站点，因此有必要在店铺内设置局部搜索，让用户在更精确的范围内进行搜索（见图3-44）。

图　3-43

图　3-44

[1]搜索区也常常被认为是导航的一部分。

3.4.2　设计要点

搜索区主要包括搜索框、搜索按钮等与搜索相关的元素，在设计时需要全面考虑。

1.输入框长度

用户搜索时经常两个或者两个以上的关键词组合，因此搜索框不能过短。否则用户无法看到所有输入的内容，不够直观，而且操作起来不够舒畅。

我们来看一下目前几家知名搜索引擎网站的搜索输入框长度，分别是百度：365px（约46个字符）、Google：448px（约可输入56个字符）、Yahoo！：490px（约70个字符）以及MSN：418px（但包含了搜索按钮的位置，约50个字符）。总的来说，输入框都足够输入20个以上的文字，基本满足用户需求[1]。

值得一提的是Google在进入具体搜索结果页时，搜索框长度会根据搜索词条的长短自动调整。当输入词条较长时，输入框的显示将更加直观（见图3-45）。

图　3-45

2.类别的切换方式

对比几家网站的切换方式，百度、淘宝、Yahoo！和MSN等网站以及Google的搜索结果页中都可以直接通过搜索框上的Tab进行切换，操作较为方便。但在Google首页，单击类别后，直接弹出新窗口，切断了类别与搜索框之间的关系（见图3-46）。

图　3-46

3.区分当前选中与未选中的类别

需要明确区分当前选中与未选中的类别，便于用户快速识别当前类别，增加用户的位置感。Google通过颜色对比及链接下划线的差异，突出当前选中项，同时通过搜索框前的标签、按钮中的文字以及搜索框下的提示信息，多渠道明确地提示用户当前所在位置。相比而言，Yahoo！的设计不够明显，当前选中和未选中的类别在文字颜色上仅略有差异，虽然通过按钮文字进行补充，但略嫌不足（见图3-47）。

图　3-47

4.搜索的人性化

网站搜索的功能越来越强大和人性化，比如拼音识别、对错误的输入文字进行提示和纠错、提供搜索建议等，给用户操作带来很多便利。

如淘宝的搜索框可以识别拼音输入，同时根据网站用户的浏览行为习惯的数据统计结果，提供最相关的搜索建议以及实用参数，减少用户操作步骤，提升用户搜索的体验（见图3-48）。

图　3-48

Google在用户输入错误的情况下，通过“您是不是要找：****”的提示细节，给用户提供备选方案的快速入口，一键即可完成纠错（见图3-49）。

图　3-49

5.按钮文字

搜索按钮的设计也是影响搜索体验的因素之一，按钮设计部分具体参见4.5节。这里主要讲的是按钮文字，不同网站之间使用的按钮文字都略有不同，目前常用的包括“搜索”、“站内搜索”、“Web搜索”、“找一下”、“Search”和“Go”等，有的甚至使用小图标代替。目前暂时还没有研究表明哪种表述方式最能促进用户点击，但通常情况下简短的动词优于名词或者过长的文字，同时在同一网站内应该尽量保持按钮文字的统一。

6.搜索框中的提示文字

有些网站在搜索框中使用灰度显示的提示文字，提醒用户应该输入的内容。但要注意的是，当用户鼠标选中输入框时，文字应该自动消失，否则就需要选中文字并删除，给用户带来不便和沮丧。

7.鼠标定位

如果网站的搜索框非常重要，而且您希望引导用户使用搜索框，那么在打开网页时，应默认将鼠标自动定位在搜索框内，便于用户输入，减少定位时间。

但如果您希望引导用户浏览网站内容，那么就不需要将鼠标自动定位在搜索框。否则用户无法使用键盘中向下滚动页面的按钮进行翻页，给操作带来不便。

8.搜索框与背景色的对比

为了增加搜索框的识别度，它的颜色应该与背景色形成一定对比。切忌如图3-50所示：搜索框的颜色与背景色一致，用户很容易忽视搜索区的存在。

图　3-50

对于搜索引擎以及电子商务等网站来讲（除局部搜索外），搜索区非常重要，因此需要放置在相对显著的位置，并尽量满足以上几个设计要点。

对于重要性略低的全局搜索功能来讲，以上的几点设计要点都基本适用，但搜索框的大小、位置以及部分高级功能都可根据网站具体情况进行简化。

对于站内局部搜索功能的设计，由于其适用范围和重要性相对较低，因此简单实用即可。但必须注意的是这类搜索框应该和站内的全局搜索进行区分，避免用户混淆。

[1]国外几大网站的输入框都在400px以上，而国内的百度的较短。其中一个原因可能是因为相同的内容，中文占用字符相对较少，46个字符只能输入约4～8个单词，却可以输入23个中文字符。

3.5　登录注册区

登录针对的是网站已注册却尚未登录的用户，注册针对的是未注册用户。而一般网站访问人员同时包括以上2类用户，而且登录和注册往往紧密相关，因此在网站设计中也往往将其捆绑在一起，所以将其统称为登录注册区。

对于已注册用户和未注册用户，一般的登录注册流程如图3-51所示。

图　3-51

登录注册区一般都包含用户名、密码、验证码、注册表单、登录注册按钮（或者链接）、“忘记密码”链接（或按钮）等元素。不同网站对于登录注册区的位置、各细节元素、提示信息、操作反馈等设计都略有不同，但也许只是细节的差距，却往往导致最终用户体验的巨大差异。

从总体上来看，登录注册框的设计与网站的类型有很大的关系。对于互动性较弱的网站类型来讲，如门户类网站（博客、论坛等部分除外），不登录网站并不影响用户对网站的正常浏览。因此此类网站对于登录注册区的设计相对弱化，一般都处于页面顶部，位置并不非常显眼，而且设计也都非常简单，Yahoo！甚至连用户名、密码都不展现在首页，仅提供了Sign in的入口。

新浪顶部的登录注册入口如图3-52所示。

图　3-52

Yahoo！的Sign In/Sign Up入口如图3-53所示。

图　3-53

此类登录注册区的设计就相对简单，首页提供登录注册的快速入口即可。用户往往只有在不得不登录的时候才会登录，因此需要分析用户的浏览行为，在适当的地方及时地提供登录的入口。比如用户需要发表评论，进行互动时，适时地提供登录名和密码的入口，或者提供匿名评论的功能，都将是非常贴心的设计（见图3-54）。

图　3-54

对于互动性较强的网站来讲，尤其是论坛、Web 2.0网站等，用户登录是非常重要的操作。未登录之前，用户常被称为“游客”，是没有个体身份的象征。只有在登录之后，有了用户ID，也就有了用户独特个体的象征，增加了用户对网站的情感依赖，同时登录用户往往能够享受到更多的权利和更为个性化的服务，能够参与更深层次的互动，因此登录用户对网站的黏度也往往会增加用户对于网站的黏度。从网站运营的角度来讲，用户注册量以及注册会员的登录量也是这些网站考核的KPI（关键业绩指标）之一。因此这种类型的网站往往会突出登录和注册的重要性，在设计上也常花费更多心思、占用更多页面空间。

我们看一下国内外2个知名Web 2.0网站的首页设计，在用户第一次登录的时候，都将注册和登录放在页面最显眼的位置，而且通过对网站的生动介绍，“煽动”用户进行注册。

豆瓣的登录注册区如图3-55所示。

图　3-55

Linkedin的登录注册区如图3-56所示。

图　3-56

对于这类需要突出登录注册的网站来讲，注意以下几个细节可以帮你提升网站的使用体验和注册登录量。

3.5.1　告诉用户注册的好处

不是必要的情况下，用户往往会避免注册，因为填写注册表单会给用户带来额外的负担。但是通过简短清晰地介绍注册的好处，可以促进用户注册的欲望。豆瓣就是一个很好的范例（见图3-57）。

图　3-57

3.5.2　用邮箱取代用户名，作为登录网站的唯一身份识别

很多网站注册时都需要申请唯一的用户名，作为登录网站的身份识别，但现在很多知名网站用户量超过一定数量后，很难注册到尚未被注册过的用户名，多次尝试，网站却一直提示“该用户名已被注册”，导致用户在注册过程的沮丧感产生。经常多次失败的尝试之后，终于“该用户名可用”，但往往导致用户在不同网站之间的用户名不一致，下次登录时可能把不同网站的用户名搞混。

E-mail直接作为登录的身份辨识的好处在于，用户的E-mail本身已经是唯一的，因此可以直接作为身份识别之用，而且每次注册时候，本身就需要输入E-mail，因此不会增加用户的负担，又可以规避上面提到的问题。像豆瓣、Linkedin以及校内和开心网等都已经直接使用E-mail作为用户名登录，不需要再重新申请唯一的用户名。

但需要注意的一个细节是，使用E-mail登录的网站最好在输入框前直接提示“Email”，用户不需要思考就知道应该填写什么内容，但如果输入框标签为“账号”、“用户名”时，含义不够明确，用户还需要回忆和尝试到底输入的是用户名还是E-mail。就像人人网的账号可能带来歧义，而开心网直接使用“Email”则非常清晰（见图3-58）。

图　3-58

3.5.3　不要忘记“记住登录状态”和“忘记密码”等细节

对于有些使用个人电脑的用户，登录网站时希望能够保存cookies，下次不需要再次输入用户名密码，就可以自动登录。

而忘记密码也是用户可能碰到的问题之一，上面的登录注册流程图中也已经提到，如果缺失这个功能，将导致用户无法完成任务，因此在设计时不要漏了这些细节。

3.5.4　不必要的情况下尽量不要使用验证码

验证码虽然是个很小的细节，但是每次登录都需要输入验证码，就等于迫使用户进行更多操作，尤其在很多情况下图片上的文字不容易识别，或者还要区分大小写输入等，可能会引发用户的负面情绪。

验证码一般需要人眼识别，可避免“机器人”的批量注册、批量操作对于网站的影响。从它的作用来看，是防止自动的批量操作，因此只有在用户多次尝试登录失败，或者频繁操作时，才出现验证码框，要求用户输入验证码，才是比较人性化的设计。具体验证码的设计见4.7节。

3.5.5　注册表单的优化

注册表单的设计会在很大程度上影响到用户的注册成功率和注册时的体验。因此在设计注册表单时，内容不宜过多过长，而且最好对内容进行组织和归类，使内容更加有条理。在填写过程中，及时给用户提供提示说明，辅助用户完成注册。在注册完成后提供及时的反馈，让用户知道注册成功与否。具体表单的设计参见4.1节。

3.5.6　友好的提示信息

在用户登录的过程中，如果操作过程中出现错误，网站应该提供明确友好的提示信息，告诉用户目前存在的问题点，帮助用户快速定位并解决问题。这些在4.6节中有具体分析（见图3-59）。

图　3-59

3.5.7　设计醒目的登录、注册按钮

登录、注册按钮通过醒目合理的设计可以增加用户对该按钮的点击率。相应的，也就增加了网站的注册率和登录率。具体的按钮设计参见4.5节。

3.6　信息内容展示区

网站无时无刻不在进行信息的展示，但是如何在适当的时间展示适当的信息及如何在有限的空间里尽可能有效地展现出你需要的信息是我们希望在这里探讨的问题。

在用户浏览网站的不同阶段，分别需要不同的信息。因此根据用户的浏览阶段，针对性地展现相关信息，能够使内容更符合用户的浏览习惯和需求。通常可以简单地将其分为海选阶段→对比阶段→决策阶段。海选阶段用户面临的信息量很大（通常对应的是网站首页），用户需要进行初步的筛选；当用户选定某一主题或者某一类别时，就会对初步筛选后的内容进行浏览或者对比，从而选择其中感兴趣的部分进行点击查看，从而进入到具体页面。当然也有部分情况用户跳过对比阶段，在首页就直接点击查看感兴趣的内容，进入具体页面或者直接离开网站（见图3-60）。

图　3-60

首页、列表页和具体页这3种类型在用户的不同浏览阶段，起着不同的作用，因此也适合采用不同类型的展示方式。我们分别来看一下这些类型页面的信息展示方式。

3.6.1　首页

首页（Homepage）类似于商场的橱窗展示或者产品全貌图，一般起到信息展示和分流的作用，是用户对信息进行海选的第一步，也是整个网站中最重要的页面之一。能不能留住用户进一步浏览，往往取决于首页的设计。因此首页设计也需要更花心思，包括从内容的选择、内容的数量和呈现方式等方面都需要仔细斟酌。通俗地讲，就是需要网站按照信息的重要程度，以吸引目标用户、符合目标用户浏览习惯的方式，清晰地呈现给用户。

1.内容选择方面

首页往往体现出网站所有内容的浓缩，目前常用的方式包括通过导航或者站点地图等方式呈现网站的概貌图，或者将所有类别的内容精心筛选后全部呈现在首页。后者这种方式无疑导致了网站海量的内容与首页有限的篇幅之间的矛盾，因此必须权衡网站、用户、广告商等多方的利益，展示出网站推广的、用户最为关心的以及广告商希望宣传和推广的内容，避免广告等争夺用户过多的注意力，以吸引用户进一步深入浏览。具体筛选的原则和细节根据网站的特点都略有不同，主要都是选取最新的、最热门的[1]，剩下的部分很大程度上还依赖于网站编辑的经验，这里就不多加叙述了（见图3-61）。

图　3-61

2.内容的呈现方式

选择了合适的内容，还需要以正确的方式呈现出来。

总体上来讲，首页通常有2种不同的表现方式。一种是简洁型的，首页只提供入口，起到分流的作用，引导用户进入更深层次的页面，常见于Web 2.0网站以及国外门户网站等，这种方式的网站用户黏度相对较高。

淘宝首页也采用分类列表（类似站点地图）的方式（见图3-62）。

图　3-62

另外一种首页内容非常丰富，几乎包含网站所有类别的内容，算是对每一类别的内容进行提取和精简。常见于国内的门户网站等。采用这种方式的首页页面长度往往较长，用户的浏览也常常停留在首页，或者点击首页具体某个链接，因此用户点击后往往直接进入具体页面，看完之后可能就直接离开网站，这也会导致用户浏览度不深、黏度较低等问题（见图3-63）。

图　3-63

网站内容常用的呈现方式包括文字链接列表、图文结合、纯图片滚动等，同时结合标题的字体、颜色等方式，体现出内容的层次感，引导用户的视觉流。从吸引用户注意力的角度来看，有冲击力的图片优于图文结合的方式，图文结合的方式优于纯文字链接列表。

因此对于重点内容，不仅位置需要显著，而且往往采用具有冲击力的图片、图文结合，或者鲜艳颜色、字体加大的标题等方式进行突出显示，塑造视觉冲击（见图3-64）。

图　3-64

对于略次要的内容，采用图文结合的方式，既不过分吸引用户的注意力，又可以增加内容的可读性，体现出内容的相对重要性（见图3-65）。

图　3-65

对于普通内容，采用纯文字链接的方式可以节约页面空间（见图3-66）。

图　3-66

对于无关紧要的补充内容等，可以通过缩小字体等方式，避免分散用户的注意力。

另外，网站内容的组织方式必须清晰、有条理，需要将内容按照一定的规律和逻辑串起来，包括对内容的分组归类，以及对内容的位置摆放等。对于相关度高的内容应遵循紧凑原则[2]，将其归为同类摆放在一起，物理上的相邻使用户在加工信息时，将其归为相关项。相关度高的类别之间，在物理位置上也同样需要互相靠近，体现出其相关性。至于内容之间的位置摆放，一般都要依据一定的排序规则进行放置。排序的规则有很多种，包括按照重要程度、用户浏览数量/受欢迎程度等进行排序，将排名较高的类别放在较为显眼的位置，吸引更多用户的关注，同时减少搜索时间，也可以按照字母顺序等规则进行排序，可以根据网站自身类别的特点选择合适的排序方式。如果没有规律可循，用户学习成本会很高。

3.页面数量

简洁型的网站首页内容往往非常简单，一般保持在1～2页之间，不需要太多的页面翻转就可以完成页面的浏览，用户就会选择感兴趣的点进一步选择浏览更深层次的内容。而对于丰富型的网站，往往各类别的内容都放在首页上，因此页面长度往往都在5屏以上，目前很多国内的门户网站甚至都超过10屏以上。

对于非资讯类的网站，很多设计师都建议不超过2屏，可以减少鼠标的滚动。但并不是页面越短越好。

以色列ClickTale公司分析了页面长度和用户拖动滚动条之间的关系，在页面高度为4000～4100px的情况下，23%的用户会拖到页面底部，扫视完整个页面（见图3-67）。

图　3-67

而且对于不同长度的页面，用户将页面拖到底部的比例相差并不明显，随着页面的加长，该用户比例也没有减少的趋势（见图3-68）。

图　3-68

对于不同的页面长度用户拖到90%以上页面的比例也并没有明显变化（见图3-69）。

图　3-69

从以上几组数据可以看出，页面长度并不是影响用户浏览和体验的一个因素。如果为了节约页面空间，减短页面长度，而把所有内容都简化成文字链接的话，就会大大降低页面的可读性[3]。在设计页面长度时，我们还需要考虑目标用户群体的使用习惯。

对于国内的老年用户来讲，比较喜欢新浪等门户网站的设计方式，反而不易接受过于简洁的页面设计，对于使用SNS的年轻用户来讲，倒是比较适合后者，如淘宝、豆瓣等都采用简洁式的设计。

[1]可以依据热门关键词排行等相关信息，帮助筛选。

[2]参见《写给大家的Web和版式设计书》，Robin Williams著，李静译（已由机械工业出版社出版，书号：ISBN 978-7-111-23792-1）。

[3]曾有心理学实验证明：人眼每秒摄入的有效字符最多只有20个，因此有过多的文字的页面反而不是很好的设计。

3.6.2　列表页

列表页（List Page）往往通过点击感兴趣的分类栏目或者搜索关键词的方式进入，此时用户通常处于初步筛选阶段，浏览目的已经相对明确，聚焦于某一关键词或某一类别的信息。列表页作为首页和具体页之间的过渡，信息通常比首页更为聚焦，用户可以根据标题或者图片、相关参数等进行扫描式浏览或者对比，从中选择感兴趣的内容点击进入具体页面[1]。

列表页面根据信息量和信息类型，可以选择不同的展现方式。

如果页面空间有限，且文字链接已经足够供用户判断所需的话，则文字链接是较合适的选择，常见于新闻类、博客类等网站。

如果标题不能够帮助用户很好地选择所需要的内容，且页面空间允许的话，可以选择包含标题文字链接、内容简介以及其他辅助信息的展现方式。如果需要查看更多，点击相应链接查看全文即可（见图3-70）。

图　3-70

对于电子商务等类型的网站来讲，图片是非常重要的元素，因此基本采用图文结合的方式，增加产品的吸引力。对于主要依据图片/视觉效果进行选择的内容，如女装等，小的缩略图已经不能满足用户的需求，因此淘宝等网站也非常贴心地提供了大图的展现方式，使得其看起来非常直观（见图3-71）。

图　3-71

对比国内外电子商务类型网站的列表页设计，如图3-72所示的淘宝、Amazon和eBay。

图　3-72

基本模式已经相对成熟和类似，但仍需要仔细斟酌设计中的很多细节。

·在有限的空间里呈现最有效的参数。这几家网站都非常细致和慎重地选择了对用户决策起重要参考作用的参数，包括价格（原价与现价的对比）、邮费、拍卖的倒计时时间、评价等。

·突出重点信息。对标题、价格等用户最为关注的内容，采用字体加粗及颜色变化等方式对信息进行突出。

·清晰的划分，减少干扰。各列之间通过线条、间距等方式进行区分，减少信息之间的干扰。

·提供产品缩略图。图文结合，呈现得更为清晰有效，同时能够通过放大按钮或者鼠标移过放大等方式浏览更清晰的图片，减少用户的操作步骤。

·提示信息。提示页面的信息数量，包括每页的信息量、总体信息量等，给用户全局的概览。

·展现适当的列表项。每页展示适当数量的列表项，在减少用户频繁翻页以及避免页面过长之间达到平衡。如Amazon每页显示12项（每项信息较丰富），淘宝每页提供40项（除2个推广位外），eBay默认每页提供50项，同时还提供选项可以选择每页显示的数量，给用户更多控制权（见图3-73）。·优化翻页功能设计。提升用户在翻页时的体验，促进用户翻页，浏览更多内容。具体见4.3节。

图　3-73

[1]正如前面提到的，用户可能通过首页直接进入具体页面，跳过列表页这一步。

3.6.3　具体页面

具体页面（Detail Page）是用户最终的目标页面。要留住用户，增加用户黏性，就要让用户多停留在具体页面。通常此时内容都聚焦在一个点上，因此也有足够的空间来进行设计和展现。

尤其是对于购物网站来讲，用户在浏览具体页面时的关注点聚焦在当前产品上，它是产生购买行为的最后一步。因此提升用户在网站的购物/“逛街”体验，增加用户的信任感，再加上突出的购买按钮等设计元素的“刺激”，都将最终影响用户的决策和网站的交易量。

网站往往通过优化色彩、布局以及信息组织等方面，来提升用户的购物/“逛街”体验。其中信息的组织同前面讲到的类似，需要通过对信息的重要性和逻辑性进行梳理，通常将与购物相关的信息集中展现在首页内，其他更多、更为详细丰富或者影响力较少的内容放在页面下方，使用户浏览得更加舒畅。就如同好的商场布置，能够大大提升用户的购物体验一样。

用户对于购物网站的信任度一直以来都是影响用户购买的主要因素之一。因此在页面中增加来自其他用户的信息，包括产品评价、购买记录、卖家信誉指数等，而非全部是卖家单方面的信息，以提升信息的客观度，都能让用户对网站、对产品增加信任度。

有了好的购物/“逛街”环境以及用户对网站的信任度，最后在将用户的购买欲望转化为行动时，购买按钮就起到了非常关键的作用。好的按钮设计，可以激发用户购买欲望，增加其点击率。具体按钮的设计参见4.5节。

淘宝在具体页面的设计不论从内容的布置、信任度以及按钮等方面都很好地提升了用户的购物体验（见图3-74）。

用户浏览完具体内容之后，就可能完成目标，离开网站。但如何激发用户进一步浏览，增加用户的黏度是一个问题。除了展示当前产品、新闻等内容外，在用户浏览结束时，根据用户的喜好等推荐相关内容、热门内容、排行榜等更多内容，可以吸引用户浏览更多感兴趣的内容（见图3-75）。

对于电子商务网站也是如此，如Amazon著名的捆绑销售策略，在用户购买商品之后，推荐相关产品，提升产品的销售量，很值得我们学习（见图3-76）。

图　3-74

图　3-75

图　3-76

3.7　广告区

广告作为网站主要收入来源之一，是网站不可或缺的一部分。设计好网站广告并非一件容易的事，广告主和用户两者之间存在着直接的矛盾：从广告主的利益角度出发，需要考虑如何吸引用户注意并激发用户点击的欲望，从而达到良好的广告效果；从用户的角度，广告也是最影响用户体验的一个因素，应该尽量减少不相关广告的干扰，从而保证用户对网站内容的正常浏览。同时，网站广告这种新兴的广告形式在设计上还存在很多不完善的地方，如何合理地结合图片、文字、声音和影像几种形式来传送多感官的信息也是一个问题，网络广告也较少有规范的约束，这直接导致网站广告的混乱性和不合理性。

3.7.1　广告类型

目前网站广告根据不同的载体，包括图片、按钮、视频或者文字等，以及展现的不同形式，如弹出式、悬浮式、动态等可以分为以下几种类型。

1.Banner广告

Banner广告可以分为横幅式和竖立式（又称为擎天柱），其中横幅广告常见于页眉和页脚，竖立式广告常见于页面两侧[1]。这类广告相对尺寸较大，广告效果较好，如果位于页眉或者两侧显著位置，成本相对昂贵，尤其是在网站首页（见图3-77）。

图　3-77

根据使用载体的不同，又可以将Banner分为静态图片、动态图片以及交互式3种。

·静态图片的方式相对简单，易操作，但较为单调，不能吸引用户注意力，因此图片质量至关重要。

·动态图片的方式是横幅广告中比较常用的方式，可以比静态图片传达更多的信息，同时通过闪烁、移动等动态效果吸引用户注意力，表现力也更为丰富，效果优于静态图片。

·交互式的方式指广告需要用户参与互动，通常更加具有创意和吸引力，在用户参与过程中，将产品特色等展现给用户。这类广告的形式多种多样，比如游戏、测试、回答问题、下拉菜单等，但同时它也需要更多设计和创意，在设计前期需要花费更多精力。

2.按钮式广告

相对于横幅式广告，按钮式广告是一种小面积的广告形式，一方面是可以通过减少面积来降低购买成本，让小预算的广告主能够有能力进行购买.另一方面是更好地利用网页中比较小面积的零散空白位。在进行购买的时候，广告主也可以购买连续位置的几个按钮式广告组成双按钮广告、三按钮广告等，以加强宣传效果。按钮式广告一般容量比较小，常见的有JPEG、GIF和Flash三种格式[2]。

这类广告一般只能显示公司、产品或品牌的标志，点击后将链接到广告主的站点，但要用户主动点击，才能了解更为详尽的信息，所以不适合用于相关活动的推广，只适合用于长期推广品牌和公司网站，且公司、产品或者品牌要具有一定的知名度，才能增加信任度和吸引力，作用较为局限。如某汽车网站中，点击不同汽车品牌的按钮，就会进入该品牌的主页（见图3-78）。

图　3-78

3.弹出式广告

弹出式广告一般在用户打开网页时，自动打开新的广告窗口，根据弹出窗口位于目标页面之上或者之下，可以分为Pop-up和Pop-down两种方式，主要以静态、动态图片或者Flash为主。如淘宝网目前采用的就是弹出式广告（见图3-79）。

这类广告通常都是自动弹出，如果位于目标窗口之上，常常能直接吸引用户的注意力，曝光率高，时效快，但是这种方式强迫用户观看广告，容易让人产生反感的情绪；部分弹出广告位于目标窗口之下，看似不影响用户操作，但通常此类广告会趁用户不注意，搜集用户的上网行为或者未经用户同意下载软件，对用户的干扰更大。

根据IAB给出的部分市场调查结果及其他相关研究数据，超过90%的用户反感弹出式广告，同时分别有50%以上和70%的用户对使用Pop-up和Pop-down广告的品牌产生负面情绪。也由于这个原因，很多浏览器也增加了拦截弹出式广告的功能，如Google Chrome等浏览器会自动拦截这类弹出式广告。

图　3-79

4.浮动式广告

浮动式广告通常会随鼠标的滚动而上下移动[3]，从而使广告始终保持在当前页面上，主要以图片为主，但现在各大门户网站也开始使用视频作为广告的载体。

图片浮动式广告，又经常被称为浮水印广告，主要置于页面主体外的左下角或者右下角，可能是单边，也可能是双边，双边的话往往是同一个广告对称式地展示。此类广告的优点是广告始终呈现在页面上，且一直处于移动状态，吸引浏览者的注意。但由于这类广告的泛滥，用户对于这种随鼠标自动移动的方式的内容全部自动认知为广告，且这类广告不在页面主要区域内，尺寸较小，通常为80×80pt或100×100pt，因此在很多情况下会被直接忽视，其广告效果较差（见图3-80）。

图　3-80

视频类浮动式广告：与图片式广告较为相似，一般位于页面右下方，但通常尺寸较大，会遮盖部分页面内容。视频广告能够呈现更加丰富的信息，更具视觉效果，广告效果也更为优秀，但视频广告加载需要一定时间，而对于在办公室上网的人来讲，声音的自动打开是最为困扰的事情。目前首页采用视频类浮动式广告的网站包括MSN、搜狐等（见图3-81）。

图　3-81

5.动态广告

当用户打开页面时，动态广告将在页面中以静态或动态的方式停留一段时间，然后，消失在屏幕上，或者以一定的轨迹缩回原有的广告大小。动态广告取得的效果与弹出式广告类似，差别是没有打开新窗口，规避了弹出式广告被浏览器拦截的缺点，还有广告结束后自动消失或者缩小，用户的反感程度比弹出式广告低。但如果动态广告没有设计好，用户体验也会非常差。比如腾讯前段时间设计的动态广告在播放时，将其他内容全部下移，这就意味着广告结束时，所有内容都会自动上移，而用户原先浏览的内容就会移位，也就是说用户需要再次移动鼠标，找回正在浏览的内容，而且在其他广告方式用户可以采用关闭等手段退出广告的浏览，但这种方式使用户完全失去控制感，会导致用户的挫折感。

6.伸缩式广告

伸缩功能通过两种方式来实现，一种是点击“扩展广告”或者“收缩广告”的字样，另外一种是鼠标移过之后，广告自动扩展和收缩。这种方式的优点是在未激活状态下占用的空间较小，激活后的视觉效果却相对显著，减少了对用户的干扰，且将选择权交给用户，更不容易让用户产生反感的情绪。缺点在于这种方式较为被动，需要用户的操作才能激活。目前如MSN下方的广告条就采用了这种方式，鼠标移过之后即放大显示（见图3-82）。

图　3-82

7.文字链接广告

顾名思义，就是文字链接形式的广告，点击链接可以进入相应的广告页面。文字链接广告分为显性广告和软文广告，其中显性广告较为集中，包括消息中心、底部文字、广告链接等，有时候这些广告过于集中，广告性质过于明显，且没有其他广告类型那么显眼，主要通过标题吸引用户，效果不够理想；软文类广告较为隐性，表面上和普通的内容标题十分相似，甚至与这些内容放在一起，用户甚至不觉得这是广告，因此抵触情绪较少，而且对用户基本没有干扰，也是较为有效的网络广告形式（见图3-83）。

图　3-83

8.其他广告形式

其他广告形式还包括视频播放前和结束后的广告，以及视频两边的背景广告等。当然还有E-mail广告，这种类型更有针对性，通常由用户订阅，直接送达用户邮箱，但这不包含在网页设计的范畴内，故不展开叙述（见图3-84）。

图　3-84

[1]参见IAB（美国互动广告局）广告设计规范。

[2]参考维基百科按钮广告词条。

[3]也有部分浮动式广告不随鼠标移动而移动，而是在页面上到处飞舞，但这种形式目前已逐渐被淘汰。

3.7.2　设计要点

除去网络广告本身的设计因素，我们还可以通过几个细节，提高用户对广告的接收程度，达到广告主诉求的宣传效果。

1.选择合适的展现形式

选对广告形式，可以使广告发挥出其期望的效应，这需要同时兼顾不同广告类型的优缺点、广告主的需求、目标用户特点、用户接收度以及页面广告空间等因素。除此之外，我们还可以参考一些市场调研的数据，如2001年7月CNNIC发布的《中国互联网络发展状况统计报告》中调查得到用户认为最能吸引其点击的网络广告形式[1]，排名如下：

（1）游动式广告：40.7%

（2）横幅式广告：31.2%

（3）插页式广告：9.8%

（4）按钮式广告：7.9%

（5）邮件式广告：6.2%

（6）文字式广告：4.2%

选错广告形式，往往会引起反作用。以弹出广告为例，分别有50%以上和70%的用户对使用Pop-up和Pop-down广告产生负面情绪，这样的效果估计是您所不愿意看到的。

2.提高广告的命中率

要吸引目标用户关注广告，除了放在知名网站首页醒目的位置外，还可以通过了解目标用户的特征及其网上浏览习惯，增加广告与浏览内容的相关性，从而达到精准投放的效果，毕竟首页广告费用过于昂贵。比如一个上汽车网站的用户可能是汽车相关广告的目标对象，一个浏览美容网站的用户可能是化妆品广告的目标对象，那么在汽车网站和美容网站上最适合推广汽车和化妆品。对用户的需求有针对性地推广广告，不仅不会引起用户的反感，也能提高广告的命中率，花最少的钱，达到最优的效果。反之，如果在一个用户80%以上为男性的网站上推广减肥、美容广告，可想而知，用户会觉得这些广告过于碍眼，而且最终也无法取得预期的效果。

随着Web 2.0的发展，分析用户浏览习惯，并对广告进行精准投放必然是未来的趋势。

3.广告不应该隔断或者削弱相关内容间的联系

相关的内容理应在物理位置上靠近，有助于用户更好地浏览内容。但部分广告，如横幅式广告如果放在导航区和内容区之间，往往会隔断导航和内容之间的联系，削弱导航的作用。我们可以对比一下新浪汽车频道改版前后的效果，新版的导航和内容之间的联系更加紧密，旧版的导航则很容易被忽视（见图3-85）。

图　3-85

在部分网站的内容区也存在类似的问题：具体内容结束后，一般紧接着应该放置相应的新闻内容，但如果穿插了文字链接的广告，则隔断了具体内容和相关新闻内容，可能导致用户阅读顺序不够流畅。更严重的是，如果需要翻页，而用户以为下面都是广告，就直接略过了下面的相关新闻，影响这部分链接的点击率（见图3-86）。

图　3-86

4.避免过多广告同时出现

广告就意味着收入，从网站运营的角度来讲，当然是广告越多越好。但是有时候在同一个页面上放置了过多的广告，而且基本以动态图片等动态效果为主，有时候还加上视频广告，会从视觉、听觉上吸引用户过多注意力，会喧宾夺主（见图3-87）。

5.规范统一的尺寸

目前网络广告尺寸各异，DoubleClick（一家网络广告公司，已并入Google）统计甚至发现正在使用的广告形式和尺寸超过1万种，因此很有必要制定规范统一的广告尺寸标准。IAB和欧洲交互广告协会（EIAA）近期发布了新的网络广告尺寸标准，包括160×600，300×250，180×150，728×90，468×60和120×600（擎天柱）6种。当然这6种标准过于局限，不能适应不同形式、不同位置的广告的需求。我们结合IAB细化的新标准以及目前网站常用的尺寸，来分别介绍各种形式的广告常用的尺寸。

图　3-87

横幅式广告最常见的为全尺寸的468×60（或者80），半尺寸的234×60，还有728×90大尺寸型等[2]。

·468×60（或者80）为应用最为广泛的广告条尺寸，常用于页眉或页脚。

·234×60称为半尺寸，这种规格适用于左右栏形式主页的广告链接。

·728×90为通栏式横幅，比全尺寸的更大，常用于页眉或页脚。Google的首页横幅广告采取的规格就是728×90。

·392×72，主要用于有较多图片展示的广告条，IAB已经不再推荐使用。

·88×31，主要用于网页链接，或网站小型Logo。

[1]这个统计数据的分类方式和前面提到的不同，仅供参考。同时由于数据的局限性，并没有最新的统计数据，如果有需要，可以购买或者查找最新的数据进行参考。

[2]IAB广告设计规范。

第4章　页面元素

从更细节的角度来看，页面中每个功能区都是由更多细节元素所组成的，包括表单、标签、链接、翻页、按钮、操作反馈、验证码等，这些元素有些只能用于某些特定区块（有些已经在第3章具体描述过），有些通用于多个功能区。页面中细节元素的设计是交互设计中非常重要的一部分，例如表单可用于注册表单、购买表单等，优化表单可提升用户注册率或者商品成交率。

4.1　表单概述

表单是网站中运用较多的页面元素之一，主要用于采集和提交用户输入的信息。可以通过表单采集用户的名字和E-mail地址等各种信息，最典型的就是注册表单、购买订单等。

表单设计的好坏，会直接影响到用户的注册率、购买成交量或者数据的提交率等网站最为关心的指标。因此表单的布局、标签文字的可理解性、提示信息和对于表单填写的引导等设计都会影响用户在填写和提交表单时的体验。

4.1.1　表单布局设计

表单设计中，有几种不同的对齐方式，包括垂直对齐（又称为顶部对齐）、左对齐、右对齐。2006年，Luke W对这3种方式进行了研究和分析[1]。

垂直对齐的优势在于标签和输入框非常接近，一致的对齐方式使得用户只需要垂直移动视线即可，可大量减少眼睛移动和填写表单的时间（见图4-1）。在期望用户尽快完成表单填写，并且收集的数据都是用户所熟悉的（比如姓名、地址和付费信息等）方面，垂直对齐的标签和输入框可以说是效果最佳的。但这种方式的缺点也很明显，增加了垂直的空间，在填写项较多的情况下，会增加页面的滚动。

左对齐的方式便于用户浏览/扫描标签，同时会减少占用的垂直空间。如果表单上的标签用户不熟悉或者在逻辑上分组有困难（比如一个地址的多个组成部分），那么左对齐的标签方式可以让用户轻易地通览表单的信息，只需要上下看看左侧一栏标签就可以了，而不会被输入框打断思路。但是标签和输入框的距离过远，如果其中一个标签过长，就会大大增加标签和输入框之间的距离，用户必须左右来回地跳转目光来找到两个对应的标签和输入框，影响填写表单的时间，如果标签长度较为接近，则会降低这方面的影响（见图4-2）。

右对齐的方式优势在于减少了标签和输入框的距离，减少了垂直的空间，弥补了左对齐布局的部分缺点，使得标签和输入框之间的联系更紧密。但是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容，给用户的阅读造成了部分障碍（见图4-3）。

图　4-1

注：在这种布局中，推荐使用加粗的标签，这可以增加它们的视觉比重，提高其显著性。反之，如果不加粗的话，标签和输入框的文字区分度不够明显。

图　4-2

图　4-3

随后，Matteo Penzo用眼动仪对这3种方式进行了定量研究[2]，得出以下结论：标签左对齐的方式使得用户很容易将标签和对应的输入框联系起来，但明显增加了用户视线的移动距离，迫使用户花费更多时间。标签右对齐的方式可以减少近一半的视线移动点，相应地也减少了近一半的填写时间。对于顶部对齐的标签，用户只需要在同一方向进行视线移动，即可同时注意到标签和输入框，在这3种方式中，用户完成速度也最快。

左对齐：从图4-4中可以看出用户视线移动较多，且视线停留点也较多。

图　4-4

右对齐：用户视线移动距离较少，且视线停留点较少（见图4-5）。顶部对齐：用户视线较为集中，停留点较少（见图4-6）。

图　4-5

图　4-6

综合以上3种布局方式的研究结果，表4-1对3种方式的优缺点及适用情况进行了简单的总结。

[1]参见《Web Form Design：Filling In The Blanks》，Luke W著。另外图4-1～图4-3也来自这本书。

[2]Matteo Penzo著《Label Placement in Forms》，2006年7月12日出版。

4.1.2　设计要点

在优化表单设计的过程中，常常用到的理论包括漏斗理论。漏斗理论指的是用户在填写的过程中，每一个步骤都可能有一部分用户不知道该步骤如何操作或者失去耐心而流失。通过分析每个步骤的流失率，可以发现存在问题的几个主要步骤，从而有针对性地进行改进。

1.表单的逻辑分组

表单的标签项都存在着或近或远的关联，如果只对信息进行简单的罗列，会影响用户填写的逻辑性和连贯性。相比之下，对信息进行归类，如在图4-7所示的注册表单中，将基本信息和高级选项等归类，同时通过视觉元素进行区分，用户可快速阅读表单所有标签，不需要过多的思考和理解，按照表单的逻辑填写即可。尤其在表单采用了右对齐的布局方式时，减少了右对齐时用户对于标签快速阅读的影响。

图　4-7

总的来说，在设计中应该根据标签的相关性对内容进行分组；用尽可能少的视觉元素来表明分组关系，较少视觉噪音。

2.填写引导

当表单信息较多时，除了对内容进行分类，还可以通过分段式填写的方式进行引导。如淘宝将会员注册表单的填写分成3个阶段，以引导用户填写（见图4-8）。

3.尽量简化表单

越少的表单项，往往会带来越高的用户完成率。因此需要取消不必要的表单项，或者将其设为高级选项，用户可以选择是否填写。

4.必选vs可选

除非所有选项均为必需选项，没有必要对表单项是否必填进行标识，否则应该区分必选项和可选项，比如常用的用红色*号标识表单项为必选项。

图　4-8

5.默认选项

对于某些数据，提供默认选项，同时又提供可选择的按钮。比如省份，可根据用户IP地址判断，如果需要更改，用户也可以手动进行修改。这其实也是简化表单填写的一种方式。

6.文字

表单其实是网站和用户进行“沟通”的一个途径，使用用户容易理解的语言和尊重用户的语言，既可避免理解上的问题，也能够拉近与用户的距离，增加用户对网站的信任感。

7.提示与帮助

对于存在歧义或者较难理解的选项，在输入框旁边用小字体显示说明文字或者通过底部灰色的提示文字帮助用户理解表单标签，提示该输入内容的格式等，避免错误（见图4-9）。

图　4-9

但要注意的是过多的说明可能会喧宾夺主，必须适量。

8.反馈

用户提交表单等操作之后，网站需要给出明确的反馈信息，告知用户操作之后的结果，提示是否成功。当出错时，网站需要提示出错具体原因，并提供可操作的解决建议。同时在出错返回后，建议页面仍保存已输入的正确的数据，避免用户重复输入，并将鼠标定位到错误位置，减少用户操作。

9.灵活的输入框

填写表单的方式包括输入框、下拉列表框、单选按钮等。对于不同类型的表单项，需要选择合适的方式。

如姓名、E-mail、密码等适合用输入框的方式（见图4-10）。

对于性别等适合用单选按钮的方式（见图4-11）。

生日、地区选择则更适合使用下拉列表框的方式（见图4-12）。

图　4-10

图　4-11

图　4-12

10.有“行动力”的按钮

表单设计最终的目的是提高注册率，除了表单本身的布局、分组等设计之外，按钮是否具有“行动力”，也是非常重要的原因之一。具体如何设计按钮，会在4.5节中具体讲述。

11.视觉美观

视觉美观的表单，能够使表单填写更加舒适，比如较大的字体和间距，不会让用户产生局促感。

4.1.3　知名网站表单设计

我们来看一下知名网站对于表单的设计。

门户网站中对于注册类的表单设计较为简单，如Yahoo！，除验证码外只有5个填写项（见图4-13）。

从图4-13中也可以看出，Yahoo！的注册表单有很多可取的优点。首先，对内容进行了分组，增加了可阅读性；对大标题采用左对齐的方式，减少用户眼球扫描负担，对于具体的填写项采用右对齐，增加了标签和输入框的相关度；输入框中灰色的提示信息帮助用户更好地完成填写；对按钮进行主次设计，促进用户提交表单；对于E-mail，提供默认的邮箱后缀，减少用户的输入；通过距离感、颜色搭配、字体大小等的视觉设计，使表单更加赏心悦目。

图　4-13

相对而言，电子商务类的注册项较多，如eBay对所有项目进行了归类，另外采用了顶部对齐的方式，可以让用户在最短的时间内完成，但同时也导致了页面过长（见图4-14）。

定单类的表单，以某网站的度假预定表单为例，从图4-15中可以看出，虽然表单在引导性方面做得较好，但是每次预定需要经过7个页面、多个步骤才能完成，对于用户的耐心也是一个极大的考验。

图　4-14

图　4-15

4.2　标签

打开平时常用的记事本，或者去图书馆查阅图书时，我们都可以看到标签熟悉的身影，它有助于对内容进行归类，从而帮助我们快速定位到目标页面或者书籍等（见图4-16）。

图　4-16

网站中的标签可以分为2类：一类称作导航标签（Navigation Tab）[1]，常用于网站导航，能够让用户快速了解网站的大致结构，是目前比较流行的导航方式之一（在3.3节已经提到过）；还有一类称作模块标签（Module Tab），顾名思义，就是用于页面内某模块中，在内容上方使用一列标签形式的链接进行切换，用户不需要刷新页面就可快速查看内容，部分解决了在有限的网页空间中放置更多内容的问题。

4.2.1　什么时候使用模块标签

导航标签在3.31节中已经提到，因此这里主要讨论模块标签的适用条件[2]：

·有多窗格的内容，但空间有限，一次只能显示一个窗格的内容。

·不同窗口的内容相对独立，不存在前后文的关系，否则用户需要来回切换比较不同标签下的信息，相比将全部内容呈现在同一页面上，这会增加用户的短时记忆负担，降低了可用性。

也可以通过卡片分类进行标签的分类，如果分类不够独立和清晰，说明此时不适合使用标签。·切换内容时，不需要链接到其他网页（如果需要连接到其他页面，那么应该使用导航标签）。

·有2～10个类别。

·类别标题简短且可预见。短的文字比较容易扫描；如果需要更多文字，那么说明这对于标签来讲过于复杂了。

·需要突出当前正在查看的内容窗口。

[1]参考网站：http：//developer.yahoo.com/ypatterns/navigation/tabs/

[2]同样参考网站：http：//developer.yahoo.com/ypatterns/navigation/tabs/

4.2.2　设计要点

1.如何突出选中标签

为了使当前标签在视觉上看上去更突出、更醒目，同时加强标签与内容的关联性，可以通过加大标签按钮尺寸、加粗标签文字、增加背景色的对比、使用按钮浮出效果，以及在标签和内容区使用相同的背景色等措施来实现（见图4-17）。

图　4-17

淘宝和WorldCat都是很好的案例。从图4-17中，我们可以看到“所有宝贝”、“Everything”的标签在尺寸上略大于其他标签，背景颜色较为明亮醒目，其他标签相对比较灰暗，使当前标签在视觉上有突出的效果。WorldCat更优秀的一点是其与搜索框的背景色保持一致，两者之间的相关性一目了然；淘宝却采用了其他标签和内容区背景色保持一致的设计，容易让人混淆，但是通过下方橙色的线条将其他标签和内容区进行了隔离，弥补了以上缺陷。

在网页设计行业中，标签的设计已经相对成熟，如电驴对于当前选中标签的设计（见图4-18）。

图　4-18

当标签超过3个时，较容易区分当前选中的标签。当只有2个标签时，识别出选中标签的难度就会上升，因此应当尽量突出当前标签。

我们对比以下2个标签的设计，左边的都是当前选中标签（见图4-19）。

图　4-19

很多网站采用第一种设计，当前标签使用的颜色较深，但与背景颜色不一致，往往割断了当前标签和内容之间的关联。如果另一个标签的颜色和背景色相似，甚至有可能让用户误解后面的才是当前选中的标签。

第二种设计就不会产生这种误解，标签和内容融为一体，用户不需要花费精力去辨识，也不容易搞错。

某航空网上订票系统需要输入个人资料，当出现2位以上的乘客时，通过切换标签进行输入。选中“乘客1”标签时，当前选中标签与内容紧密相关，但未选中标签的背景颜色过于突出，字体与背景色对比明显，容易引起用户的误会，增加识别当前选中标签的难度（见图4-20）。

当切换选择“乘客2”标签时，标签与内容中间出现空隙，割断了标签和内容的联系（见图4-21）。和图4-20一样，未选中标签与选中标签之间的辨识度较差。

相对而言，电驴中的设计相对更容易识别（见图4-22）。

当然还有一种情况：过于突出选中标签，导致未选中的标签过于隐蔽，用户可能由于难以发现还有隐藏的内容。

图　4-20

图　4-21

图　4-22

Jepco Storage网站在突出当前标签这一方面做得非常优秀，但是未选中的2个标签过于隐蔽，很可能被用户忽视而永远不会点击它们（见图4-23）。

2.标签的跳转

从标签的跳转来看，有两种方式：一种是鼠标移过即自动跳转，这种方式的优点是用户不需要点击即可完成操作，减少了用户操作，但是也容易引起误操作。为了避免误操作，很多网站设置了延迟时间，一般小于0.1s，即如果用户鼠标停留时间不超过延迟时间的话，标签不进行跳转。另外一种就是需要点击标签才能跳转，这种方式不容易引起误操作，但每次都会增加一次操作。

图　4-23

模块标签中常使用自动跳转的方式，跳转后页面自动加载新标签页内容，减少了用户的操作次数。同时标签上往往增设有链接，需要查看更多内容的用户可以点击标签链接，进入新页面。

标签导航相对比较复杂，网页中基本采用点击跳转的方式，以减少误操作。但是腾讯QQ、MSN等IM（即时消息）弹出窗口中的标签导航，较多采用鼠标移过自动跳转的方式，实现各频道间的自然切换。

3.点击标签交互的一致性

这里的一致性指在同一产品内或同类产品中，对于相同内容、操作应采用一致的各称和交互方式。保持一致性能使用户利用已有知识来执行新的任务，并可预期操作效果，增加用户学习和理解操作界面的速度。

IM弹出窗口中的标签导航，较多采用鼠标移过即自动跳转的方式，但是点击标签时，腾讯QQ切换标签的同时会打开新的网页，而MSN只进行标签的切换（见图4-24）。

对于网站内的标签导航，常见的操作方式是点击标签，突出当前标签的选中状态，同时进行页面内容的切换，也可能弹出新页面（对于是弹出新页面还是在当前页进行跳转，在4.4节会进行详细的说明）。但是这里想要强调的是标签交互方式的一致性，我们可以看一下某网站各标签的不同交互方式。

打开首页，没有默认选中的标签（见图4-25）：

圈中的几个标签，在点击后会转变成选中状态，并且刷新当前页面，全局导航条不变，如果存在二级导航则显示二级菜单（见图4-26）。

图　4-24

图　4-25

图　4-26

剩下的标签交互方式发生变化（见图4-27）。

如点击“小额批发”，则刷新当前页面，但全局导航变成了图4-27，在这里却没有返回首页的导航。

图　4-27

点击“阿里贷款”，直接在当前页面跳转到阿里贷款页面（见图4-28）。

图　4-28

注：首页的设计在这里显得多余，原始状态没有选中状态，点击后也没有发生任何变化。

交互方式的一致性非常重要，能够避免给用户带来迷惑。

4.其他设计要点

·标签的先后顺序。权衡用户对当前标签的使用频率、标签的重要程度以及各标签之间的相关性等因素，将最常用、最重要的标签项作为默认选项。

·用空间、线条和颜色对比等手段区分标签按钮。

·若标签采用鼠标滑过即进行自动切换的方式，建议延迟切换的时间。

否则滑过标签就进行切换，很容易产生误操作。可通过函数的方式延迟400ms左右的时间，这样当鼠标滑过不超过400ms时，就不会引起标签内容的切换，从而避免了无意的鼠标滑过引起切换。

4.2.3　知名网站标签设计

导航标签之前在3.3.1节已经讲过，这里讨论模块标签。

Yahoo Finance可以说是模块标签设计的典范，在字体的突出、颜色的对比、线条的区分、与内容区块的融合等方面都做得非常合理（见图4-29）。

图　4-29

网易和腾讯采用了相似的模块标签的方式（见图4-30）。

Mint非常完美地结合了标签和表格的设计（见图4-31）。

图　4-30

图　4-31

4.3　翻页

翻页是页面中最常见的元素之一。当内容数量较多，不能在一屏内显示完整时，翻页能够将内容分页显示，并通过页码帮助用户找到所需内容的有效元素，尤其多见于列表页面。

虽然所有页码的呈现方式都非常类似，但细节的差异，却能够帮助用户更加快速地找到所需要的内容，减少操作步骤，甚至提高PV（PageView，页面浏览量）量。通常，翻页包含具体的页码、第一页、最后一页、上一页、下一页等多个元素，需要综合分析用户的使用场景来设计这些细节。

4.3.1　第一页

第一页通常呈现最新的、最热门或者网站最希望推广给用户的内容，所以在设计上应该相应地突出第一页。目前网站对于第一页通常有3种不同的设计方式。

·始终保留第一页的页码（见图4-32）。

图　4-32

·设计成按钮，通常以“首页”或“＜＜”的形式展现（见图4-33）。

图　4-33

·不保留第一页的页码（见图4-34）。

图　4-34

前2种方式较为类似，只是设计细节不同，适合于第一页的内容会时时变化，用户仍需要返回第一页进行浏览或者定位的情况。

第3种方式适合用户聚焦于当前浏览页面附近的情况，而且用户已经浏览过前面的内容，返回前面重新浏览的可能性较小。

4.3.2　最后一页

类似地，网站对于最后一页也有以下3种设计方式。

·始终显示最后一页的页码（见图4-35）。

·设计成最后一页的按钮，通常以“末页”或“＞＞”的形式展现（见图4-36）。

图　4-35

图　4-36

·如果没有必要，取消最后一页的显示。由于网站内容都是按照一定规则排序的，如相关性、时间顺序或重要性程度等，因此最后一页的信息可能已经是过期信息或者基本没有用户关注的内容，在设计上就应该削弱最后一页的重要性，目前几大网站都取消了最后一页的功能（见图4-37）。

图　4-37

4.3.3　上一页和下一页

这两个元素是翻页的必备元素，通常以文字的“上一页”“下一页”、符号“＜”“＞”，或者文字加符号的形式表示。文字的点击区域较大，便于用户定位，符号能够增加用户点击的行动力，因此最常见的是文字加符号的形式，能够促进用户的点击，增加PV量。

当前页面为第一页时，应删除“上一页”的链接或者将其灰化，显示为不可操作的状态，避免用户误操作。

4.3.4　页码显示的数量

分析知名的搜索引擎和门户类网站，通常都将页码设置在10页左右[1]，而电子商务类网站，页码通常在5～7页左右，但通过快速定位的方式，弥补了页码数量的不足，给用户更多的控制感。搜索引擎类（见图4-38）。

图　4-38

门户类（见图4-39）。

图　4-39

电子商务类（见图4-40）。

图　4-40

设计时，除了考虑以上几个元素之外，还需要注意以下细节。

[1]具体页码的数量可以根据网站数据分析的结果来设定。

4.3.5　翻页区域的醒目度

如果要促使用户浏览更多内容，提高网站PV（PageView，页面浏览量），那么就需要通过扩大翻页区域、增加背景色对比度等方式来增加其醒目度，从而增加用户点击并浏览的可能性。

4.3.6　增大可点击区域

增大可点击的区域，能够方便用户操作，更容易定位。

对于下一页的链接，Google采用文字加符号的设计，同时将前面空白区域也作为下一页的点击区域，增大了点击范围；对于具体页码，通过字符“o”与页码均可达到翻页的效果，便于用户定位（见图4-41）。

图　4-41

4.3.7　页码的间距

设计时，各页码元素之间需要保持一定间距，或者通过划分符号增加视觉分割，便于用户定位。图4-42所示的页码之间距离过小，视觉上过于拥挤，而且用户很容易误操作。

图　4-42

4.3.8　当前页码和总页码

通过颜色、大小或者背景色的对比，突出当前页面，可以增加用户的位置感（见图4-43）。

图　4-43

或者通过文字直接体现当前页码和总页码，既可以给用户一个全局的认知，也可以了解当前页面在全局中的位置（见图4-44）。

图　4-44

4.3.9　快速跳转

通过到“第*页”或者“Go to Page*”的方式，给用户提供快速入口，使其能够自由跳转到期望的页面，给用户更多控制感。

4.4　链接

链接是网站中最常见的元素之一，包括文字链接和图片链接等，点击链接可以转到新的页面中。虽然它是一个很不起眼的元素，但在设计上却需要注意很多细节。

由于链接文字和普通的内容文字的作用以及交互方式不一样，因此在设计上也应该加以区别。我们对比以下几种常见的文字链接方式（见图4-45）。从图4-45我们可以看出不同的设计方案中链接的颜色、下划线的设置，以及下划线的可点击范围都略有不同，我们分别来看一下这几点的差异。

图　4-45

4.4.1　链接的颜色

颜色是区分链接文字和普通文字的方式之一。通常文字链接使用蓝色[1]，与普通文字常用的黑色进行区别，因此图4-45中3种设计在颜色上比较合理。第一种设计中链接文字与普通文字没有任何区别，很容易误导用户去点击不是链接的文字，给用户带来不好的体验。

[1]蓝色是目前业界默认的也是最常用的颜色。但如果网站背景色以及普通文字不是白色和黑色的话，那么链接文字也可以使用其他颜色。

4.4.2　链接的可点击范围

图4-45中的第2种和第5种设计中，只能点击“这里”2个字，但其他4种设计都可以点击全部的文字，减少了用户鼠标移动的范围，便于用户定位和操作。

4.4.3　链接的下划线

以往在设计链接时，通常都给它加上下划线，增加其与普通文字的区分度。但如果当前页面中的文字都是链接时，下划线的必要性就下降了，反而会干扰用户对于内容的浏览。如图4-46所示，密密麻麻的文字链接给用户带来很大的干扰。

图　4-46

去掉链接的设计就相对清爽很多（见图4-47）。

图　4-47

总的来说，对于内容都是文字链接的网站，应该采用图4-45的第4种方式。对于单独的链接，则应采用第6种方式，增加链接与普通文字的区分度。

对于图片链接来讲，不能通过颜色、下划线等方式进行区分，因此如果页面上有一张图片是有链接的，那么就要保证页面上的所有图片都是可点击的，避免用户混淆。

除了以上3点之外，还要注意文字链接点击前后颜色的变化、区分内外部链接、链接的打开方式等细节。

4.4.4　链接颜色的变化

使用不同的颜色区分用户已点击/未点击的链接，用户在浏览时可以直接跳过已点击的链接，从而减少重复操作。通常未点击的链接使用蓝色，已点击的使用紫色表示。

4.4.5　区分内部链接和外部链接

网站上大部分是内部链接，但也存在部分链接直接转到网站外部的情况。如果没有通过标识和提示区分外部链接，不仅容易造成用户的迷惑，而且会造成用户的流失。直接点击外部链接后跳转到外部网站。

4.4.6　链接的交互方式

用户点击链接之后，可能直接在当前页面跳转，也可能打开新的页面。

目前很多情况下，网站都采用弹出新页面的方式，尤其当用户打开下一层级内容的时候，如从列表页面到具体页面，用户可以继续浏览上一层级的内容，同时又可以等待多个页面的打开，这样可节约时间。之前Google就是由于从搜索列表页面直接跳转到具体页面，每次只能浏览一个页面，然后返回后重新选择，操作过于复杂，也不符合中国网民的浏览习惯，导致了一部分用户的流失。当前，百度、Yahoo！和搜搜等搜索网站从列表页面到具体页面都采用打开新页面的方式。

或者当几个页面之间需要进行对比时，弹出新页面，打开几个页面进行对比的方式也优于在当前页面跳转，不必反复地返回和前进。如淘宝、阿里巴巴、拍拍等可打开几个商品具体页面，便于用户进行对比。

但弹出新页面的方式也会导致大量窗口的产生，增加了用户切换和关闭窗口的操作。当然，现在的浏览器都通过增加标签（Tab）页替代弹出新的窗口，而且可以一次性关闭，部分缓解了这一缺点。当链接在同一级别之间的内容间切换或者进行线性的流程型任务时，适合在当前页面打开。尤其是翻页、注册等情况下，用户只需要关注当前页面，因此没有打开新页面的需求，同时又可以避免打开很多窗口，减少关闭窗口的操作。如阿里巴巴、新浪等不同网站之间频道切换时，都采用了当前页面直接跳转的方式。

当然，根据用户的使用习惯，部分浏览器提供让用户自己选择打开链接的方式，给用户更多控制权，也是非常人性化的一个细节（见图4-48）。

图　4-48

4.5　按钮

4.5.1　什么是按钮

按钮是网站界面中伴随着用户的点击行为的特殊图片，需要用户进行操作，通常都会完成一个事件，并产生反馈，比如跳转到新页面，弹出新的窗口或者反馈窗口。

常用的按钮包括确认、取消、注册、登录、购买等，由于这些按钮的点击行为都是用户完成一项任务或者将浏览用户转化为注册用户或者转化成顾客的重要步骤，因此按钮的位置、可点击范围、文案、阴影等视觉效果都是触发用户点击的重要元素，最好能够达到“点击暗示”的效果。

4.5.2　如何增加按钮的点击率

对于那些涉及注册率、购买量等的按钮，如购买、注册和搜索等，增加按钮的点击率，使其具有诱惑性是设计中的要点。

尽管按钮的具体设计需要根据具体情况确定，但总体上设计的宗旨在于突出按钮的位置，使其处于可点击的状态并且能够诱导用户去点击。

Jason Billingsley收集了国外107个零售商网站的购物按钮[1]，其中如图4-49所示。

图　4-49

从背景色来看，几乎所有按钮都采用了较为饱和的红色、蓝色、黄色或者绿色；按钮文字以及图标等小细节也都是影响用户体验很重要的因素。根据统计数据来看，Add to Cart（加入购物车）使用最多，占了58%，Add to Bag（加入背包）和Add to Shopping Bag（加入到购物袋）各占9.8%，其他文字使用比例较小；而图标方面，没有使用图标的按钮占了48.2%，使用箭头的按钮占了17.9%，使用购物车或者购物袋的分别占了14.3%和7.1%，使用加号的占5.4%，使用组合及独特符号的占6.3%。

我们来看一下几个经典的电子商务网站的购物车按钮。

对比几个网站的购买按钮，基本的趋势如下。

·按钮采用醒目、饱和度高的颜色，如橙色、蓝色，与网页背景色形成鲜明对比，使按钮从网页中跳跃出来，吸引用户的注意力。

总体上来讲，为了增加按钮的被点击率，色彩方面最好使用饱和度较高的。同时与整体页面颜色有较大的冲突性和融合性，从整体中跳出来，让用户一眼就能找到。

·文字颜色与按钮背景色对比强烈、醒目，以提高文字的可阅读性。

·按钮文字简洁清晰，以动词为主，具有诱惑力和行动力。

用户浏览网站的文字，往往只是浏览和扫描，所以需要一目了然，不拗口。有人说过：能够3个字讲明白的绝不用5个字（Dont use 5 words when three will do）。但还是有些电子商务网站的按钮文字过长，比如“Add to My Shopping Cart（加入我的消费购物车）”，用户需要更多的扫描时间，而且拗口，完全没有必要。

“立即购买/Buy Now”比“加入购物车”更具有煽动性和诱惑力，如果说立即购买相当于商场内的结账，那么加入购物车就只是将心仪的商品放入购物车，仍然有选择和判断的过程，相对来讲也就给用户更多的缓冲。国内几家电子商务网站同时使用了立即购买和加入购物车两个概念。

·较大的按钮尺寸，非常醒目。按钮尺寸的大小会影响到用户对于按钮的注意力以及移动鼠标的距离，从而影响用户操作的方便性。

根据费茨定律[2]，随着目标距离增加，定位运动时间加长；随着目标宽度增加，定位运动时间缩短。目标距离和宽度对定位运动时间的联合效应可用下式表示：

MT=a+b log2（2D/W）

从公式可以看出，如果目标宽度越大，而距离保持不变的话，那么鼠标运动时间就会越短。因此按钮尺寸变大，不仅使其变得更加醒目，也使用户更容易定位到目标。

[1]《107 Add to Cart Buttons of the Top Online Retailers》，Jason Billingsley著。

[2]费茨研究了定位运动时间与目标距离及目标宽度的关系。他要求被试者尽可能快地将钢笔从起点移向目标区MT为定位运动时间，a和b为常数，D为目标距离，W为目标宽度。这个公式称为费茨定律。式中的log2（2D/W）称为运动难度指数（ID）。

4.5.3　按钮的主次关系

当页面上同时出现2个及以上的按钮时，比如“继续”和“返回”，我们就需要根据按钮间逻辑关系、重要程度及使用场景等考虑其主次关系。在突出主要按钮的同时，有必要减轻次要操作的视觉重量。

Luke W和Etre运用眼动仪对图4-50的A、B、C三种方案进行了研究[1]。单从这3种方案的表面来看，A方案的按钮主次最明显，采用链接的方式取代取消按钮，明显弱化了次要按钮；B的提交和取消按钮除了先后顺序外，通过相同的按钮形式、背景色和粗字体等元素给2个按钮赋予了同样的视觉比重，提示用户2个按钮同样重要，主次不够清晰，那么用户就可能需要花更多的时间扫描和理解按钮的含义，从而引起潜在的错误操作；C将取消按钮背景色设为灰色，从视觉上削弱了次要按钮的视觉重量，对于用户操作就具有更强的引导性。

图　4-50

但是从以上3张眼动仪结果来看，B方案视线流也非常流畅，用户视线停留点和整体完成时间都优于其他2个方案，与原先预期不符，原因可能在于按钮的位置已经对用户起到一定的提醒作用，对明显的次要按钮用户快速扫描就完成了，对于用户的干扰反而越少；A、C虽然从视觉上削弱了次要按钮的地位，但是由于不够显著，用户反而需要更多的注意力去理解，从而干扰到用户。

[1]参见《Primary＆Secondary Actions in Web Forms》，Luke Wroblewski、Etre著。

4.5.4　按钮摆放的位置

按钮的摆放位置是一个看似不起眼的细节，但是如果错误地使用，很容易引起错误的操作。

某天，我去某移动通信商的网上营业厅充值话费时，提交的过程中遇到了如图4-51所示页面。

图　4-51

在前面操作过程中，我已经对相关选项进行了选择，在这个页面中，又再一次非常清晰醒目地显示了手机号码和充值金额等关键信息，浏览后我已经对该关键信息进行确认，但是当我习惯性地点击左边的按钮时，发现页面跳转，需要对新页面里面的信息进行修改，此时我才发现自己操作失误，增加了操作次数，浪费时间，并且导致在操作过程中明显的挫折感，网站的用户体验水平可想而知。如果这个不是唯一选择，那么在下次完成类似任务时，我很有可能会选择更优的替代方案（竞争对手的产品）。

这明显违背了Nielsen可用性原则中的符合用户使用习惯这一条。在Windows平台下，多年以来的标准是：只要这样的按钮出现在模式窗口的底部，则一定是“确定”在左、“取消”在右的组合[1]。因为用户一般都是从左到右的阅读顺序习惯，而且确认的几率远高于取消，放在前面也更合理。

提示：虽然Mac的顺序正好与Windows相反[2]，但是Windows用户比例远大于Mac用户，而且从逻辑上来讲，Windows的顺序更加合情合理。

Luke W和Etre的眼动仪实验结果也证明了这一点：在图4-52的6种方案中，E方案中确认/取消顺序与其他方案相反，结果只有E方案的任务完成正确率没有达到100%，而且用户的视线流、停留点等都比其他方案复杂很多，说明用户已经形成了确认按钮在左，取消按钮在右的习惯。

图　4-52

按钮虽然只是一个很小的页面元素，但是所有细节都对用户体验起着很重要的作用，总体上来讲需要在合适的位置放置合适的按钮，分清按钮的逻辑顺序和主次关系。对于重要的按钮，就让它更大、更醒目、更美观。

除了在之前章节中提到的几个设计要点，如按钮的主次、排列顺序、颜色、尺寸、文字内容及其颜色大小，操作上符合用户使用习惯之外，还可以从以下几个方面考虑。

[1]参考Vista用户体验指南及Sun公司的Java界面风格设计。

[2]在Mac平台下，标准恰恰相反：模式窗口底部的那组按钮是“取消”在左，“确定”在右。详见苹果公司人机界面指南。它背后的逻辑性似乎体现在下方右边的按钮（“确定”）总是与前进联系在一起，就像读书时的翻页动作。

4.5.5　减少用户定位时间

根据费茨定律，影响用户定位时间的除了目标宽度之外，还有鼠标移动距离。目标宽度越宽，鼠标移动距离越短，用户定位所需要时间也就越短。因此为了增加目标按钮宽度，除了增加按钮尺寸大小之外，还要增加按钮的可点击范围，最好覆盖整个按钮，方便用户定位。

至于鼠标移动距离，涉及按钮放置的位置，放在什么内容之后，放在角落或是页面中心，可以根据用户的使用场景和任务流程来设计。如淘宝的具体页面图4-53。

图　4-53

用户的决策过程往往从开始的购买需求/喜好进行初步的筛选，然后从列表页面初步了解产品图片、价格等相关信息，最后达到具体页面时，查看完大图片和基本参数之后，用户对于产品已经基本心中有数，这时候用户可能就会产生购物冲动，进行决策。当然在决策前用户可能还需要参考其他用户的评价、页面下方具体的产品描述等信息，但是这些信息的重要程度和必要性都远低于前面的信息，因此将购买按钮放置在基础参数数据之后，其他参考信息之前，而且放置在第一页醒目的位置，能够减少用户的鼠标移动距离。

在如图4-54所示的设计中，按钮与相关内容直接脱节了，一方面会增加用户移动鼠标的操作距离，更严重的是按钮并不显示在同一屏，用户可能会找不到按钮，不能点播歌曲，产生沮丧感。

4.5.6　相关性设计，增加按钮的可理解性

在购物车按钮中，我们已经看到很多按钮中使用了相关的图标，增加了按钮的可理解性和美观性，而且箭头、加号等小图标增加了用户的行动力。

图　4-54

除了图标之外，使用符合用户认知的颜色元素，也可以增加按钮的可理解性。如下边所示的图标中，将绿色与正面的“Create Account（创建账户）”联系在一起，红色与取消按钮联系在一起，这和日常生活中如对红绿灯的认知匹配，能够帮助用户快速理解和确认。

4.5.7　优化视觉效果，增加按钮的吸引力

通过优化按钮的视觉效果，包括按钮形状、样式、颜色和字体等，都可以增加用户的可识别度和吸引力，从而引导用户点击。Moode.Com在“Make button more clickable”中分别针对按钮的不同设计进行了对比（见图4-55）。

图　4-55

·从形状上来看，圆角效果的按钮优于方方正正的效果，显得更加有趣、不呆板。

·从样式上来看，浮出感的效果更优美，也更有可点击的效果。

·从背景颜色上来看，饱和度高的背景色优于灰色系，使按钮更可见，更生动。

·从字体上来看，正规的字体，与按钮背景色对比大的颜色更出众，它没有过多干扰元素。

4.5.8　操作的反馈

按钮是个交互性很强的元素，在操作完成后，给用户明确的反馈信息，如操作成功/失败等，能够给用户更好的体验。

4.6　操作反馈

4.6.1　什么是反馈，为什么要反馈

Nielsen可用性原则中有一条很重要的原则，就是系统应该提供及时有效的反馈。

反馈指的是用户在网站上进行操作之后，网站对其输入提供相应的反应和输出，使用户能够随时了解操作的结果和网站的当前状态，包括操作成功、失败、正在进行中和二次确认等。

对用户来讲，反馈是非常重要的，它能够使用户在网站上更有控制感和安全感。反之，没有反馈，用户就无法得知操作的结果，可能会产生迷惑或者不安全感，从而进行重复操作和反复的检查，此时提供确认信息或者确认邮件能够给用户提供更好的体验。如果在需要用户等待的情况下，没有给出相应的提示，如完成百分比、剩余时间等，用户就可能傻傻等待几分钟，失去耐心。请记住：用户浏览网站的耐心是有限的！

4.6.2　反馈的种类

有的反馈信息仅仅起着提示的作用，如操作成功以及进度条等，只需要告知用户操作的结果或者当前状态，不需要用户对其进行操作。而有的反馈除了提示用户之外，还需要用户进行下一步操作，包括二次确认以及错误提示等。下面我们分别分析以下几种不同的反馈信息。

1.操作成功提示

成功提示是最为简单的一种提示，仅仅起到提示的作用，让用户了解操作结果即可，因此在设计上不应该中断用户的操作流程，以保证用户操作的流畅。

常见方式包括以下几种。

通过文字等状态的细微变化体现出操作的成功，用户能够注意到，但不明显，不会占用用户过多的注意力，不需要进一步的操作。如豆瓣中添加小组的操作前后，通过文字状态的变化体现出操作的成功结果（见图4-56）。

某些操作成功之后，网站通过在当前页面跳转，展示出反馈信息，同时系统仍将自动跳转到目标页面，提示信息非常明显，不需要用户操作，但占用用户时间和过多注意力（见图4-57）。

还有一种方式使将要操作成功的提示信息通过弹出对话框的方式展现给用户，需要用户点击按钮进行确认，增加用户不必要的操作（见图4-58）。

图　4-56

图　4-57

图　4-58

对于仅用于提示的反馈信息，只需要让用户知会即可，不应该要求用户进行不必要的操作。简单分析一下用户的使用场景，当用户操作成功且接受到网站的反馈信息，知道当前任务已完成，那么用户通常可能停留在当前页面或离开当前页面，或者继续下一个任务，在这几种操作流程中都没有弹出窗口的必要性，这只会打断用户的操作。

2.失败提示

当用户操作失败时，通常网站提供出错提示，任务流程将被打断。不同网站的出错提示中包含的内容、展现方式等都不相同。

对比以下2种不同的设计方案，同样是输入密码出错，一种是在输入密码框邻近位置进行提示，另一种是弹出对话框。从信息的明显度上来说，后者当然更优，但是需要用户点击确认之后才能更正错误，操作过于繁杂。前者的提示信息通过显眼的红色字体进行提示，如果能够直接将鼠标焦点移至出错位置，就能更快地让用户定位错误，进行纠错的操作（见图4-59）。

图　4-59

注：需要注意的是，同一个网站内，类似的情况最好采用统一的交互方式，避免用户迷惑和重复学习。

对于纠错，Amazon提供了非常人性化的服务，不仅通过明显的颜色标识突出出错位置，便于用户定位，同时增加自动纠错功能，给出建议的解决方案，优化了用户纠错的操作体验（见图4-60）。

图　4-60

用户浏览网站出错时，很容易导致用户的流失，但好的404页面设计能够改善用户的不良体验，减少用户的流失率。如淘宝的404页面内容非常全面，不仅包含了出错的反馈信息，而且包括热门搜索关键字、纠错建议以及其他相关推荐，引导用户继续浏览，增加用户的黏性和网站的PV（见图4-61）。

图　4-61

3.二次确认

对于涉及安全或者其他需要慎重的重要操作，为了保证安全性，避免出错，网站通常会设置二次确认的功能。

最常见的如银行支付和一些重要的操作。网站往往通过弹出对话框等方式，先中断用户的操作，给用户思考和确认的时间，同时可以大大减少误操作的概率（见图4-62）。

图　4-62

但换一个角度，对于非误操作、的确需要执行当前操作的用户来讲，增加了额外的操作。如果这个操作可以撤销，那么Google的方式更为简洁和人性化，可以在完成操作之后，增加撤销的功能，既避免了不必要的额外操作，也能够对误操作的用户提供返回的功能，不需要担心操作之后的后果（见图4-63）。

图　4-63

4.进度条

当前操作正在进行中，且持续时间较长的时候，网站需要提供进度条，显示任务完成的进度、完成百分比、剩余处理时间等信息，让用户能够心中有数，给用户一种一切尽在掌控之中的感觉。根据Jakob Nielsen提出的相应参数[Miller 1968；Card et al.1991]，1.0秒是用户保持不间断的思维流的限定时间，即用户会注意到这样的延迟，因此如果操作超过1秒时应提供相应的提示信息，如进度条等。而10秒是保持用户关注当前对话框的极限时间，除了提供提示信息之外，还需要提供完成百分比或者剩余时间等信息，便于用户进行其他操作，不然用户期待会大打折扣。

尤其是很多安装、升级等操作，持续时间往往超过10秒，因此在页面上显示进度条、当前速度、剩余百分比等信息，让用户能够心理有数（见图4-64）。

图　4-64

根据Chris Harrison等人对进度条的研究，结果如图4-65所示[1]。

图　4-65

从图4-65中可以发现：

凡是曲线中有明显停顿的，用户所感知的进度都比较慢，而进度中一直在加速的，用户都会觉得进度走得很快。因此进度条的设计应该避免明显的停顿，同时他们指出虽然一个稳定的系统应该使用线性的进度条，但是如果能应用加速型的进度条，确实能小幅地改善用户体验，减少用户等待的不耐烦。

但是当进度并不能被准确测量时，进度条并不是一个很好的选择，实际情况下可以选用不断重复的动画来代替，就像Windows开机时的滚动进度条。

总的来说，反馈信息根据不同的类型以及使用的场景，需要选择适合的交互方式和呈现内容。但基本的，反馈信息应该是及时的、有效的、准确的，以帮助用户快速了解当前状态。

[1]参见《Rethinking the Progress Bar》，Chris Harrison、Brian Amento、Stacey Kuznetsov、Robert Bell著。

4.7　验证码

4.7.1　什么是验证码

验证码指的是用户在操作前网站要求输入以进行验证的内容，通常包括数字、字母、汉字或者不同方式的组合，防止黑客获取他人密码，或者重复操作使系统超负荷，常见于登录、注册和评论等场景中。

4.7.2　为什么需要验证码

早期的网站并不存在验证码这一元素，但由于现今有部分恶意程序通过重复尝试，获取他人密码，并批量注册、发表评论等，影响用户的正常使用，并致使系统超负荷甚至崩溃。因此为了防止这些安全问题，“验证码”应运而生，使机器无法有效识别，从而有效遏制系统的反复尝试。

4.7.3　验证码带来的困惑

1.用户操作的额外负担

据统计，大多数用户都需要1～3次才能够登录成功，70%左右的原因是验证码出错。不难看出，验证码不仅在操作上增加了用户的额外负担，也大大增加了出错的几率。对于目的明确的任务型用户来讲，即使失败，也往往不得不多次尝试输入，但这也将严重损耗用户的耐心。对于非必要的用户，那么极有可能直接放弃操作，导致用户登录率等的降低，因此应该尽量减少不必要的验证码。

从验证码的出发点来看，是为了防止短时间反复的多次尝试，但对于真正的用户来讲，只要知道正确的密码，就不会出现反复尝试，因此验证码就显得不是那么必要。如果能够区分真实用户跟机器的差别，那么可以只在怀疑是恶意程序时才要求输入验证码，就可以简化用户的操作，降低出错率。区分的主要指标就是是否在短时间内多次出现尝试输入，且均失败的情况，因为程序基本不可能在几次之内就猜对密码，而知道密码的真实用户出现多次失误几率也非常小。目前大部分网站都将次数定在3～5次，当超过指定次数时，要求输入验证码，以减少网站被恶意攻击的风险[1]。

Gmail在第一次登录的时候，并不要求输入验证码，但多次输入出错时，就会增加验证码的输入，起到了减少用户负担和防止恶意程序的双重效果（见图4-66）。

相反的，现在有些网站将验证码看成网站不可或缺的元素，甚至达到了滥用的程度。不管是登录、注册、提交、收藏等操作时，都要求用户输入验证码。尤其当用户已成功登录（即用户身份已被确认）、未发生多次反复“可疑”操作时，都不应该使用验证码来增加用户的额外负担。如阿里旺旺在每次添加好友时都会要求输入验证码，甚至是单次精确添加好友时，使操作过于复杂（见图4-67）。

图　4-66

图　4-67

2.验证码很难辨认

随着恶意程序的不断升级，部分程序已经开始采用文字识别技术，自动识别图片验证码中的文字，破坏验证码的作用，因此有些网站通过背景干扰纹、字体的扭曲等不同方式增加验证码的识别难度。但同样的，这也增加了用户的识别难度。再加上数字“1”和字母“l”、数字“0”和大写字母“O”，或者一些字母的大小写本身就很难区分，直接导致用户出错率提升，让登录等操作变得更加痛苦。

因此如何增加程序对验证码的自动识别难度，同时又增加人眼识别的正确性，除了在用户输入前提供“重选一张”的替补方案，在出错后自动提供新的验证码之外，更应该在验证码本身设计上下功夫，如减少难以区分的那些数字或字母、或者生僻的文字等的出现几率等。

3.及时地反馈，避免信息丢失

相信大家都碰到过这样恼火的情况，完成前面的所有输入操作后，却因为最后的验证码错误功亏一篑，导致信息丢失需要重新填写。

这种设计非常不合理，很多用户没有耐心继续填写，直接流失。目前较好的改进方案主要是对验证码进行及时的验证，并反馈用户验证是否成功，如果错误直接在当前窗口完成，不影响之前所有操作的结果（见图4-68）。

图　4-68

4.减少切换输入法

在输入验证码时，经常需要切换输入法，包括中英文切换、大小写切换等，会影响输入的效率和正确率。

百度空间的评论功能在输入验证码时，将屏蔽当前输入法，自动调用英文输入法，避免了用户的切换操作。

Google等在验证码的设计中不区分大小写，减少了用户的切换，从而提高效率，减少出错率。支付宝等只用了数字验证，在输入上更加方便（见图4-69）。

图　4-69

[1]QQ除了这种情况外，当在异地登录时，也会要求您输入验证码，并确认是否正确，以防止QQ号码被盗。

4.7.4　其他方式

在验证码设计中，很多网站也采用了独特的方式。

如新浪在评论中提供了2种方式，包括点击查看[1]和收听验证码。其中收听验证码照顾了色盲或者其他视力较差的人，在可及性上做得非常细致[2]（见图4-70）。

图　4-70

有些网站不再采用传统的验证方式，而是采用提问式的方式进行验证（见图4-71）。

图　4-71

这种方式较为智能，能有效防御程序的攻击，而且也相对有趣。但需要把握好问题的度，保证目标用户都知道答案，否则问题过难将导致用户无法继续后面的操作。

验证码虽然是个很小的细节，但是如果设计得不好，却可能直接导致注册登录率的下降，评论等互动性的减弱，因此也需要引起网站更多的关注。

[1]查看验证码还需要再次点击，又将增加一次用户的操作。

[2]其必要性需要研究目标群体的特征并评估其实际效果后决定，如盲目使用，反而会使其变成鸡肋的功能。

第5章　其他

细节决定体验，除了前面提到的整体设计、功能区设计以及页面元素的设计之外，还有很多细节需要斟酌，包括字体的设计、文字的语气、图片的质感等。

5.1　文字设计

文字无疑是网站上最重要的元素，分散在网站的每个角落。本节主要讲述文字设计，包括字体的选择、文字的颜色、字号的大小、字间距等设计，让用户能够快速扫描内容，同时尽量减少视觉疲劳。对于文字内容本身[1]在这里就不再多加叙述。

5.1.1　字体类型

不同的字体会呈现出不同的视觉效果和网站个性，不同的网站定位和内容性质等也都需要不同的字体。我们先来看一下常用的一些字体类型。

1.手写字体和艺术字体

手写体：包括那些看起来类似钢笔或毛笔、铅笔等手写而成的字体。

艺术字体：很容易识别，能表达不同的情绪和内涵，但不能通篇使用[2]。

这2种字体多变、有趣、亲切、个性化，适用于Logo和Banner区的文字，能够突显网站个性，使用户印象深刻，如迪斯尼（Disney）的Logo选择比较卡通、独特的艺术字体，也成为它的品牌形象（见图5-1）。

某些手写或者艺术字体也适用于网站的导航等部分，能够突出个性，富有生趣，尤其是博客或者Web 2.0网站等较为个性化的网站（见图5-2）。

图　5-1

图　5-2

注：个性化的字体需要考虑兼容的问题，很多字体在不同的操作系统中不能兼容。当然也可以做成图片的形式，但是如果导航中使用图片会明显影响SEO。

2.衬线体

维基百科对于衬线体（Serif）的解释是：有衬线的字体，基本上横细竖粗。衬线指的是字形笔画末端的装饰细节部分，它的作用是强化笔画的特征，从而使得阅读和识别更为容易。中文中常见的衬线体如宋体，英文中最常用的是Times new Roman，也有些使用Georgia。

3.无衬线体

无衬线体（Sans-serif）指的是那些笔画末端没有衬线的字体，它几乎保持均匀的粗细，英文中常用的包括Arial、Helvetica、Tahoma、Verdana、Courier等；在中文通常称为黑体，这类字体笔画粗细基本一致，没有衬线装饰，较为醒目。

在传统印刷中，衬线字体用于正文印刷，因为它被认为比无衬线体更易于阅读，是比较正统的。相对的，无衬线体用于短篇和标题、标志等，能够读者注意，或者提供一种轻松的气氛。这也是传统印刷中经常使用宋体作为正文，将黑体作为标题的原因之一。但是由于显示器上显示像素和锯齿的限制，衬线体的可识别度大大降低，换句话说，无衬线字体更适合在电脑显示器上显示。因此，Windows Vista中的中文预设字体已经从原来的衬线字体（宋体或细明体）改变成了无衬线字体（微软雅黑或微软正黑体）[3]。

这2类字体较为正统，适用面广，常用于门户或者企业网站。在选择无衬线字体时，还必须考虑字体在不同操作系统和浏览器中的兼容性，保证字体能够在所有情况下正常显示，如Arial能在任何操作系统和浏览器中显示。但有些windows only的字体，在Mac OS等操作系统中就不能兼容，导致页面不能达到预期的效果。同时结合网站自身特点，选择具体的字体类型，使用户尽量专注在内容本身，提高网站内容的辨识度和可读性。

知名网站如Apple将“Lucida Grande”（无衬线体）作为网站内容的首选；国内几家门户网站中文均采用宋体（衬线体）作为默认字体，英文字体如淘宝采用Tahoma、网易采用Arial、腾讯采用Verdana等无衬线体作为默认字体。

[1]前面已经提过，文字内容更多涉及编辑的专业性和更新的及时性等，因此在这里暂不详述。

[2]参见《Non-Designers Design and Type Book, Deluxe Edition》第10章，Robin Williams著。

[3]参见维基百科，衬线体词条。

5.1.2　字号

除了字体类型之外，选择合适的字号也会大大影响文字的可阅读性。

1.字号单位

首先我们来看一下字号的单位。传统印刷体常使用Pt等作为单位，是物理上的绝对长度。但PC上是以像素（px）为单位显示的，和印刷体有所不同，因此字号常采用相对长度单位。

顾名思义，相对长度单位表明了其长度单位会随着它的参考值的变化而变化，不是固定的，而绝对长度单位是一个固定的值。

表5-1是常见的几种相对长度单位和绝对长度单位。

印刷体中pt等绝对长度单位，在计算机上并不适用。因为计算机上是以像素为单位显示的，不同的分辨率、不同的显示器尺寸乃至不同的浏览器设置等都可能影响到字体的物理大小，使用绝对长度可能会导致无法准确地体现出预期的效果。

相对长度单位中，很多设计师都习惯采用px作为文字大小的单位，优点在于使用这个度量单位会很容易在不同的浏览器和平台下获得一致展示，但缺点是其无法支持文字缩放的功能。如新浪、搜狐、网易、Yahoo！中国等门户网站都使用了px作为文字的单位，在IE中显示效果较好。如果在其他浏览器中使用文字缩放时，就可能会导致文字的错乱。

国外网站较多采用em作为字体单位，在默认字号中，em相当于字母M的高度。使用em的优点在于可以支持字体缩放，对弱视群体更为友好，但是它可能随元素的不同而变化，很难保证在不同浏览器下效果的统一性。Yahoo！、MSN、Microsoft等国际网站都使用em。

其他常用的还包括百分比，这和em类似，也是以某文本字号为基础，通过调整百分比调节文字大小。

在《无懈可击的Web设计》[1]一书中提倡使用关键字（large、small等）再配合百分比来调节，具体可以参见该书。

2.字号大小

虽然很多浏览器都支持字体缩放，但根据用户的浏览习惯，大部分仍然不会使用这个功能，而且每次浏览都需要调整字号也会给用户带来不便，因此选择合适的默认字号大小，对于内容的可读性至关重要。

国外已有英文阅读相关的研究表明，字体过小或过大都会使阅读速度下降[2]。国内也有研究证实中文在50cm的阅读距离、19寸LG液晶显示器（分辨率1280×1024），背景色对比为100%时，笔画少、中、多3种中文字体的临界大小分别为（8.43±0.25）pt，（9.29±0.51）pt，（10.89±2.75）pt。低于临界字体大小的阅读速度随着字体增大呈明显上升趋势，不同字体大小组间的阅读速度差异有显著性（P＜0.01）[3]。如果拿笔画居中的文字来讲，为了取得较快的阅读速度，应该选择9 pt左右的字号，约为12px。对于笔画多的文字，应该选择14px左右的字号。

当然随着屏幕分辨率的变化，也应该选择不同的字号大小，这里就不具体叙述了。

从字体的美观性来讲，目前中文网站常采用的宋体，在配合合适行距的情况下，12px、14px最为美观舒适[4]。

结合阅读速度和字体美观性两大因素，现在网络上最流行的中文字体大小为9pt，约为12px。我们来看一下目前知名网站使用的字号大小。

·网易：页面基本都采用12px。

·腾讯：左边2栏内容采用14px，右边栏内容重要性较低的采用12px；导航条一级分类采用13px, soso和导航条二级分类采用12px。

·新浪：除各版块标题使用14px外，所有内容和导航条一级分类均采用12px。

·百度中文：网页用的是12px、14px的字号。

而一些国外网络公司一般用的是13px的字号。在中文网页中，13px字号在不同的浏览器显示上会有微小的差异，12px、14px字号则不会出现这种状况。

我们来对比12px和14px的差异，正好近期腾讯首页进行了改版，其中有一条就是把首页大部分内容从12px改为14px，我们可以看到对比的效果（见图5-3）。

图　5-3

可以看出，去除了文字链接中的下划线，加上字体的增大，后者的内容可读性明显增强。

目前很多设计师使用px作为字号的单位，但为了保证各浏览器下文字均可缩放，字号单位使用em会更有优势，一般来说，浏览器默认1em=16px，因此12、14px可以设置为0.75em和0.875em。

[1]作者Dan Cederholm强调：不要用px等缺少灵活性的单位来作为字号单位，而应该用关键字（large、small……）再配合百分比来调节。

[2]参考Legge GE, Rubin GS, Luebker A.Psychophysics of reading.V：the role of contrast in normal vision[J].Vision Res，1987.

[3]Legge GE, Pelli DG, Rubin GS，等Psychophysics of reading.I：Normal vision[J].Vision Res，1985.参见《中文字体大小、笔画数和对比度对阅读速度的影响》，祝莲，《眼视光学》杂志。

[4]最常采用的行距为150%，最多不要超多180%。Apple等网站采用150%行距。

5.1.3　字体颜色

网站上字体的颜色设定和网页本身的背景色息息相关，朱祖祥和曹立人的研究[1]中发现：良好的目标色和背景色的使用，能够显著提升操作绩效。原则上，字体的设计首先要增加文字的可辨识度和可阅读性，提高阅读速度，其次需要适应长时间的操作，提高眼睛的舒适度，降低视觉负担。

1.增加对比度

为了增加文字的可辨识度和可读性，首先字体颜色与背景色需要有一定的对比度，使字体从背景中跳出来。朱祖祥和曹立人、王安祥以及陈明德等人的研究都表明：文字和背景色如果有较高的对比度，用户的操作绩效就越好。

目前已经有很多研究对不同的颜色组合进行测试，如果光从可辨识度来讲，网页上较适合使用的对比包括白色/黑色、白色/蓝色、黄色/黑色、紫色/白色、黑色/浅紫等对比较大的组合。

朱祖祥和曹立人（1994）研究证明：当目标/背景颜色组合为白色/黑色、黄色/黑色、绿色/黑色等对比较大的组合时，效率较佳，其中绿色/黑色效果较差。

也有研究拿目前网站上常用的字体和背景色组合进行了研究[2]，主要包括白底黑字、白底蓝字、白底紫色字体、浅紫背景黑文字、黄背景黑文字5种，其中搜索正确率从高到低依次是，黄背景黑文字、白底黑字、白底紫色字体、浅紫背景黑文字、白底蓝字。

另一项研究以黑底白字、蓝底白字、黑底绿字、黑度橘色字、黑底金黄色字等5种组合进行了研究，结果指出，黑底白字最优，其次为蓝底白字。

Chung等人（1987）发现以下5种组合方式对比度都较高，文字的可识别度都较高，但是也有优劣之分，顺序依次为：蓝底白字、黑底琥珀色、黑底白字、黄底白字、白底黑字。

从以上研究发现，较适合的组合包括蓝底白字、黑底琥珀色、黑底白字、黄底白字、白底黑字。

2.应该规避的颜色组合

在研究中发现红色、蓝色等会影响到视觉的舒适度。红绿颜色的组合会降低视觉绩效。所以应该规避的颜色组合包括：蓝底红字、红底蓝字或者黑底红字与黑底蓝字、绿底红字、黑底绿字等。

Weston在1954年曾指出眼睛对于红色光线需要较多的视觉调试，Kinney等人（1983）提出红色光线可能产生较多疲劳的趋势，NRC1983的报告中建议：慎重使用红色、蓝色搭配，因为它会造成眼睛对颜色的错乱。

Mahnke等人在1987年提到互补色的设计容易造成伤害；并且发现在黑色背景上使用红色和蓝色的文字，会导致较低的阅读绩效与不舒适感，最坏的情况为蓝底红字、红底蓝字或者黑底红字与黑底蓝字。Matthews在1987年发现以蓝色或红色显示文字比以绿色、黄色或白色显示文字的搜索速度略慢；同时在视觉疲劳方面，蓝色与红色将使得用户感觉较不舒适并产生较多的疲劳症状。

王安祥在研究中发现绿底红字效果与黑底白字、蓝底白字、蓝底黄字及白底黑字之间有显著差异[3]。屏幕为绿底红字时的视觉绩效显著低于黑底白字、蓝底白字、蓝底黄字及白底黑字。

如目前主要门户网站使用的均是白底黑字或者白底蓝字。门户网站由于文字量很大，背景色不宜过于明显和突出，而白底黑字或者白底蓝字对比度显著，能够提高用户的阅读速度和视觉舒适度。如网易采用了纯黑字体，新浪和搜狐使用了深蓝色，腾讯改版之后将首页大部分字体由白底黑字改成了深灰色。

对比度高固然是一个因素，颜色的组合是否符合用户的视觉审美也非常重要，需要综合考虑以上因素，选择网站适合的组合。

[1]参见《目标-背景色的配合对彩色CRT显示工效的影响》，朱祖祥、曹立人，心理学报，第26卷第2期，128-135（1994）。

[2]参见《屏幕类型、文字/背景色彩组合及中文字型对使用者视觉绩效及视觉疲劳的影响》，王安祥、陈雨。

[3]参见《屏幕文字/背景色彩组与相关作业特性对视觉绩效与视觉疲劳影响的研究》，陈明德。

5.1.4　字体的样式

常见的字体样式（style）有4种：正常体（Regular），斜体（Italic），粗体（Bold），粗斜体（Bold Italic）。相信熟悉Office软件的用户应该对此非常熟悉了。

这几种字体样式的属性通常适用于以下情况：

·正常体：绝大部分的文字应该采用正常体，避免样式对于用户正常阅读的干扰。

·粗体：粗体能够让文字从大部分正常体文字中脱颖而出，使内容的重点信息得以突出，从而增加内容的可阅读性。适当地使用粗体可以将用户的注意力吸引到那些重要的文字上，但过多使用却会削弱其影响。

·斜体：常见于注解、英文书名或者被引用内容，能够体现出这些内容的特定属性。有时，文本框中的提示信息也使用斜体。

·粗斜体：较少使用。

5.1.5　设计要点

总的来说，对于同一类型的文字，最好使用相同的字体及字体大小、样式等，保持统一性。例如，所有英文书名都使用斜体，所有副标题字体都设置为粗体、四号字。

如果需要对比，突出重点内容，那么可以利用文字的字体、字号、字体颜色以及文字样式等元素，可以只使用其中一个元素，也可以组合使用，体现出差异性。但需要注意的是，使用对比效果时应该避免差异过于细微，因为这样完全起不到对比的效果，却会让用户迷惑到底是网站设计不够专业而存在的差错，还是故意设计出的有差异的效果。

除了前面在字体、字号、文字颜色、文字样式中已经提过的设计要点之外，还需要规避一些常见的错误：

·使用超过3种以上的字体。不同的字体往往代表着不同类型不同层级的内容，字体太多会使页面内容显得混乱，不够专业。

·不要使用不停闪烁的文字。闪烁的文字的确可以吸引用户的注意力，但较长时间的闪烁却会给用户带来视觉疲劳。如果内容需要用户较长时间浏览的话，就尽量不要使用闪烁的文字。

5.2　网站文字的语气

用户在浏览网站的时候，其实也是用户和网站相互交流的过程。好的网站设计，应该是礼貌、谦逊和亲切的；在用户出错时，不要使用责怪的语气；有时根据自身的特色和需要，也可以表现出网站的幽默等。

5.2.1　网站应该懂得基本的礼貌

正如日常生活中人与人之间交流的基本礼仪，网站也需要体现出最基本的礼貌，多用“请”、“谢谢”和“欢迎”等。

如在用户登录网站时，使用“欢迎”。在用户需要等待的时候，提示“请稍等”，并提供进度条，给用户提供相应的反馈（见图5-4）。

图　5-4

5.2.2　网站应该是谦逊、亲切的

网站应该把自己定位为服务用户的角色，体现出网站的谦逊和亲切，而不应该把自己定位为网站的“统治者”。

曾经，用户在申请加入百度联盟通过后，会收到这样一封邮件：“百度已经批准你加入百度的联盟”。批准，往往是领导对下属的语气。网站用这种居高临下的语气，在无形中影响到用户的体验。后来改为“祝贺你成为百度联盟的会员”之后，语气就完全不一样了，表示网站的欢迎，用户不会再有网站居高临下的感觉。

现在SNS网站往往都通过使用亲切、口语化的文字，拉近网站和用户的距离，增加用户对网站的好感度和信任度（见图5-5）。

图　5-5

5.2.3　不要使用责怪用户的语气

出现错误时，不要使用责怪用户的语气，因为此时用户可能已经有点沮丧了。网站应该指出问题所在，并提供良好的解决方案，帮助用户解决问题，提供返回首页或者相关页面的链接，引导用户继续浏览网站，而非使用户离开网站。

在页面出错时，淘宝曾经有一版404页面[1]的提示信息相当客观，没有责怪用户的语气，而且通过幽默的语言，减少用户的沮丧感（见图5-6）。

图　5-6

[1]404页面指的是当前页面出错时返回的页面。

5.2.4　网站有时也可以表现出幽默的一面

有时候，网站也可以体现出其幽默、俏皮的一面。

图5-7是抓虾某次休站时的设计，使用了有趣的配图，但文字更加出彩：“为了更快的抓虾，我们在搬家……”。使用户在浏览的时候，即使“碰壁”，不能浏览到网站内容，也能莞尔一笑。

图　5-7

5.3　图片质感

相对文字而言，图片能够给人更大的视觉冲击，吸引用户更多的注意力。在PPT的制作中有一条很经典的理论：图优于表格，表优于文。其实在一定程度上这也适用于网页的设计。太多文字会给用户造成视觉疲劳，找不到重点。而图片和文字的结合，则能减轻用户的视觉负担，同时更好地引导用户浏览网站内容，使网站内容更加直观生动。

很多网站在图片选择上过于草率，图片清晰度或者质感较差，从而使网站整体质感下降，或者与文字的相关度低，不是引导用户，反而可能是误导用户。有时候图片的视觉冲击力不够，不能够很好地体现出网站的氛围和定位（见图5-8）。

优质的图片不仅能增加用户点击率，也能给用户带来更好的视觉感受，提升网站的层次，提高用户对网站的认可度和忠诚度。

图　5-8

5.4　文字标题

对于内容型网站，文字标题的作用不可忽视。

首先，标题应该具有吸引力。标题其中一个重要作用在于促使浏览者点击它并进入内容页，所以具有吸引力是一个好标题的要素。目前网站编辑常对内容进行总结，或者适当加入吸引人的元素，如标题“×××——每个人都应该知道的方法”、“×××的十要素”、“×××不为人知的秘密”“×××的捷径”等都是具有强烈吸引力的标题。如果标题不具有吸引力，即使内容再精彩，也很容易会石沉大海。

标题应该尽量简洁不啰嗦。标题其实是内容的简缩，在有限的页面空间中展现给用户更多的信息量，让用户快速浏览和筛选，并且对于感兴趣的内容可以点击查看更加详细的信息。不然，过长的标题不仅会让页面显得凌乱，减少展现的内容量，同时也会让用户抓不到重点。

有吸引力的标题不仅能够吸引用户点击，还影响到搜索引擎优化。对于搜索引擎蜘蛛来讲，标题的优先级高于内容正文，因此在标题中使用更多的关键字，可以提高内容在搜索引擎中的排名，增加被用户搜索到的几率。

影响网站用户体验的元素远不止上面提到的这些，还包括网站的信息架构、内容和视觉设计这些最为核心最为复杂的部分，由于这些在其他书中已作了更为详细更为专业的分析，因此在本书中就不再提及。除此之外，还有网站品牌营销、网站速度、稳定性、兼容性、宽窄屏的设计、搜索引擎优化等也都是非常重要的因素，在设计开发网站时都需要注意。

其中兼容性指的是网站应该能够在不同浏览器中正常阅读和操作。目前不同浏览器都有一定比例的用户使用，因此应该照顾到所有用户的需求。

宽窄屏的设计指的是随着硬件设备的更新换代，用户使用屏幕分辨率开始出现两极化，设计师在设计网站的过程中也需要考虑到这些因素，满足多种不同屏幕分辨率的用户的需求，给用户带来最优的阅读体验，使网站的设计更加人性化。

附录1　常用的设计原则

7±2原则

由于人类大脑处理信息的能力有限，它会将复杂信息划分成块和小的单元。根据乔治A米勒（George A.Miller）的研究，人类短期记忆一般一次只能记住5～9个事物，因此在需要用户记忆的内容项不应该超过7个。这一事实经常被用来作为限制导航菜单选项在7个以内的论据，但由于导航项主要通过辨识而非记忆，因此这个原则是否适用还有待进一步的研究和确认。

2秒原则

即用户没有必要对某些系统响应等待2秒以上的时间，比如应用程序转换和开始的响应时间。选择2秒有点武断，但确是一个合理的数量级。可靠的原则就是：用户等待时间越少，用户体验越好。

提示：在4.6.2节中已经提到过这个时间的选择，具体可参考前面部分内容。

3次点击原则

根据这个原则，如果用户在3次点击中无法找到信息和完成网站功能时，用户就会停止使用这个网站。换句话说，这个原则强调明确的导航，逻辑架构和后续站点的层次结构。在有些情况下，多增加一次点击操作就可能流失一半用户，但大多数情况下，点击的次数是无关紧要的；如果用户总是能知道他们现在在哪儿，他们去过哪儿，且在网站上感觉有完全的掌握权的话，用户应该可以接受更多的点击次数。

80/20原则（帕累托原则）

80%的结果是由20%的主要原因造成的，因此帕累托原则又称80/20原则。这是商业中的基本经验法则（“80%的销售额来自20%的顾客”），但也可以应用于设计和可用性。举例来说，需要花80%的时间去优化最重要的20%的常用操作，最大限度地利用有效的时间和人力等达到最优的效果。

费茨定律

由保罗・费茨（Paul Fitts）发表于1954年，费茨定律模拟了人类活动，以目标距离和目标规模大小为函数，预测了迅速移动到目标区所需时间。该定律通常应用到鼠标的移动，访客就必须从A点移动到B点。例如，通过增加目标大小、减少移动距离来达到缩短移动时间的效果。

倒金字塔

倒金字塔是一种在文章开头表达总结文字的写作风格。这种方式使用了新闻业中著名的“瀑布效应”，新闻作者试图让他们的读者即时知道他们的报道的主题。文章以总结开头，接着是关键点，最后是那些次要的细节，如背景资料。由于网络用户需要即时的满足，这种倒金字塔写作风格，对于网络写作和更好的用户体验是非常重要的。

“足够好”

网络用户不喜欢用最佳方式找到他们寻找的信息。他们对最合理和最健全的解决问题方案不感兴趣。相反，他们永远扫描他们认为“足够好”的快速解决方案。在网络中，这种方式准确地描述了用户的满意度：即使在长远看来其他一些替代方案能够更好地满足他们的要求，用户仍然会使用一个“足够好”的方案解决问题。

附录2　Nielsen可用性原则

系统状态可见性（Visibility of system status）

通过在合理时间内的合适反馈，系统应该让用户了解正在发生的事情。

系统与真实世界的关联性（Match between system and the real world）

系统应该以用户熟悉的语言、文字、词汇及概念来呈现，而不是使用系统导向。遵行真实世界的转换，将可以让信息以自然并具有逻辑的方式呈现。

使用者的控制度与自由度（User control and freedom）

用户时常以尝试错误来选择系统功能，当操作出错时，系统应该提供能自由离开的“出口”，支持返回与撤销等。

一致性和标准（Consistency and standards）

同一产品内或同类产品中，对于相同的内容、操作等应采用一致的名称和交互方式。用户不应该猜测同一动作是否使用不同的词汇、状态或动作，保持一致性能够使用户利用已有的知识来执行新的操作任务，并可预期操作结果，增加用户学习和理解操作界面的速度。除此之外，还要考虑到浏览器的兼容性，使内容能够对全部或尽可能多的用户正确显示。

预防错误（Error prevention）

在即将出现错误前，预防出错是系统设计时需要考虑的事情。不管是移除容易出错的条件，或是让用户再次确认他们是否要执行接下来的操作。

识别，而非回忆（Recognition rather than recall）

尽量减少用户需要记忆的内容。在填写过程中，系统应该在适合的地方进行提示，或者直接提供选项，让用户可以直接识别进行选择，而不需要记忆太多信息和操作步骤。

灵活性与使用效率（Flexibility and efficiency of use）

网站通常可以使用快捷方式来提高使用效率，同时满足有经验用户和非经验用户的需求。对于用户常用的操作可以提供快捷方式或者将其作为默认选项。

视觉美化与简化设计（Aesthetic and minimalist design）

视觉美化不仅可以给用户带来视觉的享受，也可以提高系统的可用性。对于不必要的或者优先级低的信息、操作应该尽量简化。

帮助用户识别、诊断并从错误中恢复（Help users recognize, diagnose, and recover from errors）错误信息应该以清晰易懂的叙述文字呈现，而不是错误代码，并且精确地指出问题以及提出建设性的解决方案，帮助用户从错误中恢复。

帮助与说明文件（Help and documentation）

即使是最好的系统也不能没有说明文件，系统也需要提供帮助与说明文件。这些信息应该很容易被找到，协助用户完成任务。

附录3　延伸阅读（推荐网站）

Yahoo！Design Pattern Library（YDN）：http：//developer. yahoo.com/ypatterns/

Microsoft Guideline：http：//msdn. microsoft.com/en-us/library/aa511440.aspx

IBM Human Ability and Accessibility Center：http：//www-03. ibm.com/able/guidelines/web/webforms.html

SAP User Interface Guidelines：http：//www. sapdesignguild.org/resources/uiguidelines.asp