设计流畅的界面

大家好 谢谢

欢迎你们

欢迎来听 设计流畅界面 我是 Chan Apple 人机界面团队的一员 最近我主要 在研究 iPhone X 的 流畅手势界面 我 Marcos 和 Nathan 三个人 想分享一些 关于我们对这个 以及过去类似项目的研究发现 那么我们经常 问自己的一个问题是 究竟什么才能使界面流畅

我们注意到事实上 每个人对它的描述都不同 大家都知道 有时 当人们真的使用了界面 当我们给他们一个样品试用 他们只有在拿到手中体验之后 有时候才会说 这感觉很快速 或者有时其他人会说 这感觉很平滑 当使用感真的很棒 有时他们甚至会说 这感觉很自然或者很神奇 但是说到底 它给人的感觉就是 你感觉到了 它就对了 它就是那样的一件东西 你可以有手势用户界面 我们已经看到市场上 有很多手势用户界面了 但如果处理不当 有些使用感觉可能 就是不对 而且你常常不能明确知道原因 大家知道 这不仅仅和帧率相关 每秒显示帧数为 60 时 你也可以缓慢进行操作 但那感觉就是不对 那究竟是什么 能给我们这种感觉呢

我想把这种感觉归结于 当这个工具就像我们 大脑的延伸的感觉 没错 大脑的延伸 那么为何这点如此重要呢

我们来看看 iPhone 是个工具 对吧 它是一个用来获取信息 并且进行沟通的 手持工具 通过融合完美的触觉和视觉 发挥作用 但如果我们仔细考虑 就会发现它实际上是千百年来 手持工具发展长河中的一部分

左面的是 150，000 年前 用于提取骨髓的工具 它拓展了手指的锋利程度 因此人类制造手持工具 已经有一段时间了 最令人惊奇的是 我们的双手已经进化 并且适应了我们制造的工具 我们进化出了一双富集肌肉 神经 血管的双手 能够完成 最精细的手势操作 以及作出最轻柔的触摸

因此我们已经完全 适应了这个触觉世界

但是如果回顾电脑的历史 我们从人机之间的 多个抽象层起步 你要学习各种 复杂的操作 这将大多数人拒之门外

但是过去的几十年间 我们通过一对一的 间接操控装置 将这些抽象层 进行了剥离 每一步都剥离一点点 最终我们剥离了 所有那些抽象层 直接和内容进行交互 这对于我们就像是 魔法一般 这种感觉不再像 是一台电脑 而更像是自然世界的延伸 这意味着现在的界面 正在以有史以来 最古老的方式 和我们沟通 而且我们对此有 相当高的标准 大家知道只要有一点点东西 感觉不对 这种幻想 就会被粉碎 但是如果感觉良好 这就会像是你的延伸 你身体的延伸 它会跟你的思想同步 使用起来会很愉悦 几乎没有阻力 甚至会非常愉悦 那么究竟是什么 给了我们这样的感觉 当感觉不好的时候 我们要怎么调整 这就是今天我要展示的内容

今天我们将谈到 四个部分 首先就是 制定一些原则 明确如何设计出 像是我们的延伸的界面 如何设计出 与我们身体运动和周边世界 相匹配的动作 设计出优雅 智能的手势 那么既然我们已经设计出了 这样东西 我们还将谈谈 如何在此基础上 打造天生适用于媒介的 就像媒介本身的互动 让我们开始吧 我们如何设计出 真正延伸大脑的界面呢 如何做到这一点呢 好吧 我们认为这就需要 将界面与我们思考和 运动的方式 相匹配 最重要的一点是 我们的思维会不断地 对变化 刺激和思维 作出反应 对吧 我们的思维和身体 一直处于这种动态变化的状态 因此并非界面需要 是流畅变化的 而是我们本身就是流畅变化的 我们的界面需要对此作出回应

所以界面始于响应

大家知道我们对工具的使用感受 取决于延迟 现实世界中 如果工具或其他任何东西 在使用时有响应延迟 那将是多么艰难 而且我们发现人们 对于延迟真的 非常非常敏感 大家知道吗 如果有时间间隔 那么它的响应表现 突然间就有点像 掉下了悬崖 有了额外的 精神负担 感觉非常脱节 它不再像是 自我的延伸 这就是为什么我们如此努力试图 减少延迟感 实际上最新的 iPhone 能更快地响应 你的手指操作 因此我们才能实时 检测到你手势的所有 细微差别 我们对此十分关注 并且认为所有开发者 都应如此 这意味着寻找 各处的延迟 这并不局限于滑动手势 还包括轻敲 按压等 所有的界面交互操作 所有元素都应该及时响应 大家知道 在设计界面的过程中 非常容易出现延迟 大家懂吧 因此我们必须时刻警惕延迟 警惕所有那些 在界面中 可能出现的延迟 只有这样界面才能始终 及时响应

这就是响应 这个话题虽然简单 但却是让界面感觉充满活力和动感

的关键 接下来我们想考虑 持续的重新定向与中断 这一点很重要 那么我们的思维和身体 始终处于 对变化重新定向的状态 就像我们刚才谈到的那样 如果我在走向舞台 另一端的过程中意识到 我把东西落在了后面 我会马上掉头 而不用非得等到 走到舞台另一头 才那样做 对吧 因此我们的界面能 展示出这种持续 重新定向能力 十分重要 这种感觉与你紧密相连 这也是我们为什么要在 iPhone X 中 建立可重新定向界面的原因 那么 它究竟是什么呢 iPhone X 实际上 非常易于手势操作 你可以横向轻扫 切换 App 竖向轻扫 回到桌面 也可以将这两个方向的操作混合 因此你可以在返回桌面的过程中 看下多任务界面 来决定是否点进去 也可以进入多任务界面的时候 直接返回桌面 这些看起来不太重要 但如果我们没有提供这个功能 将会怎么样呢 如果它不支持重新定向 将会怎么样呢 假如你唯一能做的手势 就是横向轻扫 不同的 App 竖向轻扫返回桌面 仅仅只能这样 你无法进行 我刚才提到的 任何中间操作 这样的结果是 你将不得不 在进行手势操作前 想清楚 自己想做什么 那么这一系列事件 就会是先行操作 对吧 你需要思考 我要不要回到桌面 要不要进入多任务 然后做出决定 进行手势操作 然后松手

