yuyueguahao/docs/superpowers/plans/2026-06-14-phase4-design-refresh.md

Phase 4 · 设计 tokens 重塑 + 主流程 6 页视觉升级

范围

• 6 个核心页面: home / hospital / appointment / phone-consult / self-test / success
• 目标: 整洁美观、提升品质感
• 手段: 设计 token 优化 + 6 页视觉重构

设计 Thesis(一句话)

用 医疗级克制美学 + 人文摄影 + 精准排版层级,告别卡片堆叠,改为分栏 + divider + 全宽背景区,让用户在一屏内完成 "我该做什么" 的判断。

Visual Thesis

• 氛围: 医疗专业 × 苏州江南温润(降低饱和、加微暖)
• 材质: 大面积白 + 极浅米灰背景(#fafbfc),用品牌蓝绿做局部强调
• 能量: 安静、稳定、可信赖——> 留白 + 排版权重做主节奏

Content Plan(6 页)

#	页面	主任务	主导视觉
1	home 首页	引导用户进入预约/咨询/自测	真实医院外景 hero + 3 个分栏入口 + 科室速选
2	hospital 医院详情	了解医院+选科室	医院环境图 + 实力数据 + 科室列表(无卡片)
3	appointment 预约	提交预约信息	单一表单焦点 + 步骤条
4	phone-consult 电话咨询	选专家并拨号	专家横向滚动(行) + 拨号区
5	self-test 自测	答题+留资	进度条主导 + 题卡 + 底部信息采集
6	success 成功	确认+下一步	大号 ✓ 符号 + 信息行(无卡)

Interaction Thesis(2-3 个核心动效)

1. 入场 fadeInUp: 首屏内容从下方 16rpx 渐入,延迟 0/80/160ms 形成节奏
2. 按下反馈: 按钮 active 状态 scale(0.97) + 透明度 0.85(已有 mixin)
3. scroll reveal: ScrollView 内区块在视口出现时 fadeIn(用 IntersectionObserver,小程序内用 onScroll)

Token 优化清单

A. 颜色: 收敛与精致

• 主品牌色: #1f7ae0 → #0a6dff(更精炼的"医蓝"),加 50/100/200/300/500/600/700 完整色阶
• 辅色: 青绿 #15b9a3 保留,但使用率≤15%
• 新增"米杏"色系: #fafbfc 背景 / #f4f1ec 卡片底 / #f0e6d6 强调区(降低冷感、提升温度)
• 价格色: #ff5e3a → #e85a3c(更稳重)
• 删:$color-text-disabled 浅灰改为 $color-text-tertiary 的 60% opacity

B. 排版: 增强层级

• 引入"两套字重"原则: 标题用 $font-weight-bold,正文用 regular,不混用 medium 太多
• 新增 $letter-spacing-tight: -0.01em(标题字距)
• 新增 $letter-spacing-loose: 0.04em(小标签字距)

C. 阴影: 收为 3 级

• 现有 5 级 → 3 级: $shadow-1 (xs) / $shadow-2 (md) / $shadow-3 (lg)
• 删除 $shadow-xs、合并 $shadow-sm → 1

D. 圆角: 收敛

• 主要用 8/12/16,删除 20/24(过圆损失专业感)
• 按钮仍用全圆角($radius-button: 999rpx)

E. 间距: 加 $page-gutter

• 现有 $page-spacing: 32rpx → 改为 $page-gutter: 24rpx(更紧凑、更易扫读)

F. 新增 Z-index 标准化

• 现有 ok,不动

6 页视觉重做

home 首页

• 删除: 顶部 banner 条、三个并列卡片式入口、医生推荐卡
• 改为:
  • 全宽 hero: 医院外景图 + 品牌名 + 一句承诺
  • 3 个入口: divider 分隔的 3 行(不用卡片),左 icon + 标题 + 副文 + 箭头
  • 科室速选: 横向滚动 chip(去卡片)
  • 专家推荐: 1 个真实人物照 + 文案段(无卡)
  • 底部信息采集卡(自测入口): 全宽背景图 + 居中标题 + 1 按钮

hospital 医院详情

• 删除: 顶部图、卡式信息块
• 改为:
  • 医院环境照(全宽,16:9)
  • 医院简介: 段落式,首字下沉
  • 实力数据: 4 列数字 + 标签(无卡,divider 隔开)
  • 科室列表: 折叠面板(可展开),不用卡片
  • 底部固定: 立即预约 CTA

appointment 预约

• 删除: 多步向导里的"步骤卡"
• 改为:
  • 步骤指示器: 4 个圆点 + 连线
  • 单一表单焦点: 当前步骤内容居中,信息密度大
  • 字段: 大输入框(高 96rpx),label 在上方
  • 提交按钮: 底部固定主色渐变按钮(高 96rpx)

phone-consult 电话咨询

• 删除: 9 宫格、卡片式专家列表
• 改为:
  • 顶部 hero: "24h 健康热线" + 大号电话号(可点击拨号)
  • 专家列表: 横向滚动,每个专家是一行(头像 + 姓名 + 简介 + 拨号按钮)
  • 底部说明: 2-3 段文字,无卡

self-test 自测

• 已 Phase 3 改造完成,本阶段只做视觉微调
• 优化: 进度条改用更细的 4rpx,圆角降低
• 题卡从阴影改为分隔线
• 用户信息区改为无阴影背景

success 成功

• 删除: 卡片包裹
• 改为:
  • 顶部 1/3 高度: 大号 ✓ 居中(无背景)
  • 中部信息行: divider 分隔的列表(医院/患者/电话/科室/时间)
  • 底部双按钮: 圆角胶囊,主次分明

实施步骤

1. Task 4.1: 重写 src/styles/theme.scss,新增色阶/排版变量,精简阴影圆角
2. Task 4.2: 同步更新 src/styles/variables.scss 转发关系(避免变量重复定义)
3. Task 4.3: home 页重做
4. Task 4.4: hospital 页重做
5. Task 4.5: appointment 页重做
6. Task 4.6: phone-consult 页重做
7. Task 4.7: self-test 页视觉微调
8. Task 4.8: success 页重做
9. Task 4.9: 部署 + 视觉验证(上传 taro dist 或仅改 SCSS)

设计原则硬约束

• ✅ 严格 1 个主品牌色 + 1 个辅色
• ✅ 卡片只在 card-as-interaction 时使用(如自测题卡、日期选择)
• ✅ 所有 hero 区是全宽,不留左右页边距
• ✅ 标题用 bold,正文用 regular,不混用 medium 太多
• ✅ 留白 ≥ 32rpx(区块之间)
• ✅ 字距: 标题 -0.01em,小标签 0.04em

暂缓(避免范围蔓延)

• 不做 Framer Motion 等大型动效库(小程序不友好)
• 不换字体(用系统字体)
• 不做国际化

风险

• 小程序 SCSS 变量是编译期,改 theme 后需要 npm run build:weapp
• 后端与本次重做无关,只改前端 + theme

验收

• 6 页均可 npm run dev:weapp 编译通过
• 在微信开发者工具中,6 页布局正常,无样式丢失
• 后端 API 调用与 Phase 3 保持一致(无破坏)