瞬间之美 - UCD大社区

将熟悉的问题陌生化

kent.zhu — 2009-09-21 11:28:54

通过千鸟的博客知道《瞬间之美》这本书的，前几天去书店转悠正好看到这本书，本想买下的，但是一看价格还是决定算了。于是，在第三极里花了一个下午囫囵吞枣般的读完了。

最大的感觉是作者总是会将熟悉的问题陌生化，遇到问题的时候作者总是试着从另外一个角度去看待他，然后发现不同的解决方法。不断变换视角去看待同一类问题，让问题看起来陌生不至于使自己的思维陷入固定套路，这点对于一个产品人员来说，我觉得是尤其有价值的。

书中提到过一个原理叫做“环境提示”。让环境提示成为引导的线索（采用字体大小和颜色双重表现方式区别链接的轻重程度）帮助用户快速找到组织中最有价值的元素。
这个原理来自于现实生活中日本一个地铁系统的站台提示。多数人会在坐地铁的时候看书、听音乐、打瞌睡、看美女等等，同时地铁的报站在每个站点的声音都是一样的，可以想象在一个嘈杂混乱的车厢里，听不到报站或者听错了报站是很正常的事情。于是，该地铁对他们的报站系统做了改进，在不同的站点到达之前会放一段不同的音乐。这段音乐对于地铁里的乘客而言就是一个环境提示，这样不同的乘客只要注意不同的音乐声就可以了。可以避免因为看美女或者听音乐而错过站的情况发生。

   我们知道，情境是与用户、内容并列的信息架构的三个最基础的因素之一。设计复杂网站时，在较大的整体中提供情境特别重要。很多实体世界中的情境线索在网站上是不存在的（没有自然的路标，也没有南北之分）。因此确保网站有提供情境的线索是设计导航的一个重要原则之一。

   书中作者引用了这个原理把他映射到产品设计上。并以一个内部的CMS系统中如何在一列连接中把最新最重要的信息标识出来作为例子进行了阐述，作者认为采用不同大小的字体和颜色来对一个链接进行修饰可以直观的表述一个链接的轻重程度，且提高用户的阅读体验。
   实际上这些方法我们也经常会用到：比如用红色链接来表示这条新闻是重要的；用黑粗体的标题来表示头版头条新闻；有的网站（浏览器）已经可以实现对用户已经点击过的链接使用颜色标出。
   默认情况下没有浏览过的超链接是一种颜色，浏览过的超链接是另一种颜色。这种特征可以帮助用户了解什么是他们看过的，什么是没看过的，帮助他们回忆之前逛网站时走过的路线。在信息架构中，我们把这个叫做情景式导航。情景式导航可以支持联想学习，让你建立一种具有连接性组织的网站，使得用户和组织都受益。

当然，这部分只是我囫囵吞枣中记忆最深刻的部分，其他关于标签云的讨论、注册表单的优化、视频的引入、搜索的设计等等也都颇有见地，最重要的是这些都是最常用的产品组件。30多个故事，阐明了如何将好的设计原则运用到实际的Web应用程序界面中，使界面引人入胜，如何创造完美的瞬间，给用户以美好的体验，值得一读。

相关话题：瞬间之美源地址：http://www.ikent.me/blog/1932

《瞬间之美》阅读笔记

2005ilovesky — 2009-09-17 00:45:54

选择阅读《瞬间之美》的最初原因，就是单纯的因为它是之前看过的《就这么简单》的作者翻译的，觉得一个优秀的交互设计师，他推荐的书应该也很值得一看。事实证明，确实如此。

在这本书中，原作者探究了界面的种种微妙细节，它们在用户使用的每一个瞬间如何改善或是破坏用户的体验，进而探讨了应该如何对每一个细节加以改进。让我们能够学习到如何发现设计的不足并持续改进的方法。

整本书以用户应用互联网从始至终的所有细节为脉络，分成了指引用户、学习、搜索、深入、参与、管理信息和离开七个部分。虽然看目录有三十多章，但是每章内容都很少，而且作者都是通过一个个小故事来展开的，所以请放心阅读，绝对不会让你感到枯燥。