但很酷的是 如果它是 可重新定向的 你的思考和手势就可以并行 你可以边思考边操作 这样会比在做之前想好 快得多 因为这是一个 多方向手势操作 而不是独立操作 它是一个可以完成所有这些事情的手势 桌面 多任务 快速 App 切换 因此你不必把它当作 是一个独立的手势

而且还能帮助你探索 因为你可以在现有手势的 基础上探索一个新的手势操作 并让你伴随思考 做出对应手势 那么最后一点 是什么意思呢 让我给你们看几个例子 我们已经放慢了 模拟中的动作 因此你们实际上能看到 一些我刚才所说的内容 我可以滑动到桌面 再滑动到下一页 或者在返回桌面的过程中 滑动切换主屏幕 一旦我把这两个手势内化了 就能把它们叠加在一起

还有一个例子是 我在启动 App 的过程中 突然意识到 我实际上要打开多任务界面 那么我就可以 在 App 启动的过程中 直接进入多任务界面

或者我打开了一个 App 但突然意识到点错了 App 我可以在打开过程中 直接将其关闭 返回桌面 还有一个例子是 假设我很匆忙 我可以在打开 App 的过程中开始进行交互操作

这些事情看起来可能 没有那么重要 但我们发现如果想要界面 一直能及时响应 并理解你的意图 这非常重要 能让人感到灵活 而且这对于 你对界面的期待和理解 以及使用的舒适度 也非常重要 要明白 当你需要的时候 它必须永远能及时响应 这也适用于 动作的改变 不仅是交互的开始 还包括交互的中间过程 你也在改变 我们同样需要对中断 及时响应 一个好的案例是 iPhone X 的多任务界面触发机制 当你向上轻扫手指 至屏幕的一半并暂停 这就是暂停手势 那么我们需要弄明白 如何检测 这个运动中的变化 我们要如何做呢 如何检测这个动作中的变化 是否需要用到定时器 是否需要等到 手指降低到某个速度 并保持一段时间 然后 才能进入 多任务界面呢 事实证明这样太慢了 人们期待能立刻 进入多任务界面 那么我们就需要想办法 和他们响应得一样快 我们不需要关注 手指的加速度 实际上当你暂停时 你的手指滑动速度 会急剧提高 而且你暂停得越快 iPhone X 检测到的也就越快 因此这种响应运动变化的方式 其实和我们所知的一样快 而不是使用等待定时器的方式

这就是尽快响应 重新定向的 一个好案例 这就是中断和重新定向的概念 它们让界面和你 非常非常匹配

接下来我们将稍微谈谈 界面的构造 从概念上讲 就是你如何布局

我们认为当你布局的时候 必须保持 在移动中的 空间一致性 这是什么意思 这有点模仿了 现实生活中客体连续性记忆 的工作原理 所以在现实生活中我们会感受到 物体以对称路径的方式 出现和消失

假如某个事物以某种方式消失了 我们会期望它从出现的地方 再次显露 对吧 如果我从舞台的一侧消失 然后从舞台的另一侧出现 你们就会非常疑惑 对吗 因为这是不可能的 所以我们希望延续这种 现实世界中的 空间一致感 这也就意味着 在界面中如果某个元素 在你的视野中消失 然后再出现 它应该是以对称路径的方式进行 并拥有一致的 出现消失路径 比如 在 iOS 的导航中 如果我点击列表中的元素 它从屏幕右边滑入 当我点击返回按钮时 它将返回右侧 这就是对称式路径 两个状态下 每个元素都有一个存在的 固定区域 这也强化了手势 如果我将其滑回右侧 因为我知道 它属于那里 我就能这么做 这是可以预期的 如果我们不这么做 看这个例子 我轻敲后 页面从右侧滑入 然后我点击返回 它下移消失 这就会有种割裂感 并让人疑惑 就好像我正在把它 发送到哪里 事实上 如果我想传达 我正在把它发送到哪里 这就是我操作的方式 对吧

所以这就是 空间一致性 它让手势操作 与我们对物理世界空间 的理解相匹配 接下来是 暗示手势操作方向 大家知道 我们人类总是 会根据经验 来预测下一步 我们总是 通过世界中 万物的轨迹 来预测接下来的运动

所以我们认为界面中 引入预测 是非常好的 如果你有两个状态 初始态和终止态 当然你还有中间过渡 物体需要在两种状态中 平滑转换 从初始态平滑过渡 到终止态 不管是通过 手势操作还是动效变化

一个很好的例子就是 控制中心 控制中心的模块 会根据你的 按下操作变大 并向你手指移动 最终 弹开 这就是暗示 它让手势操作充满预期 并可预测 接下来一个重要的原则是 触摸交互 轻量化 我想大家都知道 多点触控的轻盈 是其最被低估的一面 它可以检测到空气般的轻扫 滑动 轻敲等 我们习以为常的操作 这些操作是如此轻柔 但我们希望放大 它们的动作 我们希望在移动 或投掷某物的时候 让小的投入产生大的效果 从而产生 令人满意的感觉 那么这将如何应用到我们的 界面上呢 这就需要从短交互 开始说起 这是短小轻量的交互 我们运用了所有传感器 和技术来尽可能地理解 并建立手势操作的 能量和动量文档

