神奇设计在这里 | 教你用人工智能自动为界面设计配色！
Ai你也是个成熟的软件了，该学会自己配色了吧！
颜色是设计的核心之一
也是一直令人头痛的点
好的设计很可能
因为颜色而毁于一旦
今天呢，小智就要带大家
以网站Yandex为例子
来展示一种方法
“AI自动配色”送给大家！
Yandex作为俄罗斯最重要的网络服务门户（类似中国的百度），在界面设计上大量应用色彩来突出显示信息块、对象响应、吸引注意力并创建视觉层次结构。
（在Yandex .Music和搜索中使用颜色匹配算法的示例）
在某些界面设计上的颜色匹配可能需要更复杂的计算，不适合AI来做。但在某些界面设计上，获得理想的匹配结果其实比想象的要容易得多。
下面我们将以 Yandex Launcher的卡片颜色为例，看看Yandex是如何做到自动化配色的。
1.初步的简单算法
首先，最简单的算法是根据图标自动选择卡的背景颜色，按钮为半透明白色。 该算法试图确定图标的主要颜色，通过色调解析像素。 这种方法做出来的图片往往有一些不可避免的缺点：
颜色定义不正确
由于整体色调平均化，显得颜色有些“脏”颜色
“昏暗的按钮，无聊的卡片”
（颜色有问题的例子）
2.确定真正想要的是什么
Yandex希望每个卡片应该是图标的整体延续。 颜色需要多彩而明亮。同时想要创造出一种感觉，即卡片是设计师定制的，而不是随意地自动生成的东西。
我们当然希望每张卡片都做得尽善尽美。然而，设计师的时间是有限的，不可能为每个图标定制专属的卡片。 所以Yandex想了一个办法来改进用于确定颜色的算法，自动化地绘制出精美的卡片。
3.确定颜色的新算法
(原始图标→从过滤的像素查看)
第二步:将生成的图像缩小为2×2像素（关闭抗锯齿）。于是我们得到了四种颜色的图标。
第二步后的结果。 原始图标→颜色
（当然，我们已经禁用抗锯齿，以便颜色不会混合，不会变得“脏”。）
事实上，事例证明如下：
图片分为四个部分：我们从每个部分的顶行获取中间像素。
实现也很简单：我们甚至不需要真正的降低像素，通常使用图形。具有所需位置的像素取自一维阵列，在第一步之后得出。
1.亮色方案：
背景是最亮的颜色
按钮 - 第二亮的颜色
文字是最暗的
2.暗色方案（如果2种或更多颜色是暗的）：
背景是最暗的颜色
按钮 - 第二暗的颜色
文字是最亮的
应用颜色的时候，需要检查对比度：背景和按钮之间的亮度差异应≥20; 背景和文字之间应≥60。如果不符合，就必须调整一下。
（由此产生的卡片。 原始图标→颜色→卡）
还有一些卡片例如：
4.令人满意的结果
我们有了自动生成的彩色卡片，由真正的图标颜色匹配而成，没有“脏”的杂质。 由于使用了多种颜色，卡片看起来更加生动。 当然，最赞的是，通过图标的统一背景，卡片成为它的直接延续：它们之间的边界显得很自然。
当然，也会有特殊情况需要调整，例如：来自相同颜色的图标 - 我们使背景稍暗，以免合并；带有背景的图标 - 我们看看边缘周围的像素，如果它们都相同，我们为卡片设置相同的背景。
最后当然是更多的例子啦
本文由小智LOGO整理翻译
更多设计精彩内容，欢迎关注公众号：小智LOGO
