设计音频触感体验

相信大家很熟悉这个声音

多年以来 它已经成为我们生活中的一部分 然而在 2019 年 我觉得我们可以更上一层楼 我是 Camille Moussette 是 Apple 设计团队的 一名交互设计师 我叫 Hugo Verweij 是团队的音效设计师

本场的主题是 优秀音频触感体验的设计 此次演讲 我们的目的是 希望大家能受到启发 激发出可行的想法 来设计出优秀的 音效和触感设计 当这二者适当结合在一起 可以给你的 App 带来全新的体验

在接下来的三十分钟里 我们主要讨论三件事 第一 我们会介绍 什么是音频触感体验

然后我们看一下 如何运用三大指导原则 帮你设计出优秀的用户体验

最后是不同的技巧 和一些实用的建议 让你可以打造出 引人入胜的体验

那么 什么是音频触感体验呢 让我们先来听一个音效 好 现在我们将声调降低 如果我再降低一些会怎么样呢 哇 这个音效已经低到我听不见了 我们的耳朵已经无法识别 这样的声音了 但是 如果你将 手指放到扬声器上 可以感受到前后振动

我们设计的触感引擎 就是特别用于播放这类 只能通过触感来感受的低频音效

触感引擎在 iPhone 的这个位置 旁边则是扬声器单元 触感引擎发出的触感振动 与扬声器中发出的音效 是同步且一致的 这就是我们所说的 音频触感体验 然而 因为触感体验 需要通过触觉来感知 而我们现在在台上通过屏幕讲解 所以我们需要大家运用想象力 想象这会是什么样的感觉 我们也会尽力帮助大家 通过视觉体会触感振动 就像这样

抑或通过声音模拟触感振动 帮助大家体会 像这样 我们还会在时间轴上 通过视觉表达这些体验 下面让 Camille 给大家讲讲 触感体验设计的 快速入门指南

iOS 13 中增加了新的 API 可用于设计自定义的触感振动 我们将它称为 Core Haptics 这个新增的 API 可以让 各位开发人员充分利用 iPhone 的触感引擎

触感引擎可以呈现 各式各样的体验 例如可以生成 自定义的振动 像这样 它的形状看起来是这样 而声音和触感是这样的

所以 如各位所见 我们用波形和声音 来展示触感体验 Hugo 刚才提到 你需要将其想象成 无声的体验 触感体验是触觉感知 而非声音 我们可以生成这种持续的效果

也可以生成 更短小紧凑的触感体验 这是一个单循环 我们将它称为瞬时体验

它的持续时间更短 给人感觉更有冲击力 或有打击感 或敲击感

非常短促 我们还可以进一步优化触感体验 下面 让我们用简单的形状 来代表不同的触感体验 瞬时体验用长方形来表示

我们的触感引擎 拥有杰出的 触感工程技术 所以我们能以不同的方式 来调节触感体验 首先 我们可以调节 强度或振幅 还可以让触感体验 变得更圆润 更柔和

相反 我们也可以 让它变得更明确 更清脆

这样的触感体验 可以通过触感引擎生成

那么 这就是我们对 触感体验设计 以及 Core Haptics API 的简单介绍 你可以调整强度 外加另一个参数 触感锐度 以此控制两种事件 持续体验和瞬时事件

下面 我们想给 在座的各位分享 三大指导原则 一是 因果联系

二是 协调程度

三是 实用性

这些概念或方法 贯穿 Apple 的各类工作 我们认为这些方法也能 对大家的体验设计有所助益 对于每个原则 我们会讲解概念 并举例说明 我们这就开始

因果联系 这是指什么呢 有效的反馈可以从中 明显看出事情成因 假设你是足球运动员 正要踢向这颗足球 这是什么样的感觉呢

因果之间的联系 非常清楚明显 成因是脚去踢球 而结果是 二者相碰发出的声音 以及给我们带来的感受