运用一切已知信息 包括位置 速度 速率 力度来产生 这个手势的惯性文档 然后我们检测并 放大移动的效果 使其仍然感觉像是你自身的延伸 因此你通过一个轻量的交互 就可以获得满意的结果

例如在滚动页面 的过程中 你的手指实际上只停留在 屏幕上一小段时间 但系统能保留你所有的 能量和动量 并将其优雅地转入到 界面中

那么如果它不能这么做呢

如果没有这些相同的滑动 你将无法移动这么远的距离 而且为了滚动页面 你将不得不进行一些 需要更多手指运动的费劲的 滑动操作 使用的时候将会异常痛苦

另一个案例是 上滑返回桌面 你只需要在屏幕上 轻轻一滑 就会呈现出一个 流畅并且轻量的多点触控手势操作 感觉就像是 天生内置的 同时仅凭一个按钮 就能大量重复使用 你的肌肉信息 因为当你松手的时候 屏幕就会返回面板状态 不仅滑动 点击也是如此 界面对每个交互进行 令人满意的响应 是一件非常重要的事情 界面不停向你传递 它理解你的信号 让你感觉界面 充满活力 并与你相联

这就是我要说的 轻量化和放大

接下来要说的是 Rubber Banding

它指我们柔和地 表明边界 在这个例子中 界面渐进且柔和地 让你知道那边没有内容 全程追踪 你的操作 并让你知道 它很理解你 如果没这么做的话 会怎么样呢 结果会是这样 移动整个界面的手将会 非常粘涩 令人不安 就像撞上了一堵墙 感觉就像坏了 对吧 你将无法理解 冻结的手机 和上滑到屏幕边缘的 手机之间的区别 所以告诉你 已经抵达了边缘 是一件重要的事情 这同样也适用于从一个状态 到另一个状态的过渡 这不仅仅是当你轻敲边缘 还有你从一件事 接力到另一件事 追踪 以上滑桌面 和上滑 App 为例 这并不像撞上了一面墙 停止追踪物体 然后由另一个物体接管 它们都以顺滑的曲线 进行平滑切换 不会让你感觉这是 一个物体接管另一个物体的 粗糙时刻 接下来是设计平滑的 运动效果

假设有一个小物体 在这儿上下移动 非常简单 但是我们都知道这个物体 实际上并没有动 对吧 我们只是视觉上感到 它在移动 因为我们同时 在屏幕上看到很多帧 它们让我们有物体在运动 的错觉 如果我们把所有这些 构成运动的帧 分散开来 就能看到小球运动 的全过程 我们关心的问题是 这里相邻的两帧 出现了明显的 视觉变化 这时候整个界面 会感觉有点 不连贯 出现视觉频闪

这是因为 这两帧的差别实在太大了

以至于你的视觉跟不上 出现了频闪 看这个例子 两个物体都以 30 每帧传输帧数运动 但左边的看起来 要比右边的稍微顺畅些 因为右边的 运动得太快了 产生了频闪 我的视觉感受有点被破坏了 我不再相信它正在 平滑运动 在设计中重要的 不是帧速率 而是帧内容 我们有点被帧速率 和我们能在保持顺畅运动的同时 运动多快 限制住了 那么这个是 30 每秒传输帧数 如果我们将它提高到 60 每秒传输帧数 大家能够看到 我们实际上能变得更快一点 而且还能保持 流畅的运动 我们可以呈现更快的运动 并且不会出现频闪 我们还能做得更多 比如 动态模糊 它能在呈现运动状态的每帧中 加入更多信息 就像我们的眼睛 或者照相机 的工作原理

你还可以通过拉伸 从 2D 动画和视频游戏中 选取一页 从每一帧中拉伸内容 这样物体在高速运动时 还能看起来很流畅 这就是运动拉伸技术 那么在运动中 看起来就是这样的 上面的每种方式 都像是试图 在运动中将更多的 信息进行 视觉编码 我想再稍微多谈一下 这里的最后一点 运动拉伸 因为我们实际上在 iPhone X 上操作 大家知道当你启动 App 的时候 图标会弹性伸缩成 App 界面 并在你关闭 App 的时候 以相反的方向 进行伸缩 由于在运动的每帧之间 增加了一点额外信息 因此整个运动看起来 更加顺滑 最后 我们想考虑操作 而非动画 大家知道现实世界中的事物 总是处于 动态变化中 并且总是会受到你的影响 并不像动画片中的 那样运动 对吧 也没有现实生活 制定的动画曲线 所以我们认为 动画和操作更像是 你和物体之间的 一场对话 而非界面的描述 所以 不要试图把静态的事物转化为动画 而应该更多地去思考 行为本身 Nathan 稍后将具体谈到 这一点 但是让我快速举个例子 在照片这个 App 中 滑动照片的阻力很小 因为它在概念上就很轻量化 但是当你滑动切换 App 时 阻力会稍微大些 因为它在概念上更重 所以我们赋予了系统更重的质量

好了 这就是我想说的 如何设计像我们一样 思考和工作的界面

界面通过响应 让我们感受到与事物的连接 并且适应我们 不停变化的思维 保持空间一致性 来加强统一的空间感 以及对称的过渡方式 暗示手势操作的方向 来影响我们 对未来的预期 保持交互轻量化 但放大其效果 在保持互动的轻盈性 和轻量的同时 获得令人满意的响应 在界面中采用 柔性边界 并在你触及边界 以及转换追踪物体时 进行优雅的响应 设计与你同步工作的 顺滑动态的行为 好了 这就是如何设计 像我们大脑延伸般的 界面的几点原则 让我们再深入一点 我将把舞台交给我的同事 Nathan de Vries 他将谈到 如何设计动作 使其与你自身 和自然世界 完美连接 谢谢 Chan 大家好 我叫 Nathan 今天非常激动能站在这里 和大家谈谈 用动态运动进行设计

