写在前面

一个WEB网站，一个APP，或是一个微信服务号。用户使用一款互联网产品，大多是为了完成某件事情，达到一个目的，比如要在下雨天打一辆出租车。他拿出手机，打开滴滴打车的APP，经过一些简单操作，等待5分钟，最终乘车到达他想去的目的地。

假如有时间隧道，可以放慢用户使用的整个过程。从用户下载APP的那一瞬间起，有无数与这款APP互动的瞬间。打开APP看到引导页面，注册，登录，点击某个按钮展开新的页面，诸如此类。而这些瞬间，也决定了用户是否能够合理、顺利地完成他的目的，

设计并实现这些瞬间，则需要进入这条时间隧道，拆解用户整个过程，深入思考每一个瞬间。用户想要什么？如果能更好地呈现信息以便用户可以所想要的目的？

希望自己可以成为这个时间隧道里的一名匠人。

笔记部分

一、人生若只如初见

——用户打开一个新网页在前30秒内要做的事情

1、设计页面布局

方法：1）将所有内容放置在页面上2）不断调整让彼此协调。

笔记：作者强调的是“发现”页面布局，即设计页面布局是一个自然的过程，根据不同内容的重要程度和要达到的效果不同，不断调整各部分在整体页面所占的大小比重、位置、颜色。最终使页面布局清晰明了。整个过程，对于成熟的设计师来说有一种很自然的节奏。

2、导航

人们初次使用某个产品时

熟悉产品的关键：是否是否能够理解整个网站的内部结构。

方式：粗略扫一遍页面的主要区域，找出与自己目的相关的部分，再从中找出关联性更强的部分。

3、菜单

把操作选项分组，同一分类标签下的选项之间有关联性

菜单选项的命名：使用动宾词组，如保存更改、阅读更多，而不是单一的名词，因为用户想要进行的是对某对象进行操作，且可以让人感觉有指挥权。

确保产品的每一个细节都是正确的，eg. Login  VS  log in（sign in），登陆VS登录

4、链接生来不平等（不同重要度的信息展示）

放说明性文字：不是最好的解决方式，需要用户进行不必要的阅读

环境提示：字体大小、颜色深浅程度不同（但不要滥用，仅仅在真正起作用的时候使用）

5、关于“标签云”

不要强迫用户去思考，如为什么标签云里的标签大小不同、各自的含义是什么。

6、其他

创造良好的第一印象还需要知道什么该展现，什么不该展现，有所取舍

一个人不可能知道所有事情，不管学识有多渊博，最重要的是不断自我检验自己做事情的方式，尽可能确保所做的设计正逐步向预期靠拢。

设计中不要留任何漏洞，每个细节都很重要

二、两人对酌山花开

——用户在深入使用网站时所做的事情

1、信息开门见山

给出正确的信息，并且尽可能简明清楚。

为“扫描”而设计：用户使用时只是在扫描信息，而不是阅读信息，短的文字才有可能吸引一部分注意力。

重要的不是信息量有多大，而是我们是否提供给用户真正需要的信息。

2、不要假设用户对了解产品

检查每一个控件，一个从没见过这个产品的人是否也能明白它的意思。如果不，修改使其变得通俗易懂，或加上说明解释。

需要假设用户毫不了解我们的产品，给他们足够的信息以便帮助他们理解。

3、搜索

搜索联想机制：

1）好处：避免用户打错字，使输入更有效率。

2）局限性：盯着键盘输入的用户不一定能注意到推荐列表；用户往往会因为推荐而放弃自己原来更有效的搜索词

3）解决方式：输入一定的字符数后再显示推荐词，3~4个字符（适用于英语）

高级搜索

1）递进显示：人们通常只需要高级搜索中的某几个选项（留一行在快捷搜索中输入过的内容，再加上一行待输入的选项，以告诉用户如何增加搜索条件）

2）重置选项通常没有用。

3）使用高级搜索时，记得让快捷搜索的按钮失效

4）递进显示还可以用来隐藏各种少用的高级功能OR对付BOSS

4、表单填写

布局：相比两列布局，单列布局可以让用户花最少的时间将标签和输入域对应。

确定/取消按钮

1）按钮：文案的意义要明显，帮助用户建立对点击的预期。

2）根据重要程度区分两个按钮，其中一个可用链接（或其他形式显示），

建立清晰的预期

1）使用描述标题栏（进度条）/说明性文字，为接下来的步骤建立清晰预期。将所有步骤的名称都展现给用户，可让用户知道自己正处在哪个阶段。

2）确保每个步骤都很短，每个步骤/填写区域设定一个固定的高度

3）把每个已访问过的面板改为链接形式，用户可返回之前的面板去修改已输入的信息。

即时校验（输入出错时的处理、正确的反馈）

1）慎用弹出的警告对话框，用得越多越没有效果

2）在错误发生的第一时间做出响应，使用醒目的方式提醒用户，并加以意思清晰的提示信息。

3）用户输入完成之后（输入框失去焦点），再显示错误提示。

4）用户输入正确时给予反馈（绿色对勾）

输入框字符数的计算

1）加一条说明性文字，向用户解释输入的字数不能超过的字符数。

2）根据用户的输入，动态显示剩余可输入的字符数。

3）可以到剩余输入字符数较少时再提醒，如120字时不提醒，20字时再提醒。

5、创建个人资料

显示

1）递进显示：对将要填写的信息进行分层

2）空白页面可以鼓励人们行动。

编辑

1）可折叠面板控件：只显示与当前任务相关的工具；隐藏无关工具的同时，保证所有的工具在任何时间都能被用户找到。

2）递进显示

6、对待用户

不要控制任何东西。

抱怨声最大的人、欢呼最热烈的人、有人需要解答时尽自己所能帮助的人、总是在你身边告诉你他们正在想什么的人——最可能成为Otaku

满怀激情的憎恶比毫不关心的冷漠好得多。这部分人也可能转变为坚定的拥护者。

（参考小米）

7、评分：清晰＞效率

每个步骤都清晰易懂，即便步骤变长。

8、交互的三种状态

邀请：邀请用户采取行动，即用户看到后能明白自己下一步的动作

操作：用户的操作，重点在于简单又清楚（有时意味着需要更多简单的步骤）

实现：操作完成后给予用户反馈，让用户知道他的交互已经实现了（容易被遗漏）

三、曾经沧海难为水

——用户离开网站，暂时OR永久

1、简单

不要把退出过程做得太复杂或有太多文字

2、动员用户返回

退出后，回到登录页面

简单的登录界面+一些希望用户深入了解的功能（需要简短）

3、尘封的用户

通过邮件（或其他方式）提醒用户

1）告诉用户使用的理由：新功能，提供的价值等；

2）信息应富有人情味，而不是呆板、营销的语气

3）不应太频繁造成骚扰

调查用户离开的原因

1）与离开的用户进行沟通，了解产品不足；

2）组成小组，限制人数，造成排外的感觉

4、若是坚决离开，就随他们去吧~