# 浠艾福 · 页面重新设计策略（v4.0 · Warm Calm Wellness · 沿用 flash 页暖色基因）

> 依据 `mobile-hifi-prototype`（移动端高保真产品原型）与 `ui-design-library`（UI 打磨 / 动效）两套技能，对 `cfc-frontend`（uni-app 微信小程序）现有页面进行重新设计。
> 本次范围：**4 个 Root 页（首页 / 健康 / 成长 / 我的）+ 五维导航 + 登录**，即用户最高频、最该先统一的主壳层。

---

## 1. 任务理解卡（Task Understanding）

| 项 | 内容 |
|---|---|
| 产品定位 | 家庭五维（身·心·智·行·富）主动健康与成长管家，先"看见"全家状态，再"了解"与"行动" |
| 移动用户 | 家长（主力，多角色管理全家）/ 孩子（被引导完成任务）/ 成长规划师（B 端） |
| 核心场景 | 通勤、睡前、饭后碎片时间；现场拍照上传报告、弱网打卡、被中断后恢复 |
| 为什么移动端 | 健康数据散落在家人各自手机、报告在纸面；家长需要一个"随时看见全家状态"的手掌入口 |
| 核心任务（3-5） | ① 一眼看见全家五维能量 ② 完成今日最该做的一件事（Next Best Action） ③ 记录/打卡（饮食·运动·睡眠·情绪） ④ 处理家庭任务与挑战 ⑤ 上传报告解锁数据 |
| 设备能力 | 相册/拍照（上传报告）、定位（弱）、扫码（邀请）、推送（消息） |
| 网络环境 | 弱网/离线常见 → 本地草稿、提交防重、断点恢复 |
| 一期 P0 | 首页工作台、五维能量、今日任务、健康数据中心、成长打卡、我的（家庭/成就/订单） |
| 业务闭环 | 看见（能量/报告）→ 了解（测评/自检）→ 行动（任务/打卡/挑战）→ 复核（完成/积分）→ 闭环（成长记录沉淀） |

---

## 2. 黄金任务流（Golden Flow）

**"睡前 30 秒，带小宇完成今日最后一件成长事"**

首页能量英雄（看见全家 78 分）→ Next Best Action「完成五维自检 / 今日任务」→ 点击进入任务 → 一键"完成"得积分 → Toast 反馈 + 家庭动态更新 → 连续打卡 +1。

- 输入少：默认带出当前成员，按钮即完成，无需表单。
- 中断可恢复：任务状态本地记录，切后台/退出不丢失。
- AI/人工边界：能量报告由测评数据计算，结论可人工确认与重测，不强行 Chat。

---

## 3. 信息架构（IA）

```
Global Shell（状态栏 / 自定义 TabBar / 五维抽屉 / 异常 Banner）
└─ Root 页（4 个，带 TabBar，无业务返回）
   ├─ 首页（家庭主页工作台）
   ├─ 健康（数据中心 + 雷达 + 报告）
   ├─ 成长（今日成长 + 里程碑 + 任务）
   └─ 我的（身份 / 家庭 / 成就 / 订单 / 设置）
      └─ 五维（中间按钮唤起抽屉，5 维度入口 → Task 详情页）
Task 页（健康报告、任务详情、测评…隐藏 TabBar，返回上级）
```

- **五维**作为中间按钮统一入口，替代原"首页内嵌长滚动沙盘 + 各页重复五维卡片"的分散结构。
- 每个 Root 页只承载一个主任务语义，杜绝"把 PC 菜单搬进手机"。

---

## 4. 页面清单与职责

| Page | 层级 | 职责 | 关键状态 |
|---|---|---|---|
| 登录 | Root（未登录根） | 手机号/密码登录或免费体验 | 正常 / 错误 / 协议 |
| 首页 | Root | 全家能量 + Next Best Action + 今日任务 + 挑战 + 动态 | Loading / Empty（任务清空）/ Success |
| 健康 | Root | 维度雷达 + 报告上传 + 在线测评 + 最近记录 | Loading（骨架）/ Empty（无报告） |
| 成长 | Root | 今日成长打卡 + 里程碑 + 任务 | 部分完成 / 全完成 |
| 我的 | Root | 身份卡 + 家庭成员 + 成就 + 订单 + 设置 | 会员/非会员 |
| 五维抽屉 | Immersive(底部) | 5 维度速览 + 进入详情/展开总览 | — |
| **五维能量总览** | Task（全屏，隐藏 TabBar） | 雷达（含上周虚线对比）+ 趋势折线 + 家人对比 + 行动建议 | 本周/近 30 天切换 |
| **维度详情** | Task | 单维度分数 + 关键指标（含参考区间）+ 趋势 + 建议动作（可勾选）+ 最近记录 | 建议动作完成态 |
| **报告上传流程** | Task | 4 步状态机：选择 → 识别中(进度) → 结果确认(低置信标注) → 归档完成 | 识别中/需确认/成功 |
| **成长报告与分享** | Task | 周/月报告卡（可保存图片）+ 五维里程碑徽章 + 本周亮点 | 周/月切换、徽章已解锁/未解锁 |