正如 Chan 刚刚提到的 我们的思维和身体总是 处于运动状态 我们周围的世界 也处于运动状态 这就导致了 我们希望当界面 变得更加有触感时 界面也同样 能将我们的期望 变得更加真实

现在在界面中使用动态的 一种方式是定时动画 只要敲屏幕上的一个按钮 控制权就像是 完全交给了设计者 他们的职责就是 在时间中精心制作 这些完美的帧 一旦动画完成 控制权又交还给了 界面的使用者 让他们继续互动 所以你们可以把 动画和互动看成是 一段时间内 在调用和响应模式间的 线性移动 在一个流畅的界面中 使用者动态化的本质是 从我们这些设计者手中 拿走控制权

那么我们的作用就是 想办法设计如何让动态 与互动同步运行 这就需要通过这些 持续运行和活跃的 动态行为来完成 那么今天 我主要想讲的就是 这些动态操作 首先我们来谈谈 无缝动态 就是这个动态元素 让我们感觉 动态动作是自身的延伸

下面让我们来看看人像 如何在即便没有时间曲线 和定时动画的情况下 也能在你的界面的运动中 引入可玩性 个性 以及纹理的概念

最后我们还将看看 动态自身如何给我们提供一些 关于人们想要对界面 做的事情的线索 我们如何通过 观看手势的动作 来解决一些 手势想要做的事件 的不确定性 那么首先 让我们来看看无缝动态 这是什么意思呢

先来看个 我想大家都很熟悉的 例子吧 这儿有辆车 正在以持续的速度前进 然后驾驶员踩了刹车 车子完全 停下来了 我们再来看一遍 但这次我们将汽车在这段时间内的位置 划分成小块 在曲线的最前段 它几乎是直线 向右上方延伸 这表明汽车 正在以几乎恒定的速率移动 几乎不变 但是之后你会注意到 曲线开始弯曲了 光滑地偏离了一开始的 这条直线 这是因为踩了刹车 由于阻力 汽车减速了 然后在曲线的末尾 它完全平了 是水平的 表明位置不再变化 汽车停下来了 因此这条位置曲线 基本上就从视觉上展示了 什么叫无痕动态 线条完全是未被破坏的 方向也没有突然的变化

所以它是平滑无痕的 实际上 即便汽车 将有新的动态动作 比如导致摩擦阻力的刹车

即便汽车完全停下了 你也会注意到 这条曲线是完全平滑的 它难以察觉 你无法指出汽车 究竟是什么时候停下的 那么为什么我要说汽车呢 我们谈论的应该是界面 对吧

我们感觉 物理世界的特征 创造了完美的动作

在座的每一位都会觉得 这个汽车的例子是如此的简单 因为我们有共识 或者说都知道 像汽车这样的物体在现实世界中 是如何运动的

这就给了我们一个参考点 现在我并不是说我们需要 打造一个完美的 汽车物理模拟 来运转我们的界面 而是说我们可以参考汽车 或在现实世界中 我们抛掷或移动的 其他物体的运动 并将它们运用到动态操作中去 让动态变得更熟悉 有联系 或是让人信服 这才是最重要的 这个参考现实世界 打造动态行为的想法 从一开始的滑动中 就已经运用到 iPhone 上了

孩子可以随手拿起一台 iPhone 然后在主屏幕 滑动找到最喜欢的 App 这就像在地上推动玩具小汽车 一样简单 那么这个滚动 动态行为的 一些特点 是什么呢

首先它利用了 我们在现实世界中 都有的关于 物体运动的 直觉和认知 以及我们对于那些物体的影响

这些物体的运动 是完全无缝的 因此当我和它们互动的时候 当我拖拽它们的时候 我的身体提供了运动的流畅性 因为我的身体 是流动的

但是一旦我放开了那个物体 它就会因为惯性 慢慢地停下来 因此我们有点像是在 保持放入界面中的精力 的动能

用来滚动的阻力 数量是持续不变的 这就使得它是可预测的 并且非常容易掌控

最后 这个物体不可察觉地 停下了 有点像这辆车 我们无法明确得知 它究竟是何时停下的 我们认为 这种明显感觉不到的结尾 加强了内容是永远运动 并且能够运动 的这一想法 因此当滑动内容时 感觉就像是 只要你将手往下拉 它就可以就能持续滚动 你不必等待 什么东西的结束 因此有无数 现实世界的特征 可以被借鉴 用来设计出更好的运动 我们没有时间来逐一探讨 但我接下来主要 想谈谈这个 因为我们真的觉得 它在我们的设计工作中 必不可少

这儿有一朵 漂亮的花 它的自然纤维 有弹性这一自然特点

弹性指的是 移除压力或拉力后 物体有优雅地 回到静息状态下的趋势

我们人类的身体就 非常有弹性 我们可以持续跑 一段非常长的距离 并不是因为肌肉有多强壮 而是因为它们可以放松

正是它们的弹性 做到了这一点

一旦压力或张力被移除 肌肉就会缩紧并放松 这就是我们保存力量的方式 让我们感觉自然 有机 同样的弹性被运用到了 iPhone X 中 在主屏幕轻敲一个图标 随后一个富有弹性的运动 就将一个软件在你面前打开 完全是你想要的样子 当你从底部轻扫 这个 App 就会重新 回到主屏幕上 刚刚好的位置 我们在滑动中 也运用了弹性 因此如果我滑动得太远 并且产生了 Rubber Band 就像 Chan 刚才提到的那样 当你放手的时候 内容就会因为弹性 在界面中返回 帮助你回到 静息位置 为下一次滑动作准备 让我们深入探讨一下 这种弹性在后台 是如何工作的 大家可以把滑动内容 当作连接在弹簧上的

