微交互 (第三章 - 规则) 下

控制了用户的眼睛，就控制了用户的脚步

—— Jesse Schell "The Art of Game Design"

上一篇解读完了“设计规则”，那么剩下的补充内容就在这一篇分析下。

有限的选项和聪明的默认项

什么是“有限的选项”？就是提供给用户的选项少了，规则就越少了，用户就越容易理解这个交互。那什么又是“聪明的默认项”？就是选项少了的同时，再替用户选择一个默认的选项，这个选项是用户最有可能采起的下一个动做，因此要能提示用户。

我对于这个概念的理解是：原则上选项越少，用户越容易选择。因此，在设计方案上，是这样一个优先顺序：提供默认选项>提供有限选项>提供多个选项。

有限的选项

我以为有限的选项分为两种，一种是把不须要的隐藏：

例如Firefox的下载选项。当Firefox没有任何下载记录或文件时，下载按钮不被显示。当开始进行下载或有下载记录时，下载按钮会被显示在工具栏上。

按照社会人的说法，这就叫“没事儿别烦我，有事儿再联系。“

一种是只提供须要的：

书中举了一个例子，是关于Google只提供一个搜索框和一个按钮，简单明了，意图明显。可是一个例子怎么够，我就开始去找更多的例子让本身理解。在找的时候，我遵循一条“有限的选项便是把规则简化到最少”，果真找到了一个更好的例子来诠释这个概念，那就是：驾驶模式。

由于在行车驾驶的时候，驾驶员只有1秒左右的时间来处理其余信息。（为了行车安全，最好关闭手机）因此，在驾驶模式下的播放器界面，只保留了对用户最重要的选项——播放/暂停，上一曲，下一曲。此时，音乐播放的规则已经简化到最少，但保证了用户的正常使用。这就是有限的选项。

聪明的默认项

其实有限的选项和默认项是相辅相成的，最完美的状况是，在有限的选项中为用户提供默认项。而默认项应该是大部分用户最经常使用的那个选项。

在iOS 11中，当用户要删除截屏图片时，会弹出提醒框，其中“删除屏幕快照”的字体使用了红色，“取消”的字体使用了加粗。那么，先猜猜哪一个是聪明的默认选项。

在微信中，当你刚刚进行了一个截屏操做后，点击聊天界面的+按钮，微信会弹出一个快捷窗口，默认提供一个快速发图的选项。你能够直接点击图片，快速发送最新的截屏。不得不说，微信的这个默认选项简直聪明的不要不要的。

那么再来看iOS 11中，那个聪明的默认选项，其实就是：取消。

为何？为何是取消？为何“删除屏幕快照”要标红？年轻人，仍是要认真看，不要老想着搞个大事情。咱们再来看Apple官方的Human Interface Guidelines，其中有一条专门说了提醒框的“取消”按钮：

Identify destructive buttons. If an alert button results in a destructive action, such as deleting content, set the button’s style to Destructive so that it gets appropriate formatting by the system. ...... Additionally, provide a Cancel button so people can safely opt out of the destructive action. Make the Cancel button bold by marking it as the default button.

这条同时说明了“具备破坏性行为的按钮”应该使用特殊样式（iOS 11的破坏性标记色是红色），“取消”按钮应该加粗成为默认选项，由于它可让用户安全的离开当前操做模态。

减小无心义的选项，默认有价值的选项，选项越少效率越高。这不是我说的，是这大哥说的：

在理解可用选项并可以对它们逐个比较和评估的条件下，人们最有信心作出决定。
选项越少，区分越容易，评估越简单。

—— Colleen Roller 美国美林银行副总裁、可用性负责人

控件和用户输入

微交互，一定有信息输入，
信息输入，一定须要控件。

使用什么控件和如何展现控件是须要考虑的两个具体问题。而设计出来的控件必定要考虑到控件的“易操做”和“易识别”。

上图是iPhone的相机界面，下图是iPhone的库乐队(GarageBand)界面

