按钮的一生

（按钮的一生 演讲804）

大家好 我是Julian 稍后Hugo会加入我们 他是我们产品的声音设计师

开始之前 我想稍微解释下 为什么我们要在此花时间 讲述一个按钮 我为未来的硬件设备设计

并制作用户界面原型

由于我工作的性质 我不能始终都使用UIKit

我建造并重建了很多基本的UI元素 例如滚动、缩放、分页 当然还有按钮 我也了解了很多 设计和建造 这些控件过程中涉及的细节

因此我要在此与你们 稍微分享我所学到的东西

我要向你们展示像按钮 这样简单的东西

其实背后有很多复杂的考虑因素

我希望通过了解按钮这个控件 你们能够学到一些东西

我希望你们能更用心去使用标准控件

去考虑什么时候 该制作自己的自定义控件

而当你们确实制作自定义控件时 我希望你们能够 透彻地考虑整个互动过程

那让我们开始吧

Hugo和我正扩大我们的 手工烤面包app王国

我们正在建造一款更简单的 全新烤面包机app

如果你们稍稍想象一下 你们早上做好一切准备 你们希望在即将出门前 自己的早餐已经准备就绪

你们需要做的就是 打开我们做的app 按下按钮并等待一块新鲜的吐司面包 做好后在厨房等你享用

现在 我们的联网烤面包机 能帮你实现这个 我们的联网烤面包机 会经历若干不同的状态 首先它准备好并等待你放入新鲜吐司 然后它制作吐司 最终 最重要的一步是做好吐司

不过我们的联网烤面包 在这种状态间的切换是通过 使用app的人来完成的 当人们使用我们的app时 他们可以要求加入一片吐司 让烤面包机开始工作

当吐司做好后 当然人们会吃掉它 也许由于某种原因 人们会想取消制作过程 虽然对这个我实际不太确定 当然 我们希望确保烤面包机 能始终准备好去服务 我不会透露这个确切怎么实现 但相信我 它能做到且做得很好

对于未来我们也有伟大的计划 我们可以制作AR吐司 吐司队列 每家都有几个烤面包机 最终我们会将这些连接到 我们的吐司社交网络

我要说的是 这其中有很多事情在进行当中

而在今天的演讲中 我们将深入 了解一个屏幕的细节 实际上是我们app 一个屏幕上的一个按钮 （最重要的交互） 如果我们能正确做好 我们最重要交互的细节 其它的会水到渠成

如果我们再看一下这个系统

我认为这里最重要的交互 实际是我们要求烤面包的过程 显然 其它环节也必须好用 但要求烤面包是第一个印象 如果人们都没法启动烤面包机 其余的环节实际都毫无意义

今天为了做好这一点 我们会首先稍微介绍下什么是按钮

然后我会跟各位分享 一种对交互控件的思考方式

最后Hugo会加入我们 给按钮添加声音

那么 按钮究竟是什么呢？

我们今天要讨论的按钮 是UI屏幕上的控件

按钮是行为的间接控件

我这么说的意思是当你按下按钮 行为是发生在别处

这个跟直接交互是相对的

直接交互是我抓住并直接操纵控制杆

直接交互能与真实世界的 体验形成参照 并且感觉更有趣 但按钮这种间接交互的真正威力 在于它由于这种分离 能够做到更清晰、更强大

而这里有趣的事情是 即使这些屏幕按钮模仿的物理按钮 也是间接的

即使作为结果的行为发生在别处 按钮也能控制该行为 正如你能设计作为结果的行为 你也能设计按钮 我们可以分开或相互关联地 去考虑这二者

而今天为做到这一点 我们将重点来看 设计的一个视角 即反馈

反馈是一种方式 通过它 你向人们解释你的app在做什么

我肯定你们很多人 都想过各种不同的方法 去在app内提供反馈 并且已经付诸行动 然而… 我认为有两大类反馈

第一类是你告诉人们

你实际可以在屏幕上放上文字 解释在发生的事情 或设计能进行解释的图表

第二类是你向人们展示 你能让人们以更接近现实世界的方式 体验他们行为的结果

方法可以是图像、声音 甚至是触觉随着时间的变化

现在我们把反馈 应用到交互的三个阶段

而不仅限于完成阶段

我们可以从物理按钮的角度 来看这些阶段

在我按下按钮前 按钮就固定在那里

在我跟按钮交互期间 按钮被按下了

最终 在我按完按钮后 我的手指脱离它 按钮回归原位