一个小球 在弹簧的一端 是当前值 这就是展示内容的位置 弹簧的另一端是 内容由于弹性 将要去的地方 那么我们就得到了这样一个弹簧 它把当前值拉向目标 这个行为正在影响 内容的位置

现在弹簧事实上 就在把当前值拉向目标

有趣的是 弹簧的运动是无缝的 这种无缝对于行为来说 有点像内置的

这就是为何它们是 进行流畅界面设计的 多功能工具 你可以几乎免费 获得这样东西 因为它就在行为本身内部 我们喜爱这个 值移向目标的行为 我们可以指出 这个小球将运动到哪里 并能得到 小球移向目标的 无痕动态 但是我们想稍微控制一下 它运动的速度 以及是否会出现过冲 要怎么做呢

我们可以给这个小球一些质量 比如让它变大一点 或者重一点

如果这样做的话 就会改变小球的惯性 或者说是它想要开始运动的意愿 它不想停下运动的抗拒 然后小球就可能有过冲 另一种可能性是 我们可以改变弹簧的硬度 或者说是弹簧的 可伸展长度 这么做的后果就是 会影响对小球施加的力 改变小球 移向目标的速度 最后 与汽车运用刹车 非常类似 我们可以改变 小球表面的 阻尼或阻力 它的作用就像刹车 可以在一段时间内减缓小球的速度 同样影响过冲的能力 因此小球和弹簧的物理特性 就有点像是物理学科的东西 对吧 在科学领域中 它非常有用 但我们发现在设计工作中 它们对于在屏幕上 控制物体行为 太具有压倒性了 有些难操作

因此我们认为我们的设计工具 必须有一点 人类界面 它们需要反映 使用工具的设计者的需求

那么我们要怎么做呢 我们如何简化这些特性 让它对设计者

更加友好呢

质量硬度和阻尼 将仍保留在后台 它们是我们使用的 弹簧系统 最根本的特性 但是我们可以简化界面 仅保留两个最基本的特性

第一个就是阻尼 控制 100% 的阻尼 剩下多少 这样当阻尼为 0 时 就不会出现过冲 弹簧将永远 来回摆动

第二个特性是响应

它决定着值将以多快的速度 到达目标

大家可能会注意到 我从来没有用到过持续时间这个词 事实上我们往往避免 用这个词来形容 弹性行为 因为它强调了 持续动态变化这一概念 弹簧总是在运动中 时刻准备着移动到别的地方

那么这两个特性的 专业术语是阻尼比 和频率响应 如果你想在自己的设计工作中 运用到这两个特性 可以查找一下这两个术语 你将会发现 轻松转换它们的办法 这就是控制 弹性行为的两个 简单特性 但是这个曲线 还带来了无数可能性 比如 我们有成百上千 成千上万种方法 来配置这两个简单的特性 并得到不同的行为

那我们如何运用它们来精心制作 App 中的一个特性 来控制 App 的感受呢 首先 我们必须牢记 设备是工具

我们要尊重它们 因为我们带有目的地使用它们 这就要求我们不要 引入不必要的运动 来妨碍它们

所以我们认为你应该 从简单的开始 弹簧不需要过冲 你不需要用有弹性的弹簧

我们建议你调试弹性行为的时候 一开始就让阻尼为 100% 或者不要有过冲 这样你将会得到流畅 优雅 无缝的动态 且丝毫没有扰乱 正在执行的任务 就像很快地发送一封 电子邮件

那什么时候使用反弹 才合适 一定要有合适的时间 对吧 我们认为当 驱动动态的手势 自身有了动量 你就可以给它 一点点过冲

换句话说 如果一个手势有动量 并且没有任何过冲 那么跟随它的那个动态 就会像坏了 让人不满意 一个很好的例子就是 Apple 的音乐 App 在屏幕底部 有一个很小的迷你栏 显示正在播放 你可以轻敲这一栏 显示正在播放 由于在查看正在播放 的这个方向 轻敲这一动作没有任何的动量 我们用 100% 阻尼来确保 它不会过冲 但如果你轻扫 离开正在播放 这个方向就会有动量 所以我们用了 80% 阻尼 来获得一些弹性和挤压 让这个手势更加 令人满意

反弹还可以作为一个 实用程序 它能提供有用的提示 告诉你有东西 在屏幕下方 在 iPhone X 上 我们在屏保上引入了两个按钮 分别是打开手电筒 和打开相机

为了避免无意间错误地 打开手电筒 我们要求用一个更加刻意的 手势来打开手电筒 但是假如你不知道 需要用更加刻意的手势 来打开它 当你轻敲这个按钮 它会以反弹的形式响应你的操作 这个感觉有点好玩 这个暗示告诉你 这个按钮不仅能正常工作 而且它正在响应你 但是它就像在教你 如果你再用力一点按它 它就会打开手电筒了 它就像真的在教你 并通过动态的方向 给予暗示 因此反弹可以用来 暗示这类东西 那么到目前为止 我们都在谈用动态移动事物 或者改变它们的规模 改变它们在屏幕上的 视觉呈现 但是我们能以很多不同的方式 感知动态 比如通过灯光 色彩 或纹理和触觉 甚至是声音 我们许多其他的感官 都能感受到 我们认为这是一个 在调试 App 特征时 让我们走得更远的机遇 不止是动态

通过结合运动的 动态行为与 声音和触觉的动态行为 你可以真正彻底地 改变界面的感受

当你看到 听到 并感觉到手势操作的结果 它可以将本来 只是滑动的行为 变成一个 仿佛是有触感的界面 最后我想谈的是 当你精心制作 App 的特征时 你在想什么 那就是它必须给人连贯的感觉 你始终处于特征中 这是什么意思呢

即便是在你的 App 中 或者是在整个系统上 你必须把单个行为 当作整个行为家族中的一份子来对待

