阅读口径
适合个人设计稿和小型网页;命名规模应与项目复杂度相称。
分清颜色与用途
“深蓝”描述外观,“正文主色”描述用途。同一个颜色值可以支撑多个语义角色,但这些角色未来可能分开修改。记录时同时保留基础色值和使用别名,就不必凭外观猜测每处为什么用了它。
让名称回答使用问题
可采用 text-primary、surface-page、border-control 等角色名称。名称应说明作用,不要写成好看蓝或高级灰。若只有三个页面,也无需创建几十级色阶;先覆盖当前确实出现的角色。
原创练习:两种蓝色误用
练习文件中“蓝色一”同时用于标题和按钮底。后来按钮要加深,直接替换导致标题也改变。改为 text-heading 和 action-bg 两个别名后,可以在保持初始色值一致的同时,独立讨论不同用途。
可执行检查单
- 01整理页面实际使用的颜色,标注出现位置。
- 02为正文、背景、行动和边界建立清楚的用途名称。
- 03改动一个用途并检查所有受影响位置,记录不应一起变化的角色。
一个常见问题
同一色值有两个名称算重复吗?
如果名称代表不同职责,就可能有意义;如果只是同一职责被不同人随意命名,就应合并。判断依据是未来是否需要独立调整,而不是色值是否相同。
留下禁止用途
例如标明强调色不用于白底小字号正文。这样的限制比只列允许用途更能减少误用,也使后续扩展知道何时必须重做检查。