专为空间交互设计

音乐 （空间交互设计） 大家好 欢迎观看 “空间交互设计” 我叫彼得 是Apple设计团队的设计师 很高兴能与我的同事阿里安 泰勒 莱纳斯和佩德罗一起 为大家分享一些指导我们 如何进行设计空间交互的考虑因素 我们将分享在面向AirTag HomePod mini 和iPhone创建交互时 吸取的经验 并为您提供一些在您自己设计交互时 可以参考使用的 提示与技巧 我们开始吧 随着设备的逐步发展 我们与它们交互的方式也在改变 早期的计算机只能使用键盘操作 界面展示完全通过文本实现 用户须记住抽象的命令 并依靠方向键在屏幕上移动 来实现操作目的 如今 大多数人使用键盘时 也会配合使用图形用户界面与鼠标 这些创新去除了一层抽象 允许人们使用鼠标来进行 指向 点击和拖拽 以更直接地表达操作意图 后来 多点触控将数字世界 带到了人们的指尖 去除了另一层抽象 让人们可以触碰到他们听的音乐 拍摄的照片和使用的网页 今天我们要讲的是 一类超越单个设备界限的交互 以及如何利用最新 Apple设备的功能 来帮助用户更直接地与 周围物理环境进行交互 其中一些交互大家可能已经很熟悉了 比如如何拿着手机或手表 靠近支付终端支付咖啡的费用 或者如何快速检查 AirPods的电池电量 只要在手机附近打开盒子就可以 这些人类规模的交互—— 发生在附近设备之间的交互—— 有去除抽象的能力 并允许用户与其周围环境 更直接地交互 随着最新Apple产品中U1芯片 空间感知能力的增强 我们已经能够为AirTag HomePod mini 和iPhone提供更强大 更灵敏的体验 现在 由于新的API和 与您在iOS 15中构建的 第三方硬件交互的能力 您现在可以将这些体验加入 自己的产品中 在设计这些交互时 我们了解到 考虑距离和能力 提供持续的反馈 以及采纳身体动作是很重要的 让我们进入正题 在iOS 13中 我们通过 将空间感知引入共享菜单 使内容共享变得更加容易 通过获取对面或是附近人的信息 并结合查找设备上频繁联系人 与近期联系人 您的设备可以智能地预测出 您打算与谁共享文件 这是一个可以说明您App中 现有功能是如何通过空间感知能力 变得更加智能的很好例子 您不必构建全新的体验 来利用这些新功能 将空间感知纳入 现有要素时 请注意 这些功能 并非在所有设备上都可用 您的设计应适应不同级别的功能 有了共享菜单 所有设备都可以 使用蓝牙和Wi-Fi 查找其他设备 然而 搭载U1空间 感知芯片的iPhone 通过优先考虑在您对面 或是距离很近的其他人 将这一点向前推进了一步 当然 空间感知不仅可以 用来增强现有的体验； 它还可以帮助建立全新的体验 接下来 阿里安将 分享这些相同的概念 如何应用于AirTag 借助AirTag 我们将向您展示 您的设计如何适应 不同的距离和能力 在这个例子中 假设我因为乱放而找不到在意的东西 我沿着原路返回 意识到我并不确定它在哪里 当我打开iPhone 感觉如释重负 因为我可以在地图上看到它的位置 以前 我只能 到达这个物品的大致附近 但现在iPhone可以 显示更有帮助性的尺度来引导我 事实上 当我距离较远时 给我指路的同一个按钮 在我靠近时已经变成了这种 可以帮助我找到物品的样式 在适当的尺度下增加设计元素 是人们发现和使用 这些新能力的好方法 由于iPhone正在 定位我的AirTag 我得四处走动并搜索周围环境 一旦连接到失物 就会生成箭头 并直接指向我需要去的方向 当我与AirTag的方向一致时 程序设计高亮加以强调 我们强调了面向的方向 没有面向这个方向时则提供指南 以一种微妙的方式 这种区别也会基于距离而缩放 当离得更远时 我们发现很难做到 一直保持朝着某个特定的方向 为了弥补这一点 我们实际上 稍稍放宽了iPhone确定朝向时 对于角度的判定标准 随着您位置越来越近 提示光线变得 越来越窄 指向也越来越具体 这种情况会在您没有 注意到的情况下发生 因为您被慢慢引导到 AirTag旁边 当您与AirTag的距离 终于触手可及时 箭头会遵从一种 在小范围内更加有效的反馈形式 当您拿着Apple手机划过 AirTag可能隐藏的地方时 该设计会转换成强化触觉的反馈 通过这个例子 我们向您展示了 您的设计如何基于距离进行转换 无论您是在很远的地方 还是在毫米范围内 想想您的设计如何才能最好地 适应我们作为人类共有的各种能力 距离较远时放宽对于角度的判定 以及将反馈模式修改为 以小范围内更有效的形式为优先 接下来 由泰勒向您展示 在设计这种交互时 这种持续的反馈是多么重要 谢谢 阿里安 我们已经竭尽全力使屏幕交互 流畅 动态地响应触控输入 但当在物质世界中交互时 这种持续的反馈甚至更加关键 在物质世界中 您的设备 成为了您身体更具字面意义的延伸 在整个交互过程中 在正确的时间应用和 编排正确类型的反馈 可以帮助您设计的功能被发掘 得到指导 并可以与他人交流成功与否 众所周知 我们的运动可以 随时开始 停止和被打断 我们将讨论如何利用 看到 听到和感觉到的反馈 来将您的交互与物质世界联系起来 尽管取决于 所用设备的能力 但有多种类型的反馈 值得考虑与一起使用 这些可以包括视觉反馈—— 例如用户界面变化 灯光与硬件交互 以及两个设备之间 协调的视觉反馈—— 音频反馈和触觉反馈 我们还将讨论自然中断与取消 以及它们在两个设备之间 成功交互中的重要性 让我们先看看不同类型的反馈 如何使得将音乐传递给 HomePod mini的过程 变得直观和令人满意 借助HomePod mini 我们使用多种类型的反馈来 与您的iPhone建立实体关系 提供方向 并最终确认 您的音乐已成功传输 我们通过在HomePod 周围创建两个离散的边界 来实现这一点 并响应您在边界之间的移动 当您的iPhone 到达第一个区域时 在第一个和第二个区域之间提供反馈 指示您靠近或允许您取消交互 而最后当您的iPhone 到达第二个区域时 会向您确认并传输音乐 从iPhone到达第一个 距离阈值的那一刻起 反馈就会持续提供 在屏幕上 背景中生成的banner的位置 比例和形态从模糊逐渐清晰 直接响应您与 HomePod的距离 设计视觉反馈时 调整屏幕上元素的运动 使其看起来与您的肢体动作相关联 比如这个banner的运动轨迹 与您的手朝向或远离HomePod 的线性运动相关 触觉反馈用客观事实补充了这一点： 两个设备之间是相互感知的 并加大了感知力度鼓励您 继续靠近 除了对iPhone的反馈 HomePod mini还通过 扬声器顶部的动画来 确认iPhone的接近程度 出色的空间互动通过自然的肢体语言 来确认和取消命令 当您将iPhone靠近 HomePod mini时 追踪您与HomePod之间距离的 清晰又连续的反馈清楚地表明 您可以简单地使用拉开动作来取消 或使用中断手势进行中断 这允许我们创建一个 完全不需要看显示器 或者需要额外的屏幕按钮 才能取消或确认用户意图的交互 所有这些方面均由 IPhone因您的移动 距离HomePod更近或更远 而驱使与发起响应 在设计空间交互时 物质世界中 某人的动作与他们 在一个或两个设备上看到的 听到的和感受的 直接关系至关重要 接下来 Linus将讨论在找到 AirTag的同时提供 反馈的独特限制 HomePod mini是个展示 如何在两台支持丰富反馈的设备之间 编排反馈的优秀例子 对于不可能实现这一点的设计 您可能不得不更加依赖单个设备 由于AirTag可以帮助您 找到丢失的物品 因此这种体验是为 视野中无法看到丢失物品 的方案而设计的 让我们重温一下之前 看到的寻找体验 这次着眼于如何利用 iPhone丰富的触觉 视觉和听觉功能 在感官之间提供持续的反馈 当空间交互有响应并跟随您的动作时 感觉很棒 这意味着它除了会对 剧烈运动作出响应外 也会对轻微运动作出响应 即使iPhone正在 连接AirTag 界面也会随着我的转动 而轻轻旋转并做出响应 这暗示了即将到来的 交互的本质 这些点也为持续适应 体验提供了基础 一旦建立连接 我和我的 AirTag之间的距离 也会出现 当我向任何方向行走时 这个距离的响应都非常精确 它会立即更新 告诉我 我是在朝着目的地前进 还是越走越远 当我四处走动时 这些点流畅地汇聚成了一个箭头 将我指向正确的方向 可以使用微弱的触觉 与声音来突出此刻的重要性 当我的iPhone在 箭头周围移动时 箭头就好像漂浮在空间中 正如您之前看到的 当我调整到正确的前进路线时 界面会突出显示加以强调 正对着丢失的AirTag的方向时 屏幕就会显眼地发亮 我也感觉到并听到箭头卡入到位 通过响应每一步和微妙的转折 可以感受到设计在与我和我 所处的空间紧密相连 在设计您的空间交互时 请考虑人们将如何将身体的运动 与他们在设备上的体验联系起来 请尝试在行动和反馈 之间建立清晰的联系 注意特定的动作 就在箭头的前方 有一个点开始在我手中跳动 当我靠近时 跳动加快 触觉也随之变得更紧 更清晰 如果我脱离这个方向 跳动停止 界面引导我返回 如果我走得离 我的AirTag足够远 箭头会分散成点以标记信号丢失 像这样时刻的细微差别 也具有重要且非常有用的指导意义 请注意反馈如何补充 各种各样不可预测的人类运动 并建立一个有弹性的设计 可以自适应地改变以 适应我们的运动方式 当触手可及时 我们在视觉上放大这个点 跳动变成连续的触觉反馈 随着我的移动而改变 这种触觉响应会随着我的靠近 或是远离而发生改变 我可以把我的iPhone移到 AirTag可能在的地方 并通过我的手更精确地 感知它藏在哪里 请注意 我们不会在 这部分体验中使用声音 因为触觉反馈的效果要好得多 和任何持续的反馈一样 您的设计应该注意触觉 声音 和视觉是如何在感官之间协同工作的 类似于我们把我们 在这个世界上看到的 听到的和感受到的东西 视为一种整体体验 在设计交互时 考虑每种 反馈形式的不同优势以及 它们如何一起使用是很重要的 寻求提供与身体运动 相关的连续反馈的视觉层 并使用额外的反馈来 强调交互中的重要时刻 在合适的水平上 明智地使用触觉与声音 并带有可重复的因果关系 这样就能清楚想要传达什么 除了以这种方式处理反馈之外 请记住 您的设计将补充 一个身体动作 由我的同事佩德罗来谈论这方面内容 在HomePods的例子中 我们使用空间感知来使 选择扬声器的任务更加自然 有时候 我会听一些音乐 我想把它从我的iPhone上移到 附近更好的扬声器上 以前 如果我想在 不同的扬声器上播放这首歌 我必须进入AirPlay列表 在这个列表中显示的所有其他设备 都是平等呈现的 无论它们是否靠近我 然而 我真正感兴趣的是 这个特别的HomePod 有了这种新的人类规模的交互 我终于可以不需要在屏幕上导航UI 或者根本不需要与屏幕交互 就能把一首歌转移到 这个HomePod 我们提供HomePod 本身的视觉反馈 以显示音乐即将被传输 光线随着我的移动而精确地调制 当我靠近时强度增加 当我远离时强度减小

