CadencePro

CadencePro UX 设计规范

作者： ZStack 日期： 2026-03-24 版本： v1.0 Draft

1. 设计理念

战略入口

后续 UX 和视觉改动默认遵循 docs/competitive-moat-analysis.md：CadencePro 是 Apple Watch 上的无声触觉步频教练，而不是又一个跑步记录 App。

核心体验原则

“跑步时不需要看手表，手表来引导你。”

触觉优先（Haptic-First） — 跑步时看屏幕不现实，触觉震动是主交互通道
3 秒规则 — 任何 Watch 上的操作不超过 3 秒完成
渐进披露 — 新手看到简洁界面，进阶用户发现深度功能
跑前简单，跑后丰富 — 开始训练前极简设置，结束后详细数据

护城河体验原则

无声教练感 — 不打断音乐、不要求外放、不依赖盯屏；核心反馈来自手腕上的轻触
实时闭环感 — 用户要在训练中感到“它正在帮我回到节奏”，不是跑完后才看到分析
路径而非排行榜 — iPhone 端重点表达个人步频路径、舒适区间、漂移和下一步，不做泛运动社交
温柔解释 — 语言像懂训练的教练，少用失败、危险、错误，多用稳定、舒服、适合今天
不抢记录系统 — Apple Workout / Strava 负责记录与社交，CadencePro 负责步频训练层

情感设计目标

阶段	用户应该感受到	设计手段
首次打开	“这个 app 懂跑步”	专业但不复杂的引导
训练中	“我被温柔地引导着”	渐进式触觉反馈，不是粗暴的震动
训练后	“我知道下次怎么调”	清晰解释节奏漂移、舒适区间和下一次建议
长期使用	“它越来越懂我的节奏”	个人步频路径、渐进目标、历史对比

2. Apple Watch 界面设计

2.1 信息架构

Watch App
├── 主页（MainView）
│   ├── 🏃 快速开始        ← 最常用，最大触控区
│   ├── 📋 间歇训练        ← 第二常用
│   └── ⚙️ 设置           ← 最少用
│
├── 快速开始流程
│   └── BPM 设置 → 开跑 → 训练中 → 总结
│
├── 间歇训练流程
│   └── 选模板/自定义 → 确认 → 开跑 → 训练中 → 总结
│
└── 训练中（ActiveWorkoutView）
    ├── 屏幕 1: 步频仪表（默认）
    ├── 屏幕 2: 分段进度
    └── 屏幕 3: 心率+时间（翻页）

2.2 Watch 主页

┌──────────────────────────┐
│                          │
│   C a d e n c e P r o    │  ← 品牌名，小字
│                          │
│  ┌────────────────────┐  │
│  │                    │  │
│  │    🏃 快速开始      │  │  ← 大按钮，占屏幕 50%
│  │    175 SPM ▸       │  │  ← 显示上次的 BPM，一键开始
│  │                    │  │
│  └────────────────────┘  │
│                          │
│  ┌────────────────────┐  │
│  │  📋 间歇训练        │  │  ← 中等按钮
│  └────────────────────┘  │
│                          │
│  ┌─────┐                 │
│  │ ⚙️  │                 │  ← 小图标
│  └─────┘                 │
│                          │
└──────────────────────────┘

交互设计：

「快速开始」按钮记住上次使用的 BPM，一键直接开跑
Digital Crown 在主页可以直接调整 BPM（不需要进入子页面）
长按「快速开始」可以修改 BPM 后再开始

2.3 BPM 设置界面

┌──────────────────────────┐
│                          │
│        目标步频           │
│                          │
│    ┌──────────────┐      │
│    │              │      │
│    │    1 7 5     │      │  ← 超大数字，Digital Crown 调节
│    │    SPM       │      │
│    │              │      │
│    └──────────────┘      │
│                          │
│  [160] [170] [175] [180] │  ← 快捷预设，点击直接选定
│                          │
│  ┌────────────────────┐  │
│  │    ▶ 开始训练       │  │  ← 绿色大按钮
│  └────────────────────┘  │
│                          │
│  ☑ 自适应模式  ON        │  ← 开关
│                          │
└──────────────────────────┘