比如在滑动时 当我用滑动操作 向下滑动一个页面时 只要用一个弹性行为 轻敲状态栏 就能回到页面顶端 在这两种情况中 尽管实际上有两种不同的行为 促使它运动 影响这个动作 但页面就像是 以相同的方式运动 和我们有相同的行为

现在它不止适用于 滑动这一单个互动 还适用于你整个 App 如果你有一个好玩的 App 你应该接受它的特征 然后让你整个 App 都展现相同的感觉 一旦人们学会了 App 的一个行为 他们就可以很轻松地 学会另一个 因为我们通过重复来学习 我们学到的东西会 渗透到我们的行为中

接下来 我想稍微谈谈 有意图的 定向手势 或者说动态手势

对于一个离散的互动 比如按钮 手势的意图 非常明确 对吧 你们可以在大屏幕上 看到三个很明确的图标 然后我轻敲它们中的一个 结果也很明显

但是 例如轻扫这一手势 意图就不会马上 那么明显了 你可以说意图基本上 藏在手势的运动中 因此解释运动的意思 决定你们应该 对此做些什么 就是我们的工作和任务 我们来看个例子

比如我打了个一对一的 FaceTime 视频通话 在 FaceTime视频通话中 屏幕角落有一个 小的视频播放器代表着 我自己 这样我就能看到 电话那头的人将看到什么

我们把这个悬浮视频播放器 叫做 PIP 它是画中画的缩写

我们将 PIP 的外表做成是浮动的 这样大家就能明确知道 它是可以被移动的 只要非常轻量地拂动它 它可以被移到 屏幕的任意角落

那么如果我们将它与 播放 暂停 跳过按钮比较 它们的区别 在哪里呢

在这个情况下 我们实际上在处理 四块看不见的区域 我们不能再在屏幕上 看到被轻敲的 三个明显的按钮 我们必须透过手势 看正在发生的运动 然后凭直觉猜出它的意思 我们想把它放到哪个角落

我们把屏幕的这些区域 叫做手势的终点 当轻轻弹出 PIP 我们的目标是找到 我们想要的正确的终点 我们把这叫做 终点和手势意图的一致 一种方法是 当我拖拽 PIP 时 留意追踪最近的终点 这有点用 我能把 PIP 拖动到 屏幕的角落 但一旦我把它拖得有点远了 它就开始不好用了 现在我就需要把 PIP 拖到很远 差不多超过 屏幕的一半 很接近另一端的角落 所以它并没有真的放大 我的手势操作 对我来说不管用 但假如我试着轻拂 PIP

它就会去最近的那个角落 这却不一定是我想要的结果 这儿的问题就是 我们只关注了位置 却忽略了移动 PIP 时 它拥有的动量和速度

那么我们要怎么将动量融入到 如何决定我们想去的终点 中去呢 想象一下 我们可以退一步 暂时把终点放在一边 简化这个问题 我最终想要做的是 在屏幕上移动内容 我已经有的是 用滑动来完成它 的大量肌肉记忆 那我们为什么不用这些记忆呢

我们一直在用滑动操作 因此我们就有天生的直觉 能够知道当我滑动时 这些内容能够达到多远

大家能看到 当我滚动 PIP 时 它慢慢地挪动然后速度慢下来了 正是这个我们 从滑动中熟悉的减速

基本上我们在这儿运用这个优势 可以加强 人们从别的地方 学到的东西 即行为仅仅是在执行 系统被期待做的事情 现在这个新的 基于假定的 想象中的 PIP 位置并不是真的 我们将不会在 这个界面中展示 PIP 我们把这个叫做预测

我们获得了 PIP 被投掷时的速度 我们混入了减速率 并最终得到了 如果我们滑动它 将得到的预测位置 当投掷时我们不需要 找离 PIP 最近的终点 相反 我们可以计算预计位置 并直接移动到那儿 当我仅用一个轻量级的拂动 从屏幕的一个角落 轻扫至另一个角落时 它移动到了我预期的位置

因此预测动量这一概念 十分有用 我们认为它非常重要 我想和你们分享一些其中的代码 这样你们可以在自己的 App 中 也这样做 这个功能将用到一个速度 就像 PIP 位置的速度那样 和减速率 它会给你一个值 你可以把它当作动态操作的终点 非常简单 我们来看一下 FaceTime 视频通话 滑动手势结束代码 大家能看到 我只用了 UIScrollView.DecelerationRate 这一指令 这是建立在 人们熟悉滑动操作 和滑动内容 能移动到多远的基础上

而且我也用了这一认知 来进行预测 我得到了 PIP 的速度 和减速率 然后创建了想象中的 PIP 位置 我后来正是用了这个想象中的 预测位置 作为最近的角落位置

然后重新定位 将 PIP 送到那里

因此通过预测 找到一个位置的终点 的这一想法对拖拽 或轻扫内容 非常有用 你必须尊重 手势的动量

但是这个预测功能 不仅仅对位置有用 你还能在大小旋转 甚至大小和旋转的结合中 运用它 这是一个多功能的工具 在使用时你 必须确保 尊重手势的动量 并且让它感到 App 中的动态动作 是你自身的延伸

这就是用运动来设计 动态运动 行为必须一直 无缝地与互动 完美配合

我们必须依靠那个大家都有的 对我们身边现实世界 的直觉 那就是 当我们还是孩子时 就已经知道的 在现实世界中物体是怎么运动的 并时刻准备着 将其运用到动态界面中

你们要记住 反弹一定是 有目的的 想一想你为什么在用它 用它是否合适 还要确保当你增加特征 和纹理时 你将其与这个实用工具 完美平衡 最后记住要预测动量 不要光用位置 而要利用所有可用信息 来确保动作 和人们真正 想要挪动的地方 是一致的 并且将他们带过去 那么接下来我将 把舞台交给我的同事 Marcos 由他为大家进一步介绍 如何流畅地响应 手势和互动 谢谢大家 你刚刚说得很棒 谢谢 Nathan

