当前位置: 首页 >文章 > 还在寻找配色网站?高级设计师都这样构建色彩系统!
收藏
分享

还在寻找配色网站?高级设计师都这样构建色彩系统!

举报BIGD0BIGD0发布于 2020-12-202969阅读4点赞
教你如何构建色彩系统...

来源:medium  作者:Zain Adeel

BIGD翻译整理


作为一名设计师,每天接触产品让我意识到没有系统的色彩是多么的有问题。如果一款应用程序会让用户感到混乱和头痛,那么它们的价值就会降低。这也会降低产品开发的速度,因为它直接影响了设计工作,同时也降低了产品在不同媒介中的统一性。


混乱设计系统的一个典型症状就是具有多个产品主色调。



当你每一次为了产品配色而感到苦恼,或者需要改善色彩却缺乏知识来做加法时,你大概需要一个新的处理方式。


如何判定你是否需要一个色彩系统?


你们的产品有十几个人用吗?


产品的功能在增长吗?


你的团队在成长吗?


如果以上问题的答案是肯定的,那么你的团队一定需要一个色彩系统。


要点


什么构成一个好的色彩系统?这个问题没有明确的答案。随着AR/VR体验的到来,当今的界面需求必然会发生变化。就目前而言,我认为一个好的色彩系统应该是:


可访问性


系统的


可扩展的



可访问性


可访问性是颜色系统的基石。


遵守WCAG


在Web内容可访问性指南(WCAG)2.0 第1.4.3节中显示,对比度(最小值):文字和文字图像的视觉呈现对比度至少为4.5:1,但以下情况除外:(AA级)。


大文本:大型文本和大型文本图像的对比度至少为3:1;


附带:如果文本或文本图像是非活动用户界面组件的一部分,是纯装饰,任何人都不可见,或者是包含重要其他可视内容的图片的一部分,没有对比度要求。


标识:作为徽标或品牌名称一部分的文本没有最低对比度要求。




通过了WCAG的(AA级)使用的白色或黑色背景


符合WCAG第1.4.3节,确保系统能够可靠地使用,而不依赖于使用第三方工具进行手工对比检查。对于任何一位新设计师来说,都是需要努力的方向。



系统方法


利用系统化的方法可以减少颜色,但不会消除主观性。这是由于颜色的固有性质——本质上是我们的大脑在解释不同的电磁波波长,这些电磁波波长对我们每个人来说无疑是不同的。


HSL(色相、饱和度、亮度)


对于一个设计师来说,颜色的真实身份应该是色调。


在本文中,我们将使用HSL颜色系统确定颜色,HSL代表色相、饱和度和亮度。我通过调整Munsell颜色系统图来说明这个系统,如下所示:



如果您想了解更多有关不同颜色模型的工作原理,请阅读本维基百科文章:https://en.wikipedia.org/wiki/HSL_and_HSV


HSL模型可以轻松地为任何选定的颜色开发不同的色调。例如紫色,我们最先需要做的就是确定一个色调,然后我们可以通过调整亮度来创建一个调色板。饱和度在不同颜色的调和效果中起着很大的作用,并且与我创建颜色系统的方式有关。



紫色(色相:269°)的色调调色板,使用HSL颜色模型中的可变亮度创建。



命名颜色


虽然创造性和原始的色彩命名是最被肯定的,但建议出于可用性目的,颜色名称应该是系统的和可扩展的。例如,我们可以依靠既定的实践来制定一个容易理解的方案。


我把色轮分成12个部分,命名如下:



基于上面的颜色分类,以及从字体中获得的灵感,我们可以为不同的颜色创建一个相应的、有效的数字系统。这种方式与字体权重用数字值表达的方式相似,例如100、200、300、500、700、800……作为一个可区分的特性,我们可以为不同的色调设定数值,并且将这些数字与色调的明暗程度相对应。


使用从10到100的刻度,每10个刻度都有一个色相是最简单的。紫色10是相对于紫色50更轻的颜色,熟悉这种方法可以帮助你创建有效的色彩系统。



