本书主要从整体到局部地对网站的元素进行解构，包括整体上网站的布局、配色方案，到网站各个功能区域，如登录区、内容区、广告区等，最后到按钮、反馈、验证码、字体、文字语气等多个细节元素。全书共分5章和3个附录。

本书用解构的视角来分析网站的用户体验设计，从整体分解到局部，再到各个设计细节。
作者通过广泛收集国内外对人机交互及 Web设计的研究成果和设计总结，用科学的研究结果支撑设计，增加设计的合理性和客观性，使设计变得更加有章可循。
本书以细腻的笔触、浅显易懂的语言分析网站的用户体验，不仅适用于用户体验从业人员，同时也适合其他对网站用户体验设计感兴趣的人员阅读。
本书采用图文结合的方式，深度剖析国内外知名网站，使文字和案例相得益彰， 阅读起来更加具有趣味性。
人性化的网站才能留住用户，良好的用户体验才是网站制胜的法宝。
李清，毕业于浙江大学心理系，曾任职于华为通信、阿里巴巴UED部门，现任唐硕用户体验咨询项目经理，主要负责新浪、诺基亚、中国工商银行网站等多个项目的用户体验提升，具有丰富的项目时间和管理经验，是用户体验的积极实践者，译有《Web标准和SEO应用实践》。

2008年编者在阿里巴巴工作期间，有几次产品经理拿着2套设计方案询问我：“从用户的角度来看，你觉得用户会喜欢哪一种设计？”
　　如果条件允许，那么可以邀请真实用户到实验室参与快速的测试和访谈，但对于网站而言，其迭代速度之快让我们很难针对每一个细节都进行测试验证，不论是时间、人力或者金钱都消耗不起。因此通常情况，我们会简单分析一下用户的使用场景和需求，有时这种方法可以奏效，但有时却不能很好地给出解决方案。此时往往只能根据以往的经验或者在借鉴国内外优秀网站设计的基础上快速给出答案，但有时候往往又无法说服“强势”的产品经理，毕竟这些解决方案可能会带来代码量的增加等额外工作量。
　　如果在设计前就能针对各个细节积累相应的设计方案和研究结论，那么在确定设计方案时就可以根据网站的实际情况选择最适合的方式，避免产品经理和设计师之间过多的争执，同时也减少反复修改设计的成本。在这些想法的基础上，我们开始参与对网站元素的解构以及导航、链接等细节元素的资料收集。
　　后来，在做咨询项目的过程中，随着与客户的不断接触和了解，我们发现目前业界关于用户体验的书很多从理论或者设计原则的层面上进行了很好的诠释，但对于网站来讲，仍然缺乏系统地针对用户体验设计实践的总结和归纳。
本书的写作思路
　　本书主要从整体到局部地对网站的元素进行解构，包括整体上网站的布局、配色方案，到网站各个功能区域，如登录区、内容区、广告区等，最后到按钮、反馈、验证码、字体、文字语气等多个细节元素。细节决定体验，因此每个细节都值得细细深究，很多时候一个细节的错误将直接影响到用户对网站的体验和认可度，当然直接反映在数据上就包括用户注册率、PV（页面浏览量）等。
　　针对每个细节元素的分析都参考了相应的书籍、研究论文、国内外优秀设计、网站博客等多种资源，最后从研究结论、知名网站的设计方案、设计要点等不同方面对其进行阐述。
　　在本书编写过程中，编者也经历了一段时间的重新学习和整理，很高兴能够和大家分享经验。当然，由于时间、篇幅以及个人经验的局限，本书还有很多不完善的地方，也希望能够和大家共同探讨，互相勉励，共同进步，更深入地解构更多设计元素，使本书更加系统、更加完善。
　　本书中每个部分都相对独立，如果设计新的网站，或者对用户体验感兴趣，您可以按照书中的顺序进行阅读；如果需要有针对性地对网站某部分进行改进，那么也可以直接跳到具体章节查看，针对不同细节元素，可以找到最适合的设计方案。
本书适合的读者群体
　　本书主要适用于用户体验设计从业人员、产品经理、网站设计人员等，可以为设计新的网站或者改进旧网站时提供一些参考和依据。
1. 交互设计师
　　在设计线框图时，您可以参考解构的思路，同时结合网站自身的情况和目标用户群体的需求、喜好、使用流程等，选择合适的布局和细节元素的交互方式，或者对原有的进行局部优化。
2. 用户研究员
　　除了对网站进行用户访谈、测试或问卷等活动来获取用户的反馈外，还可以针对每个细节元素进行对比验证，或者通过获取网站相关在线数据，对不同的设计方案进行对比分析，从而选取最合适的方式。
3. 视觉设计师
　　在对网站进行视觉美化的时候，可以从用户体验的角度，来考虑视觉对于用户主观感受的影响。
4. 产品经理
　　产品经理可对本书内容做基础地了解，在确定产品设计方案时，可以与用户体验设计人员有更多更深入的交流。
　　当然，如果您对网站设计和用户体验感兴趣的话，也非常欢迎您阅读本书。
　　最后，要非常感谢机械工业出版社华章分社的陈冀康，如果不是您的鼓励，我也没有勇气和精力来完成这本书。要感谢老板黄蜂，在项目非常忙的时间给我半年的时间来完成本书的写作。感谢爸妈，还有所有朋友在这段时间内对我的帮助和支持。没有你们，我不可能坚持完成本书的编写。
　　还有要对某些博主道歉，由于很多信息不断的转载，已经找不到原创的作者，因此如果原作者看到的话，请联系本人m.liqing@gmail.com, 一定在再版时改进。

