U4.06.3Semantic and categorical colour need separate territories in one interface设计

同一界面中语义色与分类色需划定各自的使用范围

别名: 色彩治理 · 色彩分区

概念解释

一个产品里同时存在两套颜色系统:语义色负责状态与动作(红黄绿、成功/警告/失败),数据色板负责量值与类别。两套系统如果不划边界,同一页面上同一种颜色会承担两种含义——红色既是"失败"又是"华东区",读者无法知道眼前这个红该按哪套读。划界不是不让两套颜色共存,而是规定每种色相的"户籍":它被允许出现在哪里、承担什么。

机制

颜色含义的解读是语境驱动的,而读者无法在每次扫视时重建语境:同一屏上仪表盘状态灯的绿与图表里类别三的绿,在 100 毫秒的注视里不经过图例就会被关联起来。划界的本质是消除"跨系统撞色"——语义色被限制在组件层(状态点、告警条、按钮),数据色板被限制在图表层,两者色相集合不相交或仅在数据语义同向时相交。边界明确了,语境就不需要读者自己重建:看到红黄绿就想状态,看到图表色板就想量值,两套通路互不串扰。

边界

划界的成本是色相预算变紧:语义色占用红绿黄蓝后,数据色板可用的色相变少,类别多时会更早触到可辨上限——这是用可选色换解读确定性,值得但有限度。完全不相交有时做不到(品牌色同时出现在两侧、状态色必须进图表标注),此时的妥协是允许"同色相、异明度"而不是"同色同明度",并用位置与形态辅助区分。划界规则需要写成文档并进设计走查,否则每次新增图表都会重新侵蚀边界。

怎么落地

  • 建立色彩户籍表:列出语义色的全部色值与允许出现的位置,数据色板的全部色值与允许出现的组件类型,两张表都不许越界。
  • 新增图表组件时对照户籍表审色:撞色即换色或调明度,并在表里记录例外及理由。
  • 验证:截取同一界面上的状态区与图表区,把两者的颜色清单并排对比;出现同色值且含义不同的对子即违规,逐个整改。

延伸

  • 同组U4.06.1 语义色会覆盖色板本身的中性含义 · U4.06.2 语义色的方向随文化与行业改变,涨跌配色即为一例 · U4.06.4 品牌色直接进入数据色板会破坏感知均匀性 · U4.06.5 语义色需与文字标签同时出现才能被单独判定
  • 相邻U4.01.2 类别过多时应分组或聚合 · U4.05.5 替代方案需在设计阶段验证,不能等到反馈后补救
  • 站内检索colour governance · semantic colour scope · design system colour

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U4.06.3