色彩系统中的透明与纯色！！！

从视觉传达层次到表达品牌标识，颜色在产品和设计系统的设计中起着关键作用。

虽然一些系统依赖于使用透明度作为颜色阴影，但其他系统更喜欢纯色板。在这篇文章中，我将比较这两种方法，并分享我对每种方法的优缺点的看法。

色调的使用

阴影主要用于两个目的：指示状态，例如悬停、活动或禁用，以及指示层次结构，例如主要或次要文本。

标杆设计系统

分析四个流行且完善的设计系统表明，对于哪个是最好的，没有一致意见。虽然谷歌的材料和Adobe的频谱喜欢使用透明度，IBM的碳和GitHub的底漆棒与固体的颜色来代替。

比较两种方法

a) 颜色数量

使用纯色会显着增加系统所需的变量数量，因此与使用透明度相比，更难维护和消耗。

在下面的示例中，定义菜单项的四种状态将需要2 个使用透明度的颜色变量（下面的蓝色标签）， 而使用实心值（下面的粉色标签）则需要8 个独特的颜色。

b) 主题能力

与颜色变量的数量直接相关，使用透明度可以更容易地创建和应用主题。

使用纯色时，从浅色主题切换到深色主题需要创建几个新的颜色值，而使用透明度时只需要切换一个变量，如下所示。这是由于前景和背景的混合是通过使用 alpha 通道自动完成的。

c) 分层

与 Material Design 一样，许多设计系统都基于分层方法。这通常意味着“更深”的层通常看起来更暗，而靠近表面的层则更亮。

透明阴影更容易（下面的蓝色标签）适应不同的背景，因为它们使元素与其背景之间的对比度保持一致。

另一方面，纯色（下面的粉红色标签）会根据它们位于哪个图层上而显得更暗或更亮。

d) 可访问性

文本和背景之间的对比度也受您选择的方法的影响，这可能会影响 UI 的可访问性。

纯色通过保持背景稳定来提供更高的控制，因此更适合该目的，尽管仍然可以通过透明度确保良好的对比度，例如通过限制背景层的可变性。