设计绝妙小组件

（你好 WWDC 2020）

你好 欢迎来到 WWDC 欢迎观看“设计绝妙组件”讲座 我是 Mac 我的同事 Christian 会在后续加入 我们都在为 Apple 的 Human Interface 设计团队工作 我们非常高兴能够逐步讲解 如何为你自己的 app 设计绝妙组件 开始之前 我们先来快速浏览一下新增功能

在 iOS 14 中 整个小组件体验经过了完全的重新设计 从根本上结合了全新的视觉美学 与强大的新功能 你的小组件选择显示的信息 将会比以往更具时效性和相关性 并且拖放编辑功能使人们可以直观灵活地 对他们的小组件进行直接掌控

让我们非常兴奋的一点是 人们现在可以将这些新的小组件 直接添加到他们的主屏幕页面上 这使用户可以用全新的方式体验小组件 同样的 当你着手设计它们时 也有一套崭新的思路可以去考量 我们创建的另一项功能是智能叠放 这使你可以在一个位置 添加多个不同的小组件 并且在不同的小组件中快速切换 不过智能叠放最强大的地方在于 根据你使用它们的方式 来进行动态变更和适应 基于你的行为和当下环境 智能叠放将自动轮换显示 某个特定时间点对你最为适用的小组件 所以你甚至连手指都不用动 你需要的信息就已经在眼前了

比如 当我醒来 我想知道当天的天气情况 上班路上 我总是播放一些近期喜爱的音乐 接着 到了下午 我一般会查看交通状况 以及回家大概需要多长时间 晚间 我喜欢补读一些 当日的头条新闻事件 这些只是 我自己的小组件叠放中的一些例子 不过智能叠放的小组件和行为 是因人而异的 它取决于人们使用设备的方式 以及对他们最重要的信息 这是对于新增功能的快速一览 不过重要的是 要记住人们能够与你的小组件 进行交互的所有不同方式 由于它们属于设计过程的不同部分 我们之后会再次对一些功能做深入探讨 设计一个小组件的过程中 要关注两个主要部分 构想与创建

在第一部分里 我们将介绍一些原理 来有助于引导你的想法 并且看一些在这个步骤中 十分重要且值得考虑的新功能 我们从设计原理开始说起 新的小组件系统只关乎内容 要想创建一个出色的小组件 你需要了解 人们是由于哪些最有帮助的信息和体验 而回到你的 app 中的 我们发现构思过程中 需要关注的三大有效原理 是去搜集 个人化、信息化和关联化的东西 我们之所以想找个人化的东西 是因为它能让人们与你的 app 的一部分 或是它所带来的体验建立更深的情感连接 小组件提供了一个 非常棒的方式 来让人们在设备上 查看多种来源的顶级信息汇总 显示正确的信息 能让人们免于在你的 app 中 进行常规化的重复操作

人们每天都随身携带设备 有大量信号 可以用来推断一个人的境况 考虑当下环境有助于 在正确的时机显示正确的信息 以此提供更棒的体验 在最佳状态下 会感觉像是它神奇地预测到了 某人的需求和接下来要做的事 我们来看看这其中的一些原理 在我们设计自己的一些小组件时 如何引导了我们的决定和构思

对于日历来说 正如这个 app 图标 它显示了星期几和当前日期 你的下一次会议或事件是最重要的信息 需要从 app 中浮出显示 像是开始时间 和事件地点这样一目了然的细节 省去了人们打开 app 寻找此类信息的潜在步骤 如果你的日程繁忙 安排了很多事件 它会将一些不太相关的信息折叠 并优先显示每个事件中的 单条最重要信息 当你的一天即将结束 没有后续事件时 小组件不会显示为空 而是在可能的情况下 开始告知你接下来的一天 将要发生和完成的事 这是一个超前思考的好例子 它不仅考虑当前时刻的情况 还将相关联的范围 扩大到了小时、天 甚至是星期 一个更加个人化的细节 是你居住国家的节日日历 它在特殊节日添加了一条友善提醒 到了某位联系人的生日时 我们会显示一个礼物符号 并将其置顶 所以直接从主屏幕上 你就能在他们的生日期间 感受到与他们的个人连结

照片小组件作为一个很好的例子 展示了一个小组件体验 可以达到的个人化程度 我们发现最令人愉悦的体验 是显示最棒的照片 而不是最新照片 除了照片回忆 我们还会显示精选照片 而另一种充分利用关联的方式 是向你展示往年今日的照片回忆

在天气小组件中 我们显示你当前 所位于的城市名称 气温 包括最高和最低温度 以及当天接下来的天气预报 天气是展示小组件可以有 如此高关联度的一个好例子 我们会显示特殊天气事件 比如大风、雷暴 以及是否会开始下雨 何时开始 如果下雨了 我们会根据当下环境 对下一小时的天气预报做进一步解析 来让你看到精确到分钟的细节信息 你将了解到 一场倾盆大雨何时会中断或者停止