交互：

Digital Crown 旋转 → BPM 数字实时变化，步长 1
快捷预设按钮 → 点击立即设定
「自适应模式」开关 → 开启后节拍器会根据实时步频微调

2.4 训练进行中界面 — 步频仪表（核心界面）

┌──────────────────────────┐
│  ●●●○○  亚索800 3/5      │  ← 间歇模式显示分段进度
│                          │
│        ┌─────┐           │
│   ◄    │ 173 │    ►      │  ← 当前实时步频，超大字
│  偏低   │ SPM │   偏高    │
│        └─────┘           │
│     目标: 175 SPM         │  ← 目标步频，小字
│                          │
│  ▔▔▔▔▔▔▔▔▔█▔▔▔▔▔▔▔▔▔▔  │  ← 步频条：绿色区间指示器
│  150    170 ↑ 180   200  │    █ = 当前位置，绿色区=目标±5
│                          │
│  ⏱ 12:34    📏 2.1km     │  ← 时间/距离（从 HealthKit 读取）
│                          │
└──────────────────────────┘

视觉编码：

状态	颜色	触觉反馈
步频在目标 ±3 SPM	🟢 绿色	正常节拍
步频偏低 3-8 SPM	🟡 黄色	节拍略加快 + 轻微连续震
步频偏低 >8 SPM	🔴 红色	节拍明显加快 + 强震提醒
步频偏高 3-8 SPM	🟡 黄色	节拍略放慢
步频偏高 >8 SPM	🔵 蓝色	节拍明显放慢 + 双震提醒

关键设计决策：为什么偏高用蓝色不用红色？ 步频偏高通常不危险（只是跑太快），红色留给「可能受伤」的偏低场景。

2.5 间歇训练段间切换

段间切换动画（0.5 秒）：

┌──────────────────────────┐
│                          │
│                          │
│      ✅ 快跑段完成        │  ← 全屏过渡
│                          │
│      → 恢复段            │
│      目标: 160 SPM       │
│                          │
│                          │
└──────────────────────────┘

+ 触觉：两次长震（⏳⏳）
+ 0.5 秒后自动切换到新段的训练界面

2.6 训练总结界面

┌──────────────────────────┐
│   训练完成 🎉             │
│                          │
│   平均步频    173 SPM     │
│   目标步频    175 SPM     │
│   偏差        -2 ✅       │  ← 偏差 <5 显示 ✅
│                          │
│   稳定性评分   87/100     │  ← 步频波动越小分越高
│   ██████████░░░          │
│                          │
│   在目标区间   78%        │
│   总时间      45:12       │
│   总距离      6.2 km      │
│                          │
│  ┌────────────────────┐  │
│  │  📱 在 iPhone 查看  │  │  ← 详细数据在手机上看
│  └────────────────────┘  │
│                          │
│  [完成]                   │
└──────────────────────────┘

2.7 Watch Complication（表盘小组件）

支持的 Complication 类型：

类型	显示内容
Circular Small	上次训练步频数字（如 “173”）
Rectangular	“上次: 173 SPM / 目标: 175”
Corner	步频趋势小图标（↑↓→）

点击 Complication → 直接进入 App 快速开始页面。

3. iPhone 界面设计

3.1 信息架构

