199 lines
13 KiB
Markdown
199 lines
13 KiB
Markdown
# 陪诊小程序 配色规范
|
||
|
||
适用范围：`ui/wxapp_escort/` 全部页面。本文只规定**颜色**；布局、间距、圆角、触控尺寸属界面规范，另行处理。
|
||
|
||
---
|
||
|
||
## 一、总原则
|
||
|
||
**全站只有一个色相**——暖橙，承载品牌、交互、强调。第二色不是新色相，而是**暖墨文字层**（暖偏棕的深灰），只用来拉开层级，不与暖橙争彩。浅橙三档（描边、浅底、深字）都是主色同色阶。状态色只在**表达状态**时出现，不做装饰。
|
||
|
||
判断一个颜色能否用：既不是暖橙同色阶、也不是暖墨、也不是明确状态色的，就不该出现。灰金 `#D4A853`、亮橙 `#FF8500`、青灰、翠绿均为违反项。
|
||
|
||
---
|
||
|
||
## 二、核心色板
|
||
|
||
令牌集中在 `app.wxss` 的 `page{}` 内，是**全站唯一来源——改配色只改这一处**。注入顺序 app.wxss 先、页面 wxss 后，同特异度页面胜出，某页确需例外时可在自己 `page{}` 覆盖同名变量。
|
||
|
||
**四处硬编码走不了变量，改色须一并手改**（逐文件见 §7.3）：`t-icon` 的 `color`、`app.json` 的 `tabBar.selectedColor`、首页 base64 线图标的 `stroke`、着色的位图（`images/home-ink.png`）。
|
||
|
||
迁移进度：`home/index`、`escort/itemlist` 两页副本已删；`itemdetail`、`attendantlist`、`guide`、`mine/contact` 四页仍各带副本（停在旧值 `#C2410C`），待重构时按同一方式删。
|
||
|
||
### 2.1 第一色：暖橙色阶
|
||
|
||
主色于 2026-10-04 由 `#C2410C`（H18°）折中右移到下表值（H25°）。沿革与回滚见 §七。
|
||
|
||
| 令牌 | 色值 | 用途 | 对比度 |
|
||
|---|---|---|---|
|
||
| `--brand-strong` | `#B8520A` | 主按钮、价格数字、选中态、实心强调块 | 纸面 4.66:1，白卡 4.94:1；白字压其上 4.94:1 |
|
||
| `--brand-ink` | `#9B4508` | 标签文字、文字链、暖色小标题、图标 | 浅橙底 5.96:1，纸面 6.10:1，白卡 6.46:1 |
|
||
| `--brand-line` | `#FFE0C2` | 浅橙块描边、浅橙档的状态描边 | 仅做描边 |
|
||
| `--brand-soft` | `#FFF4E8` | 浅橙底：说明砖、图标衬底、按钮按下态 | 仅做底 |
|
||
|
||
用法边界：
|
||
|
||
- `--brand-strong` 是唯一可当"实心大色块"的值；全页同类实心块不超过一处。
|
||
- `--brand-soft` 只能当底，不能当文字色或描边色。
|
||
- 浅橙底上的文字一律走 `--brand-ink`（`--brand-strong` 落其上仅 4.56:1，余量小）。
|
||
- 例外（已登记）：`escort/itemlist` 价格数字改走 `--muted` + 字重 500，让「预约」空心胶囊独占焦点；同页价格列只用这一个色值、一种字重。
|
||
- 例外（已登记）：`escort/itemlist`「预约」按钮走**空心胶囊**——3rpx `--brand-strong` 环 + 28rpx 满圆角 + `--brand-ink` 字 30rpx/500，无填充无阴影，按下填 `--brand-line`。同行规格签已是"浅橙底 + 6rpx 圆角"，按钮若同族会与之撞形；**同一行只允许一个填充物**，按钮独占"环"形态。该页因此无实心大色块。
|
||
|
||
### 2.2 第二色：暖墨文字层
|
||
|
||
| 令牌 | 色值 | 用途 | 对比度 |
|
||
|---|---|---|---|
|
||
| `--ink` | `#2B2521` | 标题、需最重的正文 | 纸面 14.26:1 |
|
||
| `--ink-2` | `#4A4038` | 正文 | 纸面 9.52:1 |
|
||
| `--muted` | `#6F655C` | 次要文字、元信息、说明、未选中态 | 纸面 5.37:1，白卡 5.69:1，浅橙底 5.24:1 |
|
||
|
||
用法边界：
|
||
|
||
- 三档只表示文字层级，不表示状态或可点击性。
|
||
- `--muted` 是最浅一档，不得再浅——它是全站文字对比度底线。历史值 `#7A7068`（纸面 4.56:1，压线无余量）已废弃，硬编码需全部替换。
|
||
- `t-icon` 的 `color` 读不到 CSS 变量，只能硬编码，且必须与令牌同步（当前为 `#9B4508`、`#6F655C`、`#B8520A` 三者之一）。
|
||
|
||
### 2.3 底与线
|
||
|
||
| 令牌 | 色值 | 用途 |
|
||
|---|---|---|
|
||
| `--white` | `#FFFFFF` | 卡片、面板 |
|
||
| `--paper` | `#FAF8F5` | 页面底色（暖白纸面） |
|
||
| `--line` | `#ECE3D6` | 发丝线：卡片内部分隔、区块切分 |
|
||
| `--sep` | `#E5DACC` | 分隔线：竖线、浅橙底上的线 |
|
||
|
||
用法边界：
|
||
|
||
- 线是切分工具，不表意，不上主色或状态色。浅橙底上必须用 `--sep`（`--brand-line` 落 `--brand-soft` 上仅 1.16:1，肉眼看不出）。
|
||
- `--paper` 与 `--brand-soft` 明度差仅约 1.03:1，浅橙块落纸面须靠 **2rpx `--brand-line` 描边**托形，不加阴影。
|
||
- **白卡一律走中性阴影** `--shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07)`，圆角 28rpx。彩色（暖橙）阴影不得用在 `--white` 面上；它只允许用于实心 CTA、品牌印记等小体量元素（`--shadow-cta: 0 2rpx 8rpx rgba(184, 82, 10, 0.16)`）。
|
||
- 例外（已登记）：`escort/itemlist` 三个服务分组做成**通栏白底块**——`--white` + 上下各 2rpx `--line` + `--shadow-card`，**圆角 0**；做法 `margin: 36rpx -32rpx 0` + `padding: 28rpx 32rpx`，行宽仍为 686rpx（若内缩，最长名称「VIP 5次 半天陪诊」会折行）。圆角必须为 0，否则满宽块的圆角会切在屏幕边上。页首 `.notice` 仍是内缩 28rpx 圆角白卡。
|
||
- 例外（已登记）：`escort/itemlist` 页脚做**浅橙收口卡**（`--brand-soft` + 2rpx `--brand-line` + 28rpx 圆角 + 去阴影），与首页 `.quick-item-full` 同源，补回该页"暖色只剩线、没有面"的那一档。
|
||
|
||
---
|
||
|
||
## 三、状态色
|
||
|
||
状态色只用于订单、记录这类**有明确状态字段**处，同页同类状态只允许一种颜色。
|
||
|
||
| 状态 | 底色 | 描边 | 字色 | 对比度 |
|
||
|---|---|---|---|---|
|
||
| 待服务 | `#ECF7F4` | `#C7E5DF` | `#0F766E` | 5.00:1 |
|
||
| 服务中 | `#FFF4E8` | `#FFE0C2` | `#B8520A` | 4.56:1 |
|
||
| 已完成 | `#EAF6EE` | `#CDE9D7` | `#1F7A4D` | 4.79:1 |
|
||
| 已取消 | `#FCF0EE` | `#F2D6D1` | `#B4231A` | 5.89:1 |
|
||
|
||
用法边界：
|
||
|
||
- **不得仅用颜色传达状态**（WCAG 1.4.1）：状态胶囊必须带文字，颜色只做强化。
|
||
- 青绿（待服务）是全站唯一冷色，只给"等你去处理"这一个语义。
|
||
- 服务中复用主色浅档，字色跟随该页 `--brand-strong`（已迁移页 `#B8520A`，未迁移页 `#C2410C`）。
|
||
- 状态色不得用于区块标题、图标衬底、按钮、装饰条，只包住状态文字本身。
|
||
- 表单错误复用已取消档（`#B4231A` 字 + `#FCF0EE` 底），错误必须带文字。
|
||
- 禁用态不用暖橙：`--muted` 字 + `--sep` 描边 + 透明底。
|
||
|
||
---
|
||
|
||
## 四、硬约束（可验证）
|
||
|
||
1. 所有文字对底色对比度 ≥ WCAG AA 4.5:1；中文最小字号不低于 24rpx（12px）。
|
||
2. 图标对衬底对比度 ≥ WCAG 非文本 3:1。
|
||
3. 不得新增色相；需区分时先改结构（分组、留白、换线），不要加颜色。
|
||
4. 不得使用渐变色。
|
||
5. 卡片、面板、说明砖的填充必须中性（`--white` / `--paper` / `--brand-soft`）。
|
||
6. 暖橙以外的暖色（灰金、亮橙）不得出现。
|
||
7. 同页同一含义只能对应一个色值。
|
||
8. 不得仅用颜色传达信息（WCAG 1.4.1）。
|
||
|
||
---
|
||
|
||
## 五、历史遗留收口清单
|
||
|
||
以下为当前与规范冲突的位置，**本文档阶段不执行**，仅登记供后续代码阶段按表替换。
|
||
|
||
### 5.1 页面级
|
||
|
||
| 范围 | 现状 | 替换为 |
|
||
|---|---|---|
|
||
| `mine/about.wxss` | `#D4A853`、`#FF8500`、`#22A45D` | `--brand-strong` / `--brand-ink` |
|
||
| `mine/comp_address.wxml`（`switch` 属性） | 旧金色 | `#B8520A`（属性值需硬编码） |
|
||
| `health/profilelist.js`（`confirmColor`） | 旧金色 | `#B8520A` |
|
||
| `health/profilelist.wxss`、`profileedit.wxss` | `#D4A853` 系 | 暖橙令牌 |
|
||
| `escort/recordlist.wxss` | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
|
||
| `escort/recorddetail.wxss`（12 处） | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
|
||
| `escort/agreement.wxss` | 底 `#FAF6F1`、`#D4A853` 系 | `--paper` / `--brand-soft` / 暖橙令牌 |
|
||
| `hospital/contact.wxss`、`hospital/ranking.wxss` | 底 `#F5F7F6`、字 `#1F2937`、绿灰系 | 整体并入暖橙体系 |
|
||
|
||
已完成（2026-10-04）：`mine/mine.wxss`、`pages/ai/aichat.wxss` 已按本节并入暖橙体系。
|
||
|
||
### 5.2 系统级（不在页面里，最易漏）
|
||
|
||
| 位置 | 现状 | 应改为 |
|
||
|---|---|---|
|
||
| `app.json` tabBar 选中图标 | `home-green.png` / `ai-green.png` / `mine-green.png`（绿色图片） | 暖橙 `#B8520A` 版本，与 `selectedColor` 一致 |
|
||
| `app.json` tabBar `color` | `#999999` | `--muted` 等价色 `#6F655C` |
|
||
| `app.wxss` 全局变量 | `--td-brand-color-1..10` 整套翠绿（基准 `#22A45D`）、`--c-ink #1c1917` | 已确认业务页面零引用，是死代码，可整体重写或删除 |
|
||
| `custom-tab-bar/index.wxss`、`index.js` | 未选中色硬编码 `#7A7068` | `#6F655C` |
|
||
|
||
### 5.3 通用色值映射表
|
||
|
||
| 旧值 | 新值 | 说明 |
|
||
|---|---|---|
|
||
| `#D4A853` | `#9B4508` 或 `#B8520A` | 灰金转暖橙，按"文字/图标"或"实心"分 |
|
||
| `#FF8500` | `#B8520A` | 亮橙转主色 |
|
||
| `#FF9B33` / `#FF7A33` | `#B8520A` + `#FFF4E8` | 去渐变，拆成字色与底色 |
|
||
| `#22A45D` / `#6B8E7B` / `#2D6A4F` / `#4CAF50` / `#45A049` | `#B8520A`；语义为"已完成"则 `#1F7A4D` | 绿系转暖橙，仅状态语义保留绿 |
|
||
| `#FAF6F1` / `#F5F7F6` / `#F5F5F5` | `#FAF8F5` 或 `#FFFFFF` | 旧底转纸面或卡片 |
|
||
| `#F3F4F6` / `#EEEEEE` / `#E5E5E5` / `#E5E7EB` | `#ECE3D6`（浅橙底上用 `#E5DACC`） | 冷灰线转暖线 |
|
||
| `#1F2937` / `#333333` | `#2B2521` | 冷黑转暖墨 |
|
||
| `#6B7280` / `#9CA3AF` / `#999999` / `#7A7068` | `#6F655C` | 各版"次要灰"统一 |
|
||
|
||
---
|
||
|
||
## 六、一句话检验
|
||
|
||
1. 页面去色（灰度化）后层级还清楚吗？去掉颜色就散架 = 在用颜色凑层级。
|
||
2. 数一下色相：超过"暖橙 + 暖墨 + 至多一个状态色"就有问题。
|
||
3. 最浅的那行字是 `--muted` 或更深吗？比它更浅的要拉回来。
|
||
|
||
---
|
||
|
||
## 七、主题色沿革与回滚
|
||
|
||
主色做过一次色相右移。照 §7.3 倒着改即可整体回滚。
|
||
|
||
### 7.1 三套值
|
||
|
||
| 版本 | `--brand-strong` | HSL | `--brand-ink` | HSL | 状态 |
|
||
|---|---|---|---|---|---|
|
||
| **现行** | `#B8520A` | H25° · S90% · L38% | `#9B4508` | H25° · S90% · L32% | 首页、`escort/itemlist`、自定义 tabBar 已落地 |
|
||
| **之前** | `#C2410C` | H18° · S88% · L40% | `#9A3412` | H15° · S79% · L34% | 其余页面仍是此值 |
|
||
| 已否候选 | `#A85A00` | H32° · S100% · L33% | — | — | 为凑白字 AA 把明度压到 33% 致画面发闷，仅登记 |
|
||
|
||
`--brand-soft #FFF4E8`、`--brand-line #FFE0C2` 全程未动，回滚无需处理。
|
||
|
||
### 7.2 为什么离开旧值
|
||
|
||
旧值 `#C2410C`（H18° 偏红、饱和偏高）大面积铺开会读成"锈橙 ≈ 干血"，与就医语境不合。折中右移到 H25°，明度只让 40%→38%、饱和 88%→90%，保住"眼前一亮"的抓力。若日后仍嫌血色，**正解是收缩橙色面积，不是继续调暗**。
|
||
|
||
### 7.3 回滚清单
|
||
|
||
回滚或再改主色只需改第 1 行（`app.wxss`）；其余 10 处是 CSS 变量读不到的地方（`t-icon` color、base64 stroke、位图、`app.json`、自绘阴影），须一并手改。`--brand-soft` / `--brand-line` 未变，不在表内。
|
||
|
||
| # | 文件 | 位置 | 现行 | 回滚为 |
|
||
|---|---|---|---|---|
|
||
| 1 | `app.wxss` | `page{}` 内 `--brand-strong` / `--brand-ink`（全站唯一来源） | `#B8520A` / `#9B4508` | `#C2410C` / `#9A3412` |
|
||
| 2 | `app.wxss` | `page{}` 内 `--shadow-cta` | `rgba(184, 82, 10, 0.16)` | `rgba(194, 65, 12, 0.16)` |
|
||
| 3 | `pages/home/index.wxss` | `.brand-mark` 的 `box-shadow` | `rgba(184, 82, 10, 0.16)` | `rgba(194, 65, 12, 0.16)` |
|
||
| 4 | `pages/home/index.wxss` | 8 个 base64 线图标的 `stroke` | `#B8520A` | `#C2410C` |
|
||
| 5 | `pages/home/index.wxml` | 第 119 行 `t-icon` 的 `color` | `#9B4508` | `#9A3412` |
|
||
| 6 | `pages/escort/itemlist.wxml` | 第 25 / 30 / 96 行 `t-icon` 的 `color` | `#9B4508` | `#9A3412` |
|
||
| 7 | `custom-tab-bar/index.js` | 第 8 行 `activeColor` | `#B8520A` | `#C2410C` |
|
||
| 8 | `custom-tab-bar/index.wxss` | 第 39 行 `.tab-item.is-active .tab-text` | `#B8520A` | `#C2410C` |
|
||
| 9 | `app.json` | 第 30 行 `tabBar.selectedColor` | `#B8520A` | `#C2410C` |
|
||
| 10 | `images/ai-ink.png` | 整图纯色（AI客服选中态位图） | `#9B4508` | `#8A4B08`（位图需重上色，不能按文本替换） |
|
||
| 11 | `images/home-ink.png` | 整图纯色（「我的」默认头像位图，由灰色 `home.png` 重上色） | `#9B4508` | `#8A4B08`（同上） |
|
||
|
||
**无需回滚**：其余页面从未迁移。仍定义旧值 `#C2410C` / `#9A3412` 的是 `itemdetail`、`attendantlist`、`guide`、`mine/contact` 四页八文件（各含 `.wxss` 令牌与 `.wxml` 里 `t-icon` 硬编码），本就是回滚后的目标态；`agreement`、`recordlist`、`recorddetail`、`mine/*` 等页走更早的金色体系（`#D4A853`），见 §5.1。
|
||
|
||
注：`custom-tab-bar` 未选中灰硬编码 `#7A7068` 是独立历史遗留项（应改 `#6F655C`，见 §5.2），与本次主色调整无关。 |