内容简介

本书是一部专注于细节的web用户体验设计实战手册。它将网站交互全流程分解为30多个瞬间，从指引用户到离开。针对每一个瞬间，作者像讲故事一样给出了经过业界干锤百炼积淀下来的实战解决方案，阐述解决方案背后的方法和思路，将设计理念贯彻其中，并剖析了常见错误和陷阱。

作者简介

Robert Hoekman，Jr． 著名的交互设计师。Miskeeto公司创始人，曾任职于Adobe、美联航等知名公司。除本书外。他还著有Desiging the Obvious以及FlashUser ExperienceBest Practices等多部畅销图书，都在业界产生了较大影响。

序

这本书绝不是什么权威或官方的答案，因为本来就没什么权威或者官方答案。当我想你具体推荐什么的时候，那只是基于我自身的经验、观点和认识、它只是一个交流的开始，其目的是让你思考。

在这个瞬间我们希望用户做什么，界面应该如何鼓励他们完成任务？用户此刻的目标是什么？我们又如何实现他的目标？每一瞬间都有可能摧毁或加强用户对产品的信心，因为每个人在每个时刻所要完成的任务，对于此刻的他而言，那就是最重要的任务。

第一部分指引用户

第1章 令人心动的第一印象

发现页面布局

布局是内容组织的必然结果，它往往是自己逐渐形成的。一旦周全考虑了页面的所有需求，并且确定了每一块的内容，你的工作就变成了看着所想要的布局自己展现在你眼前。/*发现布局是根据用户需求设计的必然结果*/

在开始安排页面内容时，我会把所有栏目区域都扔到显示屏上，然后移来移去不断调整让它们彼此协调。/*调整以网站要实现的目标为依据*/

引导用户的视线

人们在浏览页面或布局的时候，视线往往趋向于从左上角移动到右下角，都是从左向右，从上至下的阅读。右上角和左下角是视觉盲点。因此，采用对角线平衡通常都是一个好设计所需要考虑的因素，运用视觉元素来创建一条虚拟的线，让用户的视线跟随它从左上到右下成对角线似的移动，这条对角线就像箭头一样指向最终视觉落点。

使用颜色来吸引人的注意力，相对一致性来说，人对物体间的差异性更为敏感。在页面中加入一些颜色可以非常有效的把浏览者的视线引导到我们希望他们看到的地方。

第2章 凸显个性

统一设计风格，形成积极的印象

使用符号，它们只需要简单的在网站中重复出现，以某种延续的趋势来保持一致的主题风格。

第3章 导航之道

人们获得导向的方法是：粗略扫视一遍页面，看看自己有哪些选择，并快速过滤掉哪些无关自己兴趣的内容。当某个符合我们需要的链接出现时，我们会更为仔细的查看与其毗邻的文字，以确定其是否是我们需要的选项。如果是，我们就点击。

告诉软件该做什么

软件不是为了我们能点击那些按钮而存在，它是为了我们完成任务而存在，这样我们才能做事情。所以导航栏应该帮助我们感觉自己在做一些事情，让我们找到当司机的感觉。人类不喜欢按软件的要求去做事情。在决定采取某个行为的瞬间，我们希望由自己控制软件，由自己告诉它应该做些什么。任何违反这一意愿的软件都会让人感到愚蠢而糟糕。/*不符合用户心智模型要悲剧*/

避免Login综合症

Login不是一个动作，它是名字而非动词。在产品登陆界面中使用它会显得很不专业。用户所需要的并不是去和界面里面的对象交互，而是去做自己所要做的事。他们并不是单击它想看登陆面板，而只是想要登陆。因此你所需要的不是一个名字，而是一个命令/*sign in，可以试试多用动词，引导用户多使用动作来完成目标，同时可以让用户的控制欲得到满足，因为所有动作指令都展现在眼前了，有种一切尽在掌控的感觉有木有*/

第4章 链接生来不平等

让环境提示成为引导的线索

日本的城际铁路线上，每一站台都会在列车进站后播放自己独特的音乐旋律，有效的引起乘客注意，从而提早准备下车，这种提示方式成为环境提示。作者受到启发把公司新闻列表内重要的新闻链接放大，凸显其重要性。Google Reader的一个版本中使用了标签云，标签含有越多，该标签字体就越大，项目点击的次数越多，该标签颜色就越深。/*作者受到启发后，使新闻列表由上至下逐渐淡化，逐渐变小，突出了新闻的新旧交替。666*/不用强迫自己这么做，但请时刻留意去寻找机会和灵感，哪怕它们看上去和你所做的事情毫不相干。

第5章 标签云里抬头看路

