如果你在自学UI，连配色都不知道怎么行？

请看如下：

• 用色要有理论支撑

• 配色的数量慢慢加

• 配色一定要和谐

• 颜色可以不用那么正

1.用色要有理论支撑

关于配色的基础理论，例如互补色呀、相邻色呀、对比色等等，再比如红色代表热情、蓝色代表科技、绿色代表健康等等，这些都是我们必须掌握的，如果不太不清楚的百度一下。

我这里想和大家强调的是，在我们每次用色之前，一定要想想为什么要这么用，你的理论依据是什么？这是一个优秀设计师基本的思考习惯。

举个简单的例子，如果我们为一个品牌的视觉延展，品牌色是蓝色：

当我们需要去给这个品牌色搭配色彩的时候，我们可以从很多方面入手，例如品牌调性、目标人群等等。

假设我们的目标人群是：时尚、前卫的年轻人。

那我们就可以大胆的使用对比色——红色：

用对比色的视觉冲击力来突出年轻、前卫的品牌调性，博得目标人群的喜爱。

举这个简答的例子就是告诉大家，理论还是要看一看，让你的理论支撑你的执行，这样你就可以有足够的信心。

当然，至于配出来的颜色好不好看，那就是另外一个层面（执行力）的事了，我们后面再说！

2.配色数量慢慢加

上两天群里的一个朋友发了一张临摹的练习图，我想写配色的文章也是因为他的这张练习图：

这里，我再说下关于配色的问题，上个知识点，我已经强调过了理论的重要性，可以支撑我们的执行！

来，我们看看这个练习的原图：

他的用色是非常有研究的，一共有三种主要色相，绿色、红色、黄色，绿色与红色是互补色，红色与黄色是邻近色，三种不同深浅的绿色使画面变得丰富又不杂乱。

而我们看下练习稿：

这么一个小小的插图，竟然用了13种颜色，并且没有任何规律，从这个练习可以看出这位朋友的整个思维都是乱的，并不知道到底该怎么用色！

在这种情况下，千万不要贪心，可以先从两种主色开始搭配，例如，先用好邻近色，红色和黄色：

当真的能驾驭好之后，再来慢慢添加颜色的数量，例如加些点缀色——天空的蓝色、地面的灰色：

千万记住，练习配色不要急，先从少数量的颜色开始练起，慢慢增加！

3.配色一定要和谐

如何让配色看着和谐？

我个人觉得有一个点很关键就是：饱和度、明度看起来要足够相似，要低饱和就所有的颜色都用低饱和，例如上面建筑的插图使用的都是低饱和的颜色：

假设这时候我们把背景的红换个高饱和度就会是下面这个样子：

根本没办法看！

不过让配色看着和谐，除了需要理论支撑以外，确实还是需要一定的色彩感觉，如果色感太差，那就多练吧（记住，颜色数量慢慢来哦），敏锐的色感也是可以慢慢培养的！

4.颜色可以不用那么正

对于我们配色新手来说，刚开始颜色不敢用太多，配色种类比较单一，这时候还想出彩的话，我们就可以让颜色不要那么正（比如正红、正蓝），尤其是拉渐变的时候，举个例子：

我们拉个蓝色的渐变，如果色相都是一样的，只是改变明度的变化，那就是左面这样的，但如果你用两种色相，让浅色的蓝不那么正，而是加入一点点绿，效果看起来就会丰满很多。

下图是我利用这个配色技法制作的一个小作品：

像这样两种色相之间的渐变，是常用的配色技法，大家可以多多尝试。

UI设计师在移动应用产品设计、游戏软件、多媒体制作、广告设计、工业设计

医疗、军事、科技、交通、通讯、商业流通领域都有广阔的发展空间，这是它吸引人的一个主要原因。

当然UI设计师的薪资也比平面设计的普遍要高一些，更是吸引人加入这个队伍的重要要素。

本文包括如何选择配色方案/适合上手的配色工具/如何利用色彩提高可读性/为色盲用户配色等多个小节。

涵盖了大部分UI 配色的知识点，同时附有大量实例，强烈推荐阅读。

