watchos-design-guidelines

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

watchOS Design Guidelines

watchOS 设计指南

Apple Watch is a personal, glanceable device worn on the wrist. Interactions are measured in seconds, not minutes. Every design decision must prioritize speed of comprehension and brevity of interaction.

Apple Watch是一款佩戴在手腕上的个人化、可快速浏览的设备。交互时长以秒而非分钟计算。每一项设计决策都必须优先考虑理解速度和交互简洁性。

1. Glanceable Design (CRITICAL)

1. 可快速浏览设计（核心要求）

The defining constraint of watchOS. If a user cannot extract the key information within 2 seconds of raising their wrist, the design has failed.

这是watchOS的决定性约束条件。如果用户抬起手腕后无法在2秒内获取关键信息，那么该设计就是失败的。

Rules

规则

W-GL-01: Primary information must be visible without scrolling. The first screen is the only guaranteed screen.
W-GL-02: Target interaction sessions of 5 seconds or less. Design for raise-glance-lower.
W-GL-03: Use large, high-contrast text. Minimum effective body text is 16pt (system font). Titles should be 18pt or larger.
W-GL-04: Limit text to essential content. Truncate or abbreviate aggressively. Use SF Symbols instead of text labels where meaning is unambiguous.
W-GL-05: Respect wrist-down time. When the wrist lowers, the app enters an inactive state. Do not assume continuous user attention.
W-GL-06: Prioritize a single piece of information per screen. If showing multiple data points, establish clear visual hierarchy with size, weight, and color.

W-GL-01：核心信息必须无需滚动即可查看。首屏是唯一能确保用户看到的界面。
W-GL-02：目标交互时长控制在5秒以内。为“抬起-浏览-放下”的使用场景设计。
W-GL-03：使用大字号、高对比度文本。正文文本的最小有效字号为16pt（系统字体）。标题应使用18pt或更大字号。
W-GL-04：将文本限制为必要内容。大胆地截断或缩写内容。在含义明确的情况下，使用SF Symbols替代文本标签。
W-GL-05：尊重手腕放下后的状态。当手腕放下时，应用进入非活跃状态。不要假设用户会持续关注界面。
W-GL-06：每个屏幕优先展示单一信息。如果需要展示多个数据点，通过尺寸、字重和颜色建立清晰的视觉层级。

Screen Dimensions Reference

屏幕尺寸参考

Device	Screen Width	Screen Height	Corner Radius
41mm (Series 9/10)	176px	215px	36px
45mm (Series 9/10)	198px	242px	39px
49mm (Ultra 2)	205px	251px	40px

设备	屏幕宽度	屏幕高度	圆角半径
41mm (Series 9/10)	176px	215px	36px
45mm (Series 9/10)	198px	242px	39px
49mm (Ultra 2)	205px	251px	40px

Anti-Patterns

反模式

Walls of text requiring scroll to understand context
Small, dense data tables
Requiring multiple taps before showing useful information
Replicating an iPhone screen layout on Watch

需要滚动才能理解上下文的大段文本
小而密集的数据表格
需要多次点击才能展示有用信息
在Watch上复制iPhone的屏幕布局

2. Digital Crown (HIGH)

2. Digital Crown（重要要求）

The Digital Crown is the primary physical input for scrolling and precise value selection. It provides haptic feedback and should feel purposeful.

Digital Crown是用于滚动和精确选择数值的主要物理输入方式。它提供触觉反馈，操作应具备明确目的性。

Rules

规则

W-DC-01: Use the Digital Crown as the primary scroll mechanism for vertical content. Do not rely solely on swipe gestures for scrolling.
W-DC-02: For value pickers (time, quantity, sliders), bind the Crown to precise adjustments with haptic detents at each discrete value.
W-DC-03: Do not override or conflict with system Crown behaviors. The system uses the Crown for volume control during media playback, scrolling in system UI, and Time Travel in complications.
W-DC-04: Provide visual feedback synchronized with Crown rotation. The UI must respond frame-by-frame to Crown input with no perceptible lag.

