Design great widgets

Highlight

iOS 14 让 widget 可以直接放到主屏和 Smart Stack 中，Apple 用日历、照片、天气、地图等系统 widget 示例说明如何选择个人化、信息性和情境性的内容，并把它设计成一眼可读的界面。

核心内容

widget 进入主屏后，设计问题变得更尖锐。它不再只是 App 旁边的补充入口，而是会和图标、其他 widget、Smart Stack 一起出现在用户每天反复扫视的位置。主屏上的空间有限，用户停留时间也短，塞进更多控件并不能自动带来更好的体验。

这场 session 的起点是内容选择。Apple 反复强调，新的 widget system 以内容为中心。开发者要先回答一个问题：用户反复打开 App 时，最想立刻知道哪一件事？日历给出下一场事件，照片给出精选回忆，天气给出当前位置和即将发生的天气变化，地图给出停车位置、路线或回家时间。

Smart Stack 让这个问题更具体。系统会根据用户行为和上下文自动切换栈顶 widget，所以 widget 不能只展示静态摘要。它要在早晨、通勤、下午、晚上这些不同场景中拿出最相关的信息。Calendar 在当天没有更多事件时展示明天安排，Weather 在降雨时提高未来一小时预报的分辨率，都是这种思路。

创建阶段则把想法落到尺寸、交互和视觉规则上。small widget 只有一个 tap target，应该指向当前展示的内容；medium 和 large 可以有多个 tap target。布局不能简单把 small 放大，字体、边距、颜色、placeholder、浅深色模式都需要按系统规则处理。

详细内容

1. 先用三条原则筛选内容

（02:29）Apple 给出的 ideation 原则是 personal、informational、contextual。personal 让 widget 和用户已有内容产生连接；informational 减少用户反复打开 App 的步骤；contextual 让信息在正确时刻出现。

关键点：

• Calendar 把下一场会议的时间和地点放到首位，忙碌日程中会压缩较低优先级的信息。
• Photos 不只展示最近照片，而是挑选更好的照片、回忆和往年今日内容。
• Weather 展示城市、当前温度、高低温、当天预报，并在强风、雷暴、降雨时突出特殊天气事件。
• Maps 先给用户空间定位，再根据停车、日程和回家路线展示下一步信息。

这一段的设计检查很直接：如果某个 widget 状态不能替用户少打开一次 App，它就需要重新选择内容。

2. 把配置留给用户，不把所有实体塞进一个布局

（06:03）iOS 14 支持用户编辑 widget。Weather 示例中，用户长按后进入编辑状态，把显示地点从当前位置改成东京；随后还能再添加一个 Weather widget，配置成旧金山。

关键点：

• 默认配置要有用，Weather 默认使用当前位置，用户添加后无需先完成设置。
• 配置入口适合城市、提醒事项列表、股票、笔记、世界时钟这类实体选择。
• 多实例能力减少了复杂布局压力。用户可以并排放两个城市的天气，而不需要一个 widget 同时塞下所有城市。
• Stocks 的例子说明，同一个 App 可以提供多个 widget 想法：一个展示 watchlist 摘要，另一个追踪单个股票。

设计可配置 widget 时，先列出用户最可能想分别追踪的实体，再决定这些实体是否应该拆成多个 widget。

3. 按尺寸决定交互模型

（08:56）新 widget system 支持 small、medium、large 三种尺寸。small 尺寸承载 App 中最有用的一块内容，并且只支持一个 tap target。medium 和 large 展示更多内容，支持多个 tap target。

关键点：

• small Calendar 点击后进入 Day View，并滚动到当前展示的事件附近。
• small News 点击后进入当前展示的新闻故事。
• medium 和 large News 中，每一条新闻都可以指向自己的故事页。
• 系统提供三种 tap style：Fill 适合单一内容深链，Cell 适合各自有容器形状的内容，Content 适合没有独立容器的内容。

交互设计要和内容粒度一致。small widget 的点击落点应该是当前那一件事；medium 和 large 才适合让不同区域进入不同内容。

4. 让内容和个性一起出现

（10:44）Christian 把 creation 阶段拆成 content and personality。内容回答“用户打开 App 时在找什么”，个性回答“这个 widget 如何像你的 App”。

关键点：

