设计空间用户界面

♪ 悦耳的器乐嘻哈 ♪ ♪ Miquel Estany Rodriguez：大家好， 我是 Miquel Estany Rodriguez。 Lorena Pazmino： 我是 Lorena Pazmino， 我们来自 Apple Design 团队。 今天，我们来介绍如何设计 空间用户界面。 为帮助您熟悉这一平台， 我们创建了一个和现有平台具有一致性 及相似性的视觉语言， 同时升级了某些要素以使其适应 沉浸式空间体验。 Miquel：我们先来介绍 UI 基础 及在环境中创建 清晰可用的 App 图标和界面时， 要考虑的设计原则。 然后，我们将介绍用于创建既符合人体工程学 又易于辨识的布局的 核心理念及最佳实践。 最后，我们将展示这一平台如何 将您的 App 从屏幕带到空间中， 也会带您浏览所有系统组件， 其中绝大多数是开发者所熟知的， 也有一些是全新的。 我们来深入了解 UI 基础。 这一节我们将涵盖 这些核心设计原则。 我们先来讲讲 App 图标。 我们想保持令人熟悉的主页视图风格。 不仅如此， 我们还使 App 图标在您的空间 变得立体化及具有真实感。 当用户看向图标，它们会突出显示。 系统通过在图层间加入 镜面高光及阴影， 来强化图层间细微的深度差， 使这一视觉效果得以加强。 那么您要如何设计 一个这样的图标呢？ 首先，使用多图层。 其它平台使用图层集创建视差效果。 这里我们仅使用平层， 系统就能创建这种真实 3D 效果。 所有 App 图标 至多有 3 个图层： 一个背景层和 最多两个上方的前景层。 每层都是一个方形图片， 大小为 1024 x 1024 像素。 两个前景层都需要有一个透明背景。 把您的背景层设计成 一个无边框的正方形图像。 然后所有图层将被圆形蒙版裁剪。 最后，当这些图层组合在一起时， 就会自动添加一个玻璃层面， 来给整体增加深度、 镜面高光及阴影效果。 尽量保持图形居中。 如果它们离边缘过近， 突出时看起来会偏离中心。 避免使用大面积的半透明像素。 低不透明度的图层 会与其后的阴影混合到一起。 这就是如何轻松创建 3D App 图标的方法。 接下来，我们来介绍材质。 当用户轻点 App 图标时， App 会在许多不同地方启动，如 可能是在一间宽敞的日光房里， 或是在像飞机一样狭小的空间里， 或是在夜间启动。 App 需要适应周围环境的 光线条件。 它们应易于放置在您周围的空间里， 易于在任何距离使用， 及易于在任何光线条件下使用。 正是出于这个原因， 我们设计了一个新的视觉语言， 玻璃材质。 这一系统定义的漂亮玻璃面板， 感觉就像您现实世界的一部分。 它独特的性质可以使用户周围的光线 及来自虚拟内容的光线透过。 此外，镜面高光及阴影效果 强化了它在空间中的大小及位置。 并且它也作为您已有 UI 的画布， 使之感觉更轻盈， 且增加了几分实感。 这一轻质材质也给人一种 好像窗后边有什么东西的感觉， 比如其它 App 或人。 为了传达绝佳空间体验感， 观察周遭环境是很重要的。 避免在窗口上使用纯色。 过多的不透明窗口会让人感到压抑， 也会使界面看起来很沉重。 玻璃对光线的反应是动态的， 调节对比度和色彩平衡度， 使之与空间融为一体， 就像这个从白天到夜晚 的过渡中所演示的。 不同于 iOS 和 macOS， 这一平台没有 明显的浅色或深色外观。 当被放置于浅色或深色背景前时， 玻璃板和 UI 会随之自动调节。 系统定义的强劲材质充分 利用这一特点，确保您的 App 在 各种场合及光线条件下 都看起来棒极了。 让我们来具体看看。 首先，我们从一个玻璃窗口开始。 如果您想区分 App 的各部分， 比如边栏，就用更深色的材质。 或者用更浅色的材质让交互元素， 比如按钮，变得显眼。 您甚至可以考虑使用更深色的材质 来增加如输入框等 标准组件的对比度。 这里 Music App 包含了 所有的 UI 要素。 可以看到，文字默认为白色。 假如您要设计一个这样的联锁 并加入一个更浅色的按钮。 可以把它放在玻璃材质的上方。 如果您想加强对比度， 就在其后使用一个更深色的区块。 尽量避免把浅色材质叠放到一起， 这会降低易读性和对比度。 现在，我将展示字体排印 是如何很好地适用于这一平台的。 为保持统一性，所有的字体 都使用适用于所有平台的语义名称。 它们都已在我们的 点制单位系统中调试过了， 以确保在任何距离的易读性。 如欲进一步了解更多信息， 请见“空间设计的原则”讲座。 为了提升易读性， 我们也修改了一些字体粗细。 我们来详细了解一下。 为提升文字在前景层上的对比度， 我们稍微加粗了字体。 例如，在 iOS 上我们的正文样式 使用常规体。 在这一平台上，我们使用中黑体。 对于标题，我们使用粗体而非中粗体 来使文本始终保持清晰可见。 因此，为增强整体易读性， 文本信息变得更易于追踪。 除了大家所熟知的 我们在各平台共享的字体样式， 我们也增加了两个全新的字体样式， 它们利用了宽编辑式布局。 这儿有一个 Arcade 的 Extra Large Title 1 的例子。 挺酷的，对吧？ 尽管窗口大小可以无限扩展， 自定义的较小或较轻的字体 可能仍然难以阅读。 为改善这一点，考虑增加字体粗细 或使用为优化易读性而设计的字体， 比如系统字体。 接下来，我们来介绍虚化效果。 这是使整个系统保持易读性的 最重要的细节之一。 虚化效果使显示在材质上方 前景层的内容亮化， 这是通过把其后的光及 颜色拉到前边来实现的。 在这一平台上，因为背景 总是在变化的，虚化效果因此 会实时更新以确保文本的易读性。 我们通过一个例子来具体了解一下。 虚化效果在玻璃材质上方起效， 强化易读性并使系统材质 感觉更丰富、不单一。 确保尽量使用系统组件。 系统自定义的组件 能充分利用这种虚化效果。 我们暂停一下，关闭虚化效果。 正如我们所看到的， 虚化效果提升了易读性及材质外观。 让我们把它开启再关闭来看看区别。 现在我们来看看如何使用它。 利用虚化效果来表明文字、符号 及文件的层级结构。 有 3 种模式： 一级、二级和三级。 一级用于标准文本。 二级用于描述文本、脚注和字幕。 您知道玻璃材质可以是各种颜色， 因为它显示的是其后环境的颜色。 当彩色元素与玻璃颜色相似时， 可能很难看到它们。 大部分时候， 考虑使用白色的字体或符号， 这样它们就总是清晰可见的了。 如果您要使用颜色， 把它设置为背景色 或整个按钮的颜色， 这样用户就看得到它了。 尽量使用系统颜色而非自定义颜色， 因为它们为了易读性已调试过 及动态适配过以保持在玻璃上的 颜色及对比度。 以上就是设计原则及我们 对如材质、字体排印及虚化效果等 核心组件所做的升级， 来确保开发者的 App 在此平台上得到提升。 接下来，Lorena 将向您展示 当您把 App 从屏幕带到空间时， 如何设计符合人体工程学 且易于定位的布局。 Lorena：谢谢 Miquel。 我们先来了解一下舒适的 放置内容的最佳方法。 然后，展示如何恰当的设定内容大小 使之易于定位。 最后，会展示如何创建和我们新的 绝妙的眼神注视反馈相兼容的布局。 因为在此平台上 用户主要使用手和眼睛参与交互， 优先考虑用户的 体感舒适及安全性是很重要的。 最重要的是， 要考虑设计的人体工程学， 来确保内容放置的目的性 及不会造成眼或颈部疲劳。 比如，考虑到脖颈移动的范围， 大多数人脖颈左右移动的范围 总是容易大于上下移动的范围。 所以要把 UI 置于用户的视角内， 谨慎选择过高或过低的位置。 如果 App 需要更大的画布， 选择更宽而非更高的长宽比。 比如在 无边记 里， 画布是水平而非垂直拉伸的。 优先把最重要的 内容置于 App 的中心， 这样便于用户看到内容。 我们已经讲了内容放置的最佳方法， 现在我们来讲讲内容大小。 每个人都是独一无二的， 每个人的眼睛也会有些许差异。 因此，元素的大小应易于定位。 我们来具体了解一下。 交互元素必须有至少 60 个点的轻点定位区域， 以轻松选取到它们。 这意味着您的 UI 元素 视觉上可以更小， 像 44 个点的标准按钮那样， 只要您给它的周围区域 添加了足够多的空间。 对于这个按钮， 它周边至少要留有 8 个点 来达到目标区域 60 个点的基本要求。 简言之，如果您想 把若干个按钮放在一排的话， 用 16 点间隙的标准按钮即可。 现在，假设您需要使用一个 视觉上更小的元素，比如显示控件。 您可以在节头区域 使用一个 28 点的迷你按钮。 尽管这个按钮看似很小， 但因为在它周围有 60 个点， 很容易就能选到它。 我们来看另一个例子。 这个按钮还是有足够的空间， 因为它旁边的文字没有交互性。 类似的，使用大及特大号的按钮时， 其周边需留的空间范围更小。 所以，记住永远要给所有交互元素 留至少 60 个点。 我们已经讲了如何 调整布局里元素的大小， 现在来介绍注视反馈。 注视反馈是一个内置于此平台 每一个交互元素内的强大工具。 当用户看向系统组件时， 它们会自动变得微亮 或有悬停效果。 仅仅通过看向它们， 悬停效果就使用户知道， 界面的哪一部分是可交互的。 当某一项处于非活跃状态时， 比如 Share 按钮， 就不再有注视反馈了。 这能让用户确信他们看向的 是他们想专注观看的元素， 这样就可以手指轻点进行选择了。 当您设计布局时， 很重要的是要考虑悬停效果。 比如，如果您要创建列表或菜单， 您就要考虑在项目间加入 少量填充点来防止悬停效果重叠。 推荐加 4 个点。 如果您要设计一个联锁， 它得包含一个当用户专注于它时 能使系统显示悬停效果的图形。 我们这儿有些下方带字的图片。 每个联锁都是一个交互的元素。 这就需要自定义一个区域 当用户看向它时它就会变亮。 这帮助人们意识到这一整个区域是 可被选择的一个元素。 记住给每一个联锁图形间， 预留出那些填充点。 另一个需要记住的是， 要确保嵌套元素 有相应的圆角半径及填充点， 来确保它们互相是同心的。 使用下面这一简单的公式， 来帮助您调整角的大小。 嵌套元素的角半径 加上其间填充点及外包装器大小， 就是外角半径。 记住，为了使您的圆角圆滑， 确保把它们设定为连续角。 在整个系统中，每一个元素 都是同心的。 无论是窗口之间还是角的元素间。 所以记住： 保持嵌套元素之间同心， 因为这样会使它们有一体感。 我们已经讲解创建布局的最佳实践， 现在来仔细了解一下， 您将用到的组件。 在这一部分，我们将向您展示 如何将现有平台的知识 应用到空间计算上。 我们先来简述输入模式， 然后深入了解如何用窗口、 标签页栏及边栏 给一个 App 创建核心结构。 然后我们会介绍一种新的 显示内容的方法。 最后，我们会探索模态。 我们先来介绍输入模式。 正如前边讲到的， 用户用眼睛、手及声音和设备交互。 主要从远处，通过看向元素并 通过手指轻点实现。 然而，用户也可以通过点击元素 直接选择它。 另外，用户也可连接键盘或触控板， 通过各种输入模式 来与系统交互。

