设计调研：成熟运动健康产品的页面组成、布局与规范
对标 7 家：Apple · Garmin · Whoop · Oura · Fitbit(Google Health) · 华为运动健康 · Keep ｜ 2026-07-05 ｜ 结尾给出我们自己的设计方向提案
一、逐家拆解
Apple 健康 + 体能训练 全能型标杆
健康App：摘要 | 浏览（分类数据库）
体能训练App：摘要 | 共享 | 体能训练+
手表：三环表盘 → 体能训练App → Vitals晨览
- 三环是十年验证过的活动隐喻：一眼看进度、合环有仪式感、天然适合表盘常驻
- 「摘要页聚合 + 浏览页数据库」两层分工清晰：日常只看摘要，查数据才进浏览
- Vitals 把夜间五项体征打包对比个人基线，异常才打扰
- 健康App分类树很深，普通用户找血氧要点四五下
Garmin Connect 专业训练标杆
主页(卡片流可定制) | 挑战 | 日历 | 新闻流 | 更多
手表：晨报 → 数据一览(Glance纵滑) → 运动
- 晨报是杀手级体验：醒来抬腕，睡眠+HRV+身体电量+今日建议一次讲完
- 身体电量 5-100 一个数字讲「今天还剩多少电」，隐喻极好懂
- 训练状态七标签（高效/维持/过度…）把复杂负荷模型翻译成一个词
- 指标太多不做取舍，新手打开像飞机驾驶舱；我们要学它的模型、砍它的密度
Whoop 恢复/教练标杆
首页(恢复/负荷/睡眠三卡) | 教练 | 社区 | 趋势
无表盘屏幕，一切表达都在手机端
- 恢复分 0-100% + 红黄绿三色，起床先看「今天能不能练」，决策型而非记录型
- Daily Outlook 用教练口吻写晨报，是「说人话」的行业最佳样本
- AI Coach 可追问自己的数据，洞察和建议落到「今天做什么」
- 深色+专业术语（Strain 0-21）门槛高，大众产品不能照抄它的语言体系
Oura 信息架构收敛标杆
改版前：首页|准备度|睡眠|活动|韧性（5 tab）
改版后：今天 | 体征 | 我的健康（3 tab）
- 主动把 5 tab 砍成 3 tab：三分数置顶「今天」页，长期趋势归「我的健康」——短期看今天、长期看趋势的两分法值得直接抄
- 准备度 = 睡眠分 + 活动分 + 体征基线合成，三分数体系简洁完整
- 柔和留白 + 低饱和配色，健康产品做出了「安静感」
Fitbit / Google Health Today卡片流
Today(焦点指标可定制) | 健康 | 睡眠 | 你
- Today 页焦点指标卡可增删排序，「用户自己决定首屏看什么」是大众产品的正确姿势
- 准备度 + 每周心肺负荷并排，恢复和训练两头都讲
- 多次改版迁移，功能位置反复变动伤用户习惯——IA 定了就别老动
华为运动健康 国内大众标杆
健康(首页卡片流) | 运动 | 发现 | 设备 | 我的
- 首页卡片全家桶（三环/睡眠/心率/血氧/压力），中国用户教育最成熟的版式
- 「设备」独立成 tab：硬件配套 App 里设备管理的优先级就该这么高
- 100+ 运动模式 + 训练计划自适应，长尾覆盖全
- 「发现」tab 内容电商味重，稀释了工具属性
Keep 内容/社区标杆（反面参考）
运动(课程) | 计划 | 社区 | 商城 | 我的
- 课程完课的激励链路（打卡→分享→连续记录）做得最顺
- 五个 tab 里两个是运营位（社区/商城），工具用户被内容淹没
- 重运营模式依赖内容团队，硬件配套产品学不来也不该学——这是我们把社区压到 P2 的依据
二、他们长什么样：7 家首页示意图
按公开截图与官方素材重绘的版式示意（非像素还原，重在信息结构和布局骨架）。建议配合 Mobbin 翻真机截图对照看。
摘要 · 7月5日
步数8,432
体能训练昨天 · 户外跑步 5.2 公里
奖章🏅 连续 12 天合环
摘要共享体能训练+
Apple 体能训练：三环即首页
首屏 60% 面积给三环，进度就是主角
黑底 + 三色霓虹环，数据行全部次要化
3 个 tab 极克制，无任何运营位
摘要 编辑
置顶显示
❤️ 心率54-136 次/分
🫁 血氧97%
👟 步数8,432
📋 健康检查表心率通知已开启 · 2 项待设置
摘要浏览
Apple 健康：白底卡片数据库
「摘要（置顶卡）+浏览（全量分类）」两层结构
每类数据一个语义色，全系统一致
卡片=入口，点进去才是图表与解释
训练准备度 65 · 中等睡眠不错，但周五负荷还没消化完
训练状态高效进步VO₂Max 44 ↑ · 7日负荷 412
步数6,204 / 8,000
主页挑战日历新闻更多
Garmin：晨报 + 指标卡墙
晨报置顶，先给结论再给数据
深底小卡片墙，可自行增删排序
密度大是特色也是门槛，适合极客
今天 · Daily Outlook
今日建议 Strain 14.5当前 8.2 · 还有加量空间
Coach恢复充足，适合安排本周强度课。昨晚深睡比上周均值多 18 分钟。
总览教练社区趋势
Whoop：一个数决定今天
恢复%大环独占首屏，红黄绿定基调
Strain 目标条：恢复好→目标高，闭环设计
教练文案像私教留言，不像系统通知
💡 洞察你的准备度很好。昨晚就寝比平时早 40 分钟，身体给了回报。
心率54 静息 · 全天 48-136
日间压力平静为主
周期洞察—
今天体征我的健康
Oura：三分数 + 大留白
3 tab 极简：今天 / 体征 / 我的健康（长期）
米白低饱和，健康产品做出「安静感」
洞察卡用完整句子说话，不甩指标
Today ✎ 编辑
静息心率54 ↓ 比上周 -1
Today健康睡眠你
Fitbit：可定制焦点卡格
2 列卡格，用户自选首屏放哪些指标
准备度与心肺负荷并排：恢复和训练两头讲
Material 风，圆角大、色彩明快
健康
活动记录8432 步 · 386/480 千卡 · 18/30 分钟
健康生活喝水 · 呼吸训练 · 早睡打卡
体重72.0 kg —
健康运动发现设备我的
华为：卡片全家桶
首页一屏塞下全部健康域，中国用户最熟
「设备」独立 tab：硬件配套的优先级标杆
密度高于 Oura/Apple，靠分区色彩撑住
运动 🔍
今日计划 · 燃脂第 12 天核心激活 15 分钟 · 完成打卡领徽章
零基础跑步入门 K14.2万人在练 · 20分钟 · 🔥燃脂
晨间唤醒瑜伽2.8万人在练 · 15分钟 · 会员
👥 好友「小鹿」完成了 5 公里跑 · 点赞 32
运动计划社区商城我的
Keep：内容流（反面参考）
首页是课程商品流，不是「我的数据」
5 tab 有 2 个运营位，工具感被稀释
结论：内容型版式与硬件配套定位相斥
三、横向对比一张表
| 产品 | 手机端信息架构 | 核心隐喻 | 分数体系 | 风格 |
|---|
| Apple | 摘要 + 浏览两层 | 活动三环 | 睡眠分级（优/高/中/低） | 浅色，白卡片，系统级克制 |
| Garmin | 可定制卡片流 + 5 tab | 身体电量 | 训练准备度 0-100、状态七标签 | 数据密集，图表为主 |
| Whoop | 三卡首页 + 教练 tab | 恢复红黄绿 | 恢复 %、Strain 0-21、睡眠 % | 深色，运动员气质 |
| Oura | 今天 / 体征 / 我的健康 | 准备度 | 三分数（睡眠/活动/准备度） | 浅色柔和，大量留白 |
| Fitbit | Today 焦点卡可定制 | 圆环 + 准备度 | 睡眠分、准备度、心肺负荷 | 浅色，Material 圆角 |
| 华为 | 健康/运动/发现/设备/我的 | 三环 + 卡片全家桶 | 睡眠分、压力值 | 浅色，卡片流 |
| Keep | 课程/计划/社区/商城/我的 | 课程完课打卡 | 无健康分数 | 内容流，运营色彩浓 |
四、收敛出的 8 条通用设计规律
1 · 手机端 IA 收敛到 3-5 个 tab，「今天」聚合页是标准答案。Oura 主动从 5 砍到 3，Fitbit 押注 Today 页，华为首页卡片流——行业已经收敛：日常 90% 的查看发生在一个聚合页，其余 tab 管深度浏览。
2 · 复杂模型翻译成「一个分数 + 红黄绿」。睡眠分、准备度、恢复%全是 0-100 加色带。用户不看算法，只要「今天行不行」。分数点进去再给因子拆解，满足想深究的人。
3 · 圆环是活动进度的通用语言。Apple 三环被华为、Fitbit 反复致敬。环适合表盘常驻、适合动画激励，别发明新隐喻。
4 · 手表端铁律：3 秒看懂，每屏≤3 个交互元素，运动中零导航。watchOS HIG 的 glanceable 原则：抬腕 2-3 秒决定去留；运动过程中用户不应该需要任何导航操作。
5 · 手表深色、手机浅色。手表黑底（OLED 省电 + 户外可读 + 数字醒目），手机端浅色为主（长阅读舒适），深色跟随系统。
6 · 卡片 → 详情的三层纵深：概览卡 → 趋势页（日/周/月切换）→ 解释文案。七家无一例外。趋势页都带「个人基线带」，让用户和自己比，不和别人比。
7 · 数据可视化词汇表是固定的：心率用曲线+基线带、睡眠用阶段甘特图（hypnogram）、心率区间用五色横条、负荷用柱状+区间带。用户已被教育过，沿用降低学习成本。
8 · 语气从仪表盘转向教练。Whoop Daily Outlook、Garmin 晨报、Apple 的 AI 健康教练传闻——头部都在把「数字展示」升级成「人话建议」。这恰好是我们中文行文规范的主场。
五、我们的设计方向提案
手机端：4 tab —— 今天 / 运动 / 健康 / 我的。比华为少一个运营 tab，比 Oura 多一个「运动」（全能定位下运动记录频次高，值得一级入口）。设备管理放「我的」顶部（硬件配套的高频入口，但不必占 tab）。
手表端：表盘（三环+关键复杂功能）→ 纵滑卡片栈（晨报/准备度/天气/音乐）→ 运动 App。晨报在醒来后第一次抬腕自动置顶。
9:41
☀️ 晨报昨晚睡了 7 小时 24 分，恢复得不错。今天适合练，给自己安排点强度吧。
昨晚睡眠 · 86 分深睡 1h48m · 就寝 23:40
最近运动昨天 · 跑步 5.2 km · 28:40 · 均心率 152
心率静息 54 · 今日区间 48-136
今天运动健康我的
手机端「今天」页：晨报置顶 + 焦点卡片可定制
运动中 · 跑步 08:24
5'28"
配速 /km
152 bpm
区间 3 · 有氧耐力 1.53 km
手表运动页：大字 + 区间彩条
零导航，转表冠换数据页
☀️ 晨报 · 周日
82
准备度 · 状态好
睡眠 7h24m · HRV 62 ↑
建议：today 适合中高强度
手表晨报卡：醒来首次抬腕自动展示，3 屏讲完
风格规范（第一版 tokens，产品设计环节再细化）
| 项 | 规范 | 说明 |
|---|
| 主题 | 手机浅色为主（支持深色跟随系统）；手表纯黑底 | 规律 5 |
| 品牌色 | 1 个主色（建议蓝绿系，如 #10B3A3），只用于交互与强调 | 数据色不占用品牌色 |
| 语义色 | 好 #18A058 · 注意 #E6A23C · 差 #D43030，全产品统一 | 分数、预警、区间共用 |
| 数据色 | 心率红、活动橙、睡眠紫、血氧蓝、压力黄——每个领域固定一色 | 跨页面可识别 |
| 字体 | 数字用等宽变体（tabular figures），大数字 28-40pt | 手表大字可读 |
| 布局 | 8pt 网格；卡片圆角 12，页面左右边距 16 | 先浅色简单布局 |
| 图表 | 按规律 7 的词汇表来，一律带个人基线带 | 和自己比 |
| 文案 | 全部过《中文行文规范》：教练口吻、一次最多甩 2-3 个数字 | 规律 8 |
六、主要参考来源
Apple：Why Apple Watch · Vitals · Training Load · watchOS HIG
Garmin：Morning Report · Training Readiness · Body Battery · Training Status
Whoop：How WHOOP Works · WHOOP Coach
Oura：新版 App 设计（5 tab→3 tab） · Sleep Foundation 评测
Fitbit：重设计说明 · Readiness Score
华为：HUAWEI Health · XDA 功能综述
Keep：Keep PRD 拆解 · 人人都是产品经理分析
设计模式：Fitness App UI 原则 · Mobbin 健康类截图库（建议配合翻阅真机截图）