专栏首页静Design深度译文:UI中设定自适应颜色的原理(Part 02)

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

颜色环的裁剪视图模式

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

可访问性优先原则

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

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

颜色约束与变量

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

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

色谱

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

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

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

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

背景的可变性

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

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

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

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

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

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

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

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

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

颜色的适应性

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

360度自适应颜色(gif)

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

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

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

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

本文分享自微信公众号 - 静Design(JingDesign91)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python可视化Dash教程简译(二)

    “ 作为数据分析的重要一环,把得到的数据或者分析结果以图表的方式展示,是一种直观、优雅的方式。Dash是基于Flask的Python可视化工具,我在学习之余尝试...

    周萝卜
  • ES6 完全使用手册

    在我们开发的时候,可能认为应该默认使用 let 而不是 var,这种情况下,对于需要写保护的变量要使用 const。

    夜尽天明
  • Spring注解大全

    注入配置文件@PropertySource(“classpath:cn/shiyujun/test.propertie”)

    Java学习录
  • 不会js逆向,你是找不到爬虫工作的!

    最后通知一下: 各位老铁请点击阅读原文,填写送书资料,今天下午1点,确定送书名额,下午发快递,除偏远地方外三天内书就到你的手上了!

    叫我龙总
  • 译 | 使用Roslyn分析器高效编写更好的代码

    Roslyn 是 .NET 编译器平台,即使在运行代码之前,它也能帮助您捕获 Bug。例如内置于 Visual Studio 中的Roslyn 拼写检查分析器。

    Edi Wang
  • 运行时序列化 1

    2. 把对象图的转成字节流之后,可以通过网络传输到远程机器,远程机器可以还原对象图信息。

    小蜜蜂
  • 运行时序列化 3

    1. 单实例类型(singleton),对于这种类型对象的序列化和反序列不应该在AppDomain中创建新的对象,应该使用已经存在的单实例对象。

    小蜜蜂
  • js中的函数声明你真的会了吗???

    2、只有在function内部新声明的才是局部变量,在if,while,for等声明的变量其实是全局变量(除非本身在function内部)

    李才哥
  • 为什么Flutter是跨平台开发的终极之选

    导读:近日,谷歌开发者官方宣布,Flutter 1.7 正式发布,包含了对 AndroidX 的支持。

    华章科技
  • 43道多线程面试题,附带答案(三)

    Volatile变量可以确保先行关系,即写操作会发生在后续的读操作之前, 但它并不能保证原子性。例如用volatile修饰count变量那么 count++ 操...

    李红

扫码关注云+社区

领取腾讯云代金券