这类体验的 声音和感受 由相互作用物体的特性决定 也就是球鞋的材质 和足球的材质 另一个是动作的动力因素 这是一记狠踢还是轻踢 然后还有环境因素 例如 体育馆或足球场 的传声效果

由于我们对一些场景非常熟悉 加入一个完全不一样的音效 就显得不太可行 让我们看一个例子 夸张一点的例子

太怪异了 这个音效不太合适

当为某个体验设计音效时 仔细思考其应有的 感受和音效 对于具体物品更要如此 比如 让我们看一下 Apple Pay 的确认音效

我们当时希望声音 和触感体验可以和 屏幕动画的对勾标志完美结合

那么 我们从何入手呢

你会将什么样的音效 与付款联系在一起呢 与钱相关的音效是什么样的呢 用 Apple Pay 付款 是怎样的交互体验呢 我们肯定需要看一下 屏幕动画的对勾标志是什么样的

动画应该给人积极的感觉 如同确认交易成功的感觉 这里有几个不同的音效 是当时的几个备选音效

这是第一个 这个音效很悦耳 但是有些太愉悦 不够严肃

下面这个音效与屏幕动画 配合起来非常好 但是我们觉得 它的特质有点对不上 听起来略有些刺耳

而这一个 是我们选定的结果 大家也都知道

这个音效不会太庄重 也很明显是确认音效 好 我们选定了音效 下面到触感体验了 我们最初的想法是 仿照音效波形的形状 因为可以对应得很好 但是试验过几次之后 我们发现两次简单的轻击 更适合搭配音效 我把这些看做是 小的组成部分 像是两种乐器 一个能听的见 一个能感受到 后者就是触感体验

这二者不一定 要完全契合 但是一定要 保持同样的节奏

两个成分都在这里了 要注意 稍低的声音 代表触感体验

好 下面就是配合动画 的最终效果 再次重申 这需要各位想象付款成功后轻击的触感

下面 让我们看一下 第二条指导原则 协调程度

协调程度是指事物给人的感受 应当与其外观和声音保持一致 在现实生活中 音效 触感 和视觉 能很自然地保持协调 因为三者间有很自然的联系 然而在数字世界 我们就需要手动创造了 新体验的创造过程 是循序渐进的

输入和输出的效果 需要由各位开发人员设计 我们先来创建一个 简单的视觉界面 这里有一个小球 往屏幕下方掉落并弹跳 现在让我们加上音效

我们选择的音效 与碰撞的动作 或者说是 小球的弹跳 保持一致

音效需要短 需要精确 并且清晰 而我们还根据 小球的弹跳速率 调节了音量大小 现在我们更进一步 来加入第三个因素 触觉反馈

想象手中轻击触感的感受 再次说明 我们想要 设计出协调的体验 小球在屏幕下方弹跳 所以我们选择了鲜明的瞬时事件 我们还调整了音效强度 以配合小球弹跳的速率

事情还没有完 时刻牢记 三种感觉因素的同步性 这一点很重要

配合得好 就会有出人意料的效果 能让用户觉得 这就是真的小球 在地面弹跳的感觉 这里有一个反例 我们打破规则 将音效和触感 延迟于视觉之后

这很明显行不通 真正小球弹跳的感觉 已经完全丢失 所以协调程度需要各位 加以注意并下些功夫 一旦设计得协调 就能创造出非常美好的体验

下面我们看看不同概念下 协调的设计应当是什么样的 其中包括交互 视觉 音效 和触觉体验 主要从特性和综合表现入手 屏幕上有一个简单的绿点 我们会加上一些动画效果 希望大家可以思考一下 何种音效及触感体验 可以很好地运用到绿点上 如果我们让它快速跳动 或是换一种跳动方式 什么样的音效和触感体验 可以搭配这种视觉效果呢 如果我们有一个很大的圆呢 音效会有变化吗 相比非常小的绿点 有什么区别呢

