为 Apple Watch 的智能叠放设计小组件

♪ ♪

大家好 我是 Ed Apple Design 团队的一名设计师 在 watchOS 10 中 我们推出了 Apple Watch 的智能叠放功能 这个新功能能让你 App 的内容 动态且直观地显示在表盘上 本场讲座会向你介绍 智能叠放的原理 以及如何设计其中显示的小组件 才能达到效用最大化 同时使用 watchOS 的设计语言 保证视觉效果的一致性 这些年来 我们发现 Apple Watch 最优秀的功能之一 就是传达简单明了的信息 只需简单地一抬手腕即可做到 这对于包含许多复杂功能的 表盘尤为实用 例如 寻路者、模块 或图文 这类表盘会将你所需要的 一切信息展示出来 不管是天气还是下一项日程 你都能一看便知 不过有的时候 我们对表盘的需求 不仅限于实用性 手表除了能查看时间 还是表现个性的配件 与我们其他多款数码产品不同 Apple Watch 更像是 人们最钟爱的衣物或配饰般的存在 所以 Apple Watch 配有多种多样 不含复杂功能的风格化表盘 供人们更加充分地表达个性和品味 我们在 Apple Watch 上 设计智能叠放 就是为了支持和满足 这些情况的需求 这样一来 选择无复杂功能表盘的用户 依旧可以获取想要的信息 而喜爱多功能表盘的实用性的用户 一眼能看到更多信息 只需简单地转动数码表冠 不管用户佩戴的是哪一款表盘 都可以看到简单明了的小组件 通过智能叠放排序的方式 陆续显示在屏幕上 除关联式排序之外 智能叠放还为用户提供手动增删和 将小组件固定至顶层的功能 也就是说智能叠放既可以是动态的 也可以是固定排列的 这全凭喜好 了解了这些优秀性能后 不妨思考一下你 App 的小组件 可以如何利用关联式排序 或利用固定至顶层来让用户快速了解 App 中最有用的信息 了解过智能叠放的工作原理后 我们来谈谈怎样设计其中的小组件 我们会介绍布局、颜色和图例 在会话中的应用 以及如何利用关联性 那我们开始吧 首先是布局 设计小组件时 视觉一致性是 为用户提供流畅且 可预见的阅读体验的关键 拿书来做类比的话 我们想避免 每页书上的字出现位置不一、 样式各异或尺寸不同等情况 因此 为了保证流畅的阅读体验 我们团队打造了六种设计布局 可以用在 开发者 App 的小组件格式上 通过使用我们的文本样式类型 开发者可以保证字体大小、 粗细和页边距适当 对于主要用来传达文本信息的内容 我们推荐使用三行式文本布局 新闻用的就是这个布局 可以显示标题和内容摘要 如果你的内容同时也是 一个群组或专题的一部分 可以使用第二种布局 给内容加上颜色编码 日历使用的是这一布局 可以显示日程及其所属的日历颜色 针对可使用额外辅助文本的 图形化内容 我们设计了两种布局 一种添加了一个进度条 第二种则使用圆形图 有声书小组件使用进度条布局 让用户快速了解自己的听书进度 以及具体在哪一章或哪一节 健身记录小组件 用的是圆环图形布局 用户可以直接看圆环读出数值 文字信息则可供详细了解卡路里、 锻炼时长和站立时间 如果数字占内容比例较大 或浏览内容是单个单词的 可以选用这种大文本布局 日历月份小组件 使用的是这一布局 但开发者也可以用它表示 App 中的特定状态 使用“高”、“低”等关键词 或只用来显示数值 最后 如果你需要显示的内容 主要是随时间推移表达的数据 我们也有为图表设计的布局 需要牢记的是 在设计小组件时 仅展示必需的信息才能确保易懂性 要记得 人们花在浏览 手表上的信息的时间 最多只有约十秒

如需使用这些布局 你可以在线上的 Apple 设计资源中获取 目前来说值得注意的是 在某些情况下 独特的图表布局可能更加易懂 因为各类内容并不相同 或者不适用统一的排版格式 举个例子 我一直想要一个小组件 来记录我喝了几杯咖啡 再告诉我咖啡因还有多久代谢完 这样的小组件使用我们的标准布局 可能比较难以完成 所以 这样的情况下 开发者可以自行探索独特的布局 更合理地适配你的 App 不过即使如此 我们依旧推荐开发者 使用我们的文本类型 以保证规律性和可读性 我们的布局可以作为 推荐标准和参考项 帮助开发者为自己的 App 设计出最棒的小组件