以下是对个人认为值得学习的知识所进行的简要总结：

第一部分指引用户

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

我觉得这章中提出的“发现页面布局” 观点，非常值得大家了解。我们平时设计制作页面时，首先涉及到的就是布局。作者认为布局是内容组织的必然结果，是逐渐形成的，一旦设计者周全考虑了页面的所有需求，并且确定了每一块的内容，想要的布局就出现了。或许我们平时构思布局的时候运用的就是这种方法，通过阅读书中的这部分内容，跟随作者的思路，能够更深入的认识到这种布局方法的合理性和可行性。

如何通过设计引导用户的视线，作者介绍了两种方法：

1、利用“对角线平衡”的布局设计。（不是强制遵守的原则，但多数时候会奏效）

2、使用颜色来吸引注意。

第二章凸显个性

作者通过个人网站的设计过程，讲述了怎么让网站来凸显自己本身的特性。其中值得借鉴的是使用符号来统一设计风格，形成积极的印象。阅读中体会到，一个好设计的诞生，可能是由于某部电影或者其他的什么东西突然触动了你。所以作为优秀设计师，在潜心学习专业技能的同时，也应该不断的扩充自己的知识面。并保持对生活的兴趣，因为真的不知道什么时候，什么东西会促使你产生灵感。

第三章导航之道

设计软件产品导航时，设置的菜单不应该是基于对象，而应该是基于任务（动宾词组）。以用户为出发点，让用户感受到是自己在指挥软件做事。

第四章链接生来不平等

这里提到了一个“环境提示”的说法。（采用字体大小和颜色双重表现方式区别链接的轻重程度）

第五章标签云里抬头看路

可能这个名词早就有了，不过我却是在这本书中得知的，以前见过类似的表现形式，但并不知道是所谓的“标签云”。我们技术中心博客的首页右下部分就有个名为“标签”的栏目，其中以大、粗字体显示的标签，或许就是受关注比较多或者此标签使用频率比较高，目前还不是很确定。

第二部分学习

第六章开门见山

对于用户来说，一个简短的句子远比一大段文字来得有意义，即使这段文字的文笔很好。重要的并不是我们提供的信息量有多大，而是我们能否给他们提供真正需要的信息。

第七章为界面做标记

设计不能基于我们一厢情愿的“假设”（假设用户理解我们使用的术语等），我们需要假设用户毫不了解我们的软件，随后给他们足够的信息以便帮助他们理解。

第八章生动传神的视频

当语言已经无法描述一个问题的时候，可以选择通过视频(screencast)来实现解释说明。视频也可以用来描述想法，比文字更为生动、丰富。

第三部分搜索

第九章提出搜索词建议

论证了自动完成搜索的优势和劣势。我所理解的自动完成搜索就类似于此时我们正在使用的搜狗输入法，不用你输入全部的拼音，就有很大可能找到自己需要的词汇。当然或许这并不是十分恰当，但是我觉得这样想很直观。

第十章列出搜索结果

对于搜索结果页面，分页系统界面和backto链接是非常重要的。推荐参照google的搜索分页系统。这里摘录了作者优化分页系统的过程，本身这个一步一步优化的思维就值得我们学习。

-->-->

可能多数人看到第二次修改的结果后就已经觉得很好了，可是作者最后考虑加入文字链接的原因是增大向前向后两个按钮的点击响应区域。好的设计真的是需要一个逐步完善的过程，而时刻为用户着想真的非常重要。

第十一章精炼你的搜索

这章比较重要的是“递进显示”的设计方法，它能根据实际需要（即依靠用户的输入）而逐步显示控件，而不是默认把他们一股脑的堆在用户的眼前。

第四部分深入

第十二章视频播放器的标准化

如果想为网站设计一款标准的视频播放器，可以参看本章，作者考虑了很多的因素。

第十三章巩固你的表单布局

在互联网中，表单真的很常见，我们平时的工作中也会涉及到表单，大家也多被标签和控件两列分布，标签居左还是居右对齐的问题深深困扰过。作者推荐标签位于控件左上方的单列布局形式，这样便于迎合用户向下浏览的习惯。我们公司的个人注册部分，采用的就是这种方式，或许当初那样设计时也是考虑了右侧的即时校验。