先来定义：
须要不断重复的微交互，应易识别。
只作一次或者偶尔操做的微交互，应易操做。

再来解读：
红圈部分都是须要用户不断重复操做的地方——拍照的快门、音乐的播放和暂停。
因此，这些控件设计的都很容易识别。都在中轴线上，都用了实心图形，很醒目，不会按错。

蓝圈部分都是须要用户偶尔才会去设置的地方——拍照的附加功能、乐器的效果设置。
因此，这些控件设计集多种选项为一体，用户一目了然，一次性进行调整。

关于用户输入书中还讲了关于文本框的一些技巧，我以为不必深刻了。

预防错误

我儿时生活在厂矿，时常据说有工人由于操做失误，被机器把胳膊弄断的事情。后来，才知道，其实不少机器都是有防呆原理的，好比说，有的切割机床，是须要同时双手启动开关，才能运行，就是为了防止工人出错，形成事故。

防呆原理(Poka-Yoke Principle)是由20世纪60年代丰田汽车公司工程师新乡重夫提出的。简单的说，就是避免让用户出错。大到汽车的油门和刹车都在右脚，小到正反都能插的lighting插头。

在微交互设计中，好比论坛发言会自动屏蔽不雅内容，好比摩拜单车会禁止打开已经报修的自行车，好比iPhone在更新系统以前，电量小于50%，禁止你进行更新等等。

微文案

越短越好，大白话更好

—— 温斯顿·丘吉尔

微文案，俗称标签、说明、文本、标题等文本字段，是理解规则的必要手段。

能用标签，就不要用说明性文案

避免使用可能误导人的标签

放置标签的最佳位置是操做位置的上方，接着是被操做对象的上方或之中。可是传统的作法是把标签放在图标下方。

把标签放到文本字段内部时要注意。一旦标签消失，用户可能会忘记这个字段是干什么的。确保每一个说明性文案与控件严格匹配。

算法

“人类的大脑可以绝不费力地积累知识……人的大脑依靠某种机制运做。”
—— 乔治·布尔 （布尔逻辑之父）

那么上面提到的这种机制，其实就是算法。而规则，归根结底也是算法。

刚开始看到这里，我还以为纳闷：设计和算法有什么关系吗？由于我以为算法应该是和工程师联系在一块儿的词汇。可是再往下看，便知道算法其实和逻辑、设计（尤为是交互类设计）有着密不可分的联系。书中是这样说的：“过去，这些算法都是由工程师设计的，但随着愈来愈多的产品依赖算法，设计师的介入就是不可避免的了。毕竟，再漂亮的搜索微交互若是搜索不到有价值的结果，仍是没用的”。

乍一读这段话，我确实没太理解这段话的意思，可能做者也这么以为，因此后面普及了一下算法的知识。

算法的构成：

• 顺序：各个步骤的前后顺序。
• 决定：“若是……就……” （判断条件，作出反应）
• 重复：如何循环
• 变量：数据的容器，算法威力的来源。

其实这一节，书中只用了很短的篇幅来介绍算法，只能算是一个普及。我一直都理解的比较模糊，直到发现了一款App，叫作“算法动画图解”：

itunes.apple.com/cn/story/id…

这个App用生动的实例解释了算法是怎么一回事儿，好朋友们能够玩玩看。

本章最后，作着仍是不忘主题的提醒读者：最重要的一点在于知道用户想干什么，哪些数据或内容最有用，而后把这些对人有益的价值融入到算法设计中。

千万不要只考虑效率而忽视价值。

下一章该读第四章《反馈》，看看赌场里的老虎机是怎么持续不断的刺激人们的神经……

更多实例、细节内容请购买此书品味：《微交互 : 细节设计成就卓越产品》

*

文中还提到了两本关于算法的书：

乔治·布尔 《思惟规律的研究》(An Investigation of the Laws of Thought, On Which Are Founded the Mathematical Theories of Logic and Probability)

Christopher Steiner《自动化：算法如何统治咱们的世界》(Automate This: How Algorithms Came to Rule Our World)