那么在我还没跟按钮交互前 就提供反馈 这有什么意思？ 如果按钮就在那里 反馈有什么必要吗 对吧？

如果我们稍稍思考下iPhone

iPhone屏幕就是一块玻璃

这块玻璃下恰巧有发光的像素 而重要的是人们觉得 这些像素意味着什么

玻璃不会告诉你你可以去点击它 但屏幕上的内容可以

你可以看到你能够翻页

拖拽

当然 跟我的演讲相关的是 你还可以点击

我说的这些有个学术上的术语 即“感知的可供性”

可供性是指物体与跟物体互动的人 之间的联系 一个人可能知道自己能够 抓住把手或按下物理按钮 而这其中的感知部分 就是讨论人们对屏幕上的 发光像素有什么了解 人们之所以知道自己能够 跟iPhone屏幕上哪些元素互动 是因为他们之前的体验 因为他们之前用过iOS 以及因为他们目前的环境 即他们在使用手机上 一个他们了解或者不了解的app

那么 让我们将这个应用到 烤面包app上 当然了

我怎么知道点击这个按钮后 会发生什么？ 我可以简单把按钮放上去 然后把它命名为OK 是吧？不

我们的做法是提供标签 标签是一种反馈 通过它 你告诉人们实际即将发生什么

在这个特定例子中 我尝试了标签Toast 但不幸的是 Toast可以指动词“祝酒” 也可以指你早餐会吃的 可口的面包片 我们该怎么叫这个标签呢 是toast toast吗？

我们可以给这个按钮设计图标 但我觉得这也不特别清楚 尤其是对于人们在陌生环境中 首次遇到的一些东西 所以我们稍微思考了下 然后想出了短语 Make Toast（烤吐司） 我知道在图表中我们把这个称作 Request Toast（要求烤吐司） 不过我们花了点时间去思考

使用我们app的人可能会怎么理解 以及我们的app怎么做 才是感觉最舒适的

下一件要思考的事情是： 我要怎么知道这是按钮？ 仅仅是漂浮在黑色背景上的 方块可能并不够清晰

但如果你能添加一些背景 比如一个iPhone屏幕

你可能就能理解了 或者你可以添加之前的体验 这可以是按钮的形状

按钮呈现的方式

或者如果你足够持续地使用它 也可仅通过文本颜色表示

在这个例子中

我不觉得人们会很熟悉我们的app 他们会每天打开一次app 或如果我们幸运 会打开多次… 所以我们会关注 更为标准的iOS按钮形状 因为我们不想加入新东西 所以我们在屏幕上尝试了这些

在开始使用这个按钮前 我们可以思考 反馈的另一件事是： 我怎么知道这个按钮跟什么相关？ 你可以根据按钮 在app中的位置判断 这些按钮有不同的含义和感觉

或者你可以根据 按钮跟其它控件归类的方式

或者看按钮跟屏幕上的 其它物体有多近

我觉得最后这个设计不错 所以我们在真实屏幕上试用下 我在Keynote演讲中画好 这个UI并将它放到手机上 我在卧室里拿着手机 早上订吐司前 我可能在卧室里会用到手机 而我是要努力了解… 我会知道这个按钮是做什么的吗？

我们要思考的下一件事是 我跟这个按钮交互期间发生的事情 对于物理按钮

这期间我会按下它

现在说下“反馈”这个词 它是指告诉人们 发生事情所引起的结果

在这个例子中 我们实际还什么都没做 所以我们在此可以用 “前馈”这个术语

因为“前馈”是指帮助人们理解 他们跟这个按钮互动时发生的事情

“前馈”是让交互流畅的 一个组成部分 你可以对立体触碰、捏合 或滑动操作产生反应

思考“前馈”是怎样应用到按钮上时 我们应思考正在发生的事情 当我的手指触碰屏幕和按钮时 正在发生什么

对于我们的整个烤面包系统 我们是处在按下按钮 要求烤吐司的阶段 所以我们要关注的是准备好烤面包机 并最终过渡到烤面包机烤吐司的阶段

我们应该思考正在发生什么 以及我该怎样通过提示 过渡到即将发生的事情

比如我开始触碰这个按钮了

我怎么知道我已经点击这个按钮了？ 这个又有什么关系？ 好 其一 这个按钮的命中区域 可能跟你想的不一样 如果你仔细看这个圆圈 也许我实际没触碰到它

但也许命中区域实际比视觉图片稍大 这一点对于很小的控件来说尤其重要 如果我们让那个控制杆实现交互