对于每个表单最后的每组按钮（确认和重置，或者登录和注册）。应该给它们不同的设置，凸显出用户经常使用到的那个按钮，这样用户可以不用过多的思考，便点击了正确的按钮。同样的也可以为期望用户点击的按钮或者链接做突出的设计，以达到吸引用户点击的目的。我们各行业网站首页的个人登录部分，个人注册和忘记密码两个链接就很好的体现了这种思想。

如果你一直觉得表单的设计很简单，每次设计制作时都是随意摆放的话，我觉得非常有必要阅读下这章。因为你为获得表单最佳表现方式所花费的几分钟时间绝对是值得的。

第十四章驾驭Wizard向导

Wizard向导是一种多步骤的交互方式，用于引导用户一步一步地通过那些固有顺序的处理过程。本章例子中提到了一个可折叠面板控件。

第十五章即时校验

今天的多数表单都已经使用JavaScript做即时校验，除了考虑到减轻服务器负担外，也能极大的为用户提供良好的交互体验，即时校验不应该只纠错，也要赞扬。若能实时根据用户的填写更新后续相应的信息，将使交互变得更加完美。

第十六章简化长表单

并不是所有的交互都能够简化，但要尝试让交互看起来更容易。为用户建立清晰的预期，把复杂的过程分解成能一口口干掉的小块，这样复杂的交互也便于控制了。

第十七章让他们登录

我们大家肯定都经历过忘记用户名或者密码的事情，无奈下只好使用网站提供的“忘记密码”链接，本章中作者通过记录用户名的方式优化了重新找回密码的过程，以名为happy的用户登录800hr首页为例，当这个用户收藏800hr首页的时候，自动为他保存的是http://www.800hr.com/happy，这样只需要密码就可以登录，不用记住用户名，而当忘记密码的时候，系统通过用户名自动在后台找到注册邮箱，将密码发送过去。避免了用户在忘记密码页面重新输入用户名和邮箱的麻烦。这在很大程度上会促进用户的再次登录。当然需要提供一个非本人在本机器上登录的链接入口。

第十八章记录字符数

有很多表单域都需要字数限制，我就经历过充满激情的写了很多文字，点击确定按钮后却出来个提示告诉我字数超过限制，真是让人郁闷。还有一种情况就是当你输入的字数达到限制后，你后来输入的任何文字都无法显示，而当一直低着头打字的你，终于抬头发现问题时，或许你会第一时间怀疑键盘出了毛病。

基于上面的问题，QQ的滔滔心情中回复好友心情部分采用的是在表单域的上方提示了表单域的字数限制，并且会根据你的输入实时的显示剩余可以输入的字数。真的是非常贴心。而选择把提示文字放在表单域的上方，也是考虑了使用屏幕阅读器的用户。

-->-->

第五部分参与

第十九章创建个人资料

为了满足网站中不同用户的不同需求，对于创建资料的过程进行分层，设计一种能自动变化的个人资料页面，让它能动态记录用户在网站上的行为。以便增加用户之间的交互。

所谓的分层是指对于所有用户只需要填写基础的个人信息即可完成注册，而对于特殊的用户，比如平面设计师社区中的设计师们，可以额外为他们增加一些关于发布作品什么的特殊信息。

我们每个人大概都在社交网站上注册过，而每次登录的时候，可以看到自己以及好友的最新动态，你可能对好友最近发表的某篇文章感兴趣，然后点击进入他的页面进行浏览，评论以及其他的操作，然而如果他的信息没有显示在你的页面，或许你不会主动查看他最近是否有发表新文章。这种动态记录用户行为的方式，确实能增加彼此之间的交互。而用户为了获知好友的最新状况，会不断地回访，则意味着会反复的光顾网站。

第二十章编辑

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

我们平时会接触到很多具有编辑功能的软件产品，试想无论我们做什么操作，所有的工具都显示出来让你自行选择是件多么可怕的事情，而对工具进行适当的分类，在用户做不同操作的时候只显示相匹配的工具，能为用户减轻很多的负担，让交互体验更良好。