标签云是一种链接列表，显示在一个区域内，并且按照热门程度或其它准则来加重显示其中的某些标签，最后的结果看上去就像一片链接的“云层”。

如果想要从标签云中获得方便，就需要了解为什么有些链接比其它的大或颜色比其它的深，但几乎没有多少人能真正明白标签云的含义。设计师建议在标签部分加上明确标题，如“最受欢迎的主题”或加上说明性文字。

但我觉得应该把整个标签去掉，仅显示一个短列表，按受欢迎程度排序即可。为什么呢？因为不存在任何理由强迫用户思考，无论是一个页面还是一个场景。我们没有理由要求用户学习了解为什么有些链接比其他的要大，用户也没有理由被迫花精力去学习标签云，更不用说去探索它的重要性了。往好了说，它会迫使用户在不必要的地方思考；往坏了说，用户很可能因此而困惑，甚至烦恼。

第二部分学习

第6章 开门见山

为什么说欢迎辞没有用

/*作者引用了Jakob（《Don’t Make Me Think》作者）的话：人们不读网页上的文字，只是扫描，blablabla*/短篇幅的文字才有可能吸引一部分注意力（如果有用），从而有助于用户理解他们正在看什么。探索一个新的Web时，我们会寻找那些显著的线索，目的是为了了解这个网站的用途。比起欢迎语，人们更感兴趣的是要完成什么事情，而不是阅读一段毫无目的、对达成目标毫无帮助的文字。

为扫描而设计

用户并不关心自己受欢迎，他们关心的是自己的目的。所以首先让用户知道自己进入了正确的页面，把标题改成用户的目的，比如查找课程。/*标题多使用动宾词组，比如查找课程就比课程查找动作感强，让用户有种掌控感，点击就会马上行动。重要的不是给用户的信息量有多大，而是我们提供的信息是不是用户真正需要的*/

第7章 为界面做标记

停止标记你的“假设

互联网存在着无数缺少上下文语境的信息，它们要求用户输入、选择，却不解释这些行为的含义。总是在假设用户知道一些只有我们才知道的事情。检查应用程序中每一个控件的标记，问自己，一个从没见过这个程序的人是否也能明白它的意思。/*设计应该基于用户什么都不懂这种假设，而不是假设用户什么都懂，具体看产品定位吧*/

第8章 生动传神的视频（略）

视频演示胜过千言万语

使用视频来表述问题

使用视频来表述想法

第三部分搜索

第9章 提出搜索词建议

运用Poka.yoke机制，使用自动完成输入框

Poka.yoke是一个日语词汇，有防止错误的意思。自动完成的设计思路就是Poka.yoke预防机制的一个例子，自动完成指的是一种能够尝试猜测用户输入的文字并动态搜索出适配的结果的文本输入框，还有些输入框会显示一个适配的列表，用户可以在其中选择。这两种自动完成都能够避免用户打错字，确保他们的搜索更有效率/*此案例为一个创建公司信息的网站，创建公司信息需要输入公司名，为避免用户输入错和方便使用，使用了这种设计。书中很多东西也许看起来有些过时，但我想强调的是这本书是09年的，所以在当时是很了不起的创新*/

局限性

自动完成这一功能并不适用所有情况，它更适用于用户搜索小范围数据。如使用Google搜索时，盯着键盘输入的用户不会注意到推荐列表，用户往往会因为推荐而放弃自己先前的主张，但其实他们自己想输入的文字可能比推荐的词汇更准确。

在输入的字符数足以让推荐词有意义之前，请不要显示推荐词。当然，从另一方面来说，目前也没有一个魔法数字能确切的规定到底在什么时候显示推荐词，因此我们暂且把这个界限定为3~4个字符。

第10章 列出搜索结果

信赖那些行之有效的标准

/*列举了Google的分页标准，包含：上一页、下一页、页码、当前页码等信息。但用途不一样的网页分页设计还是要不一样，比如跳转、隐藏页码，设置成上拉列表、总页数、首尾页按钮、信息数量…… */

第11章 精炼你的搜索

高级搜索也简洁

使用行内扩展的方式，新的元素会凭空掉落在网页中，然后把其它内容网页面下方推开。通过这种方式，用户点击Advanced链接后不需要等待载入新的网页。

递进显示

没有必要把高级搜索里的所有选项都列举出来。递进显示能根据实际需要，即依靠用户的输入而逐步显示控件，而不是默认把它们全列出来。递进显示是一个简单的概念，它能以各种方式适用于绝大部分的Web应用，可以用来隐藏各种高级功能。

第四部分深入

第12章 视频播放器的标准化

拨开VCR设计的迷雾