就重要性而言，在APP 应用中色彩元素扮演的角色仅次于功能。

 人与计算机的互动主要基于与图形用户界面元素的交互，而色彩在该交互中起着关键作用。 

它可以帮助用户查看和理解APP 内容，与正确的元素互动，并了解操作。 每个APP 都会有一套配色方案，并在主要区域使用其基础色彩。

正因为有无数种色彩组合的可能，在设计一个新的APP 时，人们往往很难决定一个效果好的配色方案。

 下面我们将讨论在APP 中与色彩相关的重要知识点，同时我们还将学习如何为你的APP选择色彩与对比度，来增强可用性。

如何选择有效的配色方案

在创建配色方案时，需要考虑很多因素，包括品牌色彩及色彩在你所在区域的特殊意义。

有多少色彩？

保持色彩组合简洁有助于改善用户体验。 一个简洁的配色方案不会使人眼花缭乱，并且使你的内容更容易被理解。

 相反，在太多的地方有太多的色彩很容易搞砸设计。

多伦多大学关于人们如何使用Adobe Color CC的研究显示大多数人更倾向于仅依赖2-3种色彩的简单色彩组合。

如何创建方案

那么，你如何选择这2-3种色彩？ 色环可以帮助我们。

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

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

单色配色

单色方案是最易于创建的配色方案，因为每种色彩取自相同的基色。

 单色的色彩可以很好地结合在一起，产生和谐的效果。

△ 单色是单一色系的搭配，它在色彩的深浅、明暗或饱和度上有所调整而形成明暗的层次关系。

单色方案是非常容易被视觉感受到的，特别是蓝色或绿色。

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

相近色

相近色的配色方案是选取相互不冲突的的相关色彩; 一种色彩用作主色，而其它色彩用于丰富该方案。

△ 相近色配色方案是由在十二色环图中相邻的三种色彩创建的。

这个方案相对容易使用，其诀窍是选择哪种颜色作为主调色来突出。

 例如，Clear，一款手势操作任务管理APP ，它使用相近的色彩，从视觉上区分任务的优先级。

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

Calm，一款冥想APP ，使用相近的色彩蓝绿色彩，帮助用户感到轻松和平和。

△ Calm使用相近的色彩来塑造整体的氛围。

补色搭配

互补色是对立的色彩。

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

它们对比强烈，可以用来吸引观众的注意力。 当使用互补色方案时，重要的是选择主色并且使用其互补色用于强调。 需要学习软件的同学，大家可以百度搜索锦子会，去锦子会官网下载更多学习资源！如想要了解我的，请百度搜索罗锦，欢迎了解更多我的设计之路！

例如，当人眼看到一块不同色调的绿色物体时，一点红色就会很突出。

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

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

自定义配色方案

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

△ 向灰度设计中添加一种色彩可以很轻易地吸引眼球。

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

Adobe Color CC让你的生活更简单

Adobe Color CC，以前称为Kuler，能让选择色彩变得非常容易。只需点击几下鼠标，调色板上的每种色彩都可以单独修改或选择为基础色彩。

△ 每种色彩下都支持导出代码（包括十六进制）。

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

对比度的应用

通常用户界面上的色彩对象或区域是不会单独出现的，而是比邻或重叠在在另一个色彩对象或区域上， 从形成对比效果。

 对比能使一种色彩与另一种色彩想分离。 正确使用它，可以缓解眼睛疲劳，并通过清晰划分屏幕上的元素来聚焦用户的注意力。

△ 高对比时色彩容易彼此分开，低对比则不易分开。

对比度和文本易读性

设计师经常喜欢使用低对比以使事物看起来美观，和谐。 然而，美观并不意味着有好的易读性。 

当你在文本中使用色彩时，你需要知道把两种对比不明显的颜色放在一起会导致你的内容难以阅读。

 特别是在手机端，用户会经常处于户外或者光线较为充足的地方，这时用户会因为屏幕反光根本看不到内容。

△ 这行文本难以从其背景色彩中辨认出来。

为了确保界面对比度处于一个合理的范围内，你只需要检查下对比度。对比度体现了一种色彩如何区别于另一种色彩（通常写为1：1或21：1）。

 比率中的两个数之间的差越大，色彩之间的相对亮度的差越大。W3C建议对正文和图像文本使用以下对比度：