和系统交互的感觉很奇妙， 但这需要元素在每一种 模式下都能提供恰当的反馈。 我们所有的系统组件都适配于 各种输入模式。 所以，请使用系统组件。 它们帮您快速创建界面， 这样您就可以关注 如何使 App 在 这一全新介质上彰显不同了。 想进一步了解 更多关于输入模式的内容， 请查看“空间输入模式设计”板块。 现在，我们来看几个例子。 如果您熟悉 iOS，许多此平台的 组件您也会很熟悉。 我们先来看看窗口、 标签页栏及边栏。 以一个 iOS App 核心结构为例。 您需要有个窗口，是不透明材质的， 它给所有在其上方的元素提供画布。 Miquel 说了窗口是玻璃材质制成， 下方有一个窗口栏来使用户 在空间中顺滑的移动 App 。 类似的，在其上方，是您的内容。

在 iPhone 窗口下端， 您有一个作为主导航的水平的 标签页栏控件，只需轻点， 您就能快速打开 App 的顶层部分。 在此平台，标签页栏是垂直的， 在窗口左侧固定位置悬浮。 它不碍事且易于访问， 它就在您需要它的地方， 您也能知道在 App 的什么位置， 而且不需要把视线从主要内容移开。 一般来说，标签页栏要轻便， 所以避免超过 6 个项目。 当用户看向标签页栏， 他们可以快速选择项目。 如果他们看得久一些， 它会自动放大 并显示每个部分的标签。 当用户目光移开时， 它又会自动关闭， 使用户专注于内容上。 如果您需要子导航， 例如这里的专辑栏， 边栏在窗口内挨着标签页栏。 这使用户很清楚 自己在该标签的哪里。 我们讲了一个 App 的核心结构， 现在来了解一个我们全新加入的 演示风格，挂饰。 在照片 App 我们有一个悬浮的附件元素 位于中上方，在年、月、日间导航。 在此平台，因为不受屏幕的限制， 该附件以挂饰的方式置于窗口底部， 稍前的位置。 这为用户提供了额外的持久控件, 使用深度来创建 层次结构很容易访问这些控件。 挂饰很适合用来呈现工具栏。 它可使用户轻松方便的 对内容进行快速操作。 而且它增添了您 App 的深度。 因为挂饰通常为一系列按钮的集合， 且位于它自己的容器上， 最好使用无边框按钮。 在这种情况下， 很明显这些都是交互元素， 当用户看向它们时， 还是会有悬停效果。 Music App 是另一个 很好的使用了挂饰的例子。 正在播放 控件以挂饰方式显示， 无论您在 App 的哪里， 它都会显示在那。 这使人们可以在搜索下一首歌的同时 控制他们正在播放的音乐。 当挂饰位于窗口底部， 把它们置于 和底部重叠 20 个点的地方。 这既使挂饰感觉和窗口是一体的， 又不会过多遮挡内容。 这看起来也很美观， 当您滑动内容时， 它们会通过玻璃 把内容的颜色映衬出来。