如果我们加上不同的动作 不同的能量等级 创造一个不停跳动的圆点 以吸引注意力 我们可能需要一个不同的音效 以及不同的触感体验 最后 比较平缓的动作 或类似心跳的动作 又是不同的感觉 所以各位需要考虑 你在 App 中想要传达的 是什么样的节奏 能量等级 以及何种特性 想要设计出好的体验 一定要保持情节一致 统一

我来给大家展示一下 协调原则能如何帮助我们 为 Apple Watch 的表冠 设计音效及触感体验 我们已经非常习惯手机 以及使用手机的经典感觉 而在这样的情况下 Apple Watch 进入市场 并成为第一款搭载触感引擎的设备 Apple Watch 是第一款 可以精确同步音效 和触感体验的设备

我们为 Series 4 的表冠旋转 添加了触感体验 和细微的音效 还记得刚才 Camille 提到 一个鲜明且明确的触感体验吗 那就是我们为表冠 选定的触感体验

不过 我们降低了效果 以匹配表冠的大小 触感振动在触碰到表冠时 可以在指尖感觉到 而非在手腕的位置

而对于音效 我们向传统钟表制作 寻求灵感

我们聆听并录下 各种钟表的声音 其中一些非常出彩 比如这个 现实生活中 还有其他机械装置 可以发出类似的声音 比如自行车齿盘 我们希望可以找到 一个比较自然的音效 来搭配这个设备

我们把收集来的音效 作为灵感与启发 然后才开始自己设计 这是最终的成果 腕表发出的声音不大 就如同真正的手表 所发出的声音一样 音效和触感体验 完美结合在一起 给人以机械表冠的感觉 然后 为了搭配 这种机械的感觉 我们的动作团队将动效 与表冠的音效和触感体验 更精准地结合在一起 我们来看一下效果 我再播放一次 各位注意表冠 并通过视觉 体会触感振动 最后的效果是 精准的机械感 这与你所见所闻 完美协调在一起

下面我们讲讲第三条 指导原则 实用性 实用性是指 仅在足以给 你的 App 的用户体验带来 明确价值和成效的时候 加入音效和触感体验 要适量适度 不要因为可以加就很随意 让我们看一个 ARKit App 用它来证实我们的观点 通过这个 App 我们会在环境中 放置一个虚拟计时器 与计时器的交互来自于 我们与计时器间的距离 我们先来看一下这段视频

在这个 App 中 我们特意 加入音效触觉反馈 以搭配 AR 交互 搭配用户体验中最主要的部分 也就是 当设备更靠近 或更远离计时器时 音效触感体验会相应变化 三种感官一致且统一 我们并没有为 App 中 其他部分或较小的交互成分 添加音效 或触觉反馈

很多情况下 你并不需要 为触感体验添加音效 首先要在你的 App 中 找出何处可能需要 添加音效触觉反馈 然后只关注可以优化体验的部分 或关注可以传达 重要信息的部分

你还想添加更多效果吗 或许不加比较好 不然用户可能一时无法吸收 多余的成分也可能喧宾夺主

现在我们重温一遍 几条指导原则 我们讲了因果联系 讲了这条原则如何能 帮助我们认清发声的物体 及触感体验的源头

还有协调程度 讲了音效 触感体验 和视觉 如何相互协调以创造优质的体验 还有实用性

讲了如何从 用户使用的角度 看待音效触感体验

下面 我们来看一些 技巧和实用的建议 看我们如何运用这些技巧 以及三条指导原则 来创造优质的音效触感体验

首先 我们重温一下 Core Haptics 中的基本元素 有两种基本形式可供使用 第一种是瞬时体验 是鲜明紧凑的触感体验 例如轻击或轻敲的效果 第二种是持续体验 可以维持一段时间 你可以自行设置时长 看看想让效果维持多久

瞬时体验有两个参数 可供调整控制 包括触感强度和触感锐度 较低的锐度可以做出 圆润轻柔的效果 而较高的锐度可以做出 明确干脆 有机械感的效果 强度自然改变的是 体验效果的强弱