对于地图来说 获取定位并看到你周围的事物 是非常有用的 但我们在这层 基础的空间感知之上又添砖加瓦 当你不在家 并且开车去了某处时 我们会显示你停车的地方 如果你安排了一个事件 我们会显示到达所需时间 并将地图关联化 来向你显示路径 以及道路状况 当你不在家时 我们会显示 预计到达时间 来告诉你回家需要多久 从这些例子中 你会发现 小组件十分动态 并能提供有用信息 而且具有关联的细节 让这些体验感觉非常个人化 并能适应个体需求

其中有一项新功能 就是能够让人们编辑小组件 这是在构想层面需要考虑的重要概念 因为它关系到你会试图往一个小组件中 加入多大的信息量 我们来看看天气小组件是如何进行编辑的 在 iOS 14 中 你的小组件 在编辑模式下会和 app 一样抖动 这时你可以轻点小组件将其翻转 来查看它允许你进行编辑的内容 这里 天气小组件允许我更改 显示天气状况的地点 默认状态下 它会使用你的当前位置 这样在有人添加小组件时 就不用做额外设置了 如果我轻点位置区域 就会得到一个列表 包含所有我最喜爱的天气的城市 还能够搜索任意其它地点 我要把这个小组件上的位置显示改为东京

当小组件翻转回去后 现在显示的就是 那个城市的天气状况和信息了 不过真正了不起的是 iOS 14 中的小组件 能让你尽情添加额外小组件 并且可以编辑它们 让每一个都显示一组不同的信息 这里 我要添加第二个天气小组件 并将它改为显示旧金山的状况

这个功能最棒的地方 就在于 它不需要你去创建复杂的小组件图层 来代表不同的信息对象 再最终汇总到一个小组件中 而是让人们通过添加多个小组件 并通过编辑来只显示他们想跟进的信息 以此来选择 他们想从你的 app 中看到多少信息 现在我可以让两个城市并排显示了 iOS 中的大部分小组件都支持此类编辑 而且添加并选择 不同的提醒事项列表、股市、备忘录 以及如图所示的世界时钟 是一种很棒的体验

这是这项配置的主要用途之一 不过还可以有其它用途 想想你能为人们提供什么样的选择 来使他们从你的小组件中 获得最佳的实用性和灵活性

构想过程中可以考虑的另一件事 就是决定你是否应该提供多个小组件

对股市来说 我们有两个不同的想法 提供一个组件 为你直观地显示 观察名单信息的简短摘要 但也可以添加单个股票代码 作为单独的小组件 以更清晰的分辨率对它进行跟进 就像我们之前天气案例中的城市一样 iOS 14 中的其它许多 app 都提供多个小组件 包括新闻 能让你关注特定主题的头条新闻 还有备忘录 能让你标记最喜爱的备忘录 或者添加一个共享备忘录文件夹

现在我们已经为你梳理了一些重要原理 和注意事项 让你在为你的小组件构思时考虑进去 下一部分中 Christian 会逐步讲解 如何将这些构思转化为美观的小组件 以巧妙连贯的方式来展现 你的 app 的全部内涵 谢谢 Mac 我叫 Christian 很高兴可以为大家讲解 如何让你的小组件成为现实 我们来说说创建你的小组件的一些细节 我们会在创建这部分介绍三大点 首先是尺寸和交互 新系统提供三种尺寸让你来进行设计 小型、中型和大型

我们设计的小型小组件 完全针对你的 app 中最有用的内容 这个尺寸限制了你实际能放入的内容量 小型小组件支持单次轻点目标 轻点它可以深度链接到小组件上的内容 深度链接到的位置基于你的 app 结构 我们来看一些例子

对于小型的日历小组件 由于小组件总是显示接下来的事件 我们认为在 app 的日视图下向你展示 最近事件是最为合理的 当你轻点小组件后 日视图会滚动到最近事件 同时让你大致浏览 当天这个事件前后的情况

对于我们的小型新闻小组件 由于它会显示一则有趣的新闻事件预览 或许会让你有兴趣阅读 所以轻点它就能直接带你进入到 app 中这篇新闻事件的位置

我们的中型和大型小组件 都是大家熟悉的形状 两种尺寸都可以容纳更多内容 并支持多个轻点目标

在中型或大型小组件中轻点一条内容 也会将你深度链接到小组件中显示的内容 正如这里的新闻案例中所示 轻点任意一篇文章 都会直接带你进入相应的新闻事件

小组件系统支持三种不同的轻点样式 填充样式最适用于 当你深度链接到单条内容时 因为每个小型小组件只支持一个轻点目标 所以它们都采用填充样式

单元格样式最适用于当你选择 一个小组件中显示为自身形状的内容时 就像我们这里的文件小组件所示

而内容样式就非常适用于当你选择 一条不被包含在小组件内的内容时

