看过那么多UI 配色指南，这篇可能是最全面的（附大量实例）

编者按:本文包括如何选择配色方案/适合上手的配色工具/如何利用颜色提高可读性/为色盲用户配色等。，涵盖了大部分UI 色彩搭配的知识点，以及大量的例子，强烈推荐阅读。

就重要性而言，在APP中 色彩元素在应用中扮演的角色仅次于功能。 人与计算机的互动主要是基于与图形用户界面元素的互动，颜色在互动中起着关键作用。 它可以帮助用户查看和理解应用程序 内容，与正确的元素互动，并理解操作。 每个APP 将有一套配色方案，并在主要区域使用其基本颜色。

由于有无数种颜色组合的可能性，正在设计一个新的应用程序 人们往往很难决定一个有效的配色方案。 在本文中，我们将讨论应用程序 与色彩相关的重要知识点中，我们也将学习如何为您的APP 选择颜色和对比度来增强可用性。

如何选择有效的配色方案？

在创建配色方案时，有许多因素需要考虑，包括品牌颜色和颜色在您所在区域的特殊意义。

有多少颜色？

保持简单的色彩组合有助于改善用户体验。 一个简单的配色方案不会让人眼花缭乱，让你的内容更容易理解。 相反，在太多的地方有太多的颜色，很容易搞砸设计。

多伦多大学关于人们如何使用Adobe Color CC的研究表明，大多数人更倾向于只依赖2-3种颜色的简单颜色组合。

如何创建计划

那您如何选择这2-3种颜色呢？ 色环可以帮助我们。

△ 十二色环图是创建配色方案的重要工具。

特别是对初学者来说，有许多预设的配色方案可以使配色更容易。

单色配色

单色方案是最容易创建的配色方案，因为每种颜色都取自相同的基色。 单色可以很好地结合在一起，产生和谐的效果。

△ 单一颜色是单一颜色系统的组合，它调整颜色的深度、明暗或饱和度，形成明暗层次关系。

单色方案在视觉上很容易感觉到，尤其是蓝色或绿色。

△ 正如你所看到的，这种配色方案看起来干净简洁。

相近色

相似颜色的配色方案是选择相互不冲突的相关颜色； 一种颜色被用作主色，而其他颜色被用来丰富这种方案。

△ 在十二色环图中，相邻的三种颜色创建了相似的配色方案。

该方案相对容易使用，其诀窍是选择哪种颜色作为主色调来突出。 例如，Clear，手势操作任务管理APP ，它使用相似的颜色，从视觉上区分任务的优先级。

△ Clear中的默认配色方案让人联想到热点热图，其中更紧迫的项目以鲜红色显示。

Calm，冥想APP ，使用相似颜色的蓝绿色，帮助用户感到轻松和平。

△ Calm使用类似的颜色来营造整体氛围。

补色搭配

互补色是对立色。

△ 互补色是色环上两种正对立的颜色。

它们对比强烈，可以用来吸引观众的注意力。 在使用互补色方案时，选择主色并使用其互补色进行强调是很重要的。 举例来说，当人眼看到一个不同颜色的绿色物体时，一点红色就会非常突出。

△ 使用互补色是使内容脱颖而出的最简单方法。

但是你必须小心使用互补的颜色，以防止你的内容在视觉上显得不和谐。

定制配色方案

创建自己的配色方案并不像许多人想象的那么复杂。最简单的方法是在一堆中性颜色中添加一个明亮的主色，这也是最能引起视觉影响的方案。

△ 在灰度设计中添加一种颜色可以很容易地吸收引眼球。

白底加灰色文字，点缀蓝色高亮，是Dropbox的配色方案。

Adobe Color CCC让你的生活更简单

Adobe Color CC，以前叫Kuler，很容易选择颜色。只需点击几次鼠标，调色板上的每一种颜色都可以单独修改或选择为基本颜色。

△ 导出代码(包括16进制)支持每种颜色。

△ 调色板可以直接保存并添加到图书馆中。此外，社区还提供了许多现成的配色方案。

对比度的应用