李清（Michelle）
2010年2月10日上海

本书用解构的视角来分析网站的用户体验设计,从整体分解到局部,再到各个设计细节.
同时通过广泛收集国内外对人机交互及 Web设计的研究成果和设计总结,用科学的研究结果支撑设计,增加设计的合理性和客观性,使设计变得更加有章可循.

书中作者以细腻的笔触,浅显易懂的语言分析网站的用户体验,不仅适用用户体验从业人员,同时也适合其他对网站用户体验设计感兴趣的人员
采用图文结合的方式,深度剖析国内外知名网站,使文字和案例相得益彰, 阅读更加具有趣味性.

人性化的网站才能留住用户,才是网站制胜的法宝,希望与大家共勉.


作者简介:
　　　李清，毕业于浙江大学心理系，曾任职于华为通信、阿里巴巴UED部门，现任唐硕用户体验咨询项目经理，主要负责Sina、Nokia、工商银行等多个项目的用户体验提升，具有丰富的项目时间和管理经验,用户体验的积极实践者，译有《Web标准及SEO实践》。

李清 编著：李清，曾先后任职于某知名通信公司、知名互联网公司的用户研究员和交互设计师，现任某知名用户体验咨询公司项目经理。译有《Web标准和SEO实践》（华章公司出版）。

前言
第1章　网站解构入门 1
1.1　为什么要网站解构 2
1.2　网站解构的思路和纬度 4
1.2.1　整体界面布局及配色方案 4
1.2.2　主要功能区 4
1.2.3　页面元素 4
1.2.4　其他细节 4
第2章　整体界面布局及配色方案 5
2.1　界面布局 6
2.1.1　一栏式布局 6
2.1.2　两栏式布局 9
2.1.3　三栏式布局 11
2.1.4　设计要点 13
2.2　网站整体配色方案 15
2.2.1　不同颜色会产生不同的主观感受 16
2.2.2　网站特色 17
第3章　主要功能区域 25
3.1　头部 26
3.1.1　头部类型 26
3.1.2　头部的元素设计 27
3.2　页尾设计 29
3.2.1　需要规避的细节问题 29
3.2.2　设计新趋势 30
3.3　导航区 30
3.3.1　Tab导航 31
3.3.2　树状导航 36
3.3.3　鱼眼导航 38
3.3.4　面包屑导航 39
3.3.5　网站地图 42
3.3.6　推荐式导航 43
3.3.7　引导性导航 44
3.3.8　知名网站导航设计 44
3.4　搜索区 48
3.4.1　搜索的分类 48
3.4.2　设计要点 50
3.5　登录注册区 54
3.5.1　告诉用户注册的好处 57
3.5.2　用邮箱取代用户名，作为登录网站的唯一身份识别 57
3.5.3　不要忘记“记住登录状态”和“忘记密码”等细节 58
3.5.4　不必要的情况下尽量不要使用验证码 58
3.5.5　注册表单的优化 58
3.5.6　友好的提示信息 59
3.5.7　设计醒目的登录、注册按钮 59
3.6　信息内容展示区 59
3.6.1　首页 60
3.6.2　列表页 66
3.6.3　具体页面 69
3.7　广告区 71
3.7.1　广告类型 71
3.7.2　设计要点 76
第4章　页面元素 81
4.1　表单概述 82
4.1.1　表单布局设计 82
4.1.2　设计要点 85
4.1.3　知名网站表单设计 88
4.2　标签 91
4.2.1　什么时候使用模块标签 91
4.2.2　设计要点 92
4.2.3　知名网站标签设计 97
4.3　翻页 98
4.3.1　第一页 99
4.3.2　最后一页 99
4.3.3　上一页和下一页 100
4.3.4　页码显示的数量 100
4.3.5　翻页区域的醒目度 101
4.3.6　增大可点击区域 101
4.3.7　页码的间距 101
4.3.8　当前页码和总页码 101
4.3.9　快速跳转 102
4.4　链接 102
4.4.1　链接的颜色 102
4.4.2　链接的可点击范围 102
4.4.3　链接的下划线 103
4.4.4　链接颜色的变化 104
4.4.5　区分内部链接和外部链接 104
4.4.6　链接的交互方式 104
4.5　按钮 105
4.5.1　什么是按钮 105
4.5.2　如何增加按钮的点击率 105
4.5.3　按钮的主次关系 108
4.5.4　按钮摆放的位置 109
4.5.5　减少用户定位时间 111
4.5.6　相关性设计，增加按钮的可理解性 111
4.5.7　优化视觉效果，增加按钮的吸引力 113
4.5.8　操作的反馈 113
4.6　操作反馈 114
4.6.1　什么是反馈，为什么要反馈 114
4.6.2　反馈的种类 114
4.7　验证码 119
4.7.1　什么是验证码 119
4.7.2　为什么需要验证码 120
4.7.3　验证码带来的困惑 120
4.7.4　其他方式 122
第5章　其他 125
5.1　文字设计 126
5.1.1　字体类型 126
5.1.2　字号 127
5.1.3　字体颜色 130
5.1.4　字体的样式 132
5.1.5　设计要点 132
5.2　网站文字的语气 133
5.2.1　网站应该懂得基本的礼貌 133
5.2.2　网站应该是谦逊、亲切的 133
5.2.3　不要使用责怪用户的语气 134
5.2.4　网站有时也可以表现出幽默的一面 135
5.3　图片质感 135
5.4　文字标题 136
附录1　常用的设计原则 139
附录2　Nielsen可用性原则 143
附录3　延伸阅读（推荐网站） 145