xJourney/wxapp_escort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dev
wxapp_escort/doc/DESIGN.md
T
lik 031227710d 修改了样式
2026-10-18 22:14:49 +08:00

21 KiB
Raw Permalink Blame History

陪诊小程序 配色规范

适用范围：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）。

t-icon 的 name 必须命中 tdesign 图标名表（miniprogram_npm/tdesign-miniprogram/icon/icon.wxss 里的 .t-icon-{name}），写错不报错、只是渲染为空：list 并不存在（只有 list-numbered、list-bug 等），info-circle、error-circle、user-business、chart-bar 等均存在。

迁移进度：home/index、escort/itemlist、escort/guide、attendant/* 副本已删；itemdetail、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 浅橙块描边、浅橙档的状态描边；itemlist 预约按钮软填充（§2.1 例外已登记） 仅做描边；按钮填充见例外
--brand-soft #FFF4E8 浅橙底：说明砖、图标衬底、按钮按下态 仅做底

用法边界：

  • --brand-strong 是唯一可当"实心大色块"的值；全页同类实心块不超过一处。
  • --brand-soft 只能当底，不能当文字色或描边色。
  • 浅橙底上的文字一律走 --brand-ink（--brand-strong 落其上仅 4.56:1，余量小）。
  • 备注（2026-10-18）：escort/itemlist 价格数字走回默认 --brand-strong + 字重 500（本表「价格数字」用途原位，白卡 4.94:1），同页价格列只用这一个色值、一种字重；其间短暂用过 --ink-2，已回退，不再是例外。
  • 例外（已登记，2026-10-18 修订）：escort/itemlist「预约」按钮走软填充胶囊——3rpx --brand-strong 环 + --brand-line 填充 + 28rpx 满圆角 + --brand-ink 字 30rpx/500，按下整粒 opacity .85。沿革：原为空心胶囊（按下才填 --brand-line），规格签删底后"撞形"根因消失，改常填。环不可撤——--brand-line 填充落白卡仅约 1.1:1，非文本 3:1 由环承担（4.94:1）。同一行只允许一个填充物仍成立（规格签已是纯文字）。

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)）。
  • 例外（已登记，2026-10-18 修订）：escort/itemlist 服务分组改为组头落纸面 + 每项一张白卡——项卡 --white + 2rpx --line + 24rpx 圆角 + --shadow-card、内距 28rpx、卡间距 20rpx（相邻选择器给出）；原"通栏白底块（圆角 0）+ 虚线行"撤销——白带与项卡会叠成两层底。行宽由 686rpx 降至约 626rpx。组头副题说明砖走浅橙面配方：--brand-soft 填充 + 2rpx --brand-line 描边 + 14rpx 圆角（§四.5 说明砖填充必须中性，--brand-line 仅作描边；落纸面靠描边托形）。页首 .notice 由白卡降为纸面一行「圆点 + 26rpx --ink-2 小字」，费用披露不降 --muted。
  • 例外（已登记）：escort/itemlist 的人工客服旁路卡做浅橙面（--brand-soft + 2rpx --brand-line + 28rpx 圆角 + 去阴影），与首页 .quick-item-full 同源，补回该页"暖色只剩线、没有面"的那一档。位置在清单之后、文档行之前（沿革：页尾"收口卡"→页首清单上方→2026-10-18 下沉回清单之后——旁路属兜底，压在清单前会把不打算自助的用户先引走，也白占首屏）：文案走本页"情形 + 动作"两段式（muted「不想线上预约？」+ 暖橙链「直接联系人工客服」）。页尾不设卡，改由一行文档级元信息收尾——细竖线分隔的「服务指南 │ 用户协议」（从页首披露卡下移，不加卡、不加 chevron，文字链自身即点击暗示）；披露卡因此退回纯声明，只留城市与费用披露。
  • 例外（已登记）：mine/about 的「联系我们」做成浅橙入口卡（--brand-soft + 2rpx --brand-line + 28rpx 圆角 + 去阴影，同首页 .quick-item-full 配方），是该页尾部唯一的暖色面。卡内不再平铺联系方式——热线/微信/邮箱/工作时间四项与 mine/contact 页逐项重合，平铺即"同一意图两个入口"；只留「联系我们」+ 一行摘要（「人工客服」，与首页同卡同文案）+ muted chevron，整卡可点跳 mine/contact。另注：该页品牌印记（home-w.png 白色线稿）必须落 --brand-strong 实心底，不能用 --brand-soft，白色线稿在浅橙底上看不见。
  • 例外（已登记）：mine/mine 的菜单与「退出登录」做成通栏白底块（--white + 上下各 2rpx --line + --shadow-card，圆角 0）。其中「退出登录」是动作而非导航，与菜单行不同族：单独一块、一行居中、无图标无 chevron、字色 --muted。状态色不得用于按钮（§三），退出因此不走红/橙，区分只靠结构与位置。

三、状态色

状态色只用于订单、记录这类有明确状态字段处，同页同类状态只允许一种颜色。

状态 底色 描边 字色 对比度
待服务 #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/addressedit.wxml（switch 属性） 旧金色 #B8520A（属性值需硬编码）
hospital/contact.wxss、hospital/ranking.wxss 底 #F5F7F6、字 #1F2937、绿灰系 整体并入暖橙体系

已完成（2026-10-06）：health/profilelist、health/profileedit 已按本节并入暖橙体系——两页 .wxss 的旧金色 #D4A853 连同冷灰文字 #1F2937/#374151/#6B7280/#9CA3AF、冷灰线 #F3F4F6、旧底 #FAF6F1/#FDF8EE 一并换成暖橙令牌与暖墨阶。列表页改「浅橙说明砖 + 通栏白块」，每条主体整块可点进编辑（补 chevron 点击暗示，删除动作下沉到卡内操作行、走 --muted），空态与「邮寄地址」同语言（--faint 图标 + --muted 说明）；表单页改通栏白块，标签左走 --muted、值右走 --ink 700，性别选中态用软橙底 + 实心橙描边，健康备注独立一块。两页 page{} 均不留令牌副本；profilelist.js 的 confirmColor 硬编码改 #B8520A，profilelist.json 补注册既已使用的 t-loading（原只在 .wxml 里引用、未注册，渲染为空）。

已完成（2026-10-06）：escort/guide 已按本节并入暖橙体系——.wxss 里的 page 级令牌副本（停在旧值 #C2410C / #9A3412）整块删除，改用 app.wxss 唯一来源；.wxml 四处 t-icon 硬编码随之改值（三个卡片头图标 #FFFFFF→#9B4508、底部客服 call #9A3412→#9B4508）。同页三处收口：卡片头标识由「实心橙方块 + 白图标」改「--brand-soft + 2rpx --brand-line 描边 + 暖橙图标」，实心块只留底部 CTA 一处（§2.1）；CTA 阴影由 0 6rpx 16rpx rgba(194,65,12,.22) 收为 --shadow-cta；三处 font-weight: 600 改 700（中文系统字体只有 400/700 两档）。内容同步：服务流程与 services.js 各服务的 flow 对齐（预约 → 沟通信息 → 支付费用 → 准备资料 → 全程陪诊 → 服务完成），删去不在任何 flow 里的「选择陪诊师」；温馨提示的改期句统一为「如需改期或取消，请至少提前4小时联系客服」。

已完成（2026-10-06）：escort/agreement.wxss 已按本节并入暖橙体系——底 #FAF6F1 转 --paper，顶部白→暖白渐变去掉（直接落纸面），#D4A853 系连三处同色渐变与同色大阴影一并换掉：文件图标衬底转 --brand-strong + --shadow-cta（白色图标需深底），章节序号转「--brand-soft 衬底 + 2rpx --brand-line 描边 + --brand-ink 字」（全页实心块只留顶部一个），圆点转 --brand-strong；冷灰文字 #1F2937/#4B5563/#6B7280 转 --ink/--ink-2/--muted，冷线 #F0E6D8/#E5E7EB 转 --line/--sep（浅橙底上用 --sep）；正文块改通栏白底块（上下 2rpx --line + 圆角 0 + --shadow-card）。违约金表表头不再铺色（--brand-line 只作描边）。另删 7 条死规则 flow-steps/flow-step/step-badge/step-info/step-title/step-desc/step-line——WXML 无任何引用。

已完成（2026-10-04）：escort/recordlist、escort/recorddetail 已按本节并入暖橙体系——两页删去旧金色副本与全部渐变，状态一律走 §三 四档；recorddetail 另在 page{ } 登记 --shadow-bar（底栏上向阴影，不在全局色板内）。两页 json 原本 usingComponents 为空却已用 t-icon/t-loading，一并补注册。

已完成（2026-10-06）：mine/about.wxss 已按本节并入暖橙体系——灰金 #D4A853、亮橙 #FF8500、冷灰底 #F5F5F5、品牌区与印记的两处渐变、6×28rpx 的渐变竖条全部换掉：底色转 --paper，印记转 --brand-strong + --shadow-cta（白色线稿需深底），竖条转 8×34rpx 实色 --brand-strong。同页两处违规一并修正：.icp 由 22rpx 提到 24rpx（硬约束 1 最小字号），元信息与标签统一 --muted、正文统一 --ink-2。死代码 .version（页面已无版本号展示）删除。白卡按 §2.3 补 2rpx --line 发丝边 + --shadow-card + 28rpx 圆角。同页「联系我们」由平铺的四项联系方式收成一张入口卡（配方见 §2.3 例外）——那四项与 mine/contact 逐项重合，平铺属"同一意图两个入口"，且该页每行还少一个「拨打/复制」动作词。

已完成（2026-10-06）：escort/attendantlist 4 文件迁至 attendant/attendantlist，同目录新增 attendant/attendantdetail（4 文件），两页一并并入暖橙体系——attendantlist.wxss 的 page 级令牌副本（停在旧值 #C2410C / #9A3412）整块删除，改用 app.wxss 唯一来源，page{} 只留 background-color: var(--paper)（同 guide）；.wxml 的 t-icon 硬编码 #9A3412→#9B4508，两处竖分隔线 #E5DACC→--sep。结构：列表卡右侧补 chevron-right（#6F655C）作点击暗示，整卡可点进详情；详情页按国标 4.2.1.5 分区——主卡（头像 / 脱敏名 / 已核验徽标 / 服务年限 · 累计服务次数，居中）+ 擅长场景（全量，不截断）+ 服务信息（性别 / 服务区域 / 服务语言，空项整行隐藏）+ 个人简介（未填整块隐藏），全页无实心色块、不新增色相，说明行仍是「公示信息，不含联系方式」。入口仍在首页介绍卡信任行（goToAttendants），app.json 两条路由同步改路径。同日按国标 4.2.1.5 补全公示项：详情页加「资质与培训」（健康证明有效期 + 培训记录）与「过往服务评价」两个分区，两区均无数据时整块隐藏；区块内条目用 --line 发丝线分隔，评分用 48rpx --ink 大字 + --muted 小数（/ 5）与条数，无实心色块。

已完成（2026-10-18）：health/profilelist 卡片重构为「身份牌」结构——首字牌 + 姓名/性别签 + 竖线分隔元信息行（空值整项剔除，不留「未填写」）+ 备注单行省略，与 recorddetail 就诊人卡同语言。删除动作由「卡内操作行」改为右上角安静图标（catchtap 防冒泡、确认弹窗兜底）：孤行删除撑不满一行、反而拉高卡片；上文「删除动作下沉到卡内操作行」的描述就此被替代。

已完成（2026-10-18）：escort/itemlist 版式重排并同步本档——结构由「通栏白底章节带」改「组头落纸面 + 每项一张白卡」，虚线行与章线撤销；.notice 降为纸面披露行，客服旁路卡下沉到清单之后（§2.3 两条例外同步修订）；价格 --muted→--brand-strong（回到「价格数字」默认用途）、「预约」改软填充胶囊（§2.1 按钮例外同步修订）；组头副题说明砖按 §四.5 走 --brand-soft 填充 + --brand-line 描边；规格签删底（--brand-soft 落白卡仅 1.08:1 形同虚设），仅时长服务保留签，「按次」删；按钮补透明热区（::after 外扩 6rpx，触控 56→68rpx）。全页仍单色相、无新色。

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 第 82 行 t-icon 的 color（客服卡 chevron，全页唯一一处） #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、mine/contact 两页四文件（各含 .wxss 令牌与 .wxml 里 t-icon 硬编码），本就是回滚后的目标态（guide 已于 2026-10-06 迁移，attendant/* 于同日迁移并新增详情页，见 §5.1）；agreement、recordlist、recorddetail、mine/* 等页走更早的金色体系（#D4A853），见 §5.1。

注：custom-tab-bar 未选中灰硬编码 #7A7068 是独立历史遗留项（应改 #6F655C，见 §5.2），与本次主色调整无关。

Reference in New Issue View Git Blame Copy Permalink