瞬间之美:Web 界面设计如何让用户心动(china-pub全国首发)(09年度畅销榜TOP50)(全彩印刷,首部Web"微观设计"杰作)

.第6 章　开门见山................................................................................. 49
6.1　为什么说欢迎辞没有用 ...............................................................................49
6.2　为扫描而设计 ...............................................................................................51
第7 章　为界面做标记.......................................................................... 55
7.1　停止标记你的“假设” .................................................................................56
第8 章　生动传神的视频...................................................................... 59
8.1　视频演示胜过千言万语 ...............................................................................60
8.1.1　使用视频来表述问题 .......................................................................61
8.1.2　使用视频来表述想法 .......................................................................62
8.2　极为简单的视频演示艺术 ...........................................................................63
第三部分　搜　　索
第9 章　提出搜索词建议...................................................................... 67
9.1　运用poka-yoke 机制，使用自动完成输入框 ............................................68
9.1.1　局限性 ...............................................................................................70
9.1.2　好雨知时节 .......................................................................................72
第10 章　列出搜索结果........................................................................ 73
10.1　信赖那些行之有效的标准 .........................................................................74
第11 章　精炼你的搜索........................................................................ 78
11.1　高级搜索也简洁 ........................................................................................80
11.1.1　递进显示 .......................................................................................81
11.1.2　引人入胜的交互 ...........................................................................82
第四部分　深　　入
第12 章　视频播放器的标准化............................................................. 87
12.1　拨开vcr 设计的迷雾...............................................................................87
12.1.1　且慢——还有做得更好的 ...........................................................92
12.1.2　博采众长 .......................................................................................94
第13 章　巩固你的表单布局................................................................. 97
13.1　设计出行云流水般的表单 .........................................................................98
13.2　让“确定/ 取消”更完美 ........................................................................101
13.2.1　首选处理方式和第二处理方式 .................................................102
13.2.2　这很重要 .....................................................................................104
第14 章　驾驭wizard 向导................................................................ 105
14.1　建立清晰的预期 .......................................................................................105
第15 章　最后的一英里：即时校验.................................................... 111
15.1　要纠错，也要赞扬 ...................................................................................113
第16 章　简化长表单.......................................................................... 120
16.1　清晰的预期 ...............................................................................................121
第17 章　让他们登录.......................................................................... 126
17.1　再一次改进标准 .......................................................................................127
17.1.1　网络用户名与用户姓名 .............................................................127
17.1.2　更上一层楼 .................................................................................128
第18 章　计算字符数.......................................................................... 131
18.1　到达限制 ...................................................................................................132
18.1.1　编辑中的poka-yoke ...................................................................134
18.1.2　一点小警告 .................................................................................136
第五部分　参　　与
第19 章　创建个人资料...................................................................... 139
19.1　递进地增加 ...............................................................................................140
19.1.1　把数据变成仪表盘 .....................................................................141
19.1.2　空白资料页面 .............................................................................143
第20 章　编辑..................................................................................... 144
20.1　在正确的时间显示正确的工具 ...............................................................146
20.1.1　把高级的玩意藏起来 .................................................................148
20.1.2　打扫干净 .....................................................................................150
第21 章　开展社交活动...................................................................... 151
21.1　朋友与随员 ...............................................................................................152
第22 章　显而易见的博客.................................................................. 156
22.1　通往更好的博客的三条路 .......................................................................157
22.1.1　解决方案 .....................................................................................158
22.1.2　别跟着傻瓜上路 .........................................................................163
第23 章　邀请讨论............................................................................. 164
23.1　让你的顾客发表意见 ...............................................................................164
23.1.1　一个关于信任的问题 ................................................................165
23.1.2　起用你的otaku ..........................................................................166
23.1.3　标记那些来犯者 .........................................................................168
23.1.4　为他们让路 .................................................................................168
第24 章　得到一个好的评分............................................................... 169
24.1　清晰胜于效率 ...........................................................................................170
第六部分　管理信息
第25 章　让rss 更有意义................................................................. 175
25.1　破译其他选择 ...........................................................................................177
第26 章　自定义标签.......................................................................... 181
26.1　分类系统、分众分类系统以及变异体 ...................................................183
26.1.1　消除语言障碍 .............................................................................183
26.1.2　阐述新想法 .................................................................................184
26.1.3　提出建议 .....................................................................................184
26.1.4　搜索，搜索，再搜索 .................................................................185
26.1.5　自定义标签的未来 .....................................................................186
第27 章　通过拖放来组织信息........................................................... 187
27.1　交互的三种状态 .......................................................................................187
27.1.1　“邀请” .........................................................................................187
27.1.2　“操作” .........................................................................................188
27.1.3　“实现” .........................................................................................190
27.1.4　完成的感觉 .................................................................................191
27.1.5　判断你的功能是否正当 .............................................................192
第28 章　用系统通知来管理中断........................................................ 194
28.1　为改变而设计 ...........................................................................................195
28.2　界面元素的再利用资源 ...........................................................................198
第七部分　离　　开
第29 章　退出..................................................................................... 203
29.1　化简为繁 ...................................................................................................203
29.2　动员用户返回 ...........................................................................................205
29.2.1　空间的再利用 .............................................................................206
29.2.2　发布消息 .....................................................................................207
第30 章　抹去那些尘封的用户........................................................... 208
30.1　变怠惰为热情 ...........................................................................................209
30.1.1　个性化沟通 .................................................................................210
30.1.2　调查 .............................................................................................211
30.1.3　对话的机会 .................................................................................212
30.1.4　不要做得太过火 .........................................................................213
第31 章　由他们去吧.......................................................................... 215
31.1　优雅地失败 ...............................................................................................216
31.1.1　打点行李 .....................................................................................216
31.1.2　离去却（也许）并未失去 .........................................................218
优秀设计的金钥匙............................................................................... 221

