空间设计的原则

♪ 悦耳的器乐嘻哈 ♪ ♪ Nathan Gitter：欢迎大家 观看课程“空间设计的原则”。 我是 Nathan Gitter。 Amy DeDonato：我是 Amy DeDonato， 我们是 Apple Design 团队的设计师。 今天，我们将带领大家学习 如何设计空间操作系统。 我们把世界看作一张无限画布， 各种不可思议的 App 和游戏 都可以在其中运行。 Nathan：运用深度、比例、自然输入 和空间音频， 您可以创造出前所未有的体验。 您可以通过关键元素 优化现存 App， 也可以创造一个全新的 App。 您可以去到全新的地方， 跟特别的人分享自己的经历。 Amy：要学习的内容很多， 我们将帮助您入门。 Nathan：我们能帮您 把想法变成现实， 创造大家喜爱的体验。 今天，我们谈谈如何 制作优秀的空间 App。 我们将从最基础的内容开始， 学习如何保留 App 中 用户熟知的元素； 然后，探讨什么是以用户为中心； 接着，我们学习 如何通过维度来利用好空间， 让 App 更具有沉浸感； 最后，我们学习如何制作 让人身临其境的 App。 进入正题。 我们要在无限的可能性 和熟知的元素间取得平衡。 侧边栏、标签和搜索栏等常见元素， 让用户可以找到自己想听的音乐。 在一个空间平台上， 用户应该能够使用自己熟知 并且会使用的元素， 稳妥地找到自己想听的音乐。 我们把界面放在窗口里， 方便用户查看和使用。 用户熟悉 App 窗口， 但在这个平台上， 窗口存在于空间， 感觉像是外界环境的一部分。 在第一部分，我将介绍窗口 以及如何选择恰当的窗口尺寸， 并讨论点系统。 先说窗口。 我们用新的视觉语言设计了窗口。 所用的玻璃材料 与现实世界形成对比， 使用户更容易 关注到自己周围的环境， 且该窗口可随不同的 光线条件而变化。 系统提供了移动、关闭 和调节窗口大小的控件， 用户可以拖拽窗口栏， 把窗口移动到任何位置。 注意，窗口移动时 始终正面朝向用户， 这样用户可以轻松查看并使用界面。 窗口将会停留在用户松手的位置。 接下来，我们看一下 如何选择窗口尺寸。 窗口设计成了适合用户视域的大小， 但也灵活可调， 可以随意拉伸到任何尺寸。 基于您的内容， 选择适合的窗口尺寸。 例如，Safari 浏览器 设计得很长， 这样用户就可以看见更多网页内容。 Keynote 讲演设计得很宽， 以方便全屏演示。 还可以在窗口中添加弹性形状控件， 如让标签栏和工具栏在窗口外展开， 就像这个 Music App， 这些控件叠加在主窗口上， 使用方便， 也给内容留下了更多空间。 也可以用多个部分， 把控件和内容分开。 Safari 浏览器采用 导航栏和网页分开的设计， 让用户会把注意力放在页面上。 窗口也可以改变尺寸。 打开 Safari 浏览器的侧边栏， 窗口就会扩展，显示更多控件， 让网页不受遮挡。 窗口不受屏幕的束缚， 所以应尽可能缩小尺寸， 以避免挡住太多用户视域。 思考一下如何让自己的 App 设计灵活并且动态可调， 基于场景改变形状与尺寸。 为空间平台设计 App 是一件非常有趣的事情。 您如果需要更大的画布， 就可以使用一个更大的画布。 像其他平台一样， App 可以有多个窗口。 在某些情况下，这一特性大有裨益。 它们可以并排显示内容， 例如同时浏览多个网页， 或者展示不同的要一起使用的操作。 Keynote 讲演播放演示文稿时， 幻灯片在一个又大又远的窗口里， 而主讲人的演示稿 则在稍近的小窗口里， 这可以让用户把演示窗口 放在他们想放的地方， 同时保持幻灯片大屏清晰地播放。 最好把 App 的界面 放在一个窗口里。 多窗口会迅速给 用户管理带来不便。 接下来，我们聊一下点。 为了使界面井然有序， 我们采用点设计。 这个概念您可能已经熟悉。 点是一种方法， 帮助我们界定界面元素的大小， 它对界面的描述也适用于其他屏幕。 在这个平台上， 用户拉远窗口时，窗口就会变大， 用户拉近窗口时，窗口就会变小。 这种操作使得界面清晰可读， 保持了窗口的实用性。 如果您熟悉其他平台的点系统， 就可以熟门熟路地 用相同单位 设置按钮等界面元素的大小。 点方法适用于 设计任何距离的界面。 您可以在课程 “设计空间用户界面”中 进一步了解关于设计界面的知识。 接下来，我们学习 如何设计以用户为中心的 App。 好设计总是以用户为中心。 但现在，以用户为中心 有了全新的含义。 消费者佩戴设备， 使用眼睛和手进行互动， 在自己的空间里以自己的视角 体验这些 App。 设计空间 App 时， 我们要考虑用户的视域 和移动方式。 先说用户视域。 用户佩戴着设备时， 看到的是自己眼前的世界， 这就是用户视角。 中心位置的事物是最容易看到的， 所以要把最重要的内容放在这儿。 由于用户的视角比较广阔， 我们要采用横向布局。 举个例子， 为满足用户同时浏览 Safari 浏览器所有标签页的需求， 我们把这些标签页 展开在一个网格里。 这种宽泛的布局 刚好与用户的视角相匹配。 标签页的比例缩小，这样 每个标签页不会离中心位置太远， 把侧面标签页向内翻转一些， 这样更方便用户阅读。 但是用户不会完全保持静止， 他们会四处看看。 这就意味着我们可以拉长内容展示， 让用户获得沉浸式体验。 但是一般来说， 我们要把主要内容 放在用户的视角里， 否则用户很难一下读懂 或理解所有内容。 用户为本的设计理念 也代表着我们要 在设计中融入人体工程学。 内容摆放的位置不同， 用户做出的身体反应也不同。 所以要始终合理安排对象的位置， 让用户感到舒适。 默认情况下， 窗口要沿着用户的自然视线放置， 让用户能够以健康舒适的姿势浏览。 内容要安排在 用户正对面， 在头部的高度。 这样方便用户观看和互动， 同时也照顾到了 不同身高不同姿势的用户， 例如倚靠在沙发上的用户。 大多数情况下， 内容与用户的距离要远一点， 稍远于一臂距离， 引导用户远距离互动。 内容不要放在用户身后， 或者放得过高或过低， 除非这属于沉浸式体验的一部分， 因为如果可以边移动边使用 App， 用户不会固定坐在一处。 也不要把内容固定在用户的视域里， 这样会让人觉得卡顿、晕头转向。 相反，把内容固定在用户的空间里， 让用户就可以自由地四处观望。 就算戴着设备， 用户也可以起身四处走动。 但是，我们建议您创造 只需要轻微移动的固定式体验， 这样能够增加 用户使用您 App 的便利性， 除非这是您让用户体验的核心部分， 否则用户应该能够 纹丝不动地使用您的 App。 有时用户确实会变换位置， 或者变换方向。 坐定以后，用户可以长按数码表冠， 重新定位窗口， 让内容回到自己面前。 您的 App 不需要提供 恢复窗口或重置场景的功能， 而可以依靠系统 来调整 App 内容的位置。 接下来我们学习 如何设计 App 的维度。 我们将会讨论 App 可利用的空间， 以及如何运用深度和比例。 我们从空间开始。 优秀的 App 能够 有效利用用户空间。 尽管画布是无限的， 用户的实体空间却是有限的。 您的 App 要适用于 任何大小的空间， 因为您不知道用户 会在什么地方使用， 但是您也要注意， 不要让您的 App 受实体空间限制。 我们看一下这一点在 TV App 里是如何体现的。 看这里，窗口在移动的时候 穿过了这把椅子， 尽管窗口在移动， 这把椅子仍然是可见的， 这样更方便我们放置窗口。 释放窗口以后， 内容就变得清晰可见了， 用户可以看到并使用 App。 借助窗口，您不用担心 App 如何适配用户的空间， 因为系统会帮您解决这个问题。 看电影时， 视频会占据整个窗口， 透视效果变暗。 调光是一种最大化利用空间的 简单而又有力的方式， 即便电影可能和实体空间重叠， 调光可以把用户的注意力 集中在内容上。 这是一种美妙的平衡， 用户能感知到环境， 却又不受环境的限制。 用户随时可打开 Environment， 扩展到实体空间维度之外。 如果您的 App 需要更多空间 来容纳更多的内容， 您可以自己创造更为逼真的体验。 这里，我们创建了一个 活神活现的电影院， 模拟大型影院。 我们会在后面提到更多类似这样的 Full Space 体验。 设置 App 的维度也要使用深度。 深度在空间平台上是一个新变量， 这是一个强大的层次和焦点工具。 我们来看几个例子。 深度影响空间和物体的关联方式， 精美巨大的远距离内容， 吸引用户远距离互动， 邻近物体也能吸引用户互动， 并且方便用户从各个角度观察。 轻微移动可以让我们 全方位地看到这个物体。 深度的一个杰出用途是创造层次。 我们再看一下 TV App。 在这个沉浸式影院里， 回放控件做得很小，离用户也近， 即便尺寸小， 也能控制这部电影的播放。 如果我们把控件放在电影屏幕上， 它们就会显得太大而且很突兀。 类似这样的元素虽然尺寸做得小， 但是跟远处较大的物体相比， 仍然在视觉上占据了先机， 深度需要借助光影等视觉线索 进行加强。 部分物体能够发散光线， 比如我们刚刚看到的电影屏幕， 光线投射到地板和天花板上， 突出了屏幕的位置。 任何发光的物体 都应照亮附近的物体。 大多数其他物体应投下阴影， 就像这个窗口在桌上投下了阴影。 光影给这些物体提供了基础， 使他们与空间更好地融合。 您 App 里的任何自定义物体 也应该投下阴影。 在大多数情况下，选用细微的深度， 深度的选择容易过度， 使得设计出来的事物 不切实际，分散用户的注意力。 元素与元素间的细微深度， 通常就足够引导用户的注意力。 注意，这个模型出现的时候， 窗口稍微后退了一点， 来吸引用户的注意， 这种深度细微却有效。 但也不是所有事物都需要使用深度。 例如 3D 文本， 特别是有一定角度的 3D 文本， 会分散用户的注意力， 让用户无法阅读。 如果我们要把文本作为 界面元素使用，应使用平面文本。 和深度一样， 比例也是加强内容的一种新方法。 小窗口单薄又不方便观看， 大窗口气势磅礴， 仿佛在湖面上 播放了一部巨大的电影。 扩大比例能完全改变 电影的观感。 有些物体最好 以现实生活中的大小展示， 例如购物 App 需要展示出 产品现实生活中的样子。 给您的内容尝试不同的大小， 试着把内容做的特别大或者特别小， 看看分别是什么效果。 下面，我们学习如何利用沉浸感， 让您的 App 更受欢迎。 请 Amy 为大家介绍更多内容。 Amy：谢谢 Nathan。 现在我们学习一下 如何让您的 App 具有沉浸感。 沉浸式体验超出了窗口的范围， 让您的世界发生了翻天覆地的变化。 我们将探索浸入式光谱、 制作优秀的 沉浸式 App 的基本技巧， 以及如何维持用户的舒适感。 先从浸入式光谱开始。 这个平台上的 App 是动态的， 根据用户所处的位置， 这些 App 可以在不同状态之间 流畅地转换， 是光谱提供了这种灵活性。 您可以扩展用户的视域， 或带领用户体验全新的场景。 您的 App 可以放在 共享空间一个窗口里， 和其他 App 一起运行。 如果需要更多空间， 您的 App 也可以在隐藏其他 App 的 Full Space 中运行。 试着共享空间 的窗口里打开您的 App， 这样用户就可以 控制自己沉浸的程度。 我们看一个示例。 我们在 Keynote 讲演的 窗口里打开 App， 但是播放幻灯片时， 我们可以用调光 把用户的注意力集中到演示文稿上。 调光是一种简单的方法， 不需要把内容移出用户环境， 就能在内容 和用户环境之间创造对比。 彩排演示文稿时， 我们可以把用户带到舞台上， 让他们觉得仿佛去到了真的剧院。 这种实物尺寸的体验需要更多空间， 所以 Keynote 讲演在 Full Space 中运行，隐藏了其他 App。 这里 App 带领用户 体验了全新的场景， 在这儿，他们身临其境。 但是 Full Space 也可以不把用户带去别的地方， 用户可以留在自己的空间里， 这里，感觉您在眺望大海， 但仍然能看到自己周围环境。 无需占据用户整个视域， 您可以设计出丰富的 具有沉浸感的体验。 用户使用键盘或控制器 也能达到这种效果。 沉浸式 App 也能 与用户的实体环境相连。 这里，巨大的“你好”字样 在桌上投下了阴影， 让人感觉这是真实存在的。 如果您设计的体验 关联到了用户的实体环境， 记得要让您的设计灵活一些， 不是所有人的空间都是一样的， 并且空间会随着时间变化， 所以要确保您设计的体验 适用于任何地方。 现在，我们来学习制作优秀的 沉浸式 App 的基本技巧。 设计沉浸式体验时， 我们要考虑一个新的问题。 用户会四处看看， 把注意力放在不同的事物上。 但是如果同时发生太多事情， 他们可能会不知所措， 不确定该做什么。 所以，我们要把用户的注意力 引导到最重要的部分。 在 Mindfulness App 里， 您的注意力被引导到这个空间里 唯一的物体上。 尽管您可以看任何方向， 移动、空间音频和绚丽多彩的材料 还是把您的注意力吸引到了这里。 需要深入思考的时候， 我们轻柔地展开这朵花， 直到它把您包裹在里面。 记得转换要舒缓 并且可预料， 从而创造不同状态间 体验的连贯性。 这样能够让用户感到舒适， 知晓在发生什么事情。 另一个重要的技巧 是与现实恰当地融合。 如果您的 App 在 Full Space 里运行， 您可以利用空间形状 锚定内容或者制造物理互动。 对用户环境的认知 让您能够把内容有意义地融合进去。 在您把整个场景融入 到用户的空间时， 要确保使用柔化边缘 流畅地融合您的 App。 这种方法避免了突兀的转换， 把用户的注意力集中到内容上。 最动人心弦的体验 是让事物栩栩如生， 细微的动画效果赋予了场景活力， 比如湖面上的水波纹 和天空中漂浮的云朵。 细微的动作能把静态体验 变得富有生命力。 为了让内容更具有沉浸感， 我们要用声音创造气氛。 利用空间音频， 您可以把声音 锚定在空间内的物体上， 也可以创造完全环绕用户的音效。 您可以查看课程 “探索沉浸式声音设计”， 进一步了解相关知识。 最后一个技巧是事半功倍。 您可以以小见大。 沉浸式影院里， 一道细微的光线投射到地板 和天花板上 就营造出了令人信服的空间感。 您不需要渲染真实影院的所有细节 去传达在影院的感觉。 最后，我们聊一下用户的舒适感 和掌控感。 如果您需要移动 App 或者用户的位置， 请确保移动幅度不要过大， 速度不要过快， 否则可能会让用户晕头转向。 我们建议在移动过程中让内容淡出， 移动完成后再让内容淡入， 这样用户会觉得很平稳。 如果用户在自己的空间里移动， 沉浸式体验也会随着淡出。 因此，在用户移动过程中， 物理环境会出现。

