颜色是设计的核心之一
也是一直令人头痛的点好的设计很可能因为颜色而毁于一旦

今天呢,小智就要带大家以网站Yandex为例子来展示一种方法

“Ai自动配色”送给大家!

Yandex作为俄罗斯最重要的网络服务门户(类似中国的百度),在界面设计上大量应用色彩来突出显示信息块、对象响应、吸引注意力并创建视觉层次结构。

(在Yandex .Music和搜索中使用颜色匹配算法的示例)

在某些界面设计上的颜色匹配可能需要更复杂的计算,不适合AI来做。但在某些界面设计上,获得理想的匹配结果其实比想象的要容易得多。 下面我们将以 Yandex Launcher的卡片颜色为例,看看Yandex是如何做到自动化配色的。


1初步的简单算法

首先,最简单的算法是根据图标自动选择卡的背景颜色,按钮为半透明白色。 该算法试图确定图标的主要颜色,通过色调解析像素。 这种方法做出来的图片往往有一些不可避免的缺点:
颜色定义不正确由于整体色调平均化,显得颜色有些“脏”颜色“昏暗的按钮,无聊的卡片”

颜色有问题的例子

2确定真正想要的是什么

Yandex希望每个卡片应该是图标的整体延续。 颜色需要多彩而明亮。同时想要创造出一种感觉,即卡片是设计师定制的,而不是随意地自动生成的东西。


我们当然希望每张卡片都做得尽善尽美。然而,设计师的时间是有限的,不可能为每个图标定制专属的卡片。 所以Yandex想了一个办法来改进用于确定颜色的算法,自动化地绘制出精美的卡片。


3确定颜色的新算法

第一步首先拿到图标后, 扔掉白色,黑色和透明像素

原始图标→从过滤的像素查看一第二步将生成的图像缩小为2×2像素(关闭抗锯齿)。于是我们得到了四种颜色的图标。

第二步后的结果。 原始图标→颜色


(当然,我们已经禁用抗锯齿,以便颜色不会混合,不会变得“脏”。)事实上,事例证明如下:

(图片分为四个部分:我们从每个部分的顶行获取中间像素)


实现也很简单:我们甚至不需要真正的降低像素,通常使用图形。具有所需位置的像素取自一维阵列,在第一步之后得出。


第三步到这里差不多都已经准备好了。 现在需要将我们得到的颜色,转换为HSL,按亮度(L)排序,然后画卡,这里有两个方案的思路:

1.亮色方案:
背景是最亮的颜色
按钮—第二亮的颜色
文字是最暗的

2.暗色方案(如果2种或更多颜色是暗的):
背景是最暗的颜色
按钮 - 第二暗的颜色
文字是最亮的


应用颜色的时候,需要检查对比度:背景和按钮之间的亮度差异应≥20; 背景和文字之间应≥60。如果不符合,就必须调整一下。

(由此产生的卡片。 原始图标→颜色→卡)还有一些卡片例如:

4令人满意的结果


我们有了自动生成的彩色卡片,由真正的图标颜色匹配而成,没有“脏”的杂质。 由于使用了多种颜色,卡片看起来更加生动。 当然,最赞的是,通过图标的统一背景,卡片成为它的直接延续:它们之间的边界显得很自然。


当然,也会有特殊情况需要调整,例如:来自相同颜色的图标 - 我们使背景稍暗,以免合并;带有背景的图标 - 我们看看边缘周围的像素,如果它们都相同,我们为卡片设置相同的背景。

最后当然是更多的例子啦

本文由小智LOGO整理翻译