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