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

995 阅读8分钟

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

—— 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)