我怎么知道 我已经点击这个按钮了？ 你也许会想给按钮做动画效果 让它淡入或逐渐变大 但这样会感觉反应不灵敏 这种动画可能适用于立体触碰 就是如果我按下过程中 按钮能持续反应的情况 但对于快速触碰屏幕的操作 我们也许应该速度稍快些 如果要做动画效果 就要非常快

所以我们的做法是提供确定声音 触觉或视觉变化 在这个例子中 我们会立即突出强调

让速度感觉稍快些 这也能让我们知道按钮被激活了 且按钮是好用的

也许我们该试着将按钮的前馈 与烤面包机本身的前馈相关联 正如我所说 我们就能开始 按提示过渡到即将发生的事 所以在此我尝试的是 在触碰按钮的同时 也许我们可以显示吐司片开始出现 不过我感觉对于这个按钮 这样设计可能有点过头 所以我不会继续这么做 但我尝试了

对于前馈我们应该思考的另一件事是 如果我改主意了该怎么办？ 比如我早上有点头昏脑涨 我拿起手机 不小心触碰到这个按钮 但我实际还不想启动烤面包机 对于大多按钮 我实际可以把手指拖拽到按钮以外 以开始取消操作

这种操作实际对于所有类型的 流动交互都很重要 因为正是它使得流动交互 具备了不确定性 如果你在不同的屏幕间翻页 在抬起手指前 你不会知道你最终会翻到哪一页 同样的道理也适用于一个简单的按钮 我可以把手指再拖回按钮内 并获得同样的前馈 显示我现在又要激活这个按钮了

既然我们已经稍稍决定了 我们会得到的前馈 我们同样也该在设备上试试这个 同样 我知道这个对于按钮来说 是非常简单的道理 但它对于滚动页面、捏合 和翻页操作 以及很多触摸交互来说 非常重要

最终 我们应该思考 在我抬起手指脱离按钮后 我们应该怎样利用反馈 对于物理按钮 这之后它会返回原位 对于屏幕按钮 我们会抬起手指 脱离屏幕

当然 这是各位大多数人 都熟悉的经典反馈领域 但我在此想要指出的是 我们对反馈的思考可以是 同时针对按钮本身和行为 也就是发生的结果 我们可以思考如何将这二者连接 从而让人们理解已经发生了什么

还是 在我们的系统中 我们在此唯一关注的 是让人们能够烤吐司

我的手指脱离按钮后会发生什么？

按钮会立即变暗吗？ 会有一点延迟从而 让甚至更快的点击也被看到吗？

有计时器吗？按钮支持双击吗？ 如果是这样 我可能就得等一下 才能看到系统确认我的操作？

如果我们回顾下两种反馈类型

我们可以直接告诉人们正在发生什么

我可以在屏幕上加一些文字 我觉得这样做很清楚 但这也需要你阅读并需要更多文本

所以也许我们可以向人们显示 也许按钮本身提供一些反馈 在此按钮是在闪动

也许我们可以用某个动画 去代表提供反馈的行动 例如 吐司图标本身 可以显示已经开始烤吐司了

或者我们可以同时采取二者 我在屏幕上加文字同时显示烤面包机 这样做很棒 因为我可能会错过动画 但我仍能看到烤面包机所处的状态

跟与按钮和前馈的交互相似的是 我该思考如果我改主意了会发生什么

我已经开始烤吐司了 但也许我想取消操作 也许我想让烤面包机停止工作 我们可以将这个按钮换成 “停止烤面包”按钮 但我觉得这不是特别清楚 因为这个按钮非常地像 之前的“烤吐司”按钮

也许我们可以加一个 单独的“停止”按钮

我感觉红色有点过头了 所以我们也许可以试一下相同的按钮

但跟烤吐司按钮是独立开的

现在感觉好点了

所以我该做的是 再在设备上试一下

我们应该看看按钮本身的反馈 是怎么与来自烤面包机的反馈相关联 并告诉人们发生了什么的

稍微总结下我讲过的…

反馈是一种方式 通过它 你让人们知道你的app在做什么

你可以直接告诉人们 你可以在屏幕上加文字 这没问题 或者你可以向人们展示 你可以让人们体会随着时间的改变

我们可以把反馈应用到 交互的所有三个阶段

即使用在简单的按钮上

而我在此潜意识做的一件事还有 尝试各种选项 去理解设计是否不足或过头 要实际了解某个动画 是否合适的唯一方法 是去试用一下

那么 我们在此已经设计了 一个更广泛系统的 非常重要的一部分