通常，用户界面上的颜色对象或区域不会单独出现，而是在另一个颜色对象或区域上相邻或重叠， 形成对比效果。 对比可以使一种颜色与另一种颜色分离。 正确使用它可以缓解眼睛疲劳，并通过清晰地划分屏幕上的元素来关注用户的注意力。

△ 对比度高时，颜色容易分开，对比度低时不容易分开。

对比度和文本易读性

设计师经常喜欢使用低对比度来使事物看起来美丽和和谐。 然而，美并不意味着易读性好。 当你在文本中使用颜色时，你需要知道把两种对比不明显的颜色放在一起会使你的内容难以阅读。 特别是在手机上，用户经常在户外或光线充足的地方，用户会因为屏幕反射而看不到内容。

△ 这一行文本很难从其背景色彩中识别出来。

为了确保界面对比度在一个合理的范围内，您只需要检查对比度。对比度反映了一种颜色如何与另一种颜色不同（通常写为1：1或21：1）。 比例中两个数之间的差异越大，颜色之间的相对亮度差异就越大。W3C建议使用以下对比文本和图像文本：

较小的文本和背景的对比度至少应该达到5：大文本(14pt) 粗体／18pt 正常或以上)与背景的对比度应达到3：1以上。

这一建议还可以帮助低视力、色盲或视力恶化的用户看到和阅读屏幕上的文本。

△ 本行文本符合色彩对比度建议，从背景色中清晰可辨。

上述推荐的对比度也应用于图标或其他关键元素。

△ 左:建议图标不符合色彩对比度。 右：图标遵循色彩对比度建议，从背景中清晰可辨。

有几种免费工具可以为您选择的调色板的对比度提供有意义的反馈。 WebAIM’s Color Contrast Checker就是其中之一，它可以让你测试你选择的颜色。

对比度和用户焦点

对比度除了建立易读文本外，还能吸引用户对屏幕上特定元素的注意。 一般来说，高对比度是重要内容或关键元素的最佳选择。所以如果你想让用户看到或点击任何东西，你可以让它与众不同！ 例如，用户更有可能点击与背景对比强烈的吸引力按钮。

△ 对比度使红色区域看起来与屏幕的其他部分不同。

色盲用户群的设计

你有没有想过你的APP？ 使用者中会有视力障碍吗？

当人们谈论色盲时，他们通常指的是无法感知某些颜色。 大约8％的男性和0.5％女性患有不同程度的色盲。最常见的是红绿色盲。

△ 正常人和红绿色盲看到相同的颜色(黑色和绿色缺陷)

因为色盲有多种表现形式，如红绿色盲、蓝黄色盲和单色色盲。所以用各种视觉线索连接你的APP 重要的状态非常重要。不要仅仅依靠颜色来表示系统状态。 相反，操作和内容应该用元素(如笔画、指示符、图案、纹理或文本)来描述。

Avocode允许您可视化比较设计的修订版。

此外，Photoshop还有一个非常实用的工具来帮助模拟色盲。这个功能让设计师看到你的界面在色盲用户眼中是什么样子的。

△ Airbnb APP 登录页面

总结

提高色彩使用技能是一个不断努力和积累的过程。如果你想学习如何创造美丽和使用配色方案，你需要的是实践、决心和大量的用户测试。

「色彩科普系列教程」

红色文章：“设计师的阅读笔记！带你全面了解红色系列的颜色”橙色文章：“简单的学习颜色匹配！带你全面了解橙色系列的颜色”黄色文章：“简单的学习颜色匹配！带你全面了解颜色系列的黄色文章”绿色文章：“简单的学习颜色匹配！带你全面了解颜色系列的绿色文章”蓝色文章：“简单的学习颜色匹配！带你全面了解颜色系列的蓝色文章”紫色文章：“简单的学习颜色匹配！带你全面了解紫色系列”橙色高级：“带你全面了解橙色高级文章”蓝色+红色高级：“超级案例！零基础颜色匹配系列红色+蓝色”

译文地址：ued.ctrip

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================优设网==============.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。[特色推荐]设计师需要阅读100本书:历史上最完整的设计师图书导航:http://hao.uisdc.com/book/.设计微博:拥有180万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com