iPhone App
├── Tab 1: 仪表盘（Dashboard）
│   ├── 个人步频路径状态（免费 Lite：今日目标/舒适区间；Pro：完整路径）
│   ├── 最近训练洞察
│   ├── 舒适区间/漂移趋势
│   └── 步频-配速关联图
│
├── Tab 2: 训练计划（Plans）
│   ├── 入门间歇模板（免费 Starter 4 x 2）
│   ├── 高级预设模板与自定义训练编辑器（Pro）
│   └── 渐进计划（免费 Lite / Pro 完整 Personal Cadence Path）
│
├── Tab 3: 历史（History）
│   ├── 最近 5 次 CadencePro 训练基础完整详情（免费）
│   ├── 更早历史摘要与升级入口
│   └── 完整历史、趋势、周报（Pro）
│
└── Tab 4: 我的（Profile）
    ├── 步频区间设置
    ├── 个人信息（身高等）
    ├── Pro 订阅
    └── 设置

3.2 仪表盘

设计重点：Dashboard 首屏先回答“我现在处在什么节奏状态、下次该怎么调”，再展示原始图表。图表服务于解释，不为了显得数据很多。

┌──────────────────────────────────┐
│  CadencePro         Pro ⭐       │
│                                  │
│  ┌──────────────────────────┐    │
│  │  本周步频趋势              │    │
│  │                           │    │
│  │  175 ┤     ╭─╮            │    │
│  │  170 ┤  ╭──╯  ╰──╮       │    │
│  │  165 ┤──╯         ╰──    │    │
│  │      └──┬──┬──┬──┬──┬──  │    │
│  │        一 二 三 四 五 六   │    │
│  │                           │    │
│  │  平均: 172 SPM  ↑3 vs 上周 │   │
│  └──────────────────────────┘    │
│                                  │
│  ┌──────────────────────────┐    │
│  │  步频 vs 配速              │    │
│  │                           │    │
│  │  配速 ┤  ·  ·             │    │
│  │  6:00 ┤   · · ·          │    │
│  │  6:30 ┤  ·  ·  ·  ·      │    │
│  │  7:00 ┤ · ·    ·         │    │
│  │       └──┬──┬──┬──┬──    │    │
│  │        160 165 170 175    │    │
│  │                           │    │
│  │  最佳效率区: 170-175 SPM  │    │
│  └──────────────────────────┘    │
│                                  │
│  最近训练                         │
│  ┌──────────────────────────┐    │
│  │ 今天 18:30  间歇训练       │    │
│  │ 173 SPM  稳定性 87  6.2km │    │
│  │                    详情 > │    │
│  └──────────────────────────┘    │
│  ┌──────────────────────────┐    │
│  │ 昨天 07:15  轻松跑        │    │
│  │ 168 SPM  稳定性 92  8.0km │    │
│  │                    详情 > │    │
│  └──────────────────────────┘    │
│                                  │
│  [仪表盘] [训练] [历史] [我的]    │
└──────────────────────────────────┘

3.3 训练计划编辑器

┌──────────────────────────────────┐
│  ← 训练计划                       │
│                                  │
│  亚索 800（自定义）                │
│                                  │
│  ┌──────────────────────────┐    │
│  │ 1️⃣ 热身                   │    │
│  │    10:00  ·  160 SPM      │    │
│  │                    编辑 ✏️ │    │
│  └──────────────────────────┘    │
│  ┌──────────────────────────┐    │
│  │ 2️⃣ 快跑                   │    │
│  │    800m  ·  178 SPM       │    │
│  │                    编辑 ✏️ │    │
│  └──────────────────────────┘    │
│           ↕ 重复 5 次             │
│  ┌──────────────────────────┐    │
│  │ 3️⃣ 恢复                   │    │
│  │    400m  ·  160 SPM       │    │
│  │                    编辑 ✏️ │    │
│  └──────────────────────────┘    │
│  ┌──────────────────────────┐    │
│  │ 4️⃣ 放松                   │    │
│  │    10:00  ·  155 SPM      │    │
│  │                    编辑 ✏️ │    │
│  └──────────────────────────┘    │
│                                  │
│  [+ 添加段]                       │
│                                  │
│  ┌────────────────────────────┐  │
│  │     📲 同步到 Apple Watch    │  │
│  └────────────────────────────┘  │
│                                  │
│  [仪表盘] [训练] [历史] [我的]    │
└──────────────────────────────────┘