但我觉得这样做会更简单些…

就是在做好这个控件后 去弄清余下的流程如何

既然我们的按钮已经设计得相当好了 我觉得我们可以开始思考音效了 所以我想请Hugo上台

谢谢Julian 大家好

现在 我们可以迅速给这个按钮 添加一个简单的点击音效

听起来不错？ 还是可以再好点？

Julian能做得更好 早些让我参与这个过程吗？

我想要跟大家分享几点 告诉大家我作为声音设计师 是如何去处理这样的项目的

我会介绍到哪里去寻找 设计声音的灵感

以及在这个过程中 我们使用的若干关键的构建模块

但在深入探讨前 我来解释下 为什么要讨论音效？

你们可能有人会想我们的用户 经常关闭手机上的音效 有必要为我的app加音效吗？

当然 取决于你自己 但George Lucas曾说过 一部电影50%的体验 是由我们听到的声音决定的 由音乐和声音设计决定的

我们周围到处是声音 我们使用声音探索世界

声音能够丰富产品的体验

声音能帮我们记住你app的体验 以及你的品牌 所以声音能产生重大的影响

那么当我们想为按钮设计音效时 该从哪里寻求灵感？ 我们可以先绕个圈子 去看看现实世界的一些按钮

有些按钮是廉价材料做出的 发出的声音是这样的 有些是高质量材料做成的 发出的声音是这样的

这实际是iPhone X 音量按钮的录音 当然 我们将它放大了不少

（发声还是不发声？） 不过这些声音本质上只是副产品 它们不一定是设计出来的 它们是由按钮的制作材料决定的

但因为我们是设计软件 所以我们有很多自由空间 我们可以选择根本没有任何音效 而且我们经常是这么做的

但如果我们确实认定了 在UI元素中加音效是有用的 那么我们可以从现实世界的 类似事物中寻找线索 赋予这些UI音效以意义 并帮助用户理解它们

你想为你的app添加音效吗？ 这要看情况 去想想你的app是哪种类别 app的使用者是谁 用户的期待是什么 使用环境是什么 人们会在什么地方使用app

我们知道我们app的使用者 将是那些喜欢吃吐司的人 他们习惯在厨房烤吐司 但从现在开始 他们可以 在家里任何地方烤吐司了

然而 他们仍可以使用自己经常 从厨房烤面包机中 接收的声音作为线索 由于这个原因 我们认为这个app 是使用音效的完美对象

那么 让我们看看烤吐司的过程

并倾听我们遇到的声音

让我们确定这些声音是否有用 如果有用 我们是否要在设计中使用它们 好 我们会使用 Julian的烤吐司时间线

并倾听烤面包机发出的声音

首先 我们拉下控制杆 然后 然后按到合适的位置

接着我们会听到烤面包机在加热 有线圈微弱的嗡嗡声

吐司烤好后 烤面包机吐出吐司

现在让我们一步步看一下这些步骤

首先 我们拉下操纵杆 在压下时 我们感到弹簧的阻力 这几乎就像… 如果我们将其 与app中的情况相比较 这就好比设计声音触觉和动画 并将它们同步到一起 但在我们的app中 我们决定用简单的按钮替换这些 所以我们不需要为它设计声音

但当我们要求烤吐司时 就是我们按下按钮时 下一步是Julian要求 我设计声音的一步 那么 让我们着手去做这件事

我们可以录下声音 我们可以使用电子仪器 以及合成器来生成声音 然后我们可以使用软件 把这些声音做成合适的状态 我现在不会详细介绍这部分 不过请大家观看 去年的演讲“音效设计” 去更多地了解这个过程

最后 我们做出三种不同的选项

这是选项A

这是选项B

这是选项C

好 选项A是极简风格的

它非常简单 它与app的简单UI相当适宜

但感觉好像缺了点什么 在设计的过程中我们发现 如果声音有两次点击声 效果会更令人满意 按下时一次点击声 抬起手指时又一次点击声

而选项B有这种特点

不过… 虽然这是现实感更强的声音

它听起来实际不像烤面包机 不过它确实有一种实物的感觉 但由于相同的原因 它听起来确实有点刺耳 并有点金属感

接下来是选项C

这个声音有点奇怪 不过它确实有特色 是那种我再次使用app时 再次听到后会认出的声音

这个声音的另一个好处是 它通过音调传达一种确认的信息 就好像是打上对勾 告诉你操作已经成功 我再播放一次看看大家能否听出来

