155 lines
6.1 KiB
Markdown
155 lines
6.1 KiB
Markdown
# 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 保持一致(无破坏)
|