W-DC-01：将Digital Crown作为垂直内容的主要滚动机制。不要仅依赖滑动手势进行滚动。
W-DC-02：对于数值选择器（时间、数量、滑块），将Crown绑定到精确调节功能，每个离散数值处提供触觉卡点。
W-DC-03：不要覆盖或与系统Crown行为冲突。系统在媒体播放时使用Crown控制音量、在系统UI中滚动、以及在Complications中实现“时光机”功能。
W-DC-04：提供与Crown旋转同步的视觉反馈。UI必须逐帧响应Crown输入，不能有明显延迟。

Anti-Patterns

反模式

Ignoring the Crown and forcing all interaction through touch
Custom Crown behaviors that conflict with system expectations
Missing haptic feedback on discrete value changes
Laggy or batched responses to Crown rotation

忽略Crown，强制所有交互通过触摸完成
自定义Crown行为与系统预期冲突
离散数值变化时缺少触觉反馈
Crown旋转响应延迟或批量更新

3. Navigation (HIGH)

3. 导航（重要要求）

Watch navigation must be shallow and predictable. Users should never feel lost or unable to return to a known state.

Watch的导航必须简洁且可预测。用户不应感到迷失或无法返回已知状态。

Rules

规则

W-NV-01: Use vertical page scrolling as the default content navigation pattern. Pages scroll top-to-bottom with the Digital Crown.
W-NV-02: Use
```
TabView
```
for top-level sections (max 5 tabs). Swipe horizontally between tabs. Each tab is a distinct functional area.
W-NV-03: Use
```
NavigationStack
```
for hierarchical drill-down. Limit hierarchy to 2-3 levels maximum. Every pushed view must have a back button (provided automatically by the system).
W-NV-04: Avoid modal sheets for primary flows. Modals should be reserved for focused, single-purpose tasks (e.g., confirmation, quick input).
W-NV-05: The app's most important action should be reachable within 1 tap from launch. Do not bury primary functionality behind menus or navigation.

W-NV-01：将垂直页面滚动作为默认的内容导航模式。页面通过Digital Crown实现上下滚动。
W-NV-02：使用
```
TabView
```
作为顶级分区（最多5个标签页）。在标签页之间左右滑动切换。每个标签页是一个独立的功能区域。
W-NV-03：使用
```
NavigationStack
```
实现层级式深入浏览。层级最多限制为2-3级。每个推入的视图必须有返回按钮（由系统自动提供）。
W-NV-04：避免将模态表单用于主要流程。模态表单应保留用于聚焦的单一任务（如确认、快速输入）。
W-NV-05：应用的最重要操作应在启动后1次点击内触达。不要将核心功能隐藏在菜单或导航之后。

Navigation Pattern Reference

导航模式参考

Pattern	Use Case	Gesture
Vertical scroll	Long-form content within a single view	Digital Crown / swipe up-down
TabView (horizontal pages)	Top-level app sections	Swipe left-right
NavigationStack (push/pop)	Hierarchical drill-down	Tap to push, swipe right or back button to pop
Modal sheet	Confirmation, focused input	Presented programmatically, dismiss via button or swipe down

模式	使用场景	手势
垂直滚动	单一视图内的长内容	Digital Crown / 上下滑动
TabView（水平页面）	应用顶级分区	左右滑动
NavigationStack（推入/弹出）	层级式深入浏览	点击推入，右滑或点击返回按钮弹出
模态表单	确认、聚焦输入	程序化展示，通过按钮或下滑关闭

Anti-Patterns

反模式

Deep navigation hierarchies (4+ levels)
Hamburger menus or hidden navigation drawers
Tab bars with more than 5 items
Forcing users to scroll through long lists to find key actions

过深的导航层级（4级及以上）
汉堡菜单或隐藏式导航抽屉
标签栏包含超过5个项目
强制用户滚动长列表才能找到关键操作

4. Complications (HIGH)

4. Complications（重要要求）

Complications are the most visible surface of a Watch app. They live on the watch face and provide at-a-glance data without launching the app.

Complications是Watch应用最显眼的展示面。它们位于表盘上，无需启动应用即可提供快速浏览的数据。

Rules

规则

