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

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

——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用生动的实例解释了算法是怎么一回事儿,好朋友们可以玩玩看。

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

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

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

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

*

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

乔治·布尔 《思维规律的研究》(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)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容