审批进度 Tag 配色 Demo

对比「现状」与 3 套方案。目标:状态语义清晰、会签/或签/抄送不与「待处理」琥珀撞色、 整体对齐三墙 Token(品牌绿 / 大麦黄 / 语义色),避免同屏高饱和堆叠。

设计约束
  • 状态 tag:成功绿 / 待办琥珀 / 危险红 / 中性灰(语义优先)
  • 类型 tag:会签 / 或签 / 抄送 / 结束 — 与状态区分,避免「或签」与「待处理」同色
  • 同一节点可同时出现「状态 + 类型」两枚 tag

现状 NOW

会签蓝偏艳;或签与待处理同系琥珀;成功色偏 web-admin mint(#10b981)

审批进度
发起申请 已提交
张三03-12 09:20
部门审批 已同意 会签
李四 · 王五03-12 14:01
分管领导 待处理 或签
赵六 / 钱七—
相关知会 未到达 抄送
流程结束 已结束 结束

全量色板

已同意 已完成 已提交 待处理 进行中 已拒绝 已撤销 已打回 已结束 未到达 已转交 会签 或签 抄送 结束
问题:或签 ≈ 待处理 同屏难辨;会签蓝过亮;与三墙主色链不完全一致。

方案 A · 浅底实心 ALT

状态对齐三墙语义色;类型用「靛蓝 / 青蓝 / 淡紫」拉开色相,全部浅底实心

审批进度
发起申请 已提交
张三03-12 09:20
部门审批 已同意 会签
李四 · 王五03-12 14:01
分管领导 待处理 或签
赵六 / 钱七—
相关知会 未到达 抄送
流程结束 已结束 结束

全量色板

已同意 已完成 已提交 待处理 进行中 已拒绝 已撤销 已打回 已结束 未到达 已转交 会签 或签 抄送 结束
优点:实现简单、与现状结构一致。注意:类型仍是实心,同排两枚 tag 略抢眼。

方案 B · 状态实心 / 类型描边 推荐

状态保留浅底语义;类型改为白底描边,一眼区分「结果态」与「节点属性」

审批进度
发起申请 已提交
张三03-12 09:20
部门审批 已同意 会签
李四 · 王五03-12 14:01
分管领导 待处理 或签
赵六 / 钱七—
相关知会 未到达 抄送
流程结束 已结束 结束

全量色板

已同意 已完成 已提交 待处理 进行中 已拒绝 已撤销 已打回 已结束 未到达 已转交 会签 或签 抄送 结束
推荐理由:状态更抢眼、类型更克制;「待处理 + 或签」同排不再撞色糊成一团。

方案 C · 低饱和克制 ALT

类型几乎中性灰描边,仅状态保留语义色;最克制,但会签/或签/抄送辨识变弱

审批进度
发起申请 已提交
张三03-12 09:20
部门审批 已同意 会签
李四 · 王五03-12 14:01
分管领导 待处理 或签
赵六 / 钱七—
相关知会 未到达 抄送
流程结束 已结束 结束

全量色板

已同意 已完成 已提交 待处理 进行中 已拒绝 已撤销 已打回 已结束 未到达 已转交 会签 或签 抄送 结束
适合极简审美;代价是类型 tag 几乎靠文字区分,色相辨识弱。

方案 B 色值明细(推荐落地稿)

状态 = 浅底实心;类型 = 白底 + 1px 描边。字号 11px / 圆角 4px / padding 1×6,与现状结构一致。

类别 文案 class 文字色 背景 边框
状态已同意 / 已完成 / 已提交ok #087f57#e9f9f2—
状态待处理 / 进行中warn #a66b10#fff7e8—
状态已拒绝 / 已撤销 / 已打回danger #b42318#fef3f2—
状态未到达 / 已转交 / 已结束mute #5f7a6d#f1f5f3—
类型会签and #3730a3#fff#c7d2fe
类型或签or #0e7490#fff#a5f3fc
类型抄送cc #6d28d9#fff#ddd6fe
类型结束end #64748b#fff#e2e8f0
选一套方案继续细化:

直接回复「选 B」或点按钮即可。也可说「A + 会签改成某某色」微调。