/*吐槽了YouTube播放器，点击画面中间的播放按钮跳转到播放页面去而不是直接播放，不符合用户预期；播放时间只显示剩余时间，而不是整个时间，但我觉得没必要知道整个时间，知道还有多久看完就够了。总之作者觉得这种设计没必要，各种夸奖TED的视频播放器*/

第13章 巩固你的表单布局

设计出行云流水般的表单

左对齐的表单，降低了用户往下浏览的速度，如果是需要仔细阅读的表单，这样可能很好。但右对齐更易读，标签和输入区域之间更近，但右对齐的标签在页面左侧形成一条难看的锯齿边缘。所以我决定将布局变成一列来显示，标签放在每个输入区域的上方，左对齐。

让“确定／取消”更完美

单击OK并不能使用户建立一个清晰的期望，将其修改为动作（注册、抢票、预定），使用户明确期望。

首选处理方式和第二处理方式

对于在网站注册填写表单的用户来说，他最有可能选择点击OK，它成为首选处理方式。取消整个注册流程则是不太可能的选择，称为第二处理方式。如果两个按钮都被赋予了同等的视觉重要性，那么和用户则必须阅读按钮上的标记，而且两个按钮都得阅读以便决定应该点击哪一个。

费茨法则（Fitts Law）:点击某个目标所花时间与“鼠标与目标距离”和“目标尺寸”密切相关。所以，我们可以减弱第二处理方式的注意力（从按钮变为链接）。引导用户的视线到首选处理方式上去。

这很重要

最重要的不是在填表单的过程中抠出那珍贵的数秒钟，而在于完成表单所带来的价值是否超过填写表单时带来的麻烦和沉闷。

第14章 驾驭Wizard向导

建立清晰的预期

填写表单时点击Next,会载入下一步骤页面，但是用户不知道还有多少步，以及当前处于哪一步。告诉用户他们过去在哪，现在在哪，将来还要到哪里。将所有步骤和名称都展现给用户会更有帮助，用户随时可以瞥一眼自己正在哪个阶段，然后决定是否继续。

为了让用户对表单的长度能有一个清晰的预期，我需要体现出Wizard向导里的每个步骤真的都非常短，能实现这一点的方式就是为这个区域设定一个固定高度。换言之，我需要一个可折叠面板空间来取代现有的标签页。/*页面上有步骤1，步骤2，步骤3，步骤列表，开始显示步骤一的表单，其它步骤不可点击，点击Next后，折叠步骤1表单，打开步骤2表单*/通过显示步骤数并帮助用户推断表单的长度，我们为用户建立了清晰的期望。

第15章 最后的一英里：即时校验

要纠错，也要赞扬

绝大多数表单只有在出错时才提醒你，而做对时什么也不说。我们希望只要用户正确完成一个步骤就第一时间告诉他们，比如用户正确填写完某项信息，在该项旁边显示一个绿色对勾标示通过。而下一步，毫无疑问就是检测错误，并友好的进行相关提醒以便用户改正。关键在于我们应在用户输入之后再显示错误提示，某网站的错误，输入框刚获得焦点时就会出现错误提示。

第16章 简化长表单（略）

第17章 让他们登录

页面自动记录用户名，找回密码界面无需再输入用户名。IxDA尝试了只输入用户名就能登录的流程，但是换个IP就无法进行登录了。

第18章 计算字符数

在输入框旁边显示当前还可以输入多少字符，不再迫使用户自己逐字计算字符。

第五部分参与

第19章 创建个人资料（略）

第20章 编辑

在正确的时间显示正确的工具

递进显示是关键：只显示每项任务需要的工具和选项的关键。

第21章 开展社交活动

朋友与随员

DTRT真正想要的并不是建立友谊，而是一种简单又不张扬的功能，它能激发人们阅读耕读偶的文章、与网站发生更多的关系。Twitter提供了一种较为弱势、被称为Follow的交友方案，不用付出太多精力，而同样能随时掌握另一位成员的动向，这样就够了。

第22章 显而易见的博客

通往更好的博客的三条路

博客应便于浏览者扫描页面，以决定某篇日志是否值得阅读；博客应当能更好的鼓励交流；博客应能诱使人们阅读更多日志。

第23章 邀请讨论

让你的顾客发表意见

不要控制留言、评论或其他香瓜您的东西，控制将会带来负面效果。让你的顾客自由发表意见以表示你信任他们的评论和他们自身的判断能力。给用户自己做判断您的权利，他们自然会忽略那些无用的评论。

起用你的0taku

那些抱怨声最大的、欢呼最热烈的、有人需要解答问题尽最大努力帮助的人，这些人就是你的Otaku（发烧友），你可以让他们帮助你。/*相当于小米的粉丝营销*/

第24章 得到一个好的评分（略）