大家好 我是 Marcos 到目前为止 我们已经看到了 流畅度在设计界面时的 重要性 很大一部分来自于 你和设备的互动

接下来我将为大家展示 轻触屏幕 如何编程你 App 中的手势 以及如何设计这些手势 来为你的界面 捕捉所有的表达和意图

我们首先来看看 一些最主要的手势的设计 比如轻敲和轻扫

然后我们将看到一些 在给界面 设计手势时的 互动原则

最后我们将会看到 如何处理多个手势 如何将它们结合到你的 App 中 那么首先我们来看一下 一个看起来很简单的手势 轻敲 大家可能会觉得 轻敲不需要设计 但是你们将看到 它动作中的细微差别 要比看上去多

在这个例子中 我们将在计算器 App 中 轻敲一个按钮

我们要记住的第一件事就是 当我们轻触按钮时 它必须马上高亮 这告诉我 按钮能正常工作 系统也在响应我的手势 但是只有当手指离开屏幕 我们才正式完成了轻敲这一动作 第二件要记住的事情是 在轻敲区域附近 创建一圈额外的边缘 它将让我们的轻敲 更加舒服 并且避免在互动过程中 额外移动后轻触意外取消 正如我的同事 Chan 刚才说的那样 我很可能 在触碰按钮后 想改变主意 那么如果我把手指 拖拽出轻敲区域并且抬起手指 就能取消轻敲 同样地 如果我轻扫回按钮 它应该能再一次高亮并让我 确认完成轻敲

接下来 要讲的手势是轻扫 它是 iOS 最核心的手势之一 并且它在许多动作中 都会被用到 比如滑动 拖拽和分页

但是无论你轻扫的目的是什么 或者随便你怎么称呼它 手势最核心的原则 都是一样的 在这个例子中 我们将用轻扫这一手势 将这一图像拖动到屏幕右侧 这个互动从我带着拖动的目的 手指触碰到图像的那一瞬间 就开始了

但在我们能确认它是轻扫前 这一触碰必须移动 一定距离 我们知道分辨轻扫和 其他手势 这段距离就叫做滞后现象 在 iOS 系统中 通常表现为 10 个点

因此一旦触碰达到了这个距离 轻扫就开始了

这也是确定 轻扫方向的时候 确定它是水平的 还是垂直的 我们不需要真正拿它举例 但在某些情况下 这真的非常有用 那么既然已经检测到了轻扫 这就是一个手势最开始的位置 之后 轻触这一手势 和这个图像就成为一体 同步运动 我们必须尊重相对位置 坚决不要 以图像中心 为拖拽点

在拖拽过程中 我们还要留意 位置和速度 当拖拽结束 我们不使用最后的位置 而是用触碰历史 来确保所有的动作 都流畅地转移到了图片中

正如大家看到的 轻触和内容应该同步运动 一对一追踪 十分重要 当轻扫或拖拽时 内容必须和手势 联结在一起

这就是 iOS 的原则之一 你用了滑动这一手势 让设备使用起来感到自然 而有直觉 一旦轻触和内容 不再一对一追踪 我们立刻就能注意到 这是非常明显 并且令人期待的 在滑动的情况下 它告诉我们 我们已经到达了所有内容的底部 但是一对一追踪 不限于轻触屏幕 比如 在 Apple TV 上操纵用户界面 就是根据这一理念设计的

即便轻触没有直接 操纵内容 在手势和界面间 获得直接联系 也让你能 操控整个动作 并让互动富有直觉

设计手势的另外一个 核心原则是 在互动过程中 持续提供反馈 这不仅限于 轻扫或拖拽 还适用于所有互动 如果你们再回过头来 看看 iPhone X 上的闪光灯按钮 它的大小 会根据我触碰的压力而变化 这就让我对自己的动作 有把握 它让我知道 系统正在响应我的手势 但它同时也告诉我 再按得用力些 就能打开闪光灯 另一个持续反馈的例子是 Apple TV 上的焦点引擎

Siri 遥控器上的运动 一直显示在屏幕上 它会显示 当前选中的项目 改变选中的项目 选中的方向就会 跟随着移动 因此 让我们的用户界面 在手势操作过程中及时响应 对提供流畅的体验至关重要 为此 当给出手势操作时 你应该避免做那些 仅会在结束才会被检测到的手势 比如 UI Swipe Gesture Recognizer （轻扫） 你应该用真实的轻触 或其他的 手势识别器 提供关于手势的 所有可能信息

因此不止是位置 还有轻触的速度 压力和大小 然而在大多数情况下 界面必须对多个手势 做出响应 当你不停地往 App 中加入特征 手势的复杂程度 和个数也都会增加 比如说 在几乎所有采用滚动视图的用户界面中 轻触和轻扫等 其他手势会彼此竞争 就像在这个例子中 我可以滑动联系人列表 或自由地轻触他们中的任意一个 进行预览

假如在得到任何反馈前 我必须等待最终手势 那么就会带来延迟 在那段等待时间中 界面就像是 不在反应 为此 我们必须 从动作的一开始 就检测所有可能的手势 一旦我们确认了意图 就取消所有 其他手势

那么我们回过头来看看 刚刚那个例子 我开始按压联系人 但是后来决定 我要滑动 也就是在那个时候 我们取消了三维触控动作 过渡到了正确的手势

然而有时 延迟是不可避免的 比如每次我们在用户界面中双击时 所有正常的触摸 都会被延迟 系统必须等到触摸结束之后 才能分辨这是单次轻触 还是双击 在这个例子中 由于我可以双击以缩放照片 轻触以显示 App 菜单 就被延迟了大约半秒钟

