控制了用户的眼睛,就控制了用户的脚步
——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,叫做“算法动画图解”:
https://itunes.apple.com/cn/story/id1422964095
这个App用生动的实例解释了算法是怎么一回事儿,好朋友们可以玩玩看。
本章最后,做着还是不忘主题的提醒读者:最重要的一点在于知道用户想干什么,哪些数据或内容最有用,然后把这些对人有益的价值融入到算法设计中。
千万不要只考虑效率而忽视价值。
下一章该读第四章《反馈》,看看赌场里的老虎机是怎么持续不断的刺激人们的神经……
更多实例、细节内容请购买此书品味:《微交互 : 细节设计成就卓越产品》
*
文中还提到了两本关于算法的书:
Christopher Steiner《自动化:算法如何统治我们的世界》(Automate This: How Algorithms Came to Rule Our World)