> 五维形成**两级入口**：抽屉 = 速览（5 维分数 + 直达详情），全屏总览 = 深读（雷达/趋势/对比/建议）。成长报告为**可传播资产**，分享文案统一走"成果分享 · 邀请朋友们一起看"（规避利益诱导）。

---

## 5. 设计系统（Tokens · 本次重设计核心）

| 维度 | 旧（问题） | 新（v4.0） |
|---|---|---|
| 图标 | 全量 emoji（🌏⚡🔥🌿💧），跨端渲染不一致 | **内联 SVG 线性图标精灵**，统一 1.5-2px 描边 |
| 色彩 | uni.scss 标蓝+珊瑚，实际屏用橙/靛/绿/粉/琥珀各一套，无统一 | 中性暖底（桃白 `#FFF7F1`）+ **单一品牌橙 `#F97316`** + 深棕橙 `#7C2D12` 文字 + 五维强调色**严格沿用 flash 页取值** |
| 表面 | 渐变 hero 偏多、阴影重 | 白卡 + 轻暖阴影；能量英雄/身份卡改用**桃橙渐变**（直采 `pages/splash` 的 `#FFF7ED→#FFEDD5→#FED7AA`），保留 flash 页暖色基因 |
| 层级 | 长滚动平铺 section，无主次 | 能量英雄 → NBA → 任务 → 挑战 → 动态，清晰主次 |
| 字号 | 正文偏低 | 正文基线 14px，关键正文不 < 12px |
| 动效 | `ease` / `scale(0)` / 无 reduced-motion | `ease-out` 入场、`scale(0.97)` 按压、`stagger`、抽屉 spring、`prefers-reduced-motion` 全量降级 |
| 原生 | 无 safe-area / tap 高亮 | `viewport-fit=cover` + `env()`、`-webkit-tap-highlight-color`、`100dvh`、`16px` 输入、`:active` 反馈 |

**五维语义色（严格沿用 flash 页 `pages/splash/index.vue` 取值）**：身 `#FF8C42` / 心 `#FF6B9D` / 智 `#6366F1` / 行 `#10B981` / 富 `#F59E0B`。

---

## 6. 关键屏 Before / After（设计评审表）

| Before（现状） | After（重设计） | Why |
|---|---|---|
| 首页：splash + 自检卡 + 引导条 + 沙盘 + 动态 + 会员 + 快捷 + 任务 + 挑战 + 每日 + 报告 + 阅读 + 商品 一长串平铺 | 能量英雄（一眼全家分）+ Next Best Action（最该做的一件）+ 任务/挑战/动态（主次分明） | 移动端首屏应只回答"现在该做什么"，而非堆功能 |
| 各页重复"身·心·智·行·富"五维关系链 + 五张卡片 | 中间"五维"按钮统一唤起抽屉，5 维度集中管理 | 同一入口只应出现一次，避免分散与重复代码 |
| emoji 图标（🌏⚡🔥🌿💧）跨端大小不一、部分机型变"方块" | 内联 SVG 线性图标 | 一致性、可读性、可访问性、可控描边 |
| 渐变橙 hero、各色 tab 高亮 | 桃橙渐变 hero / 身份卡 + 品牌橙 `#F97316` 统一 + 五维色**严格沿用 flash 页**（保留暖色基因） | 以 flash 页暖色为唯一色彩源，建立稳定且统一的品牌识别 |
| `transition: all` / `scale(0)` 入场 / 无 reduced-motion | `transform/opacity` + `ease-out` + `scale(0.95)` + reduced-motion | 动效服务感知，不制造卡顿与晕动 |
| 无安全区适配、tap 高亮、固定 `100vh` | `env(safe-area-inset-*)` + `100dvh` + tap 透明 + `:active` | 真机原生手感，不被"这是网页"暴露 |

---