W-CP-01: Support multiple complication families to maximize watch face compatibility. At minimum support
```
circularSmall
```
,
```
graphicCorner
```
, and
```
graphicRectangular
```
.
W-CP-02: Provide both tinted (single-color) and full-color variants. Tinted complications must remain legible when the system applies a single tint color.
W-CP-03: Update complications via
```
TimelineProvider
```
. Provide future timeline entries when data is predictable (e.g., next calendar event, weather forecast). Keep data fresh -- stale complications erode trust.
W-CP-04: Complication content must be meaningful without context. A user glancing at their watch face should immediately understand the data (e.g., "72F" not "72").
W-CP-05: Tapping a complication must launch the app to a relevant context, not just the app's root view.

W-CP-01：支持多种Complications类型，以最大化表盘兼容性。至少支持
```
circularSmall
```
、
```
graphicCorner
```
和
```
graphicRectangular
```
。
W-CP-02：提供着色（单色）和全彩两种变体。着色Complications在系统应用单一色调时必须保持清晰可读。
W-CP-03：通过
```
TimelineProvider
```
更新Complications。当数据可预测时（如下一个日历事件、天气预报），提供未来时间线条目。保持数据新鲜——过时的Complications会降低用户信任。
W-CP-04：Complications的内容必须无需上下文即可理解。用户瞥一眼表盘应能立即明白数据含义（如显示“72℉”而非“72”）。
W-CP-05：点击Complications必须启动应用并跳转到相关上下文，而不仅仅是应用的根视图。

Complication Family Reference

Complications类型参考

Family	Shape	Typical Content
`circularSmall`	Small circle	Single value, icon, or gauge
`graphicCorner`	Curved, top corners	Gauge with label, or text with icon
`graphicCircular`	Larger circle	Gauge, icon with value, or stack
`graphicRectangular`	Wide rectangle	Multi-line text, chart, or detailed view
`graphicExtraLarge`	Full-width circle	Large gauge or prominent single value

类型	形状	典型内容
`circularSmall`	小圆形	单一数值、图标或仪表盘
`graphicCorner`	弧形（顶部角落）	带标签的仪表盘，或带图标的文本
`graphicCircular`	大圆形	仪表盘、带数值的图标，或堆叠内容
`graphicRectangular`	宽矩形	多行文本、图表或详细视图
`graphicExtraLarge`	全宽圆形	大型仪表盘或突出的单一数值

Anti-Patterns

反模式

Supporting only one complication family
Stale data that does not update for hours
Complication tap landing on generic app home instead of relevant content
Illegible complications in tinted mode (insufficient contrast)

仅支持一种Complications类型
数据数小时不更新的过时Complications
点击Complications跳转到通用应用首页而非相关内容
着色模式下难以辨认的Complications（对比度不足）

5. Always On Display (MEDIUM)

5. 始终显示模式（中等要求）

When the user's wrist is down, watchOS enters an Always On state showing a dimmed version of the current app. This must be handled intentionally.

当用户放下手腕时，watchOS进入始终显示模式，展示当前应用的暗化版本。这需要针对性处理。

Rules

规则

W-AO-01: Reduce visual complexity in the Always On state. Remove animations, secondary UI elements, and non-essential detail. Keep only the most critical information visible.
W-AO-02: Hide sensitive or private data (e.g., message content, health details, financial information) in the dimmed state. Use redacted or placeholder content.
W-AO-03: Reduce update frequency in Always On. Update the display no more than once per minute. Use
```
TimelineView
```
with a
```
.everyMinute
```
schedule for time-sensitive content.
W-AO-04: Use the system-provided dimming behaviors. Do not implement custom dimming. The system automatically reduces brightness and can apply a tint. Ensure your content remains legible at reduced brightness.
W-AO-05: Test both active and Always On states. The transition between states must feel seamless -- layout should not shift or jump when the wrist raises.