第二十一章开展社交活动

本章中作者认真分析了Become My Friend 和 Follow My Activities的区别，认为网站应该根据自己的目的采用不同的方式增进用户之间的交互。

第二十二章显而易见的博客

通往更好的博客的三条路：

1、博客应该便于浏览者扫描页面，以决定某篇日志是否值得阅读。

为每篇博文提供能概况全文内容的开篇陈述。

2、博客应当能更好的鼓励交流。提及了在博客中提供Trackback(引用通告)[1]。

Trackback是一种网络日志应用工具，可以让博主知道自己日志的读者中有那些人撰写了与之相关的文章，实现网站之间的互相通告。其意义在于，博主可以在自己的博客中发表对该日志的评论，同时被评论者的页面会出现该评论的链接，促使评论在双方彼此的日志中都能够得到体现。

3、好的博客设计应该能够诱使人们阅读更多其他的日志。

浏览过很多的博客，其中也包括从事UI工作的作者，在他们的博客文章中，很容易看到某个词链接到过去所写的某篇日志中。

简单概括起来，通过Trackback和评论来鼓励交流、为博客日志撰写概要、为相关内容提供链接。如果你有自己的博客，而且想提高他的访问量和可用性，那么马上应用本章中提到的知识吧。

第二十三章邀请讨论

主要阐述了为什么不要对评论加以控制。和用户之间建立良好的信任，起用自己的Otaku，标记恶意评论者。

Otaku指那些对产品热衷但又非本公司成员的用户，他们可以在论坛里帮助解决其他用户的问题，属于不需报酬的宣传人员。他们对产品提出的意见是非常值得关注的。他们对产品的好评也会让更多的用户信服。

标记恶意评论者是通过提供一个小小的标记系统来实现的。当用户看到某个恶意评论的时候可以通过标记系统通知管理员来处理这个评论。

第二十四章得到一个好的评分

讲述怎样设计一个更好的评分系统。

-->-->

第六部分管理信息

第二十五章让RSS更有意义

推广某项新技术时，我们的首要目标应该是让它通俗易懂。没有用过，甚至用过RSS的部分人都不知道这是Really Simple Syndication三个词的缩写形式。

没有接触过RSS的人仅凭一个文本为RSS的按钮，无法预知点击后会发生什么，所以应该提供适当的文字说明。多数网站直接提供了多种订阅器的订阅按钮，这种做法非常好，稍有遗憾的情况是，它提供的订阅器中刚好没有你使用的那款。如果在兼容上面两种情况的同时，能支持邮件订阅则更加完美了，毕竟电子邮件的使用率是非常高的。

第二十六章自定义标签

我们写文章的时候也会用到Tag，只是一直对它的理解很浅显，觉得应该设置成文章中的关键词，便于自己或者其他用户使用关键词进行搜索。但至于具体这样的搜索是怎么工作或者说工作的好不好却不是很清楚。

对于同样的一篇文章，可能不同的人设置的tag是不同的，那么网站应该采用某种办法侦测相似的tag，并且让用户能够为标记的内容选择那些已经有的tag。这点163博客上的处理方式是在你为新文章添加标签的时候，会显示所有以前你设置过的标签，如果有合适的你可以直接选用，如果没有则可以继续添加。

作者提到了关于标签的两种系统，即分类系统和分众分类系统。前者是预先定义好tag，所有人都遵循和使用。分众分类系统则是在前者的基础上，用户可以自主添加和改变分类。

第二十七章通过拖放来组织信息

一个有效的拖放交互需要提供三种状态：

1、“邀请”状态。

2、“操作”状态。

3、“实现”状态。

尽管拖放操作和个性化主页这样的功能设计的很好，但并不是所有的页面都有必要。只有当页面是用户的“目的地”时，才是一个很好的应用。

第二十八章用系统通知来管理中断

提前通知用户即将做出的改变，一是以邮件形式告知，二是在原有设计上提供新变化的链接或者说明。而作者推荐了以类似原有欢迎页面的形式提供新变化的说明。

