深度译文:UI中设定自适应颜色的原理(Part 02)

颜色环的裁剪视图模式

这就是为什么我们创建了所谓的“自适应调色板”。这些调色板遵循系统设计方法，其中设计者定义了具体的颜色范畴，而非创建静态颜色样本。颜色是根据其感知要求和关系定义的，并且样本是基于最小的用户输入生成的。

可访问性优先原则

首先，我们需要设定目标对比度。目标比率允许我们根据所需的对比度生成颜色，以编程方式符合WCAG可访问性要求。这不像设置静态值那样简单，如3：1。经验丰富的设计师会清楚的了解，基于背景颜色，色调和其他上下文来选择具有不同对比度的重要性。这很复杂，但这是在创建一种色彩系统，所以您可以继续整体调整系统 - 同时保持对对比度的控制，这是可访问性的重要组成部分。

颜色选择基于设计师预期的最终用途，以便在选择过程中减少大部分可访问性评估。一旦设计者创建了一组色彩系（Color Family），下一个任务就是选择所需的比率，并将工作继续下去。

颜色约束与变量

我们需要控制颜色的某些方面，以便使其按照我们的意图来出现。表达这一概念的最佳色彩空间就是亮度 - 色调 - 色度（LCH）空间，因为设计师理解色彩的主要属性是色调（可以理解为色相-静电注）和色度（饱和度）。这不应与色调 - 饱和度 - 亮度（HSL）混淆，后者不太能代表人类的感知。

不要忘记一个属性，那就是亮度。我们希望它是我们颜色生成过程中的主要变量。由于可访问的对比度基于颜色的“相对亮度”，因此亮度是决定我们如何生成颜色的主要变量。为了实现这一点，我们需要将颜色定义为沿L轴的变量。在LCH工作模式中，它允许您以稳健和平滑的方式完全指定颜色，并直接比较和调整亮度以及对比度。

色谱

现在作为设计师，我们可能会希望为给定的亮度，指定颜色的色调和色度偏移。这允许我们分别调整强度或色温以获得更浅或更暗的颜色变化，从而提供更多的创作自由和美学选择。例如，当您减淡蓝色时，您可能希望使蓝色变暖，以便颜色以更愉悦的方式展示出来。变暖的蓝色反映到我们自然界中，你可以观察到：天空的蓝色在接近光源（太阳）时变得温暖。相反，自然界中的蓝色变暗，就像夜晚来临时的天空一样。

中午的天空与夜晚的天空（静电注）

以更具表现力的方式捕捉光与物体之间的相互作用，这种做法在代表性艺术中是非常常见的。将这种做法用于用户界面的颜色选择，是设计师能够改变用户体验感知环境的一种方式。

基于亮度定义颜色约束，使我们能够生成任何亮度（或“相对亮度”）的颜色样本，并确保颜色反映我们的美学选择，同时符合目标对比度。

背景的可变性

对于颜色的感知，受相邻和周围颜色的影响。具体到界面设计来说，这主要与背景颜色和整体的“主题”有关。

如上图所示，A与B两种灰色看起来是不一样的，但色值一样

这种现象的一个最明显表现就是，在UI界面的浅色系背景和深色背景中使用的灰色，你会发现他们在人眼的感知中是完全不一样的。虽然对比度为3：1的颜色在浅色主题中可能看起来很好，但对比度为3：1为且深色背景的相同颜色（灰色），似乎没有足够的对比度。为了补偿对比度的感知，我们实际上可能需要将颜色设置为更高的对比度，以便在两个主题中看起来均匀。

深浅背景下，相同的对比度但观感并不一致

调整颜色对比度后的表现效果

同理，下图这个紫色，在浅色背景下，我们觉得它的饱和度是合适的。但是在深色背景下，这个紫色似乎显得饱和度更高一点。

背景不同，相同的颜色也会有不同的“饱和度”

由于这些原因，我们还需要综合考量背景颜色对我们如何生成颜色的影响。在某些情况下，这可能意味着背景的亮度直接与生成的颜色所需的对比度（每个主题的变化）相关; 在其他情况下，它可能意味着背景颜色与目标饱和度或颜色的色调偏移直接相关。

调整饱和度后，人眼的感知一致

颜色的适应性

这个新概念的最后一个方面是适应性。由于颜色被定义为沿着亮度轴的一组约束变化，这些约束也基于背景颜色的亮度，并且所需的颜色输出由目标对比度与背景定义，我们最终得到的是 一种颜色调色板，可根据更广泛的环境因素进行调整。

360度自适应颜色（gif）

这种定义颜色的方法，可以通过调整任意数值，来更容易地修改设计系统中的特定颜色变量。如果颜色太暗，您只需调整所需的对比度，颜色将在预设的色调和饱和度约束范围内调整。您还可以更均匀地调整颜色饱和度：过去，调整单个颜色样本的饱和度，意味着相对地重新评估所有样本，以确保颜色系列中每种颜色的饱和度（以及整个调色板中的每种颜色）显得一致性。现在，您可以使用明确的曲率调整饱和度，让颜色的选择更具严谨性和方便。

由于颜色基于对比度，因此对背景颜色的任何调整都将相应地重新生成其余调色板。在真实工作中，这可能意味着使现有的颜色主题变暗或变淡，或者变为全新的主题。使用我们上文介绍的方法，可以在产品个性化的同时不违背产品的体验和设计意图。这种个性化确保了用户的最大可读性，无论他们是在阳光直射下，在黑暗的工作室中，还是在经历屏幕眩光。作为设计师，您可以放心，无论最终用户如何修改UI中的颜色呈现，它都将符合您定义的约束。

环境改变，配色方案随之改变

在下一篇文章中，我们将讨论如何使用Adobe的设计系统实现上文的自适应调色板。