建立语义色命名图解:名称说明职责;保留数值与别名;记录禁止用途。
阅读口径

适合个人设计稿和小型网页;命名规模应与项目复杂度相称。

分清颜色与用途

“深蓝”描述外观,“正文主色”描述用途。同一个颜色值可以支撑多个语义角色,但这些角色未来可能分开修改。记录时同时保留基础色值和使用别名,就不必凭外观猜测每处为什么用了它。

让名称回答使用问题

可采用 text-primary、surface-page、border-control 等角色名称。名称应说明作用,不要写成好看蓝或高级灰。若只有三个页面,也无需创建几十级色阶;先覆盖当前确实出现的角色。

原创练习:两种蓝色误用

练习文件中“蓝色一”同时用于标题和按钮底。后来按钮要加深,直接替换导致标题也改变。改为 text-heading 和 action-bg 两个别名后,可以在保持初始色值一致的同时,独立讨论不同用途。

可执行检查单

  1. 01整理页面实际使用的颜色,标注出现位置。
  2. 02为正文、背景、行动和边界建立清楚的用途名称。
  3. 03改动一个用途并检查所有受影响位置,记录不应一起变化的角色。

一个常见问题

同一色值有两个名称算重复吗?

如果名称代表不同职责,就可能有意义;如果只是同一职责被不同人随意命名,就应合并。判断依据是未来是否需要独立调整,而不是色值是否相同。

留下禁止用途

例如标明强调色不用于白底小字号正文。这样的限制比只列允许用途更能减少误用,也使后续扩展知道何时必须重做检查。