清晰胜于效率

第六部分管理信息

第25章 让RSS更有意义

要想让用户战胜新生技术的陌生感并加以运用，最困难的一点就是首先要意识到人们并不关心技术本身，而是关心自己能得到什么。我们推广的并不是技术，而是技术带来的好处。推广某项新技术时，我们首要的目标应该是让它通俗易懂。很少有人知道RSS是什么，直接在按钮上标明Feed Reader，这样人们都能轻易地订阅。一个新想法是否容易理解是其成败的关键。

第26章 自定义标签

分类系统、分众分类系统以及变异体

有两种不同的方法可以组织网站内容，一个是建立分类系统，也就是一旦你定义好类别，所有人都将遵循这个分类。另一个是分众分类系统，用户可以根据自己需要持续不断地添加和改变分类。

如果你决定使用分众分类系统、使用Tag标签，那就要思考如何让Tag模式显得很友好，同时支持用户的思考方式。我尝试去掉专业词汇Tag（自定义标签），而使用Lable（标签）。标签根植于现实世界，因此大多数人很容易理解。就像RSS一样，使用更加熟悉的词语能够降低对新事物的学习曲线。

提出建议

不同的人可能会不知不觉的为同一个Tag创建多个版本，所以我们需要某种方法来侦测那些想死的Tag，并且让用户能够为想标记的内容选择那些已有的Tag。我认为网站应该像Google Suggest那样提供自动完成功能，用户输入某个Tag时，系统自动搜索出近似的Tag，然后以列表形式呈现，供用户选择。还有一种方法是，用户输入了自己的Tag之后显示一个推荐页面，页面实现近似的Tag，这个页面可以用文字向用户解释他可以把自己的新Tag和其他人的Tag相匹配。这样为相同Tag创建多个版本的几率将降低，查找更方便了。

第27章 通过拖放来组织信息

交互的三种状态

一个为有效的拖放交互需要提供完整的3种状态：邀请，操作，实现。

“邀请”状态包含页面上任何邀请你采取行动的元素，它可以使触发某个行为的按钮或者是命令链接。

“操作”状态包含用户要完成一项任务所必须采取的所有行动。每一个步骤都必须尽可能清楚，让用户容易学习并理解这种交互行为。在操作同事，界面也根据需要进行更新，以确切的显示出操作将对页面产生的影响。

“实现”状态就是让用户知道他的交互已经实现了。“实现“有时候只需显示一行文字，告诉用户他的资料已保存，有时候意味着发一封确认邮件。

完成的感觉

不论复杂还是简单的交互，我们都需要呈现着这三种状态，才能让用户理解如何开始、如何完成，然后相信自己操作无误。/*操作前、操作中、操作后都要给用户信息反馈，让用户知道能做什么、怎么做、是否做成了*/

第28章 用系统通知来管理中断

为改变而设计

提前告诉用户你们正在做一些可能会影响他们的事情，比如更新、维护。好处：它会让用户产生期待；它会让用户有心理准备；它会为用户制造新话题。

第七部分离开

第29章 退出

设计Sign-out流程时，LinkedIn退出后，你将会看到大段文字，让人困惑不已，不知道自己是否已经退出。大家都想鼓励用户再度光临。G-mail在这点做得很棒：退出后，回到登录页面，页面还显示一些它希望你能深入了解的新功能。

第30章 抹去那些尘封的用户

长时间未登录的用户，给他们发邮件吸引他们回访，或者调查清楚用户为什么长时间未登录。

第31章 由他们去吧

让用户能为自己大点行李，这点非常重要。例如某个用于个人数据的应用程序，必须为日后可能的注销行为提供一种可靠的保留信息的方式，否则客户在一开始根本就不会感兴趣。/*卸载软件后都会询问是否保留原来的设置或下载的文件，以及劝说不要卸载和反馈选项*/

优秀设计的金钥匙

只提供用户所需。

让初学者尽快转变为中级用户。

尽可能的预防错误，如出错也应友善处理。

精简和优化交互与任务流程，让最复杂的软件清晰易懂。

为支持特定行为而设计。

持续的改进和优化我们的流程与程序。

忽略用户的某些要求，坚信自己理想和洞察力。

最后的补充

省去一些东西，远比把它们全塞进来容易。做好比作坏更加容易。想要取得成功，你只需要留意自己要传达的讯息，并且充满热情的去传达它们。结果其它所有一切会纷至沓来。通过留意所要传达的信息，你的目标将变成想办法如何花最少的努力去完成传达。通常来说，你做的最少的那种方法其实就是最正确的解决方案。

跟随你自己的福祉，找到你自己的禅，设计属于你自己的瞬间。