当然 传输的最终确认 是扬声器播放的音乐本身 通过采纳身体的动作 以前无形的体验 现在感觉完全是有形的 发自内心的与本能的 想办法让您自己的界面 支持自然的肢体动作 而不是抽象的选项列表 试着让您的体验和设计 遵从手头的肢体任务 此外 考虑如何最终使用 “这个”和“那个”的概念 来创造与我们的思维方式 一致的更自然的体验 确保在两台设备上提供 即时和持续的反馈 具体来说 要非常清楚 目标设备上正在发生什么 因为这是您的注意力 自然会被吸引的地方 同样 当寻找一件丢失的物品时 我的注意力应该指向我周围的世界 以及它可能藏在哪里 播放来自AirTag的声音 让我立即感受到 它在空间中的位置 将我的注意力吸引到我的周围

当谈到iPhone 本身的视觉反馈时 请确保在执行超出 显示屏范围的任务时 它可以被读取 当我们预期它将在外围被查看时 我们经常设计接口以这种方式工作 例如 当使用逐轮导航时 我需要在何时何地进行 下一轮的排版字体 比其他可能占据相同 空间的通知更大、更粗 电视遥控器的按钮和有效区域非常大 旨在让您的眼睛对准电视本身 而不是电视的控制装置 例如 计算器中的数字和操作按钮 是大而粗的 因为我们预料 您可能会参考餐馆账单上的数字 来计算小费 与前面的示例一样 我们在查找AirTag时 显示距离的字体大小 设置得比系统的 其他部分大得多 整个UI围绕着一个 巨大箭头的中心元素旋转

