为 Apple Watch 智能叠放设计 Widget

一句话判断

watchOS 10 的智能叠放让 Widget 回到 Apple Watch 中心——六种标准布局、动态背景色、相关性排序，10 秒内传达核心信息。

这场 Session 讲了什么

Ed 从 Apple 设计团队出发，讲解了 watchOS 10 Smart Stack 中 Widget 的设计指南：

Smart Stack 的定位。转动数码表冠，Widget 按相关性智能排序后弹出。解决了”选择纯装饰表盘就不能看信息”和”功能丰富的表盘需要更多 Widget”两个矛盾。用户可以手动添加、删除和置顶 Widget。

六种标准布局。三行文字布局（新闻头条+摘要）、分组色标布局（日历事件+颜色标记）、条形进度+文字布局（有声书进度）、圆形图形+文字布局（健身圆环）、大字布局（单数值或关键词）、图表布局（数据随时间变化）。

颜色和图标。Widget 不受表盘配色限制，可以使用 App 品牌色。默认是深色材质背景+白字，但鼓励使用有辨识度的背景色（天气的渐变、股票的红绿色、有声书的封面模糊图）。推荐使用 SF Symbol 或矢量图标来增强识别度。

Combo Widget。默认内置，支持三个圆形复杂功能。最好让三个功能协同工作——比如温度+紫外线+空气质量。

相关性排序。Widget 可以向系统声明自己的相关性分数，影响在 Smart Stack 中的出现时机和位置。

值得深挖的点

10 秒法则。用户在 Apple Watch 上阅读 glancable 信息的时间最多约 10 秒。Widget 只展示最必要的信息，超出的内容应该跳转到 App 查看。

自定义布局的适用场景。六种标准布局覆盖大部分需求，但咖啡因追踪、药丸提醒这类特殊内容可以用自定义布局。即使自定义，也建议使用系统提供的文字样式类来保持可读性。

背景色的信息传达。不只是品牌识别——天气用渐变表达气候变化、股票用红绿表达涨跌、有声书用模糊封面营造氛围。颜色本身就是信息。

代码片段

// Widget 相关性声明（影响 Smart Stack 排序）
// 在 Widget 的 TimelineProvider 中返回相关性
func getTimeline(for configuration: Intent, 
                  in context: Context) -> Timeline<Entry> {
    let entries: [Entry] = // ...
    return Timeline(entries: entries, policy: .atEnd)
}

// 在 WidgetKit 中使用 WidgetRelevance
// 声明 Widget 在何时最相关
WidgetCenter.shared.reloadAllTimelines()

// 六种标准布局的适用场景：
// 1. 三行文字 → 新闻、通知、摘要
// 2. 分组色标 → 日历事件、分类任务
// 3. 条形进度 → 播放进度、阅读进度
// 4. 圆形图形 → 健身圆环、目标完成度
// 5. 大字 → 温度、步数、关键词状态
// 6. 图表 → 股价走势、心率曲线

最佳实践

• 优先使用标准布局，只在确实需要时才自定义。
• 背景色不只是装饰——让它传达信息或强化品牌识别。
• Widget 内容控制在 10 秒可阅读的范围内。
• SF Symbol 和矢量图标比位图更适合手表尺寸。
• Combo Widget 的三个功能最好互补，而不是各自独立。
• 测试时在多种表盘和照明条件下检查可读性。

还有什么值得关注

• Apple Design Resources 中有六种标准布局的模板
• Smart Stack 的相关性排序意味着你的 Widget 可以在”对的时刻”自动出现
• 用户可以置顶 Widget，这比复杂的表盘设置更直观
• watchOS 10 的设计语言在多个层面强调”一瞥即知”