WWDC Quick Look 💓 By SwiftGGTeam
Design Shortcuts for Spotlight

Design Shortcuts for Spotlight

观看原视频

Highlight

iOS 17 中,App Shortcuts 会出现在 Spotlight 的 Top Hit 区域,用户搜索应用时可直接看到并执行快捷操作。Apple 通过这套新的视觉语言,让开发者能把应用的核心功能直接送到用户指尖。

核心内容

从搜索到执行,一步完成

以前用户想执行一个常用操作,需要:找到应用图标、打开应用、找到对应功能、点击执行。Spotlight 虽然能搜到应用,但搜到之后还要再进一层。

iOS 17 改变了这个流程。用户在 Spotlight 搜索应用时,应用对应的快捷操作会直接出现在 Top Hit 卡片里。点击就能执行,不需要打开应用。

iPad 上更宽,最多能展示 5 个快捷操作。

设计快捷操作的三个原则

聚焦核心习惯动作

Clock 应用只有两个快捷操作:设置计时器、添加闹钟。没有放”添加世界时钟城市”,因为那不是高频习惯动作。不需要填满所有位置,一两个高质量的快捷操作就够了。

直接执行,不要只做导航

不要把应用的 Tab Bar 直接映射成快捷操作。用户已经知道怎么导航了。Phone 的快捷操作是”拨打收藏联系人”,不是”打开通讯录”。

可预测、个性化

Podcasts 展示的是用户正在听的节目和有新剧集的节目,不会推荐用户没听过的热门播客。Notes 的快捷操作按时间倒序排列,和应用内一致;置顶笔记排在最前面,也和应用内一致。

视觉设计:让图标一眼可认

每个快捷操作由 Action(动作)或 Entity(实体)组成。Action 用 SF Symbol 放在圆形里展示。Entity 默认也用 SF Symbol,但最好提供自定义图标。

图标形状要和应用内对应概念保持一致。Reminders 的列表在应用内是圆形,快捷操作图标也是圆形。Photos 的相册在应用内是方形,快捷操作图标也是方形。

颜色方面,默认是中性色调。如果应用图标有强烈的品牌色(如 Notes 的黄色),可以把颜色注入到 Spotlight 的 Top Hit 和 Shortcuts 应用的卡片中。深色品牌还可以提供 secondary tint,让 SF Symbol 呈现双色效果。

三种行为模式

快捷操作触发后可以有三种行为:

  1. App Launch:打开应用到特定页面。最简单,通常也是正确选择。
  2. Live Activity:启动实时活动或后台音频。适合不需要进一步操作的动作,如打电话、开始计时。
  3. Snippet:展示一个小问题或信息片段。更复杂的任务建议直接打开应用。

提升可发现性

用户搜索时用的词可能和快捷操作名称不同。比如搜”File Scanner”想找”Scan Document”。可以通过添加同义词解决这个问题。

如果应用有多个名称,也要提供 App Name 同义词。比如 Music Recognition 应用提供了”Shazam”作为同义词。

详细内容

快捷操作的结构

04:12)每个 App Shortcut 由 Action 或 Entity 构成:

  • Action:动词,执行一个操作。如”New Board in Freeform”
  • Entity:名词,指向一个对象。如”My Big Idea board”

在 UI 中:

  • Action 始终显示为圆形内的 SF Symbol
  • Entity 默认也用 SF Symbol,但建议提供自定义图标

标题设计规范

04:46

  • 标题可以换行到第二行,但要尽量保持简洁
  • 不要包含应用名称,UI 中已经显示了
  • 在简洁和清晰之间找到平衡

图标设计要点

05:06

  • 形状匹配:Reminders 列表是圆形,快捷操作图标也是圆形;Photos 相册是方形,快捷操作图标也是方形
  • 细节延续:Favorites 相册角落有小爱心,快捷操作图标也保留这个元素
  • 这些视觉线索最大化用户对快捷操作的熟悉感

副标题增强信息

05:47)用户直接搜索快捷操作时,可以展示副标题。Photos 在副标题中显示收藏照片的数量,和应用内保持一致。

颜色配置

06:06

默认外观适合多色或中性应用图标。如果应用图标有强烈的渐变或纯色(如 Notes 的黄色),可以把颜色注入到 Spotlight Top Hit 和 Shortcuts 应用的卡片中。

决定配色时,想象把应用图标的图形剥离下来,形成一个渐变或纯色。

默认 SF Symbol 是单色外观。对于深色品牌色,可以设置 secondary tint,创建双色效果。

同义词配置

08:23

Phrase 是快捷操作的自然语言描述,包含应用名称,也是用户对 Siri 说的话。应该提供多个同义词变体。

App Name 同义词适用于应用有多个名称的情况。如 Music Recognition 提供”Shazam”作为同义词。

核心启发

为高频操作创建快捷入口

  • 做什么:分析应用内使用频率最高的 3-5 个操作,为它们创建 App Shortcuts
  • 为什么值得做:用户每天节省几次点击,累积下来体验提升显著
  • 怎么开始:使用 App Intents 框架定义 AppShortcut,设置 shortcutsProvider

把个性化数据带到 Spotlight

  • 做什么:将用户的最近使用、收藏、置顶等个人数据作为快捷操作展示
  • 为什么值得做:比静态快捷操作更有价值,用户看到的是和自己相关的内容
  • 怎么开始:在 AppEntity 中实现动态查询,根据用户数据返回不同的快捷操作

用颜色强化品牌认知

  • 做什么:为快捷操作配置与应用品牌一致的颜色
  • 为什么值得做:Top Hit 中的彩色卡片比默认灰色更醒目,品牌辨识度更高
  • 怎么开始:在 App Shortcut 配置中设置 tintColorsecondaryTintColor

为 Siri 和自然语言搜索优化

  • 做什么:为每个快捷操作添加多种说法的同义词
  • 为什么值得做:用户可能用不同的词描述同一个功能,覆盖更多说法意味着更高的可发现性
  • 怎么开始:在 AppShortcutparameterPresentation 中配置 synonyms

关联 Session

评论

GitHub Issues · utterances