.　　间心情愉快，效率很高，从而自我感觉得心应手。
　　 我们的工作就是考虑所有这些瞬间——设计一些东西来支持用户达成每
　　一个目标，而不会干扰或者妨碍他们。同时，把这些完全不同的部分凝
　　聚为一个整体。
　　 我们的工作不是设计花哨的屏幕，而是要设计美好的瞬间。
　　2前言
　　 无论是简单还是复杂的应用都是如此。最重要的是，当用户想要达到其
　　交互目标的种种时刻，都会发生些什么。
　　 要实现优秀设计的关键之一，就在于了解每一个瞬间需要发生一些什么
　　才能完美。而我们就应该去实现它们。
　　为瞬间而导航
　　 在每一个瞬间，用户都将发出各种各样的行为。他们在一天之内可以
　　从Amazon 游弋到Z Gallerie ①，然后可能做出从注册到退出之间的任
　　何事情。
　　 用户在互联网上的行为多种多样，有输入，有编辑，有搜索，有调整版
　　面，有创建，有上传，有删除，有共享，有组织，有参与。这些都是设计
　　师希望用户进行的行为。在大多数情况下，这也是用户正想要做的行为。
　　当然，我们也会做一些通常自己并不会意识到的事情。我们分析，我们
　　判断，我们遗忘、犯错误、走神、改变主意、迷失方向、感到困扰。而
　　如果幸运的话，我们会学到东西，得到指引。我们会有新的想法、形成
　　记忆、熟悉、信任、灵感乍现，并且觉得自己的工作富有成效。
　　 正是这些行为才让我们成为活生生的人。这本书就是要讨论如何设计那
　　些支持所有此类行为的界面——在用户需要进行选择的那些瞬间，帮助
　　他们做出正确的决定。我们将讨论创建怎样的交互行为以鼓励人们输入、
　　编辑、搜索和共享，激励他们完成所有我们希望他们做的事。我们还将
　　讨论如何设计各种手段，来帮助人们提升工作效率——即使他们天生忘
　　性大、老出错，或者总是三心二意。
　　 更确切地说，这本书收集了30 多个故事，阐明了如何将好的设计原则运
　　用到实际的Web 应用程序界面中去，使界面引人入胜，呼之欲出。自始
　　至终，这些故事都将以批判的眼光来看待设计，并且详究每一个细节，
　　力求确保人类——这种时常犯错而又行事乘张的生物——能不受软件产
　　品的限制，而又自我感觉良好。
　　 要设计美好的瞬间，就需要做到以下几点。
　　① Z Gallerie 是一个主营家居装饰的国际电子商务网站。网址为www.zgallerie.com/。
　　此处作者意指用户从A 逛到Z。——译者注
　　前言3
　　介绍一种具启迪意■ 义并且富有洞察力的界面设计方法，我称之为
　　“大声想出来”；
　　■ 以批判的眼光遍查用户与Web 应用交互的每一个阶段中的每一个
　　元素，一次就看一个瞬间；
　　■ 为所有的设计——从页面布局到在线社区——推荐一整套最优
　　方案。
　　 最重要的是，本书探究了界面的种种微妙细节，它们在用户使用的每一
　　个瞬间如何改善或是破坏用户的体验，进而探讨了应该如何对每一个细
　　节加以改进。
　　交互的设计
　　 本书的结构框架遵循了用户进行Web 应用操作时的典型步骤，也就是从
　　一开始最关键的“第一印象”，一直到最后他们退出并转向别处。每个部
　　分的标题直接与这些行为相关，每部分都讲解在这一个瞬间用户实实在
　　在要做的事情。
　　 第一部分到第三部分讲述的是当用户打开一个新网页后在头30 秒钟内
　　所要做的事情。这些章节里面的故事描述了他们首次了解界面、探寻方
　　向、略读文本熟悉更多情况、观看视频和动画演示，以及搜索详细信息
　　等情形。
　　 第四部分到第六部分则是关于用户在深入我们的网站时所做的事。一旦
　　他们决定要创建自己的账号，就会输入信息、编辑内容、管理数据，以
　　及通过种种方式与网站进行交互。在这个过程中，每一个瞬间都有可能
　　持久地影响他们对网站的信心和好感。
　　 第七部分则关注当用户离开网站——不管是暂时离开还是永久离开——
　　时所要发生的事情。
　　 换句话说，我有意地将这整本书的结构做如此安排。其目的是使它能重
　　现出当用户面对Web 应用时由始至终的所有细节。我们将详细地探讨人
　　机对话中的每一个阶段，不管它是只有3 秒钟还是将会持续两年。如果
　　用一句话来概括，那就是在这些故事中所讨论的元素将会囊括在线用户
　　体验的完整情境。
　　4前言
　　 这样的顺序安排也方便你在日后能够随时翻阅，把这本书当作某种“灵
　　感参考指南”来使用。如果你在大半年后为了某个编辑功能的设计而一
　　筹莫展，可以打开书里相应的章节（第五部分）读几页，很有可能会得
　　到不少启发。
　　 而这些都是源于“讲故事”这种永不过时的艺术。
　　来自真实世界的问候
　　 在这些故事里，有一些讲述了如何贯彻和实施那些常见的设计原则，还
　　有些则会探讨你可能从未遇见过的个别情况。有一些故事提出了新的见
　　解和看法，还有些则似乎是老生常谈。不论怎样，它们存在的目的都是
　　为了启发你的思维，揭示各种事实和发现，提出理论培养直觉，最终让
　　你能设计出各个伟大的瞬间。
　　 在Designing the Obvious（之前我写的一本书）①中，我详细地阐述了关
　　于Web 应用设计的七个核心原则。在此基础上形成了一套通用的方式方
　　法，能够举一反三、成功地应用到任何Web 项目中去。
　　而在本书中，我用一系列故事来演示我是如何把这些想法和观点应用到
　　实际项目中的，从而为用户创造出令其印象深刻的瞬间。与此同时，我
　　还继续提出了大量新的想法和观点。
　　 这些故事有些是我的亲身体验，是我日常在进行设计时碰到的问题，而
　　有些则是全新的故事，是我专门为了本书而设计的。
　　所有的故事都直接源自那些痴迷于几乎任何交互式设计的设计师们头脑
　　中的想法。他们当中有些人在深夜辗转反侧地思索当地的快餐厅应当如
　　何摆放饮料机才能方便消费者，还有些人则花费大量时间揣摩那些获取
　　用户体验的各种瞬间，想方设法地加以改进。
　　大声地做出决定
　　 在Designing the Obvious 的末尾，我谈到了勇敢做出决定的重要性——哪
　　怕明知这些决定在以后肯定会改变。不论决定的有效性能持续多长时间，
　　① Designing the Obvious 由New Riders 出版社于2006 年10 月出版。网址为http://
　　rhjr.net/dto/。该书的中文版由机械工业出版社于2008 年1 月出版，书名《一目了
　　然》。——译者注
　　前言5
　　 都必须做出决定，使这个设计中的所有地方都按此决定来考虑，并且有
　　意为之。决不能听天由命。
　　 在本书中，我尝试做一些之前从没做过的事情：把做出那些决定的详细
　　过程全部揭晓并且逐步剖析给大家。
　　 我希望能揭示出“持续改进”这一设计方法的重要性。我将向你们展示
　　绝对需要采用迭代的方法才能达到好的结果。我将向你们展示如何应用
　　设计原则、探索、经验、直觉甚至感觉来指导设计过程。
　　换句话说，我大声地做出所有决定。
　　 我承认自己犯过错误，也从其他人那里学到很多，我向你们展示好的设
　　计其实是一大堆差的设计最终进化的结果。希望通过这样做，你们将发
　　现好的设计绝不是单纯因为天才的创意或者灵感爆发的一瞬间而产生的，
　　它是持续前进的永恒动力所造就的产物。
　　 多年之后你也可以重新翻阅这本书，并且质疑我所做的这些决定。可能
　　那时你会发现我在这里所说的一切对你来说都幼稚得可笑，而自己早已
　　经超越了我所在的高度。让这一切在你身上发生，是我最大的心愿。
　　我把自己敞开给你，是希望能帮助你学习“如何质疑自己”：在每一个设
　　计中找到缺点，并且不断地寻找方案来改进它。
　　开始交流
　　 这本书决不是一本所谓Web 界面的权威性指南读物。它只是一个交流的
　　开始，其目的是让你思考。
　　 书里所说的都不是什么权威或者官方的答案，因为本来就没有什么权威
　　或者官方的答案。当我向你具体推荐什么的时候，那只是基于我自身的
　　经验、观点和认识。甚至有时候，它们仅仅只是基于我的直觉（直觉是
　　每一位设计师都应当具有并且相信的东西）。
　　 因此，我几乎可以保证，你将会发现某些地方你能做得更好——你肯定
　　会找到一些我没想到的办法来让你的用户拥有更美好的瞬间。如果你做
　　到了，我希望你说出来。不要做一个整天躺在靠背椅里面的设计师——
　　走出去，告诉人们你所做的改进。
　　把你的意见和想法发邮件告诉我。把它们放在你的博客里面去。把它们
　　6前言
　　 告诉你的朋友。最好也告诉你的同事，还有你的老板。
　　 我从不认为自己是这个星球上知识最渊博的设计师，也从没相信过自己
　　做的一切都是金科玉律。一直以来我都是从其他人身上学习并获得灵感。
　　通过这本书，我希望向你传授知识并激发你的灵感，但同时也强烈地相
　　信和希望，最终你也能像我一样地传授给其他人。
　　 如果你有什么好的想法和意见，请告诉大家。让交流继续。
　　 即使已经尽了最大的努力，仍然是没有最好，只有更好。书中提到的这
　　些设计我已经尽了自己最大的努力，但如果你发现有什么方法能更进一
　　步，请大声地告诉大家！