第七部分离开

第二十九章退出

在用户退出的时候，设置回到起初的登录页面，并且在此页中提供相应的新功能的介绍，以此吸引用户再次登录。

第三十章抹去那些尘封的用户

通过给尘封用户发送邮件的方式提醒他们再次登录，而与此同时要提供给他们一些好处或是产品新特性的链接。但是对尘封用户发送邮件的时间不应该太频繁，我们公司采用的是三个月的时间，每三个月就会收到IT英才网的一个邮件提醒。

-->-->

我们IT英才网改版，新版页面比旧版页面对于个人来说有很多的优势，我们是否能在这封邮件里加以说明，以前访问过这个网站的人，觉得某个栏目设计的不是很合理，但是当得知你优化了很多东西的时候，或许他真的愿意重新开始使用本网。

第三十一章由他们去吧

应该让用户很轻松的就能注销账户。

本书的最后提供了优秀设计的金钥匙：

1、只提供用户所需。

2、让初学者尽快转变成中级用户。

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

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

5、为支持特定行为而设计。

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

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

设计即传达，要想设计出伟大的体验，我们必须成为伟大的传达者。

好的设计是由一大推差的设计演变进化的结果。

所有的交互都必须尽可能的清晰。

有方向感的传达

千鸟 — 2009-08-30 17:20:17

上次书友会出版社朋友送了本《瞬间之美》，一直没空，到前几天才在地铁上翻了十几章。大概刚过半，已经发现了几处比较新颖的内容，比如30页原文：

如果没有动词，菜单就会很愚蠢而糟糕。
把名词主导的按钮标签改成了由动词主导的标签。

问题概括的好，其实观点不新，就是要让用户有“主人”的感觉。还有31-32页原文：

Login这个词用法是错误的。
Login不是一个动作，这就好象“鞋”不是一个动作一样。他是一个名词，意思是the Login Interface（登录的界面）。

并且还提出，正确用法应该是Sign in，仔细想想的确应该如此。在早期网站登录看到最多的就是Login和Register，偶尔还见有中文网站的图形修饰上有Login和Register。大概04年我首先发现Netvibes的登录注册是Sign in和Sign up，当时挺纳闷，反正好像意思也差不多。后来逐渐在英文产品中就少见了Login的身影，看来与优秀设计师们的推动有很大关系。

此问题在中文产品里似乎不明显，中文没那么复杂的描述语法。换个角度理解，Login, Logon主要针对操作系统，而Sign in, Sign on主要针对应用系统。有趣的是，在搜索的知识问答信息里，可以找到不少类似咨询“Sign和Login区别”的问题，看来中文网民还是看Login顺眼。

当然，应用系统里现在最流行的注册是Create an account。因为所有交互行为都基于任务，用户要的并不是与界面对象进行交互，而是要做想做的事。道理如写“注册”让用户点，但其实注册的目地是“创建帐户”，所以还不如直接“创建帐户”来的清晰直接。

再举个例子，传统登录表单都会有“忘记密码？”功能。但站长们很快就发现，用户通常不仅仅可能忘记密码，还有可能因为忘记了用户名、保护邮箱、口令，或其他更离奇古怪的问题而影响登录。于是相应增强了“忘记密码？”功能，但细心的设计师会发现，“忘记密码”几个字已经难以概括这么复杂的功能需求。比如，有登录表单已经概括为“无法访问您的帐户？”

最后，早期网站和软件的帮助都习惯用FAQ，现在还能见到么？应该都Help了吧。因为FAQ只是个东西，人家Help才是个动作。

相关话题：瞬间之美源地址：http://blog.rexsong.com/?p=6320

用按钮建立清晰期望

千鸟 — 2009-09-04 09:39:01

继续阅读《瞬间之美》，原文101-102页原文：

网络上OK和Cancel按钮无处不在。
单击OK不能使用户建立起一个清晰的期望。