由于这些原因 我认为选项C 是我会推荐去使用的

这个声音很简单 有种友好的特点

而且它有独特性 不是那种我在其它app中 会听出来的声音

好 看起来我们完成任务了 至少我们做出了按钮点击声

但我们还没烤好吐司呢 所以… 让我们继续 也许app中有一些 使用音效的其它机会 因为作为声音设计师 我们想要讲述整个故事

所以 在按下按钮后 烤面包机开始加热 我们听到这种微弱的嗡嗡声

现在我们可以…这个声音有用吗？ 也许有用 它能告诉我们设备的状态 所以我们也可以选择在app中 播放类似的声音 也许播放连续的声音 比如这个

但烤吐司可能会花几分钟 而一遍遍反复播放这个声音 可能不是我们想要的体验 对吧？

采用更为微妙的声音如何？ 比如每半分钟左右 渐强和渐弱的计时器的声音

这个似乎可行

但这个过程实际需要音效吗？ 因为我们实际在等待的是 接下来的事件 是烤吐司完成的时候 这是我们应该通知用户的事件 这是重要的时刻 所以我们应该播放简洁的通知声音 让用户不要错过 比如这个

好 现在我们一起听下这些声音

首先 我们按下按钮

然后对于下一步我们决定 当这个过程激活时 我们实际不需要音效 一直到我们收到通知 完成烤吐司过程

非常重要的是 一起倾听这些声音

确保它们和谐融洽 因为这是我们的app 与用户的沟通方式 这是我们app的声音

好 现在app设计好了 我想跟大家分享设计任何种类声音时 我们使用的一些关键构建模块 第一个 是音色

大多人能立即听出这个声音

是钢琴声 对吧？

但我们是怎么知道它是钢琴的？

我们怎么知道它不是颤音琴？

这取决于乐器的制作材料 取决于形状和乐器的演奏方式 是使用木槌、锤子 琴弓还是手演奏的 所以这些乐器能演奏完全一样的曲调 但听起来却完全不同 对于我们的app 我们觉得采取的特色是 一种友好的不太刺耳 或金属感过强的音色

下一个是声音的频率或音调 有些乐器演奏频率非常高 而有些频率非常低

不过非音乐的声音 也可以有很高或很低的频率 通过采取不同的频率 我们可以暗示物体的大小 如果我们拿烤面包机 录下吐出吐司的声音

我们以很高的频率播放声音 它听起来就像一台小型烤面包机

但如果我们以低频率播放同一个声音 它听起来会像一个大型烤面包机

所以…

接下来是声音的持续时间或长度

声音可以非常简短…

或者持续更长时间…

如果我们设计UI音效 我们知道按钮会连续多次被按下

我们就有必要把声音做得简短微妙

但如果按钮只是偶尔被按下 实际我们的烤吐司app 就是这个情况 那么就可以使用稍长稍复杂的声音

实际上 这个声音只会 在我们使用app时播放一次

接下来是响度 或者说振幅或音量

在设计铃声或闹铃时

我们不希望用户错过声音 我们不希望用户错过电话 或闹钟响了却睡过头

我们的声音工程师Mitch 从屋后给我打来电话 我能听到清晰响亮的铃声 但如果UI声音这么响亮 它会迅速让人感到不适

UI音效只需加一层微妙的交互感

让我们快速回复Mitch

如果我因为环境嘈杂而听不到键盘音 这实际不是问题 但我绝对是不想错过铃声的

现在 回顾下声音的四大构建模块 即音质、频率、持续时间和响度 当你开始考虑 为你的app设计并添加音效时 谨记这些真的很有好处

我今天想跟大家做的分享到此结束了 但在我们结束演讲前

以下是Julian和我想要 给大家留下的重要建议

细节是设计而来的 即便细节看起来显而易见 即便是像按钮这么简单的东西 即便是像点击声这么简单的东西

你可以从现实世界的元素中获取灵感

但却没有必要逐个照搬

同时请利用软件设计的 自由性和灵活性 去创造出完全独特和新鲜的东西

然后我们看到的动画 感受到的触觉 听到的声音 所有这些都会融合成同一个体验

最后

也是最重要的 请通过尝试去学习

今天我们做了很多尝试 有一些尝试效果不太好 有一些效果很好 但发现效果的唯一途径 是先去试验一下

现在 我希望这些 能够激励大家花更多时间 去钻研你可能通常想当然的细节

如果你把这些细节设计好了 你的app就会更精彩

谢谢各位的倾听 祝各位度过美好的一天