设计交互式摘要卡片

大家好 我叫 Ray 是 Apple 设计团队的设计师 今天 你将学习如何设计 交互式摘要卡片 交互式摘要卡片由 App Intents 显示 布局非常紧凑 它们会显示最新信息还可快速 直接执行 App 中的某些操作 摘要卡片可在任何位置显示 只要 App Intents 支持

包括聚焦、Siri 和 快捷指令 App 这种集成可以让 App 在系统中 随处可及并提高实用性 摘要卡片总是清晰显示在屏幕顶端 覆盖在其他内容之上 这让它们变得很有用 你不必离开当前屏幕就可以操作 它们会一直显示 直到你确认、取消或把它们滑走

因此 摘要卡片能够十分方便地呈现 简单的日常任务和 来自 App 的信息 摘要卡片具有丰富的视觉布局 可以展现 App 的鲜明特色 现在它们还支持按钮等元素 还能显示最新信息 将 App Intents 的交互性 提升到新高度 接下来 我们将首先讨论 摘要卡片内容和布局的外观 然后 我们将学习如何设计 简单实用的互动 最后 我们将介绍如何使用 不同类型的摘要卡片 包括结果和确认 摘要卡片使用 App Intents 设计 旨在提供快速、即时的体验 因此 内容务必要 易于阅读和理解 要让摘要卡片一目了然 字体大小是关键字体大小 摘要卡片中的文字 比系统默认值大 较大的字体会引起人们注意 让他们关注当前的重要信息 确保在元素之间留有足够的空间 避免布局杂乱 在摘要卡片中排列内容时 要保持内容周围的边距一致 确保布局清晰 这样可以让摘要卡片井井有条 让用户关注重点内容 你可以用 ContainerRelativeShape API 来确保这些边距能够调整 能够正确适应 不同的平台和屏幕尺寸

使用较大的字体也意味着 会挤占空间 要避免内容高度超过 340 磅 因为这样就需要上下滚动 给操作带来麻烦 因此务必要保持内容简短 只包含最重要的信息 如果用户可能需要更多信息 可以让摘要卡片链接到 App 中的 相关视图 显示他们需要的一切 如果我们设计的体验 会覆盖在其他内容上显示 基于 App 的外观特点 设计鲜艳的背景 可以让你的摘要卡片脱颖而出 但是 有时这也会使内容 难以阅读 因此检查对比度尤为重要 尤其是从远处看摘要卡片的时候 你需要超出标准对比度 如果内容难以阅读 尝试增加布局中 内容与背景之间的对比度 这样能让摘要卡片更清晰 即使背景鲜艳也无妨 用这些方法 就可以让你的摘要卡片 易于阅读和理解 接下来 我们来讲讲互动 互动使摘要卡片能及时更新状态 并更具操作性 你可以融入按钮 允许用户在使用 Intent 时 直接执行简单的相关操作 摘要卡片还可以显示最新数据 反映 App 中的最新信息

要了解如何使用交互功能 我们来看一下这个 饮水量跟踪 Intent 的示例 只要添加一个增加饮水量的简单按钮 就能在保持轻量级的同时 让信息更具可操作性

数据会在缩放和模糊后更新 这就为操作提供了 清晰的视觉反馈 更新摘要卡片中的数据 即可确认操作成功 这让用户更信任你的 App Intent 能够妥善处理他们的日常事务 摘要卡片还可以同时包含多个按钮 和多项最新内容

例如 一个均衡器摘要卡片 可以显示最新的音频设置 同时提供一些不同的预设 供用户随时选择 确保摘要卡片提供的操作 清楚且相关 对主要任务有所帮助 即使没有交互功能 摘要卡片也可以动态地展示 App 中的最新信息

现在我们来谈谈各种类型的摘要卡片 摘要卡片分为两类： 结果和确认 结果摘要卡片显示信息 来确认结果 或者不需要进一步操作 由于这类摘要卡片不需要 执行任何后续任务或决策 视图底部唯一的按钮 是“完成” 结果类摘要卡片非常适合 用来查看订单状态之类 接下来介绍确认摘要卡片 如果 Intent 需要操作才能显示结果 就应使用确认摘要卡片 例如 我们来看看这个 咖啡订购 Intent 虽然有一些按钮可以 改变浓缩咖啡的量 但是这个摘要卡片是确认类型 因为除非用户执行操作 否则无法下单订购咖啡 按钮中的操作动词清楚地 表明了接下来的行动 例如“下单” 确认摘要卡片中的动词 可以改成这些预先写好的选项 如果这些选项不符合 Intent 的 具体需要 你也可以自己写

确认下单后 例如 加了双份浓缩咖啡的拿铁 结果摘要卡片就会显示 这个选择的结果 这样可让用户了解 他们开始了一个 Intent 然后看到它完成 现在我们谈谈何时显示对话框： 对话框是 Siri 针对 App Intent 说出的内容 这对于用语音 进行的互动至关重要 例如 如果用户在使用 AirPods 没有看屏幕 他们仍能听到来自结果摘要卡片的 语音 也能对确认摘要卡片进行回复 虽然摘要卡片也可以显示对话框 但最好还是尽量让摘要卡片 本身就清楚易懂 即使不显示对话框、不播放对话 也没问题 摘要卡片应该清楚地传达 Intent 的目的 而无需依赖对话框 这能让摘要卡片更精简、更直观

用确认摘要卡片来要求采取行动 用结果摘要卡片来展示结果 我们来总结一下所学的内容 并预告一下接下来的内容 设计轻量级的日常摘要卡片 让外观一目了然 交互简单方便 并选用合适的摘要卡片类型 要进一步了解 构建 App Intents 用于“快捷指令”和“聚焦” 有哪些新功能 请观看“使用 App Intents 针对 ‘快捷指令’和‘聚焦’进行开发” 以及 “探索 App Intents 中的最新改进” 非常期待看到你构建的摘要卡片！ 谢谢大家！