首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >深度译文:UI中设定自适应颜色的原理(Part 02)

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

作者头像
用户5009027
发布2019-07-30 11:10:12
8270
发布2019-07-30 11:10:12
举报
文章被收录于专栏:静Design静Design

颜色环的裁剪视图模式

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

可访问性优先原则

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

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

颜色约束与变量

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

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

色谱

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

中午的天空与夜晚的天空(静电注)

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

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

背景的可变性

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

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

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

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

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

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

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

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

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

颜色的适应性

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

360度自适应颜色(gif)

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

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

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-07-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档