概括起来，所有表单都可以用“OK/Cancel”按钮解决问题。但如果能更明确表单场景，帮助用户建立对点击结果的期望，传达效果更直接。比如注册表单最后，用“确定, OK”能告诉用户表单填写完成，但在提交注册表单肯定是注册用户，所以如果用“现在注册, Register now”则能更清晰的传达此时按按钮的结果。

同样道理，举最常见的blog评论表单例子。不少设计师blog评论表单按钮都是“发表、确定发表、发表评论、发言完毕”等类似说法，可见大家都有共识，普通的“确定, OK”放这真不合适。具体哪个标记最好？比较规矩的应该是“发表评论”，但我更倾向于“点击发表”类似略带强迫性的语气。

另外从场景上分析，我认为英文submit并不适合单独做评论表单按钮的标记，因为submit只有提交的意思，比较恰当的是submit comment。Gabriel Svennerberg 在08年写的论文（中译版）里提到四个关键点中的第二点总结为“Label the actions in a natural language. 标记动作用自然的语言。”

举搜索例子，几乎所有搜索功能按钮都是“搜索”，但是我们会看到谷歌是“Google搜索”，而百度是“百度一下”，无非都在强化自己的品牌营销。进一步分析，Google的图片、视频、地图搜索按钮分别是“搜索图片、搜索视频、搜索地图”，整条产品线类似。而百度的新闻、网页、贴吧、MP3、图片、视频搜索全部是“百度一下”，只有百度知道用“搜索答案”。

从实际效果来看，搜索首页“百度一下”大大提升了百度的品牌价值，但整条产品线都“百度一下”是否恰当？我认为Google的方案更优越，因为给用户建立了更清晰的期望。相应看了下腾讯的Soso、网易的Youdao，都没做类似考虑。

其实，我觉得Soso的搜索按钮用“搜搜”就一举两得，干嘛还搜索啊，太俗了。

相关话题：瞬间之美源地址：http://blog.rexsong.com/?p=6609

瞬间之美 - UCD大社区

将熟悉的问题陌生化

《瞬间之美》阅读笔记

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

第二章 凸显个性

第三章 导航之道

第四章 链接生来不平等

第五章 标签云里抬头看路

第六章 开门见山

第七章 为界面做标记

第八章 生动传神的视频

第九章 提出搜索词建议

第十章 列出搜索结果

第十一章 精炼你的搜索

第十二章 视频播放器的标准化

第十三章 巩固你的表单布局

第十四章 驾驭Wizard向导

第十五章 即时校验

第十六章 简化长表单

第十七章 让他们登录

第十八章 记录字符数

第十九章 创建个人资料

第二十章 编辑

第二十一章 开展社交活动

第二十二章 显而易见的博客

第二十三章 邀请讨论

第二十四章 得到一个好的评分

第二十五章 让RSS更有意义

第二十六章 自定义标签

第二十七章 通过拖放来组织信息

第二十八章 用系统通知来管理中断

第二十九章 退出

第三十章 抹去那些尘封的用户

第三十一章 由他们去吧

本书的最后提供了优秀设计的金钥匙：

设计即传达，要想设计出伟大的体验，我们必须成为伟大的传达者。

好的设计是由一大推差的设计演变进化的结果。

所有的交互都必须尽可能的清晰。

有方向感的传达

用按钮建立清晰期望

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

第二章凸显个性

第三章导航之道

第四章链接生来不平等

第五章标签云里抬头看路

第六章开门见山

第七章为界面做标记

第八章生动传神的视频

第九章提出搜索词建议

第十章列出搜索结果

第十一章精炼你的搜索

第十二章视频播放器的标准化

第十三章巩固你的表单布局

第十四章驾驭Wizard向导

第十五章即时校验

第十六章简化长表单

第十七章让他们登录

第十八章记录字符数

第十九章创建个人资料

第二十章编辑

第二十一章开展社交活动

第二十二章显而易见的博客

第二十三章邀请讨论

第二十四章得到一个好的评分

第二十五章让RSS更有意义

第二十六章自定义标签

第二十七章通过拖放来组织信息

第二十八章用系统通知来管理中断

第二十九章退出

第三十章抹去那些尘封的用户

第三十一章由他们去吧