3.4 单次训练详情

┌──────────────────────────────────┐
│  ← 训练详情                       │
│                                  │
│  3月24日  间歇训练  45:12         │
│                                  │
│  ┌──────────────────────────┐    │
│  │  步频时间线                 │    │
│  │  190 ┤                    │    │
│  │  180 ┤  ████  ████  ████ │    │  ← 快跑段高
│  │  170 ┤                    │    │
│  │  160 ┤██    ██    ██    ██│    │  ← 恢复段低
│  │  150 ┤                    │    │
│  │      └──────────────────  │    │
│  │      0    15   30   45min │    │
│  │                           │    │
│  │  ── 实际  ╌╌ 目标         │    │
│  └──────────────────────────┘    │
│                                  │
│  分段数据                         │
│  ┌──────────────────────────┐    │
│  │ 段    目标   实际   偏差   │    │
│  │ 热身  160   158   -2 ✅  │    │
│  │ 快1   178   176   -2 ✅  │    │
│  │ 恢1   160   162   +2 ✅  │    │
│  │ 快2   178   177   -1 ✅  │    │
│  │ 恢2   160   158   -2 ✅  │    │
│  │ 快3   178   174   -4 ⚠️  │    │
│  │ 恢3   160   155   -5 ⚠️  │    │
│  │ 快4   178   171   -7 ⚠️  │    │  ← 后段疲劳明显
│  │ 快5   178   168   -10 ❌ │    │
│  │ 放松  155   152   -3 ✅  │    │
│  └──────────────────────────┘    │
│                                  │
│  💡 AI 建议                       │
│  ┌──────────────────────────┐    │
│  │ 后两组步频明显下降，建议     │    │
│  │ 下次减少到 4 组，或降低      │    │
│  │ 快跑段目标到 175 SPM。       │    │
│  └──────────────────────────┘    │
│                                  │
│  [仪表盘] [训练] [历史] [我的]    │
└──────────────────────────────────┘

4. 首次使用引导（Onboarding）

Watch 端引导

Screen 1:
┌──────────────────────────┐
│                          │
│    🏃 CadencePro         │
│                          │
│   让每一步都更有效率       │
│                          │
│   [开始 →]               │
│                          │
└──────────────────────────┘

Screen 2:
┌──────────────────────────┐
│                          │
│   你跑步多久了？          │
│                          │
│   [🌱 新手 (<6个月)]     │
│   [🏃 进阶 (6月-3年)]    │
│   [🏆 资深 (>3年)]       │
│                          │
└──────────────────────────┘

Screen 3 (如果选新手):
┌──────────────────────────┐
│                          │
│   让我测一下你的           │
│   自然步频                │
│                          │
│   正常速度跑 3 分钟       │
│   我会在后台计算           │
│                          │
│   [▶ 开始测试]            │
│                          │
└──────────────────────────┘

Screen 4 (测试完成):
┌──────────────────────────┐
│                          │
│   你的自然步频             │
│                          │
│      155 SPM             │
│                          │
│   建议目标: 165 SPM       │
│   计划: 每周提升 3 SPM    │
│                          │
│   [👍 开始训练]            │
│                          │
└──────────────────────────┘

5. 触觉反馈设计（最重要的交互）

触觉语言定义

场景	触觉模式	WKHapticType	说明
正常节拍	`· · · · ·`	`.click`	每拍一次轻触
步频偏低提醒	`·· ·· ·· ··`	`.click` + 间隔缩短	节拍加密
步频偏高提醒	`· · · ·`	`.click` + 间隔拉长	节拍放慢
严重偏离	`═ · ═ · ═`	`.notification` + `.click` 交替	强提醒
段间切换	`═══ ═══`	`.success` × 2	两次长震
训练开始	`═══`	`.start`	一次长震
训练结束	`═ ═ ═`	`.success` × 3	三次庆祝震
到达目标区间	`~ ~`	`.directionUp`	温柔确认