关于布局的最后一条注意事项： 智能叠放默认设置中有小组件组合 这一独特的布局支持 自选三个呈圆形显示的功能 非常适合 放置圆形的 App 启动键 不过要是这里也能 提供丰富的数据就更好了 如果三个功能可以互相配合 那就是好上加好 比如这里 我能看到三个天气功能： 温度、紫外线指数和空气质量指数 暑热天气里用刚刚好 我最喜欢的是把我家人都放进来 当成一个联系人功能用 这样就能轻松联系到每个人了 希望开发者看完这些例子 可以很好地着手为自己的 App 设计小组件的排版了 不管是使用标准布局 还是自定义布局 亦或是使用小组件组合来展示 考虑周全的 圆形复杂功能组合都可以 小组件的布局可以提高 一致性和易读性 不过让你的小组件容易辨认 与众不同也十分重要 这就要谈到颜色和图例了

表盘上的复杂功能的颜色 与表盘颜色是一致的 但智能叠放中的小组件 则不需要遵循表盘的样式 也就是说 设计师和开发者能更加灵活地 设计 App 绑定的小组件 使其辨识度更高 风格更强 每个小组件的默认背景都是深色 上面搭配白色文字 但我们希望设计师和 开发者不要受此限制 为自己的小组件选择能够 增加 App 辨识度 或能传达信息的背景颜色 拿天气小组件举例 它使用动态渐变 来表达天气状况的变化 股市小组件根据股票表现 显示红色或绿色 有声书小组件会展示书籍封面 只不过不聚焦 为了塑造出环境氛围感 除了背景颜色之外 仔细选择适合的图例 来代表 App 功能 可以进一步彰显你的小组件的个性 并且为其所展示的内容塑造语境 比如说 我们在小组件前 添加一个 SF Symbol 大家就知道这个小组件 代表的是什么类型的内容了 不用 SF Symbol 的话 我们还推荐使用矢量图标 它们与文本的结合更紧密 能给小组件补充更广泛的视觉语言 所以不管你是选择动态的背景 还是放上一个描述性的图标 我们都推荐你思考如何使你的小组件 变得独特且有代表性 成为引导 App 用户体验的窗口 接下来我们聊一聊会话 不过首先 什么是会话？ 会话是 App 中 明确有始有终的活动状态 比如音乐里正在播放的歌曲、 正在进行的倒计时、 启动的秒表或跟踪记录 正在进行的体能训练 智能叠放的一个关键功能 就是系统生成的会话控制小组件 这些小组件很特殊 若当前有活跃会话正在进行 它们会自动显示在智能叠放的顶层 例如 若你正在播放音乐 系统会生成这样一个小组件 因此 如果开发者要设计的是 与会话相关的小组件 如音乐或体能训练小组件 请尽量专注如何提供有用的内容 这些内容可能会导入一个会话 或在会话结束后显示 作为生成的会话控制小组件的补充 比如 建议播放一首音乐 或显示今天计划好的体能训练 关注这些体验不仅可以 使用会话控制小组件 削减多余功能 还可以让小组件 在会话中继续发挥作用 可以允许用户切换歌曲 或启动一个新计时器 正如之前所说 智能叠放 会对其中的小组件进行智能排序 让关联性最强的浮在顶层 这一部分中 我们要专注于 怎样针对这一功能进行设计

开发者设计小组件中的内容时 要考虑的十分重要的一条 就是这一小组件在叠放时 何时应该排在优先位置 下面是五种可以纳入考量的时刻： 时间和日期临近时； 到达某一地点时； 检测到头戴式耳机时； 人们睡醒或准备上床睡觉时； 或体能训练开始或结束时 我们来谈谈其中的几种情况吧 日历小组件用到了时间和日期 所以下一个小时的日程关联度上升 排在叠放的顶层 提醒事项 App 通过地点 将最相关的内容 填进小组件当中 使其在叠放中优先排列 开发者可以选用 基于 GPS 的特定地点 也可以不用 GPS 坐标 而是选用推断地点 如家、工作地或学校 有声书 App 在连接头戴式耳机后会响应 这时其小组件就会 优先排列在叠放顶层 这样一来 用户要收听最爱的书 只需要戴上 AirPods 转动数码表冠即可 健身记录小组件通过 当前进行的体能训练 在叠放中的优先排序 当用户跑完步后 转动表冠 即可通过已填充的圆环 看到跑过的里程起到了怎样的作用

希望这些能让开发者了解到 在小组件里利用关联度能做哪些事 你的 App 对这些信号的利用越周到 叠放也就变得越智能 我们认为 Apple Watch 的 智能叠放将会成为 人们与手表上的 App 进行交互的主要途径 因此 请耐心考虑如何在智能叠放中 展示你的 App 吧 当你准备好开始构建 App 时 请你也查看一下这场 和我们一起编写代码的讲座： “为 Apple Watch 智能叠放构建小组件” 它能帮你快速上手 开始工作 感谢大家的参与 期待在智能叠放中 看到各位的小组件