W-AO-01：在始终显示模式下降低视觉复杂度。移除动画、次要UI元素和非必要细节。仅保留最关键的信息可见。
W-AO-02：在暗化状态下隐藏敏感或私密数据（如消息内容、健康详情、财务信息）。使用模糊或占位内容替代。
W-AO-03：在始终显示模式下降低更新频率。更新频率不超过每分钟一次。对时间敏感的内容使用
```
TimelineView
```
并设置
```
.everyMinute
```
调度。
W-AO-04：使用系统提供的暗化行为。不要实现自定义暗化。系统会自动降低亮度并可能应用色调。确保内容在低亮度下仍清晰可读。
W-AO-05：测试活跃状态和始终显示状态。状态切换必须流畅——抬起手腕时布局不应偏移或跳动。

Anti-Patterns

反模式

Showing identical UI in active and Always On states (wastes battery, may expose private data)
Animations or frequent updates in Always On state
Layout shifts when transitioning between active and dimmed states
Forgetting to redact sensitive information

活跃状态和始终显示状态展示完全相同的UI（浪费电量，可能暴露私密数据）
始终显示模式下有动画或频繁更新
活跃与暗化状态切换时布局偏移
忘记模糊敏感信息

6. Workouts & Health (MEDIUM)

6. 健身与健康（中等要求）

Workout and health apps have unique requirements: extended sessions, live metrics, and body-awareness features.

健身和健康应用有独特的需求：长时间会话、实时指标和身体感知功能。

Rules

规则

W-WK-01: Display live workout metrics in large, high-contrast text. Heart rate, duration, distance, and calories should be readable mid-exercise without stopping.
W-WK-02: Use haptic feedback for milestones (lap completed, goal reached, heart rate zone change). Haptics are essential because users may not be looking at the screen during exercise.
W-WK-03: Support auto-pause detection for relevant workout types (running, walking). Users expect the workout to pause when they stop moving and resume when they start again.
W-WK-04: Enable WaterLock during swimming workouts. This disables the touchscreen to prevent water interaction. The Digital Crown is used to eject water and unlock.
W-WK-05: Show a clear summary screen at workout completion with key metrics. Allow the user to save or discard the workout with a single action.

W-WK-01：以大字号、高对比度文本展示实时健身指标。心率、时长、距离和卡路里应在运动过程中无需停下即可读取。
W-WK-02：为里程碑事件（完成一圈、达成目标、心率区间变化）使用触觉反馈。触觉反馈至关重要，因为用户在运动过程中可能没有看屏幕。
W-WK-03：为相关健身类型（跑步、步行）支持自动暂停检测。用户期望健身应用在他们停止移动时暂停，开始移动时恢复。
W-WK-04：游泳健身时启用WaterLock。这会禁用触摸屏以防止水触发交互。使用Digital Crown排水并解锁。
W-WK-05：健身结束时展示清晰的汇总屏幕，包含关键指标。允许用户通过单一操作保存或放弃健身记录。

Anti-Patterns

反模式

Small metric text that requires squinting or stopping to read
Missing haptic feedback for important workout events
No auto-pause support for outdoor workouts
Requiring complex interaction to end or save a workout

小字号指标文本，需要眯眼或停下才能读取
重要健身事件缺少触觉反馈
户外健身不支持自动暂停
需要复杂交互才能结束或保存健身记录

7. Notifications (MEDIUM)

7. 通知（中等要求）

Watch notifications must be brief and actionable. The user's wrist is raised for only a moment.

Watch通知必须简洁且可操作。用户抬起手腕的时间非常短暂。

Rules

规则

W-NT-01: Design Short Look notifications with only a title, app icon, and app name. This is what the user sees on initial wrist raise. It must communicate the notification's purpose instantly.
W-NT-02: Design Long Look notifications with full content and up to 4 action buttons. The user reaches Long Look by continuing to look at the notification. Include the most useful actions inline.
W-NT-03: Use appropriate haptic notification types. Match the urgency:
```
.notification
```
for standard alerts,
```
.directionUp
```
for positive events,
```
.directionDown
```
for negative events,
```
.success
```
/
```
.failure
```
/
```
.retry
```
for outcomes.
W-NT-04: Do not over-notify. Excessive notifications cause users to disable them entirely. Batch non-urgent updates. Reserve Watch notifications for time-sensitive or actionable information.

