颜色是任何设计系统的关键部分,但它很容易失控。由于看似无限多的色调和明暗度、不同色彩空间的可变性以及采摘和采样颜色的各种方法,团队很容易最终得到数十种颜色值使用不一致的情况。
通过定义颜色系统,您可以确保您拥有一个容易控制和统一性的色彩库,同事从颜色库中正确的使用,并提高维护的便利性。
作为一个简单的起点,首先从品牌颜色入手。
该调色板可能会严重影响您在系统中使用的色板。结合品牌颜色也将确保您在整个 UI 中保持品牌的个性。您需要确保您拥有这些颜色的阴影,以便在不适合或不理想的情况下使用它们的全部强度颜色。如果系统需要同时支持营销和产品,您可能还需要包含有关如何在每个中使用颜色的使用指南。
然后考虑颜色的可访问性。并不是颜色库中的每种颜色都可能需要满足WCAG眼球,但要确保已包含一组充足的WCAG合格色值,可以将这些颜色应用于文本和关键 UI 组件以及它们需要对比的背景。根据您的要求,您可能需要满足 WCAG AA 或 AAA 可访问性标准。
考虑添加不同功能的颜色。用户对有些特殊的颜色有着固定的含义理解,例如:红色表示错误,蓝色表示超链接,绿色表示确认、成功。通过定义某些颜色的含义,可以创建一个可重复的模式来说明如何将来应该使用它们。
除了挑选颜色之外,还要写清楚使用这些颜色的场景。现在很对团队已经引入了design token 来为他们的颜色命名添加一个语义层。将颜色命名为“red”并引用“red”比记住准确的 Hex/RGBA/HSLA 值要容易得多,但它几乎不能描述其预期用途。一些团队会在颜色名称中添加另一个修饰词,以描述其预期用途并确保其正确实施。例如:red_btn_error。如果需要更改颜色,只需要改变 token 下颜色具体的色值,不需要改变 token 语义,这样也使得颜色的更新维护更加简单。