DESIGN.md 4.2 KB
Design
由代码现状提取 + 本次 UI 改造目标 token（"保持青绿色调，扁平清新，适度动效"）。改造以本文件为准。
Theme
浅色主题。场景：车主白天户外强光下或夜间车内看手机找桩、看充电进度，需要高可读性与清爽感。青绿作为品牌功能色（空闲状态、主按钮、选中态），不做深色主题。
Color
品牌主色保持不变（青绿系）。策略：Restrained（青绿浅底大面积点缀 + 单一强调色）。
| Token | 值 | 用途 |
|---|---|---|
| --color-primary | #2D9E95 | 主按钮、选中态、空闲状态、金额强调 |
| --color-primary-deep | #23807A | 主按钮按压态 |
| --color-primary-tint | rgba(45,158,149,0.08) | 浅青背景块（替代 #f7f7f7 中性灰块） |
| --color-primary-tint-strong | rgba(45,158,149,0.14) | 选中 chip / 图标底 |
| --color-warning | #FF9900 | 价格、收藏星标（保留） |
| --color-error | #F43636 | 故障、失败（保留现状值） |
| --color-success | #34A46C | 充电完成、退款成功 |
| --text-1 | #1C2B29（青调近黑） | 标题 |
| --text-2 | #5C6B69（青调灰） | 正文次级（替代 #666） |
| --text-3 | #8C9997 | 辅助（替代 #999 / rgba(0,0,0,0.4~0.5)） |
| --divider | rgba(28,43,41,0.06) | 分隔线（替代 rgba(0,0,0,0.1)） |
| --bg-page | #F4F7F6（青调浅灰） | 页面底（替代 #F5F5F5 / #F6F7FA 混用） |
| --bg-card | #FFFFFF | 卡片 |
| --color-sec | #F2F6F5 | 浅色块（原 #f7f7f7 的替代） |
清除游离色：#419D95、#44deba、#076370 → --color-primary 系；#347dff/rgba(52,125,255,0.1)、#ecf3ff、#e0ebff、#1aa4f2 等蓝色 → 青绿对应 tint；#ff6b35 橙色遗留 → 删除（价格用 --color-warning）。
Typography
系统默认字体栈（小程序限制），仅用字号 + 字重构建层级。
- 数字强调（余额/价格）：32-48rpx，fw-600，主色或 --text-1
- 页面标题：36-40rpx fw-600 / --text-1
- 正文：26-28rpx / --text-2
- 辅助说明：22-24rpx / --text-3
- 层级比例 ≥1.25：22 → 28 → 36 → 48
Radius（统一刻度）
- 卡片：20rpx
- 小块/标签：12rpx（替代 4/6/8/10rpx 混用）
- 底部弹层：24rpx 顶部圆角
- 按钮/chips/胶囊：全圆角 pill
- 头像/状态点：circle
Elevation（扁平化关键）
- 列表卡片：无阴影、无边框，靠白卡 + 页面青调灰底对比；可选极淡投影
0 2rpx 8rpx rgba(28,43,41,0.04) - 浮层（底部面板、悬浮球、重定位按钮）：
0 8rpx 24rpx rgba(28,43,41,0.12)单层柔和投影 - 遮罩：rgba(12,24,22,0.45)
- 禁止：双层描边+投影叠加、0.2+ 黑色重投影
Spacing
- 页面水平留白：30rpx；卡片内边距：30rpx；区块间距：24rpx
- 列表项内边距：上下 28rpx，节奏感通过分组留白（32rpx）而非统一 20rpx
Motion
- 曲线：
--ease-out: cubic-bezier(0.22, 1, 0.36, 1)；时长 fast 150ms / base 220ms / slow 280ms - 按压反馈：所有可点卡片/行/chip 按下
scale(0.98)+ 150ms；主按钮按下加深为 --color-primary-deep - 弹层：底部弹层滑入 280ms ease-out + 遮罩淡入；关闭反向
- 页面区块入场：列表卡片 fade-up（translateY(24rpx)→0, opacity 0→1）220ms，可按 index 递进 40ms（≤3 级）
- 充电进行中：外环旋转（保留）+ 内圈呼吸 scale 1→1.04 交替 1.6s；结束时切换为成功态单次 pop（scale 0.92→1）
- 数值变化（电量/费用）：不做逐帧滚动，保持简单
- 尊重系统 reduce-motion：纯装饰动画（呼吸/入场）可整体禁用
Components
- style-button：primary 青绿实底 pill / warning 橙 / default 白底描边；按压 150ms 加深
- charge-station 卡片：白底无描边；价格区用 --color-primary-tint 圆角块；状态 tag 统一 12rpx 圆角浅底；"导航" 主色 pill；按压 scale 反馈
- 底部弹层（style-bottom-view）：白底、顶部 24rpx 圆角、单层柔投影、顶部拖拽指示条（可选）
- tabs：选中项主色 + 下划线滑动过渡
- 空状态：icon + 单行文案，居中，不做插画堆砌
- 搜索框（地图页）：真实胶囊控件（白底/浅青底 + icon + 占位文案），替换背景图贴片