此外，确保给用户提供一个明确的 进入和退出沉浸式体验的途径。 我们可以使用简短有用的标签、 展开折叠箭头 等可识别的符号引导用户。 下面介绍最后一个原则。 我们来学习如何制作 让人身临其境的 App。 在创造任何优秀的 App 体验时， 利用设备独特的功能 是很重要的。 平台上最优秀的 App 借助用户空间 创造了丰富的沉浸式体验。 App 不能让 用户一眼扫过后就退出。 例如 Freeform 让您 置身于一个巨大的创意空间里， 让您同时看到所有内容， 来专注于项目。 思考一下如何让您的 App 有价值，有吸引力， 足够独特， 受用户欢迎。 总结前，我们先把学到的内容 应用到 App 上。 您可以实践新的想法， 或者把已有的想法应用到平台上。 面对如此多的可能性， 我们首先要关注 App 或游戏的一个特点， 这个特点可以空间化， 或者用于打造沉浸感。 要实现这一点，我们需要找到 只能通过空间体验的重要时刻。 我们来看一下这一点在 照片 App 如何实现。 我们研究了现有平台上 用户已经熟悉的 照片 App 的核心功能， 包括浏览图片库、 重现特别的回忆、 看着全景照片，重温走过的路。 我们认为， 找到您最喜欢的照片应该很容易。 窗口界面以及熟悉的导航栏， 能帮您迅速找到自己想找的东西。 当您找到那张特别的照片， 照片就会放大， 环境会变暗。 这些是您 iPhone 上的美好回忆。 您可以栩栩如生地再现它们， 带来神奇的体验。 浏览全景照片时， 重要时刻能够带您 回到那个特殊的地方， 如同身临其境一般。 全景照片用一种 只能在无限空间中实现的方式， 带您回到了过去。 思考一下 App 的重要时刻。 聚焦于一个特殊的功能， 您 App 中现有的内容 就能带给用户独特又难忘的体验。 您现在能不能借助深度 和比例来加强某个时刻？ 或者转换用户的空间？ 或者帮用户专注于某一项工作 或唤起一种感觉？ 您可以制造难忘的经历， 就像重温过去的某个时刻， 或从别人的视角去体验。 丰富的视觉效果和高保真音频 让我们仿佛身临其境。 我们提到了很多新事物。 学习了如何利用用户空间， 创造让人身临其境的体验。 如果您想进一步了解关于 空间设计的知识， 其他课程会更深入地介绍一些主题。 比如操控、用户界面、 同播共享和声音。

Nathan：这个世界有 无限的可能性， 我们希望这些原则 在您的设计之旅上能够帮到您。 Amy：感谢大家观看。 ♪