挂饰可以彻底出现或消失。 然而，仅在专注于一个单独的 内容时推荐使用。 比如看向一张照片或看一部电影时。 比如这里，只需轻点， 用户就可以轻松访问重要控件， 而无需从主体验中分神。 此外，挂饰可以放大， 来显示额外信息， 甚至有属于自己的导航层级。 看看挂饰适用于您 App 的 什么地方。 它们灵活且在不遮挡内容的前提下， 给您的 App 以深度。 讲过了挂饰， 我们来讲解菜单、弹出窗口及表单。 在 iPad 上，菜单与调用按钮 左侧边缘对齐， 当菜单打开时按钮变暗。 弹出窗口指向调用元素， 且导航条变成非活跃状态。 在此平台上，菜单和弹出窗口可以 扩大到窗口之外。 默认位于中间位置， 以确保内容总出现在 用户正看向的地方。 要记住的是， 改变调用它们的按钮 到已选状态。 在此平台，我们用黑色标签 和白色背景来表示按钮已选。 这使用户在不借助箭头的情况下， 对于是哪个按钮调用了弹出窗口 有清楚的反馈。 在此平台上的一个基本原则就是： 避免使用白色背景的按钮 除非它们被选到了。 最后，我们来讲解表单。 在此系统上， 表单以模态视图的方式呈现， 它们位于 App 的中间。 模态和父窗口有相同的 Z 位置。 父窗口推后且变暗。 这帮助专注于体验且让用户 在关闭表单前无法 与父视图交互。 如果您要显示另一个表单， 第二个模态 会在前方出现，同时会新增一个 暗层把所有之前的内容后推。 我们再从侧面看一下。 因为我们把所有元素堆在 Z 轴， 考虑使用 push 导航来实现嵌套视图。 这是个在模态中用 push 导航的例子。 第二视图会显示一个返回 而非关闭的按钮。 同时，注意关闭和返回按钮是 在左上角呈现的。 按照系统的模式，关闭按钮 总是在左上角。 Miquel：现在您明白了创建一个 App 及使用系统组件的基础， 想想如何使您的 App 变得特别， 及如何利用窗口外的空间 来创造丰富的空间时刻。 比如，在照片中， 我们保持了熟悉的浏览体验 专注了创建新的感受图片的方式， 比如 Spatial Captures， 给您一种沉浸式体验 来重温您的时刻及 以独特的方式来感受内容。 我们已经介绍了， 如何使用和环境融为一体的材质 来设计和开发 易于访问，熟悉 和直观的 App 。 界面利用了不同层次的深度 和各种组件， 这些组件不仅在视觉上很吸引人， 也是我们很熟悉 及在此平台上易于使用的。 我们所有的系统组件都是为 支持各种输入模式所设计的， 同时和其它 Apple 生态系统保持一致。 因此， 您作为设计师或开发者就可以专注于 创建突破性的沉浸式空间体验感。 感谢收看。 一起：再见！ ♪