## 7. 状态与弱网（已纳入原型）

- **Loading**：健康页雷达/列表骨架屏（`shimmer`）。
- **Empty**：首页"今日任务已清空"空态 + 引导；健康"暂无报告"空态。
- **Offline/弱网**：提交防重（完成任务按钮置灰）、本地草稿（打卡状态）、Toast 反馈。
- **权限**：相册/拍照仅在"上传报告"时申请，拒绝给降级（手动选择/稍后）。
- **演示数据**：已去个人化（林晓 / 小宇 / 小柚 / 爷爷，纯演示身份，无真实姓名手机号）。

---

## 6.5 成果闭环设计（突出成果 · 驱动继续 · 促进分享）

**设计目标**：让用户"看见成果 → 想继续做 → 愿意分享"，形成正反馈循环，而非任务清单工具。

### 成果突出（Achievement Visibility）
- **成长页顶部成果 Hero**（桃橙渐变，视觉重心）：完成进度环（本周任务数）+ 三项累计（任务数 / 成长分 / 徽章数）横向进度条 + 7 天连击火苗条（今天高亮待点亮）。
- **任务完成即时正反馈**：勾选后行内高亮渐隐（`taskPop`）、划线置灰、成长分实时累加并同步到成果环与进度条。
- **解锁横幅**（`unlock-toast`）：完成 2 项任务触发「本周全勤」解锁，顶部浮出卡片（图标 + 标题 + 副文案 + "分享 ›"），自动消失。

### 驱动继续完成（Continue Momentum）
- **"再完成 N 项解锁…"**：任务区底部动态提示剩余数量，全部完成转为"成果已解锁 🎉"。
- **首页任务完成**同样累加成长分与连续打卡天数，跨页共享 `growthState` 成果状态。
- **连击机制**：连续打卡天数随完成任务递增，强化"不想断签"的留存动机。

### 成果分享（Shareable Asset）
- **成长报告卡**（可截图）：五维分数 + 连续打卡火苗 + 三项成果摘要（任务/成长分/徽章），分享文案统一 **"成果分享 · 邀请朋友们一起看"**（规避利益诱导，遵循小程序运营规范）。
- **五维里程碑徽章**：已解锁彩色 / 未解锁置灰，解锁时播放徽章放大回弹动画（`badgeUnlock`）。
- **分享回流**：解锁横幅与报告卡均可直达分享，成果成为自然的分享动机而非诱导。

> 分享文案红线：所有分享 CTA 禁止"得积分/领奖励/解锁得积分"等利益诱导措辞，统一走情感与真实成果动机。

---

## 8. 研发交接要点（接 `mobile-hifi-prototype` 交付）

- 所有 Route 标注 `pageLevel`：首页/健康/成长/我的 = Root（显示自定义 TabBar）；维度详情 = Task（隐藏 TabBar，返回上级）；五维 = 底部抽屉。
- **禁止**用 `v-if` 隐藏无权限入口，应据角色/会员态动态渲染。
- 动效统一走 `utils/animate` 或 CSS 变量（`--ease-out` / `--ease-drawer`），不在组件内硬编码 `ease-in`。
- 图标迁移：将 emoji 替换为 `components/icon/*.vue`（SVG `<symbol>` 模式），与现有 `flat-card` / `flat-button` mixin 同体系。
- 设计 Token 写入 `uni.scss` 的 `:root` 变量，旧 `uni-primary` 蓝保留兼容；新增 `--brand` 暖橙 `#F97316`、`--brand-ink` 深棕橙 `#7C2D12`、`--brand-soft` 桃橙 `#FFF1E6`，以及 `--dim-*` 五维变量（**取值严格对齐 `pages/splash/index.vue` 的 flash 页**，作为全 App 色彩源）。
- 真机验收：360/375/390/414/430 五档 + 安全区 + 键盘弹起（输入 16px 不缩放）+ 弱网提交。

---

## 9. 交付物

| 文件 | 说明 |
|---|---|
| `docs/redesign/prototype.html` | 高保真可交互原型（单文件，直接浏览器打开）。含登录 / 首页 / 健康 / 成长 / 我的 / 五维抽屉，可切 Tab、开关 五维、完成任务、切成员、切登录态 |
| `docs/redesign/STRATEGY.md` | 本策略文档（设计系统 + IA + 页面职责 + Before/After + 研发交接） |

> 后续可继续：维度详情 Task 页、报告上传（拍照/相册）、测评流、商城下单流的高保真原型与组件级改造。