持续体验同样有两个 类似的参数 锐度和强度

我们可以做出更自然 或类似嗡鸣的效果 并持续较长的时间 也可以做出 高锐度的效果 使其 更明确 更有机械感 不过 Core Haptics API 包含更多细节 也具有更多能实现的功能 请各位查看网上的技术文档 设计音效的时候 要时刻注意什么效果 搭配触感体验最好 对于鲜明的瞬时体验 叮的响声和一次敲击 搭配起来应该不错 但是如果音效更平缓 再搭配同样的触感体验 或许就不大合适了

对于这种情况 持续且强度随之变化的 触感体验会更合适 不过这些不是硬性规则 有很多可以尝试的空间 有些时候 你会发现 与你想法相反的设计 可能效果更好 Apple Watch 闹钟便是如此 闹钟音效是这样的

你可能想给这样的音效 加上这样的触感体验 因为二者形状完全贴合

不过 我们还能改进吗 还能继续尝试吗 或许可以翻转后 再调整播放时间

触感体验逐渐增强 然后迅速中止 再播放音效 这样可以让用户 有心理准备 动作和反应的关系明确 音效更像是触感体验的回应 这个做法很适合 Apple Watch 的闹钟

我们经常会有 几个事件接连发生 以传达不同类型的体验 在这个例子中 我们有 四个瞬时事件 我们注意到 让不同的人去体验 他们不一定都能 感觉到第一个振动 仿佛成了幽灵一般 四次连续的轻击 仅被反馈成三次

这可能是个问题 也可能是机会

我们可以利用 这个幽灵般的效果 也就是 无法被感知的首次振动 创造启动效应 让我们看一个 watchOS 中 第三方提示的例子 这是第三方通知的 音效和触感体验 这个通知很重要 我们想要确保 用户可以清楚地 感知到提示 出于这样的考量 我们加入了 幽灵振动 或者叫启动效应 来激发皮肤的触感 确保用户完全 准备好迎来后半个提示

让我们聆听并感受一下

这样我们的通知就有 明确的提示 用户也能有 明显的感知 另外 我们还能在 非常相似的体验间制造对比 这是 watchOS 的 左转导航提示 音效是这样的 参考协调程度的原则 我们设计出非常合适的 触感体验 来搭配音效 这是几组两次的敲击 听觉和触觉的体验是这样的

而对于右转的提示 音效非常相似 但是略有不同 我们可以注意到 左右提示 音效上的区别 不过如果我们继续 遵从协调的原则 那二种提示的 触感体验 就完全一样了

因此 我们想添加触感 我们将两次敲击 加倍成四次 然后左右提示间就有 非常明显的区别了

让我们聆听并感受一下

这样我们就为 左转右转相似的音效 创造了对比

现在 各位已经知道 有很多工具可用来创建体验 我们想再展示一个例子 以证实我们的观点 这是信息 App 中的全屏动效

音效和触感体验 与动画配合完美 特别情形下 是个愉悦的体验 让我们再看一次

如果有谁还没试过 我非常建议大家 在自己的 iPhone 上试一下 体验一下触感振动 除了指导原则以外 还有另外几点 也需要注意

只有当音效 触感体验 和视觉 三者一起考虑与设计 才能得到最好的效果 你是动画设计师吗 你可以与音效或交互设计师 一起合作设计 反之亦然 这是做出协调体验的最佳方式

你还可以将自己想象成 App 的新用户

这时你会希望 App 有什么样的 音效或触感体验 再想象自己已经使用 App 一百多次

同样的音效和触感体验 还能带来一样的感觉吗 还是会觉得多余

多去体验 然后去掉 所有没有吸引力的 或没有用的部分 不要害怕试验 多去尝试 多做原型

我们的经验是 通过尝试新的形式 可能会有好的想法或启发 我们非常希望可以 看到 听到 和触摸到 各位在自己 App 中的设计

更多相关信息可以进入这个链接 非常感谢大家 [掌声]