见微知著-WEB用户体验解构

出版时间：2010-4  出版社：机械工业出版社  作者：李清  页数：146  
Tag标签：无  

前言

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

内容概要

本书用解构分析的方法，系统全面地介绍了Web页面设计的相关知识和要素。    本书从整体到局部地对网站的元素进行解构，包括网站整体布局、整体配色方案，到网站各个功能区域，如登录区、内容区、广告区等，最后到按钮、反馈、验证码、字体、文字语气等多个细节元素。本书通过解构这些元素来讲述如何对用户体验设计进行优化，如何进行搜索引擎优化。    本书适用于网站交互设计师、视觉设计师、产品经理、网站设计人员、网页设计爱好者。

作者简介

李清，毕业于浙江大学心理系，曾任职于华为通信、阿里巴巴UED部门，现任唐硕用户体验咨询项目经理，主要负责新浪、诺基亚、中国工商银行网站等多个项目的用户体验提升，具有丰富的项目时间和管理经验，是用户体验的积极实践者，译有《Web标准和SEO应用实践》。

书籍目录

前言第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  延伸阅读(推荐网站)

章节摘录

插图：用户体验良好的网站，应该从用户第一眼看到网站的时候，就给用户留下良好的第一印象。从网站整体上来看，给用户留下第一印象的就是页面的布局、内容和视觉设计等。在社会心理学中，有一个知名的效应称为首因效应，指的是第一印象的形成导致的在总体印象形成上最初获得的信息比后来获得的信息影响更大。因此我们应该利用首因效应，着重设计好给用户留下第一印象的整体布局、内容和视觉设计等，这些也是网站最核心的部分。正如第1章中讲过的，内容优劣很大程度上取决于网站编辑的选取和审核，这里主要讲界面布局和配色方案。界面布局指页面的结构分布，可以按照分栏方式等不同的维度进行划分。合理的布局，应该符合用户的浏览习惯，合理地引导用户的视线流；清晰有效的布局能够让用户对网站内容一目了然，快速了解内容的组织逻辑，大大提升网站的可阅读性和整体视觉效果。配色方案包括网站的主色调、辅助色、背景色等，适当的配色方案能够引起用户的共鸣，从情感上提升用户体验。

编辑推荐

《见微知著:Web用户体验解构》编辑推荐：以一线设计师的视角解构Web用户体验。《见微知著:Web用户体验解构》用解构的视角来分析网站的用户体验设计，从整体分解到局部，再到各个设计细节。〈br〉作者通过广泛收集国内外对人机交互及Web设计的研究成果和设计总结，用科学的研究结果支撑设计，增加设计的合理性和客观性，使设计变得更加有章可循。〈br〉《见微知著:Web用户体验解构》以细腻的笔触、浅显易懂的语言分析网站的用户体验，不仅适用于用户体验从业人员，同时也适合其他对网站用户体验设计感兴趣的人员阅读。〈br〉《见微知著:Web用户体验解构》采用图文结合的方式，深度剖析国内外知名网站，使文字和案例相得益彰，阅读起来更加具有趣味性。〈br〉人性化的网站才能留住用户，良好的用户体验才是网站制胜的法宝。

用户评论 (总计18条)

•   粗粗地看完之后，让我对Web产品的用户体验有了个大致的了解和入门。非常感觉作者。
  这本书浅显易懂，适合作为提升用户体验的入门书。
  
  很多用户体验的书都在讲原理什么的，让人摸不着头脑，而这本书的内容就是让人一目了然。
  
  接下来准备再精读一遍。
  
  同时，要求项目组的人员每人至少要读一遍。
  
•   这本书道出了网站受到热捧
•   书很薄，纸质摸着舒服，图文并茂比较通俗易懂，理论的东西也讲得少,1天就可以看完
  整体内容比较系统，思路清晰，刚好是自己需要的。
•   全部实战规范，按照上面的内容去实施绝对一级棒，很实用的一本书
•   很满意。选了好久才选上的一本书。
•   纸张不错哦，马上开始看。
•   挺好看，纸质很好
•   可以作为尼尔森可用性十原则的实战课本来学习，图文并茂，简洁易懂，一本专业性很强又很好读的书。
•   作为一本入门书，值得一看。里面有些推荐的书目，可以延伸阅读
•   真的写的很不错了，花了一天的时间看完。内容详细丰富，是我想要的那本书，我想我会持续关注这本书的作者的！
•   书不错 · 是我想要的书
•   写的不错，从事SEO或准备从事SEO工作的可以看看
•   比较基础，可以看看。
•   还好了，，感觉过于简单，单调。。
•   但是…………卓越的网页怎么改成这样了，超级不好用，找个东东找都找不到
•   内容偏向实际工作，而这正是我需要的讨厌大篇幅的理论告诉我XXX心理，XXX设计意图其实我只需要告诉我在什么情况下用什么样的界面、颜色、按钮就行而这本书正是如此，唯一的遗憾就是内容有些少，再丰富些就好了！
•   初级或中级用户看应该受益不小，因为跨度太大，所以亮点的地方不是很多，可能也是应了大而不精的，因为书不是很厚，截屏很多，应该算是一个经验流水总结吧。。。
•   一个一线设计师的角度，来解构Web用户界面设计的各个要素。对于一线设计师，很有借鉴意义和参考价值。