怎样建立颜色与语义角色？

先按用途组织颜色，再检查文字、背景和状态提示能否看清。

颜色系统是给不同用途安排稳定的颜色规则。它帮助用户分清文字、背景、操作和反馈，而不只是把品牌颜色铺满网页。

先记住这几件事

• 语义角色 是按用途命名，例如“主要文字”“错误提示”，不只叫“深灰”或“红色”。
• 中性色 是接近黑、白、灰的颜色，常用于正文、边框和背景；品牌色用于表达品牌与重点。
• 对比度 是前景与背景的明暗差异。文字要和它实际所在的背景一起检查。
• 错误不能只靠红色表示，还要指出哪里错、怎样改；状态可以结合文字和图标说明。

颜色的用途和可访问性见 Spectrum 颜色指南 。颜色与层级也是设计教材 《平面设计新基础》 讨论的基础主题。

选择颜色的流程

颜色规则的示意

以下是用途示例，不是本项目已经采用的色值。

用一个例子走一遍

邮箱填写错误时，团队先确定这是错误反馈，再选择错误文字和边框的角色，同时写“请输入完整邮箱地址”。放到表单背景上检查后，确认用户不用辨认红色也能知道怎样修改。

边界与常见误解

同一颜色在不同背景上未必都清楚。颜色角色稳定，也不代表所有主题必须使用同一个色值。品牌色、成功色和错误色的具体选择依项目而定，不能把一套公司的色板当成所有网站的标准。