3种不同亮/暗程度的色调



可扩展性


按照上述方法,就可以得到一个可扩展的颜色系统,并且任何新的色彩搭配都是系统性的。现在我们可以使用上面所示的分类为颜色命名,然后根据用于开发它的亮度为每个色调命名。如果将来需要更多的色调,数字系统也能够适应它。如下图所示:



颜色系统可以容纳新色调


每一种颜色都很容易命名,记忆和重复使用。


接下来,我们将讨论如何应用这些理论,并创建一个可访问,系统和可扩展的基本颜色系统。深入研究如何使用不同的技术来查找色调并创建一个连贯的色彩方案。



模块


为了在一个坚实的基础上建立这个色彩系统,我们需要将我们的要素列出:


色调刻度


命名


色调


色调生成


衡量标准


调色板


一个良好的色彩系统最重要的就是色调刻度。比例可以使颜色系统变得更加灵活,并且增加了产品表达的一致性。重要的是,在设计界面时,刻度要有足够的数量来改进使用。


我确定色调刻度的方法是从中点开始,以灰色为例,我首先找到了灰色的中间色调。然后逐渐将色调扩展到两个极端,并依次增加20%的色调/阴影。这将产生一个包含11个色调和10个刻度的色阶,如下所示。



你或许会有疑问,我设定为中点(#757575)的色调并不是sRGB色彩空间中的完美中灰色,即#808080。实际上,中灰色到底是什么?就像生活中的一切一样,几乎没有一个明确的答案。最终,取决于所遵循的颜色模型,每个的中点将在色调上不同。



由3种不同颜色模型定义的中灰色


我应该遵循什么模型?正如之前提到的,可访问性将是该系统的基石。这就是为什么我没有遵循传统设定,而是继续寻找一个满足我们的可访问性标准的原因。


我想要一种正好在中间剪裁的色调,以便在任何一个极端情况下都能提供对称的可访问性:白色或黑色。


灰色-50在纯白色和纯黑色上都产生4.6:1的对比度。


当使用白色或黑色时,#757575处的灰色-50可以实现4.5:1或更高的对比度 。这符合WCAG可访问性标准中最低对比度的AA级。


10刻度模型有着非常酷的副作用。每相隔5个刻度的色调都将形成4.5:1或更高的对比度。



每5个刻度产生的对比度大于或等于4.5:1。


这为系统增加了强大的可预测性。



命名


之前生成的11个色调,可以逻辑上映射到我们的数字命名方案,范围从0到100。因为这些色调也包括白色和黑色,所以我们总共可以消除9个灰色音调。这导致每个调色板的刻度范围为10-90。


通过这5个步骤,我们现在有了一个清晰和逻辑的系统,通过这个系统,我们可以确定在不同背景颜色的文本/图标上使用什么色调。


例如,如果我使用Grey-10作为背景,我知道Grey-50不会通过对比度测试,因为它离Grey-10只有4步。因此,最接近的色调是灰色-60。类似地,在灰色-80这样的深色背景下,设置为灰色-30的文本也可以被访问。



这里的重要经验是,当我们使我们的产品更容易访问时,我们不仅使它们对残疾人可用,而且还改进了其他人的可用性。



Apple Music |左:原始应用颜色,右:通过AA级微调元素



色调


定义色调是至关重要的,这项任务将直接取决于产品需求。色彩系统通常由一种主色调组成,其他辅助色调可以增加灵活性,从而满足各种状态和功能。


格式塔相似状态原则:具有共同视觉特征的事物,如形状、大小、颜色、质地、价值或方向,会被视为属于同一事物。


要开发可扩展的颜色系统,重要的是确保在生成色调时单个颜色的色相保持不变。


当色相不变时,亮度或饱和度的变化将产生单色和谐。如果颜色具有相同的亮度和饱和度,不管色相如何,它们也会协调,这就是细微的和谐。


颜色具有与我们系统相关的另一个特性,叫做亮度。



亮度


亮度是一种颜色感知程度。作为一个简单的观察,蓝色看起来总是比黄色更深。让我们把整个色调范围转换成亮度刻度,以便更清楚地看到这一点。



色调与亮度


我们可以看到每种色调都有不同的感知亮度。为了标准化,我们可以向/从每个色调添加/减去亮度,使其与我们的中间灰色调#757575的亮度相匹配。



亮度正常到灰色50


执行这个练习是一个很好的步骤,但是我们很快意识到WCAG会根据不同的色调计算不同的对比度。就像grey -50同时适用于黑色或白色背景一样,亮度与灰色不匹配的颜色也适用。它没有通过对比测试,因此我们需要调整它来找到一个通过的色调。一旦色调选择完成,我们将再次回到这一点。



选择


首先我为色彩系统挑选了以下5种色调:


色轮中的数值为色相


从方向盘顺时针顺序:红(0º),黄色(43º),绿色(99º),蓝色(204º),和紫色(269º)。


选择这些值没有特别的原因。这些都是基于个人品味、系统需求、产品需求,以及最终的用户需求。


一旦我们做出选择,我们需要创建色调并根据我们的方案命名它们,就像我们对灰色所做的那样。


重要的是首先要找到中间色调,在这个系统中,中间色调基本上遵循相同的原则——都需要有4.5:1或更高的对比度。Colorable使这一步变得简单。这是一个由Brent Jackson开发的非常简单的网站,允许您使用HSL颜色系统开发色调,并实时显示所选背景颜色的对比度。


Colorable:https://colorable.jxnblk.com/


首先,我通过将饱和度设置为1.00,亮度设置为0.50,为所选的紫色(269º)色调开发了中间色调。当我们检查白色和黑色的对比度时,我们意识到这种色调远远不是我们要找的中间色调。


作为测试,我将这个紫色限定在与Gray-50相匹配的亮度以开发第二个色调,但是这在白色背景上也没有通过对比度测试。这证明了WCAG 在确定背景上的对比度时还要考虑色调以及色调的饱和度。


因此,我在饱和度上做了一些调整,以确定一个不是太亮的色调,然后移动亮度滑块,直到找到一个值,该色调在白色和黑色背景上都通过了AA级。



我将此测试扩展到所有选定的色调,并锁定每个色调为-50。



现在我们已经有了每个色调的中间色调,我们可以通过开发其他色调生成一个完整的调色板,就像我们对灰色所做的那样。



色调生成


关于建立配色方案所采取的步骤已经被证明是相当简单和容易付诸实施的。话虽如此,但色调生成是一项对系统要求极为主观的任务。


例如,如果您正在构建像Microsoft的Visual Studio Code这样的源代码编辑器,那么每种颜色可能不需要很多色调,但是你需要很多种颜色来区分编码元素。


Visual Studio Code的界面截图


相比之下,如果你在做一个像Sketch这样的产品,情况正好相反。你的系统需要尽量少的颜色,为此,以求界面干净而生成的色彩方案将需要以非常特定的方式工作。



Sketch的截图


出于本文的目的,我们将不深入讨论这些需求,而是介绍您可以用来完成此任务的实际技术。


有一些技术可以实现可预测的色调发展。


混合色调和阴影

利用David Johnstone的样本和渐变生成器

使用Colorable手动查找与预先确定的对比度相等的色调



着色和阴影


着色是通过混合不同程度的白色来产生色调,而阴影是通过混合黑色来产生色调。这正是我用来开发灰色色阶的方法。为了从中间开始产生11个总色调(色调-50),我逐渐地将20%的白色/黑色混入其中。让我们应用此方法来查找紫色的色调。



使用着色和阴影方法进行色调开发


请注意,当我将白色或黑色混合到一个色调时,它不仅会使色调变得更亮或更暗,还会降低所产生色调的饱和度。发生这种情况是因为白色和黑色的饱和度为零。使用该技术生成的色调仍然为每5个刻度就有4.5:1或更高的对比度。



使用样本生成器


有一种更简单的方法来开发色调。感谢David Johnstone,我仅需简单地输入色调,黑色和白色。就可以让网站生成一定数量的样本。在我的例子中,共有11种色调。


David Johnstone样本生成器:

http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker



David Johnstone的Lch和Lab颜色和渐变选择器


此外,这个网站可以让你对比不同颜色模型中色调是如何产生的。请注意HSL模型中的色调是如何在较深的一端保持其饱和度的。你还会注意到,在LCH的颜色系统中,色调的饱和度一直在上升。


虽然它看起来确实产生了一个更好看的渐变,但LCH颜色系统不能在不同的色调中保持色相值。对于用户界面设计来说,单色和谐比渐变更为重要。



基于对比的色调生成


由于我对上述两种技术的输出并不完全满意,所以我决定尝试不同的技术。为了根据对比度生成色调,我使用了Colorable。


Colorable:https://colorable.jxnblk.com/


Colorable允许我输入两种颜色的中间色调,然后简单地向上或向下移动亮度滑块以找到比例尺上对比度约为1.35:1的下一个色调。为了找到对比度比值,需要进行反复试验,如果用于在色调之间进行划分,则需要找到从白色到黑色不等的11个色调。



使用colorable从Purple-50中找到连续的色调,通过将亮度滑块修改为1.35:1的对比度。


单独使用这种技术还不够令人满意,接下来需要另一个步骤。我不满意几个色调的明暗,所以我手动调整了这些色调的亮度和饱和度滑块,同时保持对比度。这仍然使方法保持系统化,同时符合颜色系统中所需的灵活性。


下面是用三种技术开发的紫色调色板。你能分辨出哪个是哪个吗?



一旦我开发了所有的色调,我就为每个色调重复这个练习,以开发你在下面看到的调色板。



调色板


在使用这种方法创建的最终配色中,你可以看到维持单色和谐的所有不同色调级别。并且,每个色调都能保持细微的和谐。


完整的系统


尽管颜色的可访问性在系统的整体效率和设计问题上是至关重要的,但它实际上是整个设计过程的一个方面。还需要考虑许多其他元素,才能够确保颜色系统最终能够增加价值。


可访问性指南不止主要针对界面内的文本,它同样适用于依赖于线条笔划宽度的图像。


此外,需要注意的是,目标级别AA意味着我们正在为文本显示小于18pt或14pt的应用优化系统,这些应用程序使用了很重的重量。因此,更薄的字体实际上可能需要更强的对比度才能被访问。




规模指南


该系统现在可以系统地扩展。假设我们需要更多在白色和Gray-10之间的灰色色调,因为界面需要一个具有不同核心组件的布局,以实现视觉深度。所以我们使用着色技术,可以轻松地为调色板添加更多色调。



使用着色技术在白色和Gray-10之间开发4个新色调。


有些时候,产品需要有插图,或者其他一些特别鲜艳的颜色来吸引用户的注意。则该系统具有可扩展性,可以将这种强调色作为备选调色板的一部分。


基于对比度使用相同的数字方案,我们可以为选择的色调开发更多的饱和色调。这可以使它们整齐地被安置在调色板中,保留它对设计人员的易用性,因为它符合系统的指导方针。


我们开发某种强调色,只需在命名方案中添加一个后缀,例如紫色- 40a,其中a代表强调色。这种紫色的色调应该产生与紫色-40完全相同的对比度。


开发紫色- 40a,作为替代调色板的强调色


类似地,我们可以通过采取与前面相同的色调开发步骤向系统添加新的色调。




结论


这些沉思来自我在陡峭的彩色山峰上的第二站。还有很多东西要学。我很欣赏其他设计师分享他们在色彩上的挣扎,以及他们为克服数字空间中的问题所采取的方案。没有比实践更好的学习方法了,我感谢每一位希望创建一个系统来试验和实践这些技术,并发现与他们的问题相关的解决方案的设计师。


我将继续我的彩色之旅,看看它会带我到哪里。在我冒险前往下一站之前,先建立更好的系统,最重要的是,从中获得乐趣。


END


用设计的角度看世界,用学习的方式来成长

BigDcc


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天61人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证