接下来是关于内容和个性 实现你的小组件最重要的部分 就是它包含的内容 你应该在设计你的小组件时 将内容 和个性放在一起考虑 可以问问自己比如 “人们启动我的 app 时想要什么？” 还要找到人们认为你的 app 中 有帮助的独特信息项 我们来看几个 将内容与个性一同考虑的例子 设计小组件套组时 我们着眼于通过 app 的外观来找个性 对于天气 我们使用了大家熟悉的天气情况背景 以及 app 中的图像材料 对于新闻 我们的灵感来源于大家在新闻事件中 看到的丰富的事件图片 以及对于日历 我们的灵感 来源于它简洁的外观和熟悉的漆红色 只专注于显示接下来的事件 另一种寻找个性的途径 是从你的 app 图标上汲取灵感 比如备忘录 我们采用了图标的记事本插图样式 播客 我们使用了图标的紫色渐变 以及提示 我们使用了图标的黄色渐变 说到在小组件中排布内容 我们在设计小组件套组时发现了两种格局 第一个是陆续经过三种尺寸扩展的布局 比如像天气 每经过一个尺寸都会加入更多信息

第二种 是在不同尺寸上有独特侧重点的布局 比如这里的新闻 小型小组件优先于丰富内容 它占据了整个空间 而中型小组件注重于显示更多的新闻事件

当你为每一个尺寸设计时 要确保不要将较小的小组件 拉大成较大的小组件 考虑你想要加入的信息 以及针对每个尺寸最合理的内容

对于大型的屏幕使用时间小组件 由于我们有更多空间 来将更多有用信息包含进去 我们加大了图表的尺寸 同时还加入了类别和 app 详情 不过如果你没有更多信息 用来显示在更大的尺寸中 也可以按照你的构思 只支持特定的尺寸 构思不必涵盖所有的尺寸 你也许会产生如图中案例所示的想法 想要将信息摘要塞在一个小型小组件中 我们建议你在小型小组件尺寸中 只加入最多四条信息

现在我们来更详细地讨论小组件格局

我们在设计小组件时 出现了几种常用的布局格局 各种尺寸的都有 包括小型、中型和大型 还有单项布局和多项摘要布局 这些格局提供了一个很有帮助的起始点 也是在已适用的格式上尝试想法的好方法

当设计你的自定义布局时 在所有的尺寸中按照 16pt 设定布局边距 这样当你的小组件 被放置在别的小组件旁边时 可以保证它的一致性

对于带有图形形状的布局 比如圆形和嵌入式扁盘 在各个尺寸中使用更紧密的 11pt 边距 贴近小组件边缘的形状边角 应该看起来与小组件的角半径同心 由于小组件的角半径 根据不同的设备尺寸会发生变化 我们提供了一个 SwiftUI 容器 让你可以将小组件中的形状 指定为与小组件的角半径同心 这样就无需手动输入角半径值了

至于字体 你应该使用 SF Pro 或者任意一种可用的旧金山字体 比如 SF Mono 和 SF Pro Rounded 如果自定义字体对于你的小组件 代表其品牌和个性非常重要的话 请确保在应用后 让你的小组件仍然可以融入众多小组件中

一个小组件应该在浅色模式 和深色模式下都看起来美观 拿日历来说 整个小组件在深色和浅色外观上的改变 与它的 app 相同 对于播客来说 由于整个背景都是渐变色 它本身已经适用于两种模式了 至于备忘录 它混合了大胆的颜色和白色 所以我们在加深的外观模式下 采用了备忘录内容 来反映备忘录在 app 中的样子

每个小组件都必须提供一个占位符 当系统无法显示你的小组件数据时会出现 你应该在这个状态下显示基本的图形元素 并且在布局中锁定住显示信息的文本区域

这样 当系统从占位符转到正式数据后 内容就能替换静态元素 却不会让布局或颜色产生变动

我们最后要介绍的内容 是你在设计你的小组件时 需要记住的一些技巧

如果你的 app 汇集了不同来源的内容 那么在你的小组件中应该只使用一个标志 如这些案例所示

为了在不同的小组件之间 保持这方面的一致性 你的标志应该始终放在右上角 不要在这个区域 或是你的小组件的任何地方使用文字商标

另外还需要避免 将你的 app 图标放入小组件 也不要将你的 app 名称放入小组件 因为和主屏幕上 已经在它下方显示的 app 标签 放在一起会显得重复

不要放入指示用户的 或是与他们进行交流的文本 如果你觉得有重要信息需要沟通 请使用图像的方式来传达 在小组件中显示按时间顺序排列的信息时 不用使用像是“最近更新” 或“上次查看”之类的语句

我们分步讲解了怎样开始你的构思 如何显示你 app 中最有用的信息 以及关于如何实现你的构思的所有细节 我们非常期待看到 你使用 iOS 14 的全新小组件系统 会创建出怎样的体验