作者：李清
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
见微知著——Web用户体验解构试读：
前言
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（尼尔森）可用性原则，包括系统状态可见性、系统与真实世界的关联性、预防错误等。这些原则虽然简洁通用，但每个原则在软件、网站等不同载体上的适用性以及各原则的权重也不一样，往往只能对设计师起到方向性的指导，很难落实到具体的设计过程中。其他ISO等工效学原则也存在同样的通病。
与此同时，网站自身也很少形成具体可实施的、适合自己网站特色的设计规范，往往更多依赖于交互设计师和视觉设计师的感性设计，也就是依赖于设计师的审美能力、想象力、创造力以及设计经验，不够规范。交互设计倡导的就是“It depends”的精神，没有最完美的设计，只有最合适的设计。因此交互设计时，需要理性地从用户的使用习惯、喜好、期望等角度，结合之前的设计、研究结果，选择最适合网站自身特色的交互方式。如果没有设计规范或者相关的设计、研究结果，设计师往往需要不断地尝试、借鉴和摸索，花费大量的时间和人力，对网站进行设计或者改进。
另外，还有一个常见的现象是很多互联网公司的产品经理比交互设计师来得强势，没有规范、没有充足依据的设计方案，很难说服产品经理采纳您所推荐的设计，因为这很可能会增加开发人员的工作量。而且没有规范的约束，网站设计的统一性和最优化也很难得到保障。总的来说，交互设计无章可循是困扰很多交互设计师、产品经理的问题，这也是目前交互设计亟待解决的问题（当然，现在很多网站已经通过数据分析、可用性测试、深度访谈等方法获取相关依据来改进网站设计）。
因此本书希望从一个新的角度，将网站整体分解为相对独立的元素或者模块进行分析。因为不管是前沿的研究结果，还是成熟的设计方案，都是以网站中具体某一元素为对象，而正是这些基础元素组成了一个完整的网站，这也就是最初对网站进行解构的想法的来源。
针对每个元素或者模块，我们将结合国内外前沿的研究结论和知名网站较为成熟的设计方案的分析对比，从中找出交互设计中的一些理性规律，包括设计要点，不同设计方案之间的优缺点等。设计师可以更加理性地根据网站自身的特点和需求，选择最优的方式，也为说服产品经理等提供了有力的依据。
对于全新的网站设计，您可以跟着本书的思路，先从整体上确定网站布局和配色方案，然后将网站所需元素进行解构，仔细斟酌每一个细节的设计，然后再从整体的角度来检验每个细节是否符合全局的需要，而后进行局部的调整。
对于已有网站进行改进设计，你可以有针对性地对某些元素进行分析，找到最适合改进当前网站的交互方式。为了更有针对性地改进各元素或者模块的设计，最好通过可用性测试或专家评估等方法先从全局的角度发现问题所在。
1.2 网站解构的思路和纬度
一个网站往往包含了非常多的元素，我们先从整体着手，然后再细化解构到各细节元素。
1.2.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-32．其他页面
除首页外，一栏式布局还适用于目的性单一、较为独立的二级页面或者更深层次页面，如注册表单页面，用户只聚焦在表单填写上，因此除表单外只需提供返回首页及少数重要入口即可。
如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-92．两栏宽、一栏窄
这种布局方式也较为常见，最常见的比例为2∶2∶1。较宽的两栏常被用来展现重点信息，较窄的一栏常用来展现辅助信息。因此相对于前一种布局方式，它能够展现更多重点内容，提高页面的利用率，但相对而言，重点不如第一种方式那么突出和集中（见图2-10）。图2-10
2.1.4 设计要点
1．选择合适的布局方式在设计布局时，最重要的是根据信息量和页面类型等选择适合的分栏方式，并根据信息间的主次选择合适的比例，对重要信息赋予更多空间，体现出内容间的主次关系，引导用户的视线流。
针对门户类网站首页，由于其具有海量的信息，目前较多采用三栏式，同时需要根据信息的重要程度，选择适合的比例方案。
针对某个新闻等具体页面，新闻内容才是用户最为关注的内容，导航等只是辅助信息，因此适合采用一栏式或者新闻内容为主的两栏式布局。
如果用户需求较为个性化和多样化，以上几种布局方式都不能满足用户的需求，那么可以考虑采用个性化定制的布局方式。目前如iGoogle等已经实现了让用户自由拖动版块内容，定制个性化布局的功能，将页面布局的选择权和控制权交给了用户（见图2-11）。图2-112．通过明显的视觉区分，保持整个页面的通透性
有时候，网站版块间的设计缺少统一的规范，就很容易导致各版块间的比例不一致，从而在视觉上给用户一种凌乱的感觉，也容易打断用户较为连贯流畅的视觉流（见图2-12）。
保持整个页面的通透性，可以增加用户阅读的流畅性和舒适性，只需要统一各版块间的比例，同时通过线条、颜色等视觉元素增加各栏间的区分度，就可以轻松做到。如图2-13所示的网站的分栏设计（此图只是为了示意结构，故模糊其内容），就能增加用户浏览网站的舒适感。图2-12图2-133．按照用户的浏览习惯及使用顺序分布摆放内容
根据眼动结果，用户的注意力往往呈现“F”型，最经典的就是Google搜索结果“金三角”现象。因此在页面布局设计时，应尽量将重点内容放在左上角，右侧放置次要内容（见图2-14）。图2-144．统一规范，提升专业度
对于网站内的不同页面类型，应该选择适合的页面布局。对于同一类型或者同一层级的页面，应尽量使用相同的布局方式，避免分栏方式的不同、甚至是各栏比例上的细微变化，以保持网站的统一性和规范性，使网站显得更加专业。
2.2 网站整体配色方案
颜色对于眼睛的刺激往往比文字来得更加直观，更能抓住用户的注意力。很多研究也证明，不同的颜色会让用户产生不同的情绪。因此好的配色方案不仅能够给用户带来美的视觉享受，同时也能够引起用户的共鸣，加深用户对网站的印象，增加对网站品牌的认可度和辨识度。
对于整体的配色方案来说，网站主色调是最重要的一个元素。到底该选择哪种颜色，鲜艳还是朴素，活泼还是庄重，大众化还是个性化都是配色方案所涉及的。
网站的类型、品牌形象、整体定位、目标群体等多种因素都会影响到颜色的选择，而颜色本身也具有自己的特性以及含义，因此需要匹配颜色特性和网站特色来选择适合的主色调。
2.2.1 不同颜色会产生不同的主观感受
随着冷暖、纯度、明度、色相等的变化，颜色会给人带来不同的主观感受。如暖色调会给人带来温暖的感觉，同时具有扩张感，使暖色的元素从背景中跳出来；而冷色调则给人冷清、冷静的感觉，具有收缩的作用，因此容易隐入背景之中。纯度高的颜色饱和度高，较为艳丽，纯度低的则较为柔和。明度高的颜色会带来轻快的感觉，而明度低的颜色则显得比较庄重。取有对比的色相和明度则令人感到活泼，取类似、同一色系则令人感到稳健。色相数多则会显得华丽，色相少则会显得淡雅、清新。
每个颜色都有自己的含义，带给用户不同的主观感受。下面是几种常见的颜色。
红色被认为是最热情的颜色，代表了兴奋、激情、奔放和欢乐，容易让人联想到旗帜、激情、危险、火灾、血液、竞争、侵略、警报等，对人眼刺激较大，容易造成视觉疲劳，使用时需要慎重考虑。因此不要采用大面积的红色，它常用于Logo、导航等位置。
橙色是非常温暖的颜色，通常代表着激情、欢乐、健康等。阿里系基本都采用橙色作为主色调，独特、识别度高，成为公司的一个象征。但和红色类似，也容易造成视觉疲劳。
黄色通常给人轻快、明亮、乐观的印象，有扩张的视觉效果，因此采用黄色作为主色调的网站也往往呈现出活力和快乐。通常黄色还容易让人联想到黄金、缎带，因此也往往代表着高贵和富有。不同的黄色往往会带来不同的效果，因此在设计时需要注意细节的差别。
绿色具有黄色和蓝色两种成分的色，作为中性的颜色，绿色往往代表着平和、恬静、谦虚、智慧和生命力。也常用财经网站或者那些代表富饶、康复和生态学的网站。
蓝色的色感较冷，通常代表着冷静、沉思、智慧、自信和神秘，就如同天空和海洋一样，深不可测。同时，蓝色也是现代科技的象征色，如IBM等科技公司都采用蓝色作为公司网站主色调。紫色的明度较低，给人以高贵、优雅、浪漫和神秘的感觉，同时也表示公正和真相。但眼睛对紫色光的细微变化的分辨力很弱，容易引起疲劳。
黑色往往代表着严肃、恐怖、冷静。它本身是无光无色的，当作为背景色时，能够很好地衬托出其他颜色，尤其与白色对比时，对比非常分明，白底黑字或者黑底白字的可视度很高。
白色是全部可见光均匀混合而成的，称为全色光，通常代表着明亮、简单、干净、纯真与和平。白色很少单独使用，通常都与其他颜色混合，纯粹的白色背景对于内容的干扰最小。
灰色往往代表中性、稳重和智慧。它不容易产生视觉疲劳，但是也容易让人感到沉闷。当然也有漂亮的灰色会给人高雅、精致、含蓄的印象。
当然颜色的略微变化，也可以带来不一样的感觉。在红色中加入少量的黑，会使其风格变的沉稳，趋于厚重、朴实；加入少量的白，会使其风格变的温柔，趋于含蓄、羞涩、娇嫩。如果在橙色中黄的成分较多，其风格趋于甜美、亮丽、芳香；在橙色中混入小量的白，可使橙色的感觉趋于焦躁、无力。在绿色中黄的成分较多时，其风格就趋于活泼、友善，具有幼稚性；在绿色中加入少量的黑，其风格就趋于庄重、老练、成熟；在绿色中加入少量的白，其风格就趋于洁净、清爽、鲜嫩。
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-12．设计型头部
很多网站，尤其是个性化的网站，往往会利用头部的设计体现出网站的特色，常见于博客、小型特色网站以及部分企业网站首页（见图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-62．Slogan
Slogan虽然只是一句简单的标语，但能够很好地体现出网站的定位和特色，显示企业文化、塑造网站个性，配合Logo一起使用能够达到更好的效果。Slogan一般要求朗朗上口，而且点出网站的最大亮点。好的标语往往能让用户更好地记住网站的特色及其提供的主要服务。如：
•阿里巴巴。“全球领先的网上贸易市场和商人社区”。
•淘宝。“淘我喜欢！”
•太平洋汽车网。“精准报价、权威评测，汽车世界，由此精彩”。
除了Logo和Slogan以上两个主要元素之外，总体上来讲，同一级别或者同一类型页面的头部设计应该尽量保持一致。对比Yahoo!不同频道之间的头部设计，其总体上相对统一，包括Logo的格式、各个快速入口、搜索条等。但导航条、搜索区还是存在一定差异，如果能够统一设计，效果应该会更出色、更专业。图3-7
3.2 页尾设计
页尾，也称为Tailer，指的是页面底部部分，通常放置联系方式和版权信息等补充信息。由于其位置不够显著、重要性较低，因此也往往成为设计师容易忽略的地方。
3.2.1 需要规避的细节问题
1．页尾的信息过多过杂由于页尾不太重要，因此应该尽量简化它，节约页面宝贵的空间。图3-8中页尾信息量非常丰富，但给人过多、过杂、喧宾夺主的印象，很多信息存在的必要性值得斟酌。图3-8
而对比以下页尾设计，它们看上去虽然简洁清晰，却已经包含所有必需的信息（见图3-9）。图3-92．不同页面的页尾不统一
有时候，由于网站的迅速扩张，页面数量迅速增加，如缺乏统一的规范约束，往往容易导致页尾等元素在同一类型页面中表现得不够统一。这虽然只是一个很小的细节，却容易让用户对网站的专业度产生怀疑，这是页面设计中需要注意的问题之一。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）。
导航也是对网站信息架构的一种反映，体现了网站内容的分类和组织方式。没有导航的内容就像一盘散沙，用户不容易找到所需要的内容，却很容易在网站上“迷路”，失去方向感，有时只能后退或者关闭页面才能退出，这会增加用户的挫折感。图3-12
网站页面上存在很多导航元素，引导用户浏览，包括主导航、辅助导航、网站地图、搜索区、Logo和快速入口等。Logo起着网站指明灯的作用，使用户始终可以通过单击Logo返回首页；搜索区也是导航中非常重要的一个辅助元素；快捷入口通常包括登录、注册、帮助、联系方式等常用信息，用户能够快速单击链接进入目标页面。这些元素虽然也都起着导航的作用，但本节主要讲的是全局导航、辅助导航这些更为明确的导航元素。
全局导航，指的是在网站每个页面上始终保持同一位置的导航元素，常见的包括Tab导航、树状导航、鱼眼导航等不同的导航类型。辅助导航包括主导航下的分类筛选、面包屑导航、推荐式导航、引导性导航等，虽然其位置没有全局导航那么显眼，但却在用户浏览过程中起着不可替代的作用。网站地图指明了一个网站结构，集合了所有链接通道，能够让用户和网络蜘蛛更加清晰地了解网站的大致结构，也起到了对搜索引擎优化的目的。
以下是常见的几种导航类型。
3.3.1 Tab导航
目前国内大部分网站，包括门户网站、电子商务网站等都采用横向导航条，显示了网站的主要栏目。横向导航的缺点在于页面横向空间有限，因此为了保证各栏目间能够区分开，往往会使网站分类栏目的数量受到限制；还有当导航需要显示二级栏目时，简单的横向导航也很难满足需求。
当分类栏目过多的时候，横向空间放不下过多的栏目，因此演变出了门户类网站常用的多行导航栏（见图3-13）。图3-13
当导航中需要显示二级栏目时，简单的横向导航已经不能体现出网站的结构，Tab导航也就应运而生了。通过切换Tab页就能够呈现出该标签页对应的二级栏目。
Amazon（亚马逊）向来被认为是Tab导航的鼻祖，Luke Wroblewski在《The History of Amazon’s Tab Navigation》一文中，精辟地分析了Amazon导航的变迁。让我们跟着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节。
3.3.2 树状导航
树状导航是纵向导航中的一种，因其形状像树的分支结构而得名。最典型的树状导航就是Windows资源管理器中的树状视图（见图3-19）。
相对横向导航来讲，树状导航项数量较少受到空间的约束，可以放置更多分类，适用于分类较多的大型网站。Amazon在最新的设计中采用了改良后的树状导航，不仅解决了栏目数量的问题，而且能够很方便地呈现出二级分类，弥补了横向导航的部分缺点，因此目前国外较多网站已经采用了这种导航图3-19方式（见图3-20）。
在设计树状导航时，需要注意以下两点。1．排序规律
它的纵向导航的分类往往较多，因此需要将分类按照一定的规律进行排序，比如按照重要程度或者字母的顺序，便于用户快速定位。
Yahoo!还通过在每个分类前增加特色图标，增加了其辨识度（见图3-21）。图3-20图3-212．导航位置
目前大部分网站将其放在页面左侧，也有部分网站将其放在页面右侧。到底放在哪边比较适合是一个问题。
按照用户从左往右的浏览习惯，如果你希望用户从导航入手，找到所需要的内容，那么导航应该放在左边。大部分网站，尤其是大型网站都希望用户通过导航查找内容，因此这时放在左边较为合适。
反之，如果希望用户将注意力集中在当前内容上，之后再通过导航去浏览其他内容，那么导航应该放在右侧，甚至内容下方。很多博客目前都采用了右侧导航的方式，希望用户更多地关注在当前内容上（见图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）。1．面包屑导航的作用
•让用户了解目前所处的位置，以及图3-25当前页面在整个网站中的位置。
•体现了网站的架构层级，能够帮助用户快速学习和了解网站内容的组织方式，从而形成很好的位置感。
•提供了返回各层级页面的快捷入口，方便用户操作，减少操作步骤。
•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）。
试读结束[说明：试读内容隐藏了图片]