触觉强度分级

正常跑步（在目标±3 SPM）:
  触觉强度: ██░░░ (2/5)
  → 能感知节奏但不刺眼

轻微偏离（±3-8 SPM）:
  触觉强度: ███░░ (3/5)  
  → 稍微加强，引起注意

严重偏离（>±8 SPM）:
  触觉强度: █████ (5/5)
  → 明确告诉你「不对了」

可在设置中调整整体灵敏度: 
  [低] [中] [高]

6. 设计系统

6.1 色彩系统

用途	颜色	Hex	说明
主色	活力橙	`#FF6B35`	品牌色，跑步活力感
步频达标	绿色	`#34C759`	Apple 系统绿
步频偏低	警告黄	`#FFD60A`	注意
步频严重偏低	危险红	`#FF3B30`	危险
步频偏高	信息蓝	`#0A84FF`	无害的提醒
背景	深黑	`#000000`	Watch OLED 省电
文字主色	白色	`#FFFFFF`	高对比度
文字副色	灰色	`#8E8E93`	次要信息

6.2 字体规范

元素	Watch	iPhone
步频大数字	SF Pro Rounded, 48pt, Bold	SF Pro Rounded, 64pt, Bold
标签文字	SF Pro, 13pt, Regular	SF Pro, 15pt, Regular
按钮文字	SF Pro, 17pt, Semibold	SF Pro, 17pt, Semibold
数据数字	SF Mono, 15pt, Medium	SF Mono, 20pt, Medium

为什么用 SF Pro Rounded？ 圆润字体传达「友好、运动」的感觉，跟标准 SF Pro 的「冷静、专业」区分开。

6.3 动画规范

动画	时长	曲线	说明
步频数字更新	200ms	easeInOut	数字渐变，不闪烁
步频条滑动	300ms	spring(0.7)	弹性滑动
颜色区间切换	500ms	easeInOut	背景色渐变
段间切换	500ms	easeOut	全屏过渡
训练完成庆祝	1000ms	spring(0.5)	弹跳 + 缩放

7. 可访问性设计

维度	实现
VoiceOver	所有控件有语义标签；步频变化时播报 “当前步频 173”
动态字体	支持系统字体大小调整（Watch 上有上限）
色盲友好	不仅用颜色区分，同时用图标（✅⚠️❌）和文字（偏低/偏高）
触觉替代	提供纯声音模式，适合触觉感知弱的用户
减少动画	尊重系统「减少动效」设置

8. 关键交互流程图

快速开始流程

主页 → 点击「快速开始」
         │
         ├─ 上次 BPM 已记住？
         │   ├─ 是 → 直接开始训练（1 tap）
         │   └─ 否 → BPM 设置页 → 设定 → 开始
         │
         ▼
    训练进行中
         │
         ├─ 自适应模式 ON → 节拍器自动微调
         ├─ 自适应模式 OFF → 固定节拍
         │
         ├─ 用户操作：
         │   ├─ Digital Crown → 实时调整目标 BPM
         │   ├─ 左滑 → 切换到下一个数据页
         │   └─ 长按 → 暂停/结束选项
         │
         ▼
    训练结束
         │
         ├─ Watch 显示简要总结
         └─ 推送到 iPhone 显示详细分析

首次使用到养成习惯

Week 0: 下载 → 引导 → 自然步频测试 → 获得个性化目标
Week 1: 每次跑步用 CadencePro → 训练后看进步
Week 2: 免费尝试 Starter 4 x 2 入门间歇，看到分段步频反馈
Week 3: 最近 5 次详情和 Path Lite 已建立信任，周报/完整趋势推荐 Pro
Week 4: 解锁「步频达标 10 次」成就 → 推荐 Pro

文档完成日期： 2026-03-24 输出文件路径： _bmad-output/planning-artifacts/ux-design-cadence-app.md 下一步： MVP 开发启动