## 092丨微交互：我们说魔鬼在细节，但为什么不说天使在细节？

每天5分钟，解决一个商业问题。欢迎收听，《刘润·5分钟商学院》，实战篇。

今天我们来学习产品设计时很容易被忽视的一个部分：细节设计。

所谓细节决定成败。丹·赛弗 （Dan Saffer）把这种产品与人在细节处的交互设计，叫“微交互”。这些细节，设计得好，可能是短暂、微小却令人过目难忘的瞬间；设计得不好，可能就是一场巨大的灾难。

我举个例子。

2012年，纽约爱乐乐团正在演奏马勒《第九交响曲》，观众全神贯注地聆听，在最安静、最庄严的时刻，突然，一位听众的手机响了。大家非常扫兴，但手机还在响。有人开始怒吼，可手机还是在响。这时，乐队指挥都受不了了，宣布终止演奏。观众席人声鼎沸，骂声四起。前排某位观众突然意识到，这好像是我的手机啊！赶快拿出来关掉，但现场已经一片混乱。

咦？我已经把手机设成静音了，怎么还会响呢？原来，这位观众的手机上，设了一个闹钟。虽然他特意把手机调成静音，但他不知道：静音时，闹钟还会响。

“那你还叫什么静音啊！”估计他当时的内心是崩溃的。这件事，甚至在互联网上掀起了巨大讨论：静音时，闹钟到底该不该响？

你看，把手机设成“静音”，这是多么简单的“微交互”啊，却能给用户带来这么大的影响。

那怎样才能做好“微交互”呢？丹·赛弗在他的著作《微交互：细节设计成就卓越产品》中，提出了好的微交互应该有的结构： 触发器、规则、反馈、循环与模式 。我们一个个来讲。

第一，触发器

触发器，是启动微交互的“扳机”。要把识别“扳机”的成本，降得越低越好。

比如，你把鼠标拖过图标，图标们会欢快跳跃，好像在说“点我、点我、点我”；比如网页上有照片和视频，视频中间都有个硕大的“播放”按钮；比如，摄像机上的录像键，总是最明显的红色；再比如，邮件APP的一角会显示未读邮件的数量，提示你应该点我。

这些都是“触发器”，触发器要足够清晰明显。

第二，规则

规则，用来规定微交互的过程，是整个微交互的核心。好的规则，应该顺乎人性、体贴方便。

比如，你在电商平台买东西，点“添加到购物车”按钮，商品就被添加到了“购物车”。这是一个最简单的微交互。

更好点的规则呢？如果你发现，用户过去买过这件商品，就可以把按钮改为“再次添加到购物车”，提示用户这不是第一次购买。

更更好点的规则呢？如果你发现，购物车里已经有了这件商品，就可以把按钮改为“再添加一个到购物车”。

规则，是微交互的核心。要仔细打磨，反复测试。

第三，反馈

反馈，是向用户说明规则。用户并不知道你设计了什么规则，你要通过反馈友好地让他知道。

比如，每个工程师都知道密码的规则：要有6个以上字符，最好有大写、小写和数字。不要用生日、纪念日等。但用户不知道啊，你要把规则，用反馈告诉他。

Twitter在这点上，做得非常好，它在你输入密码时，在右边用文字给你实时反馈，向你说明规则。

你输入字数太少，它显示：需要6个以上字符；你输入简单单词，它显示：密码太好猜了；符合要求，它会按照密码的强度，逐级显示：弱，不错，强，很强！

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171353571930255785.png)

第四，循环与模式

循环与模式，是规则的分支。

比如，闹钟是你每天接触的第一个“微交互”了吧。眼睛还没睁开，闹钟就响了。你重重拍下去，这时就启动了“再睡一会儿”这个分支的规则，也就是“模式”。

如何设计这个分支，最合理呢？你可以让它5分钟后再响，如果再拍下去，就别叫醒他了。“你永远叫不醒一个装睡的人”。这样合理吗？

也许不合理。更合理的做法是，拍第一次，5分钟后再响，拍第二次，3分钟后再响，拍第三次，缩短为1分钟。然后就一直响。因为你拍的次数越多，越有可能因为贪睡误事。

循环与模式，就是一次性的或者循环的分支规则。

### 💡 精华要点
- 1. 微交互，就是产品功能的细节。用户可能为有用的产品功能而来，也可能为失败的微交互而走。
- 
- 2. 一个好的微交互，要有四部分：触发器、规则、反馈、循环与模式。
- 
- 3. 我们常说，魔鬼在细节，但为什么不说天使在细节？因为细节做得好，也许不能让你上天堂；但细节做得不好，足以让你下地狱。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171408255103393772.jpg)

> 刘润
> 你觉得手机静音时，闹钟应该响吗？为什么？更好的微交互应该是怎样？
> 欢迎你在留言区分享，与大家一起，过过招。也别忘了把今天学到的内容，分享给你做设计的朋友，也许能够帮到他。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171355385972462224.jpg)