因此当为你的 App 设计手势时 你应该 意识到这些情况 并尽可能想办法 避免这些延迟

那么来总结一下 我们已经看过了如何设计一些核心手势 比如轻触和轻扫 我们看到了内容和轻触手势 必须一对一地移动 这是 iOS 的核心理念之一 在互动的全过程中 你还要持续提供反馈 并且当出现多个手势时 从一开始就要 同步监测它们 现在我想把舞台交还给 Chan 他将谈谈 使用流畅的界面 谢谢大家 干得漂亮

好的 我又回来了

我们刚刚学习了 如何打造 和我们一样流畅 能及时响应的 活跃的界面 那么既然我们现在 已经有点得心应手了 让我们来谈谈 在流畅界面的 媒介中工作 的一些考量 首先就是教学 手势界面的一个缺点在于 它不能立刻确定 究竟是哪个手势 我们必须友善并机智地 以一种友好 吸引人的方式 引导用户

一种方法是 利用视觉线索 它们充斥着世界 对吧 你只需学习一次 然后就可以到处用它们 它们非常便携 当你一看到它 就会知道如何使用

我们已经在 iOS 中 试着建立起相似的习惯 这里有一些例子

这里有一列滚动内容 你可以在底部 裁剪掉一些内容 来表示下面还有更多内容 让人试着发现 下面还有什么 假如我们处理的是好几页的内容 那就可以用页面指示物 来表明 有好几页的内容 对于滑动窗口内容 你能用 像这样的一个 把手来暗示它是 可以被抓取并滑动的

另外一个可以用到的技术是 把互动元素提高到 一个单独的平面 假如你有一个互动元素 将它提升到单独的平面 可以帮助你 将它与其他内容区分开来

一个很好的例子是 打开/关闭按钮 我们想要表明 开关的旋钮是可以被抓取的 因此我们把它 提升到了另一个平面 这在视觉上就将其分开 并且展现了它可以被抓取的本质 因此像这样 在界面上方的 悬浮元素 互动元素 能表明它们是可以被抓取的 接下来我们将用动作 来展示 而不是简单地说 如何使用界面 我们可以用静止的动画 来增强动态行为 一个例子就是 Safari 浏览器 在 Safari 浏览器中 左上角靠近标签页的地方有这个 x 型图标 当你轻敲那个按钮 标签页就向左轻扫了 表明它已被关闭 这就暗示我 可以自己向左轻扫 通过一个手势操作来 同样完成关闭标签页 这个动作 通过使离散的动画 和手势一致 我们可以用其中一个 去教另一个

还有另外一种可以用的技术 那就是解释 你明确告诉用户 如何使用一个手势

这最好是适度使用 最理想的情况是 当你在很多地方 重复使用一个手势 因为你只要到前台解释一次 然后继续用它 就能继续加强它 不要把它运用到 间歇使用的手势上 人们记不住它的 接下来我想稍微谈谈 乐趣和可玩性 因为这是流畅界面 最重要的方面之一 只有当你确定了一切 它才有效

这是流畅界面的 自然结果 当界面即时响应 并表现得令人满意 当它是可重新定向 并宽容的 当动作和手势是流畅的 所有一切我们刚刚提到的 界面开始和你感觉同步了 神奇的事情发生了 你不再感觉 你需要学习界面 相反 你感觉你正在发现界面

因此我们认为 当能让用户通过玩耍来发现界面 这是最好的情况 这甚至不会让人感觉 他们在学习它 这真的很有趣

人们喜欢玩东西 我们认为如果能发挥与生俱来拨弄的本性 这是最好的 玩是我们大脑 正在内化 界面的感觉 所以当我们仅仅是为了打造而打造这东西 制作它的原型时 这才是最棒的 亲自玩它 看你能怎么摆弄它 把它给别人 看看别人会怎么玩 然后考虑你将如何通过 类似动画 动作 或解释等行为 来加强它

令人惊讶的是 玩居然可以有这么大的效果 让界面向人类展示 自我学习 让我们再来谈谈 作为媒介的流畅度 我们如何真正开始 打造这东西 我们把像这样的界面 看成是独一无二的介质 因此必须正确地 处理它

那么第一件事就是 将互动与视觉 打造成不可分割的状态 而不是后来添加的东西 互动设计必须 与视觉效果 同步完成 你甚至不应该能分得清 什么时候一个结束了 而另一个开始了

我们必须建立 这种东西的样本 我们认为互动演示 绝对值得一百万个 静态设计 不只是为了展示给别人看 还要你自身理解 界面的真正内涵

当你制作它的原型时 非常珍贵 因为你在搭建时 就几乎发现了界面 这个技术实际上就是 我们在搭建 iPhone X 界面时 用到的

它真的非常重要 因为它同时为实施 设立了目标 非常幸运在 Apple 我们有这支 令人惊艳的工程设计团队来建造它 因为建造过程 真的很难 还需要有一些 神奇的例子 提醒你自己和 工程设计团队 它将会有什么感觉 明白吗 记住 这真的是在提醒你自己

当你真的搭建时 它是非常难以 被复制的 这就给了你的 App 独一无二的特性

因此多点触控 是我们发挥的一个 神奇的媒介

我们用科技 在古老 触觉的层面上 与人们联系 这真的非常酷

今天我们谈论的 所有原则 都是 iPhone X 手势界面 设计的核心 及时响应 可重新定向 可中断的手势 动态动作 优雅的手势操作 这在很多方面 体现了我们认为的

流畅界面 我们的思维和行动一致时 神奇的事情发生了 它不再像是一台电脑 而是开始像 我们自身的无缝延伸

当我们设计 界面的未来 我们认为必须像这样 在科技中 试图捕捉人性

这个人类最重要的 工具之一 使用起来不是负担 而是快乐和愉悦 非常感谢 [ 掌声 ]