• Weather 使用熟悉的天气背景和图标，News 使用新闻图片，Calendar 使用简洁布局和红色 tint。
• Notes、Podcasts、Tips 从 App icon 中提取插画风格、渐变或色彩，但不把 App icon 本身放进 widget。
• 有些布局可以从 small 扩展到 medium 和 large，比如 Weather 逐步增加信息。
• 有些布局需要每个尺寸重新设计，比如 News 在 small 展示单条富内容，在 medium 展示更多新闻。
• small 尺寸建议最多放四条信息；如果 larger size 没有更多有价值的信息，可以只支持部分尺寸。

这里的重点是信息层级。放大一个 small widget 通常只会制造空白或重复，真正的 large widget 需要回答大尺寸下新增什么信息。

5. 用系统视觉规则收尾

（12:55）Apple 展示了多种常见 layout pattern，并给出边距、圆角、字体、placeholder 和品牌露出的细节约束。

关键点：

• 默认 layout margin 是 16pt；包含圆形和 inset platter 的图形布局可以使用 11pt。
• 靠近 widget 边缘的 shape corner 应与 widget 外框保持同心圆角；session 提到 SwiftUI 提供了相应 container，避免手写固定 corner radius。
• 字体优先使用 SF Pro，也可以使用 SF Mono、SF Pro Rounded；自定义字体要保证和系统 widget 放在一起时仍然协调。
• widget 必须提供 placeholder。placeholder 展示基础图形和文本占位，让真实数据替换时布局和颜色不跳动。
• 除了聚合多来源内容的 App，不建议使用 logo；不要放 wordmark、App icon 或 App name，因为主屏幕下方已经有 App label。
• 不要写指导用户的说明文字，也不要用“last updated”或“last checked”这类时间说明来展示时间信息。

这些规则解决的是一致性。用户把多个 App 的 widget 放在同一页时，系统边距、字体、浅深色和 placeholder 共同决定它们能否像一个整体。

核心启发

1. 下一场事件 widget

做什么：为日历、课程、会议或预约类 App 做一个 small widget，只展示下一件事的名称、时间和地点。

为什么值得做：Calendar 示例表明，用户最常反复确认的是“下一场是什么、几点、在哪里”。这些信息出现在主屏后，可以省掉打开 App 查日程的步骤。

怎么开始：先定义一个小尺寸状态：有下一场事件时展示标题、时间、地点；当天没有事件时展示明天第一件事。点击落点进入对应日期视图，并滚动到该事件附近。

2. 降雨或异常状态提醒 widget

做什么：为天气、交通、库存、服务状态这类 App 做一个 context-aware widget，在异常发生时提高信息密度。

为什么值得做：Weather 示例在强风、雷暴和降雨时会突出事件，并在下雨时展示未来一小时更细的预报。widget 的价值来自时机，而不只是数据本身。

怎么开始：把普通状态和异常状态拆成不同展示模板。普通状态显示核心数值；异常状态展示事件类型、开始时间、结束趋势和用户下一步需要知道的变化。

3. 多城市或多对象追踪 widget

做什么：让用户为同一个 App 添加多个 widget，每个实例追踪一个城市、股票、列表、项目或笔记。

为什么值得做：Weather 和 Stocks 的例子说明，配置加多实例可以替代复杂大表格。用户自己决定要并排看哪些对象。

怎么开始：先把一个实体做成清晰的 small 或 medium widget，再为编辑界面准备实体选择列表。默认值要能立即显示有用内容，避免用户添加后看到空状态。

4. 个人回忆或精选内容 widget

做什么：为照片、阅读、音乐、笔记类 App 做一个精选内容 widget，定期展示用户更可能想回看的内容。

为什么值得做：Photos 示例选择更好的照片、Featured Photos 和往年今日回忆，而不是只拿最新内容填充版面。个性化需要筛选质量。

怎么开始：先定义“值得展示”的排序信号，例如收藏、回看次数、时间纪念日或编辑精选。placeholder 只保留布局骨架，真实内容加载时不改变整体结构。

关联 Session

• Meet WidgetKit — 了解 WidgetKit 的 definition、timeline、placeholder、刷新策略和深链模型。
• Build SwiftUI views for widgets — 学习用 SwiftUI 构建 widget 视图、处理时间文本、placeholder 和不同尺寸。
• Add configuration and intelligence to your widgets — 深入配置界面、Siri Suggestions、Smart Stack 相关性和及时信息。
• Widgets Code-along, part 1: The adventure begins — 跟随 starter project 从零创建 widget extension、provider 和基础 timeline。
• Widgets Code-along, part 2: Alternate timelines — 继续实现多尺寸、配置和系统智能相关的 timeline 行为。