色彩系统 设计体系

检查进度

重置

01

结构及意义

在使用环境中比较信息和演示。

确定基础调色板使用托管名称和值设置共享颜色级别。组件应根据其角色使用颜色，而不是直接选择色调。示例 “错误文本”变量用于表单错误和提交失败警告。将颜色与角色关联起来单独的背景颜色、文本、边框、操作和响应。按角色的颜色名称有助于在一处更改界面;不要让每个元素选择自己的基础色调。状态有足够的颜色检查默认、悬停、单击、焦点、选定和禁用。统一响应颜色整个产品中的成功、警告、错误和信息保持相同的含义。在浅色和深色中使用的每个背景上尝试相同的条件;在一种背景上易于阅读的错误颜色可能无法在另一种背景上使用。

02

交互性和可用性

尝试操作，更改状态并继续工作。

测量使用的颜色对将文本、图标和控件与实际背景（而不仅仅是调色板）进行对比。记录允许的文本和背景对,这样开发人员就不必猜测哪些颜色可以搭配。独立明暗测试为每个接口定义单独的值并检查所有状态。切换皮肤后测试每个颜色对,而不是仅仅将浅色切换为深色;亮点和边框需要它们自己的角色。保持身份信息完整且清晰在适当的位置使用品牌颜色；当对比度不足时调整色调。如果识别颜色难以阅读,请保持其装饰性,并使用足够清晰的颜色来表示有意义的文本或操作。不要让颜色单独承载其含义当您需要区分数据和状态时，可以合并标签、形状或符号。

进度会自动保存在此浏览器中。

指南

检查方法

01

确定基础调色板

组件应根据其角色使用颜色，而不是直接选择色调。

示例

应用示例

确定基础调色板

“错误文本”变量用于表单错误和提交失败警告。