加粗的颜色变化可以 在我的外设中读取 声音强化了关键时刻和状态—— 走路时 我甚至可以不用看屏幕 就能感觉到距离在缩短 这最终支持了使用时更加自然的姿势

当距离触手可及时 触觉反馈可以引导我靠近 即使屏幕不在我的周围

这些字体大而粗的UI选项 使那些能力不同的人 也能获得这种体验 确保您的设计使用了 不止一种反馈模式 并且每一种都足够突出 以便能被清楚地理解 您的设计不应该吸引过多的注意力 以传递信息 或是与主要任务竞争资源 最后 您可以尝试加固良好的状态 并庆祝您在完成空间交互的 道路上取得的积极进展 要一直仔细考虑实践中 不停补充的肢体动作 现在 请彼得再继续讲！ 我们今天谈了很多 我们已经看到 考虑设备的语境和环境的情况下 全新的以及现有的体验 是如何变得更加智能且有价值的 您学习了响应性和持续性反馈如何 帮助用户发现和使用这些新体验 最后 我们看了一些 可以让您的设计 在外围得到有效的体验的同时 又保持着对物理环境关注的技术 我们希望您和我们一样 对空间感知如何简化 我们的设备和用户 物理环境之间的交互 并带来更直接的体验而感到兴奋 有关更多信息 请务必访问 developer.apple.com 在那里您可以找到 空间交互的人机界面指南 以及关于如何实现 这些类型的交互的技术信息 我们迫不及待地想看看 您会构建出怎样的设计 音乐