瞬间之美 - web界面设计如何让用户心动
前言
若想完成优秀的设计，我们应该时刻自问：在这个瞬间我们希望用户做什么，界面应该如何鼓励他们完成这个任务？同时，还需要考虑用户此刻的目标是什么，我们的设计能如何帮助他们实现目标？
对我们做的方案，要“持续改进”。通过迭代的方法次能达到好的结果。
完整思维导图：点击这里！
第一部分 指引用户
在用户第一次打开站点的时候，我们需要在片刻之内，完成以下几件事：
设计吸引人的第一印象
以明确的路线来提供信息
提供工具指引用户
把观光客转变为消费者
第一章 令人心动的第一印象
页面布局的方法
周全考虑页面所有需求，确定每一块的内容，然后把所有栏目区域都扔到显示屏上，然后通过移动不断调整他们的位置和大小、让彼此协调。在这过程中，要考虑到站点的主要目的和意图，让重要的部分更凸显。
引导用户的视线
人浏览页面，实现往往趋向于从左上角移动到右下角。
古腾堡图表（对角线平衡） —— 左上角是第一视觉落点区，右下角是最终视觉落点区。右上和左下是视觉盲点。
可运用视觉元素来创建一条虚拟的“线”，让用户的视线跟随它从左上到又下、呈对角线似的移动。
使用颜色来吸引注意
人类对差异性更为敏感。
因此，可在用利用统一的、且有别于其他元素的颜色来突出对角线元素，将其捆绑到一起，以吸引用户的注意。
注意：对角线平衡法则不一定适用于所有页面。如果它能帮助强调页面意图，那可以尝试用该方法。
第二章 凸显个性
运用一些巧妙的元素，把所有设计捏合成一个整体将有助于展现个性。
只需要强调那些已有的东西，从而形成一种有凝聚力的“品牌”。
统一设计风格，形成积极的印象
使用于网站风格相符的符号（可以是颜色、图标、某种特殊的符号），让其在适当的位置简单的重复出现，保持主题风格。
时刻关注网站正在传达什么。
符号不要太突兀，有时候宁可简单朴素些。
第三章 导航之道
能很快在网站中找到方向，是很重要的。
人们获得导向的方法：粗略扫视一遍页面，看看自己有哪些选择，并且快速过滤掉无关自己兴趣的内容。
网站必须符合人们思考问题的方式。
每个人都想当指挥
软件菜单（所有导航菜单）都是基于任务的。
人们喜欢主导（控制）一些东西。
因此，导航的存在必须能够帮助用户实现某个任务，并且让用户觉得是自己在控制软件。
菜单命名使用动宾词组（动词-名词）能够告诉软件我们希望做那哪些动作，以及动作针对的对象是什么。
避免 Login 综合症
登录应该用： Log In 或者 Sign in
我来说，你来做
用户对站点保持兴趣的关键在于能否获得方向感、能否得到所需的信息、以及能否完成任务。
清晰的结构不仅有助于用户了解网站能做些什么，还能之道如何去做。
运用动宾词组，按钮和链接就能告诉用户能做什么。
创建导航时，确保是以用户为出发点，而不是系统。
第四章 链接生来不平等
对于web应用来说，不必要的阅读是人们最不愿意去做的事情。
让环境提示成为引导的线索 —— 环境因素的变化
展现岁月的印记
在数字领域中岁月感匮乏，不能很好的表现出时间因素。
我们可以利用文字大小来表示重要性，用颜色深浅来定义受欢迎程度。
这样可以让用户仅凭直觉就能判断，而不需要思考和检验。
为创建明确的路线而做的任何事情对用户都是有益的。
第五章 标签云里抬头看路
标签云是一种链接列表，显示在一个区域内，并且按照热门程度（或其他准则）来加重显示其中的某些标签。
可以根据内容热门程度进行排序，内容越受欢迎、链接字体越大。
使用标签云需要知识，知道标签云是怎么回事的人会从这种视图中获得方便，而那些不理解标签云的人所看到的仍旧是一个链接列表。
使用标签云之前，应该确定这个场景是否适合，是否会给用户造成困扰。
创造良好的第一印象还需要时刻知道什么该展现，什么不该展现，要有所取舍，不断自我检验做事的方式，不要留任何漏洞。
第二部分 学习
人们使用我们的产品时，他们所知道的一切都来自于我们所告诉他们的东西。因此，我们的职责是给出正确的信息，而且要尽可能简明清晰。
第六章 开门见山
为什么说欢迎词没有用
人们通常不会在网页上阅读文字，他们只是扫描
篇幅短的文字才有可能吸引一部分注意力（假设它真的有用）
在大信息量的站点里我们会专注于阅读，当探索一个新应用程序时则相反
我们考虑的是做，而不是读，通常我们都是为了完成某件事情
为扫描而设计
使用动宾词组能准确告诉用户即将发生什么，并且让用户有自己是指挥者的感觉
文字要更简练、明确，包含“赶快行动”的陈述
对用户来说，一个简短的句子远比一大段文字来的有意义。
重要的不是我们提供的信息量有多大，而是我们是否给他们提供真正需要的信息。
第七章 界面做标记
停止标记你的“假设”
别“假设”用户知道我们的用意
检查应用程序中每一个控件的标记，并且问问自己，一个从没见过这个程序的人是否也能明白它的意思。
如果不，要么修改使得它通俗易懂，要没加上说明元素解释它们。
如果是，也同样列一个清单，并把这个清单再给三个从为用过的人看，再进行筛选。
扩展想法至其他控件
为大部分控件加上相关帮助文档的链接
为各输入栏添加说明性文字，解释什么样的输入是有效的
使文字更简洁易懂、一目了然
我们需要假设用户毫不了解我们的软件，随后给他们足够的信息以便帮助他们理解。
第八章 生动传神的视频
使用视频来表述问题
使用视频来表述想法
注意：要搞清楚你的视频要传达什么内容
第三部分 搜索
把被动的网站浏览者转变为主动的活跃用户其实很简单，只需要把他们的目标从浏览转变为搜索。
第9章 提出搜索词建议
运用poka-yoke机制，使用自动完成输入
自动完成输入：能尝试猜测用户输入的文字，并且动态地搜索出适配的结果，然后推荐给用户，辅助他们完成输入。
自动搜索，能避免用户打错字，从而确保其搜索更有效。
局限性
不是在任何情况下都能提供帮助
当用户搜索一些小范围数据时，它会很有用
如果进行广域搜索，并不如此。（在进行没有固定范围的广域搜索时，自动完成功能可能会诱导用户放弃自己本来正确的想法，从而去选用网站推荐的、但其实效率较低的搜索词汇。）
在输入的字数不足以让推荐词有意义之前，请不要显示推荐词。暂时界定为3～4个字符。
自动完成的好处
帮助大部分用户更加快速地获得信息
避免他们在搜索过程中出现失误
防止为同一个数据创建多个数据库条目
让用户搜寻出信息的瞬间得到他们的赞赏和感激
第10章 列出搜索结果
信赖那些行之有效的标准
标准分页
两个箭头分别放在页码链接两侧
第一页的时候，左箭头不可用
最后一页的时候，右箭头不可用
左右箭头颜色与链接颜色相配套
加大文字及链接点击范围
当前页码，取消链接属性，从链接中凸显出来
整个分页系统放置在列表下方正中
提供回到搜索结果列表的出口
在设计搜索结果页时，请考虑在其中加上类似：home(首页) -> search results(搜索结果列表) -> product page(产品页面)
好的网站设计应该能够通过“无浏览器自测试”的检验，而只依靠网站本身来引导用户。
第11章 精炼你的搜索
高级搜索也简洁
绝大多数人不愿费事去逐行逐项地编辑表单。
人类的行为模式告诉我们，没有必要一次就把所有的选项都摆出来。只要章必要时才增加选项。
递进显示：它能根据实际需要（即依靠用户的输入）而逐步显示控件，而不是默认把它们一股脑全堆在眼前。
绝大部分时候，用户不想全部从头再来，他们只希望修改部分内容，因此重置选项其实一点用都没有。
引人入胜的交互
将快速搜索和高级搜索方在同一个界面，在快速搜索旁边添加高级搜索的链接，需要时，点击下拉出现。用户需要高级搜索的时候不需要等待载入新的网页。
同时，当用户选择高级搜索时，快速搜索功能会被置灰，搜索按钮实效，提示文字变为“hide advanced options”
第四部分 深入
第12章 视频播放器的标准化
左上角：视频标题，发布时间，发布者
视频窗口区域，默认不播放，区域正中显示播放按钮，以区别于图片，并且点击图片能播放视频。
滑块按钮、音量控件，可点击区域要大，便于点击
需要显示视频总时长，当前播放时长
内容多时，能划分章节，并且显示章节按钮。点击按钮能够自动选择章节，进行播放。
第13章 巩固你的表单布局
在正确的时间选用正确的布局，是提升用户操作体验的关键。
表单布局的两种模式
两行布局
缩短标签与输入框的距离，会使用户不容易放错
两行布局会减缓用户往下浏览的速度
单列布局
标签位于输入框的上方居左对齐
用户只需在同一个方向移动视线就能看到标签与输入框
让“确定／取消”更完美
按钮位置放左边 —— 视觉上建立一个支撑点，并且顺势而下形成好看的直线
按钮的文字，应该有一个清晰的期望（用标准的确定／取消，尽量不用不清晰的表述）
首选处理方式和第二处理方式
最可能选择的是首选 —— 确定
强调首选处理方式，减弱第二处理方式
第14章 驾驭wizard向导
wizard向导：以线性方式逐步完成的操作流程（多步骤交互方式）
建立清晰的预期
告知用户总共有多少个步骤
为每个步骤加上描述标题
视觉强调当前步骤
设定范围界限
需要告知用户每个步骤真的都不长 —— 为该区域设定固定高度
可折叠面板：高度固定，当前步骤打开，其余步骤关闭且不可点击，点击下一个，关闭当前，打开下一个选项
已经访问过的面板改成链接形式，表示可以返回去修改已经输入的信息
第15章 及时校验
警告框越多，越没有效果
警告框应该用于应付紧急事件
要纠错，也要赞扬
错误发生的第一时间就给出提示：红色文字／背景，并加以表意清晰的提示信息
正确填写完某个项目后也给个反馈：绿色打勾图标，表示“通过”
错误提示应该在用户输入之后、失去焦点时再显示
如果用户跳过了某部分表单并尝试提交，可以在页面顶部列举发生的错误（红色文字+带背景区域）
实时更新信息
根据用户操作，自动更改信息 —— 如购物车价格结算，根据用户操作的数量自动计算
总结
用户所希望完成的，同时与业务考虑相吻合，这是最理想的任务。 —— 为了满足我们的需求，得先保证满足用户的需求。
第16章 简化长表单
清晰的预期
使用户相信，表单其实没有实际那么复杂
可以把长表单拆分为好几个页面，添加步骤进度条（变成一个wizard向导）
去掉多余的表单域
第一时间就告知用户在完成表单过程中将会需要的信息（添加说明性文字，将需要的信息列成项目列表）
第17章 让他们登陆
用户经常记不住账号密码。
如果有办法记录用户的用户名，哪怕只用户忘记密码的时候，只要重新修改密码就行，会在很大程度上促使用户再次登陆。
第18章 计算字符数
改进web应用所能做的最重要的一件事情就是减少出错的可能性。
到达限制
对于那些有字数限制的输入框提示用户还能输入几个字，可以将这个提示放在表单域上方
一点小警告
可以这么做：一开始这个数字变量是灰色的，一旦输入超过了一定范围，就变成红色，提醒它们不到x个字符。
可以将单独的数字放在输入域右上方，直观明了
第五部分 参与
第19章 创建个人资料
用户资料分层
递进地增加个人资料的填写，避免用户填写信息过多，又能针对性的获取有效信息
动态用户资料 —— 用户行为的记录
喜欢的，创建的，阅读的，收藏的 —— 利于寻找品味相同的用户 （有效的设计手段）
无动态的用户，个人资料空白，并提供链接便于用户操作 —— 激励人们采取行动
第20章 编辑
多功能症是指产品由于包含过多功能而引起的一种可用性底下的疾病。
在正确的时间显示正确的工具
只显示与当前任务相关的工具，并且确保所有工具只任何时间都能被用户找到。
同时，用户不希望任务被中断
把高级的玩意藏起来
递进显示是一种根据功能是否普及或必要逐步展现它们的方法。
文档模式是说：对话框将短暂地组织用户和被编辑网页之间的交互，即无法使用编辑面板，但用户仍能够与应用程序的其他部分以及浏览器本身交互。
打扫干净
如果你发现要完成某些任务时会牵扯到非常多的工具和选项，那么最好尽快以全新的眼光重新检视，然后加以改进。
第21章 开展社交活动
如交友、评分、投票、评论等功能要仔细周期的考虑，思考让用户进行社交的目的，不要被热潮牵着走。
用户使用情景不同，进行社交的方式和程度也有所不同。
关注自己站点真正的意图以及用户真正的意图，再决定采取哪种社交方式。
第22章 显而易见的博客
通往更好的博客的三条路
博客应该便于浏览者扫描页面
博客应当能更好地鼓励交流
好的博客设计应该能够诱使人们阅读更多其他日志
解决方案
主体部分
顶部有清晰的网站标题，紧随一段概要 —— 使用户明白站点是关于什么，能预料从中将得到什么
下方是日志标题
简短的内容概要
作者名称，发布日期
正文本身
摘录 —— 增加互动
评论列表
让用户发表评论 —— 鼓励人们交流
左侧
搜索栏
网站其他栏目
相关日志
最受欢迎日志
右侧
订阅按钮
上一篇，下一篇
以上，是博客应该要提供的（不强制布局）
关键是：用诚恳、真实的声音与客户对话，将能快速增加吸引力，是接近受众想法和观念最好的办法之一。
第23章 邀请讨论
让你的顾客发表意见
不要控制顾客言论，无论好与不好
如果我们限制了用户评论（需通过审查才能发表），很可能会让用户对网站丧失部分信任感
一个关于信任的问题
让顾客自由发表意见。信任是建立所有成功关系的基石。
给用户自己做判断的权利。（用户会自己从评论中得出结论）
启用你的otaku
otaku ——> 对某些领域有着痴迷热情的狂热者
满怀激情地憎恶比毫不关心的冷漠要好得多。
能成为你的otaku的人：
那些抱怨声最大的人
欢呼得最热烈的人
当有人需要解答问题时尽自己最大帮助的人
总是在你身边告诉你他们正在想什么的人
可以通过组织手段重塑顾客体验：
表示感谢它们的反馈
邀请加入志愿者，帮助解答其他顾客问题
给予回报
标记那些来犯者
标记系统，让用户举报
第24章 得到一个好的评分
最开始单纯用户展示五颗心，右侧是启动评分行为的链接以及总共评价次数
点击启动评价的链接，可以进行评价，有保存和取消按钮
保存后，更新更新平均值、总的评价次数，以及显示可以返回修改的链接。
注意，如果返回修改，平均值会发生变化，但是次数不会再增加。
步骤虽多，但每一步都是清晰的、易于理解的。
清晰胜于效率。
第六部分 管理信息
第25章 让rss更有意义
用户并不关心技术本身，而是关心自己能得到什么。
所有按钮链接都应该在用户脑海中建立清晰的预期，并且告诉他们点击后将会发生什么。
人们愿意学习新想法，但是得保证这些新想法能够被学习。
降低学习曲线：使用能够建立强烈直观印象的词汇，消除语言障碍
为用户提供更多的选择
rss订阅案例：
使用订阅等字眼，而不直接只用rss
不中断用户，让他们感觉这些内容还属于本网站
向用户展示所有可行方案，并附上简单清晰的说明：
使用rss订阅程序一键订阅
转化为电子邮件订阅
使用浏览器订阅并浏览
第26章 自定义标签
优点：
更容易查找
更富有弹性：能通过无数种方式来查找和组织内容
存在的问题：
并不是所有人都清楚它的机制
用户对其术语和语法的不熟悉会带来使用时的混淆
同一个tag可能会使用各种各样的字眼
网站的搜索引擎对tag的支持会远大于对自然关键词的支持
改善：
消除语言障碍（使用label代替tag）
向用户解释tag是如何工作的
侦测相似的tag，让用户能够为想标记的内容选择已有的tag
网站的搜索功能必须为自然关键词提供有效的搜索结果
第27章 通过拖放来组织内容
交互的三种状态：
邀请：告诉用户哪些元素可以拖放（可拖拽的元素显示文字说明、鼠标经过时改变状态等）
操作：每个交互步骤必须简单清楚。拖拽过程中，告诉用户因拖拽对界面的影响
完成：让用户知道他的交互已经实现
要让用户知道，如何开始，如何完成，然后相信自己操作无误。
思考拖放的交互是否得当 —— 短暂使用／偶尔使用，则不必要采用定制化的交互
第28章 用系统通知来管理中断
产品发生重大改版时，要有计划的逐步让用户知道并接受。而不是毫无预兆的直接发布。
确定发布时间
进行小范围（“积极用户”）试用测试，修正小bug
通知用户：邮件、站内信、博客等一切能与用户交流等方式
在网站首页添加关于更新的预告信息
创建说明页，说明包含网站更新的所有细节
第七部分 离开
第29章 退出
两种模式
封闭系统：除非登陆，否则无法看到应用的任何内容
开放系统：登出后，被送回为游客所显示的主页去，即未登录也能看到部分内容
好的退出设计
退出时会到登录页面
利用空白进行推广
指出用户尚未发现的功能
引导用户了解新功能
宣传网站取得的成就
发布影响到整个用户群里的新闻
第30章 抹去那些尘封的用户
尘封用户：指那些注册了某个web应用或服务，却有放弃了账户的人。
可以做的事情
了解需求，通过诙谐幽默，富有人情味的个性化邮件激发用户再回来
调查原因
提供对话的机会 —— 成立“尘封用户”小组，目标聚焦于日后的改进工作（1年1～2次）
不要做的太多火 —— 通过产品平均使用频率推算，多久没用，再去提醒用户
第31章 由他们去吧
避免在任何时候让客户感到自己受到了限制 —— 无需任何努力就可以取消账户
在用户取消账户时，发送最后一封邮件：
提供取消账户并删除文件的链接
提供返回账户的链接
邀请用户反馈哪里出了问题
...