较小的文本与背景的对比度最少要达到5：1

较大的文本(14pt 粗体／18pt 正常或以上)与背景的对比度要达到3：1以上。需要学习软件的同学，大家可以百度搜索锦子会，去锦子会官网下载更多学习资源！如想要了解我的，请百度搜索罗锦，欢迎了解更多我的设计之路！

这条建议也可以帮助低视力，色盲或视力恶化的用户看到并阅读屏幕上的文字。

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

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

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

有几个免费工具可对你所选调色板的对比度提供有意义的反馈。

 WebAIM’s Color Contrast Checker是其中一个，它可以让你测试已经选择的色彩。

对比度和用户焦点

除了建立易读的文本之外，对比度还可以引起用户对屏幕上的特定元素的注意。

 一般来说，高对比度是重要内容或关键元素的最佳选择。所以如果你想让用户看到或点击什么东西，可以使其与众不同！

 举例来说，用户更可能点击与背景对比强烈的具有号召性的按钮。

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

针对色盲用户群体的设计

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

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

△ 正常人和红绿色盲看到的相同色彩（黑色和绿色缺陷）

因为色盲有多重表现形式，例如红绿色盲，蓝黄色盲和单色色盲。所以运用多样的视觉线索来连接你APP 的重要状态是很重要的。

绝不要仅仅依靠色彩来表示系统状态。 相反，应使用元素（如笔画，指示符，图案，纹理或文本）来描述操作和内容。

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

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

△ Airbnb APP 登录页面

总结

提升色彩使用技能是一个不断努力和积累的过程。

如果你想学习如何创建美观，使用的配色方案，需要的是实践、决心和大量用户测试。

就先分享这么多了，希望能对你有所启发，觉得不错请转发支持。

想系统学习我们的UI设计全能班课程的同学请点击下面》如何正确学习UI设计

更多精彩：

你们会教到什么软件呢？

我们的课程中主要会讲到 4 款软件，

分别是 Photoshop，Illustrator，After Effects，Axure RP 8。

简称，PS，AI，AE，ARP 软件。

PS 主要用于制作 UI 设计中界面和图标设计，也可以对 UI 中的一些广告页进行设计。

AI 主要用于制作 UI 设计中的图标设计，也可以对 UI 中的一些引导页的插画图进行设计。

AE 主要用于制作 UI 设计中的交互动效，在现今的 UI 产品中很多都是需要用动效的。

ARP 主要用于制作 UI 设计中的原型图，线框图，流程图的设计。

学历低可以学习吗？

可以，一般 UI 设计工作的公司都为互联网公司，互联网公司卡能力严格一些，学历相对较低，不像传统企业卡的很严格，一般大型互联网公司有大专学历就行了，小型互联网公司有初中毕业就可以了。如果你有足够好的作品，就算学历真的是初中也是可以去大型互联网公司的。而且学历其实也可以提升的，通过成人高考，远程教育，自考等方式都可以提升。

其它行业都是在六七千左右， 所以大家想学UI设计的，想转行的，想提升自己工资的， 现在是最好的时机， 抓紧时间开始学习，不要再等下去了。 再等下丟行业将会和你不再有缘份。

平面设计广告设计行业班3000元学费

包含软件：

PS AI CDR

如果打算学习我们的平面广告设计课程，

报名请直接添加

老师微信号：5032692

备注：报名平面设计课程

如果3000真的一下拿不出来也没有关系，

也可以分期报名学习，用蚂蚁花呗或信用卡

分期每个月只要200多即可。

每天上午十点准时更新哦

精彩回顾： 

往期回顾：

(责任编辑：钟小英)

赞赏作者

罗锦

微博：罗锦V

扫一扫，每天学点设计

想学PS又很懒？【10G】省时教程和资源免费送！

每天学点设计·点缀生活色彩

PS｜摄影｜设计｜视觉｜艺术｜创意

微信ID：luojin05100

长按二维码关注，每天学点PS

如果喜欢我们的文章，可以顶置公号哦~