W-NT-01：设计“快速查看”通知时仅包含标题、应用图标和应用名称。这是用户初始抬起手腕时看到的内容，必须立即传达通知的目的。
W-NT-02：设计“详细查看”通知时包含完整内容和最多4个操作按钮。用户持续查看通知时会进入详细查看模式。将最有用的操作直接内联显示。
W-NT-03：使用合适的触觉通知类型。匹配紧急程度：
```
.notification
```
用于标准提醒，
```
.directionUp
```
用于积极事件，
```
.directionDown
```
用于消极事件，
```
.success
```
/
```
.failure
```
/
```
.retry
```
用于操作结果。
W-NT-04：不要过度发送通知。过多通知会导致用户完全禁用通知。批量处理非紧急更新。仅将Watch通知用于时间敏感或可操作的信息。

Haptic Type Reference

触觉类型参考

Haptic	Use Case
`.notification`	General alerts
`.directionUp`	Positive event (goal reached, stock up)
`.directionDown`	Negative event (stock down, weather warning)
`.success`	Action completed successfully
`.failure`	Action failed
`.retry`	Try again prompt
`.start`	Activity beginning
`.stop`	Activity ending
`.click`	Discrete selection (Crown detent, picker)

触觉类型	使用场景
`.notification`	通用提醒
`.directionUp`	积极事件（达成目标、股票上涨）
`.directionDown`	消极事件（股票下跌、天气预警）
`.success`	操作成功完成
`.failure`	操作失败
`.retry`	重试提示
`.start`	活动开始
`.stop`	活动结束
`.click`	离散选择（Crown卡点、选择器）

Anti-Patterns

反模式

Sending every iPhone notification to the Watch
Notifications without actionable buttons (forcing app launch)
Using the same haptic type for all notifications regardless of content
Long notification text that requires extensive scrolling

将所有iPhone通知同步到Watch
通知没有操作按钮（强制启动应用）
所有通知使用相同的触觉类型，不区分内容
需要大量滚动的长通知文本

Evaluation Checklist

评估检查表

Use this checklist when reviewing a watchOS design or implementation.

在评审watchOS设计或实现时使用此检查表。

Glanceability

可快速浏览性

Can the user understand the primary content within 2 seconds?
Is the most important information visible without scrolling?
Is body text at least 16pt with sufficient contrast?
Are interactions completable in under 5 seconds?

用户能否在2秒内理解核心内容？
最重要的信息是否无需滚动即可查看？
正文文本是否至少16pt且对比度足够？
交互能否在5秒内完成？

Digital Crown

Does the Crown scroll vertical content?
Do value pickers provide haptic detents?
Are there no conflicts with system Crown behaviors?

Crown是否可滚动垂直内容？
数值选择器是否提供触觉卡点？
是否与系统Crown行为无冲突？

Navigation

Complications

Are multiple complication families supported?
Do complications work in both tinted and full-color modes?
Is complication data updated via TimelineProvider?
Does tapping a complication open relevant context?

是否支持多种Complications类型？
Complications是否支持着色和全彩模式？
Complications数据是否通过TimelineProvider更新？
点击Complications是否打开相关上下文？

Always On

始终显示模式

Is sensitive data hidden in the dimmed state?
Is visual complexity reduced when inactive?
Is the update frequency limited to once per minute or less?
Is the transition between active and dimmed seamless (no layout shift)?

敏感数据在暗化状态下是否隐藏？
非活跃状态下视觉复杂度是否降低？
更新频率是否限制为每分钟一次或更低？
活跃与暗化状态切换是否流畅（无布局偏移）？

Workouts

健身功能

Are live metrics displayed in large, high-contrast text?
Are haptics used for milestones?
Is auto-pause supported for applicable workout types?
Is the workout summary accessible with a single action?

实时指标是否以大字号、高对比度文本展示？
里程碑事件是否使用触觉反馈？
适用的健身类型是否支持自动暂停？
健身汇总是否可通过单一操作访问？

Notifications

通知

Is the Short Look meaningful (title + icon)?
Does the Long Look include inline actions?
Are haptic types matched to notification urgency?
Is notification frequency appropriate (not excessive)?

快速查看是否有意义（标题+图标）？
详细查看是否包含内联操作？
触觉类型是否与通知紧急程度匹配？
通知频率是否适当（不过度）？