# 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](file:///Users/skn/Desktop/yuyueguahao/src/styles/theme.scss),新增色阶/排版变量,精简阴影圆角
2. **Task 4.2**: 同步更新 [src/styles/variables.scss](file:///Users/skn/Desktop/yuyueguahao/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 保持一致(无破坏)