STRATEGY.md 11 KB
浠艾福 · 页面重新设计策略（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-buttonmixin 同体系。 - 设计 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 页、报告上传（拍照/相册）、测评流、商城下单流的高保真原型与组件级改造。