WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Design interactive snippets

Design interactive snippets

机器学习Design
观看原视频

Highlight

Snippet 是 App Intent 在 Siri、Spotlight、Shortcuts 中弹出的紧凑视图，今年开始支持按钮、状态更新和确认流程。

核心内容

过去 App Intent 的 Snippet 只是一块只读卡片：用户问 Siri 一句话，Snippet 把结果展示出来，就结束了。想加一个”再来一杯”按钮、想让用户在 Snippet 里直接确认订单，开发者只能跳回 App。这就破坏了 Snippet “瞥一眼就懂、顺手就操作”的初衷——用户在用 Siri、用 Spotlight、用 Apple Watch，注意力非常有限，每一次跳转都是一次流失。

WWDC 2025 给 Snippet 加上了交互。现在 Snippet 里能放按钮，按钮直接绑定已有的 App Intent；Snippet 里的数据可以原地更新，不需要重新唤起意图。Snippet 还分成了两类：Result Snippet 展示最终结果，底部只有”Done”；Confirmation Snippet 用于”先确认再执行”的场景，底部按钮可以写成”Order""Send""Search”这种动作动词。整套设计的目标是把”轻量、惯用动作”留在 Snippet 里完成，让 App Intent 不再是”展示完就退出”的一次性卡片。

详细内容

外观与排版（01:13）。Snippet 的字号刻意比系统默认大，用来在一瞬间抓住关键信息。元素之间要留出足够间距，整张卡片用统一的内边距。Apple 推荐用 ContainerRelativeShape API 让边距在不同平台和屏幕尺寸下自适应。高度有硬性建议：超过 340 points 就需要滚动，破坏了 Snippet 的”一眼可读”原则——如果信息更多，应该在 Snippet 里放一个跳转按钮，把用户导回 App 的完整视图。

对比度（02:46）。Snippet 浮在其它内容之上，可以使用基于 App 视觉身份的鲜艳渐变背景。但 Snippet 经常会被远距离查看（比如手机放在桌上、在 StandBy 模式），标准对比度比例不够用——演讲明确建议要超过常规对比度阈值，必要时通过加深前景或减弱背景来保证可读。

交互与状态（03:28）。以喝水追踪为例：在 Snippet 里加一个”+“按钮，按下后水量数字原地更新，配合 scale + blur 动画给出反馈。这种”按钮触发 + 数据回写”的循环让用户对 App Intent 建立信任。Snippet 可以同时放多个按钮和多段更新数据，比如均衡器预设——一边显示当前音频参数，一边给出几个预设可选。即使没有交互，Snippet 也可以用动画把最新数据滑入。

两种 Snippet 类型（04:48）。Result 用于”已经完成、不需要后续动作”的场景，比如查询订单状态，底部只有”Done”。Confirmation 用于”需要用户先拍板再执行”的场景，比如下单咖啡——Snippet 里可以调浓缩咖啡份数，但订单只有用户按下”Order”才会真正下出去。确认按钮的动词支持几个预设（Order / Send / Search 等），也可以自定义。确认完成后，再用一张 Result Snippet 展示结果，让”我开始了一个意图 → 我看到它完成了”形成闭环。

Dialog 与 Snippet 的关系（06:07）。Dialog 是 Siri 朗读的那段话，对戴 AirPods、不看屏幕的用户必不可少。但演讲提了一个反直觉的设计原则：Snippet 自身要能独立成立，即使 dialog 没出现或没被听到，用户也能看懂这个意图在做什么。Dialog 和 Snippet 不要重复同一段信息，否则在视听都打开的场景下会显得啰嗦。

核心启发

  • 做什么：在 App Intent 里识别”高频惯用动作”，把它们做成 Confirmation Snippet。

    • 为什么值得做：用户在 Siri、Spotlight 里完成一次下单或一次记录，比跳回 App 操作快一个数量级，会显著提高 Intent 的复用率。
    • 怎么开始：列出 App 里 Top 5 用户每天/每周都会做的动作，挑一个”参数少、需要确认”的（如下单、提交记录、发送消息），用 Confirmation 类型实现，确认按钮用动作动词。

  • 做什么：给数据展示型 Snippet 加上原地更新动画。

    • 为什么值得做：scale + blur 是 Apple 演讲明确推荐的反馈组合，比淡入淡出更直接传达”数据已变化”，让用户知道按钮真的生效了。
    • 怎么开始：在按钮 action 里更新 State，外层套 contentTransition，复用交互式 Widget 那一套；不要为 Snippet 单独设计动画语言。

  • 做什么：审计 App 里所有 dialog 文本，让 Snippet 能脱离 dialog 独立成立。

    • 为什么值得做：用户用 AirPods 时只听 dialog，用 Spotlight 时只看 Snippet——两边都得能独立讲清楚意图，但又不能重复。
    • 怎么开始：把 Snippet 截图静音对照一遍，问自己”光看这张图能不能理解发生了什么”；再把 dialog 念一遍，问”光听这句话用户够不够”；冗余的部分从 dialog 里删掉。

  • 做什么：给 Snippet 排版加 340 points 高度警戒线。

    • 为什么值得做：超过这个高度就要滚动，Snippet 的”一眼可读”价值会被破坏，用户更可能直接划掉。
    • 怎么开始：在设计稿里画一根 340pt 的横线，超出部分要么裁掉、要么改成跳转 App 的链接按钮，不要让 Snippet 自己承担完整列表。

关联 Session

评论

GitHub Issues · utterances