从这里入手！让你的设计拥有高转化率的配色知识简明指南

编者按：我们总希望自己的设计能够拥有不错的转化率，但是高转化率并非一蹴而就，也没有一劳永逸的万能方案，一切都是要从基础上着手。今天我们聊聊要做高转化率的设计，应当具备哪些色彩上的基础知识~

对设计师而言，色彩是最强有力的工具之一，不同的色彩能够唤起用户不同的情绪和不同的感受，这也是大家都熟知的事情。可如果你真的从零开始一个全新的设计项目就会发现，要拿出一套真正适合这个项目的配色方案是何其艰难。

为此，我开始着手撰写这篇涵盖了基础色彩理论和UX规则的快速参考指南。这篇文章并非系统而完备的色彩设计说明，它更接近于一份为UI和UX设计项目而准备的色彩使用概述。

色彩理论

色彩理论中涵盖了许多内容，但是其中最基本的还是通过对比、互补和感染实现色彩与用户的互动：

·互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩，构成的配色方案令双眼觉得和谐。最常见的互补配色有两种，三元配色和复合配色，我们将稍后探讨。

·对比则可以将不同的元素区分开来，从而降低视觉疲劳，构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别，引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题，我们会随后聊到。

·色彩对于用户的情绪上的感染也是一个重要因素。

色轮

每次谈及色彩和配色，总是绕不过色轮。色轮上每一个色彩在对称的位置上都有一个与之“相反”的色。

色轮的功能不只是为你呈现出互补色。色轮以三原色（Primary Colors）红、黄和蓝为基础，两两混合创造出次色（Secondary colors）橙色、绿色和紫色。在这六个不同的色彩的基础上，加入白色能够创造出不同的色调，加入黑色营造出色度的差异。

创造高效的配色方案

想要构建一套可行的配色方案，通常有三种可靠可行的配色方案：三元色（Tradic），近似色（Analogous）和复合色（Compound）。

三元色。这种配色方案是几种配色方案中最均衡的，在色轮上选取三个位置互成120度角的三种色彩，以它们的位置为端点能在色轮内画一个等边三角形。

通过这个等边三角形，你能确保配色方案中的三种色彩带来的感染力、对用户的影响是均衡的，并且相互之间能够形成可靠的搭配。

复合色。色轮上相互对称位置上的色彩构成互补色，而两组相邻互补色构成的配色方案则为复合色。这两组色彩的强对比是吸引用户注意力的重要手段。

举个例子，红色和绿色就是一组互补色。iOS 中电话图标和右上角的数量提示标识就很好的构成了色彩对比。

近似色。色轮上彼此相邻的色彩是类似色，它们能在色彩上营造出协调而连续的感觉。虽然这种配色不是那么好把控的，但是有诀窍，就是注意选取有感染力的色调作为核心，这样可以最大化利用整个方案。一套类似色的配色方案通常是在色轮的同一区域内选取色彩搭配而成。

黄色和橙色就能很好的搭配出一套配色方案。

著名的任务管理类工具Clear 就是借助类似色配色方案将不同优先级的任务视觉化的处理。

类似色配色方案能够用来给APP或者网站营造特定的情绪和氛围。比如医疗类应用Calm 就使用了蓝色和绿色这样的类似色配色来尽量让用户感到轻松和宁静。

学习搞定配色方案最好的方法就是不断的练习。创造配色方案的工具很多，Adobe Color CC 无疑是相当可靠的选择。Color CC的调色面板非常的直观，选中的色彩都可以进行单独的修改，方案制定完成之后只需简单的点击几下就能很好的保存下来。

文本色彩

当你在为文本进行色彩选取的时候，需知道文本和周围的色彩如何相互之间对比度低的话，用户是很难进行分辨的。当这种配色出现在移动端上之时，户外的炫光和屏幕本身的反光可能让这种情况更加严重。

色彩低对比度让用户的眼睛无法聚焦和分辨信息。

WC3 的网络内容可访问性指南 能帮你更好的解决网页中色彩和对比度的问题。这份指南中规定了对比度的最低标准，确保低视力的用户最起码能看清文本。根据WC3的规范，文本色彩和背景之间的对比度会根据光照强度分为1-21总计21个不同的级别。对于正文文本和图片文本之间，他们提出了如下的建议：

·较小的文本应当确保至少和背景之间有4.5:1的对比度比率
·较大的文本（14pt粗体，18pt常规）应当确保和背景之间的对比度超过3:1

一旦你对配色作出了选取，那么用绝大多数的常用设备来验证这个配色的对比度是非常有必要的。测试结果和用户的实际体验是挂钩的，如果识别度有问题，那么应当作出适当调整。

色彩对转化率的影响

UI设计中，色彩搭配不仅仅是一种装饰，合理的设计能够对产品和业务产生直接的影响。色彩对于产品的转化率而言有着诸多影响，它作用于不同的UI控件，直接地影响着用户的交互和体验。而色彩对于转化率的影响，最值得一提的应该是行为召唤（CTA）按钮。

一个CTA 按钮通常牵涉到4件事情：位置，形状，文案和色彩。如果这四个因素在设计上都能良好的配合，那么这就是一个效果良好的CTA按钮了。在按钮的颜色选取和转换上的争议可能是世界范围内争吵的最多也是最常的一个问题了。有大量的A/B 测试的测试结果显示，CTA 按钮的色彩变化对于注册等交互行为有着重大的影响。HubSpot 曾经共享过一个著名的按钮颜色测试：

Performable 所展示的A和B两个版本的按钮颜色测试，页面上的内容都是一样，测试的是颜色对于用户的影响。

虽然大家都预测绿色的按钮效果会更好，但是红色的按钮实际效果比绿色按钮高了21%。

所以，同样的道理，这样的测试结果并不能覆盖所有的情况。并没有一种神奇的色彩能够应用于所有的网页和APP，实际的情况需要根据你的受众、基于测试来进行选取，看看用户会怎样决策。

对比度是关键

如果你想让用户点击某个东西，那么尽量让它脱颖而出。如果你的网站或者APP中使用了大量的蓝色，那么用户可能不会立刻注意到蓝色的按钮，就像浅色的背景下，浅色的按钮不会显眼。用户之所以会更倾向于CTA按钮也是因为它们对比更明显，会因为鼠标悬停、点击而发生状态改变，让人无法忽视。

结语

对色彩的基础知识有完整而深入的理解，是做好网页和APP设计的重要先决条件。这些色彩理论是做好UI设计的重要基石，提升的空间非常的大，怎么提升还是要取决于你的努力方向。不论你此刻选取的色彩是什么，它们对于整体是一定会有影响的，从对比度、协调度和对用户情绪的感染力上，都有着直接的作用。

【技多不压身的设计师才有高薪资！】

1. 平面设计：《超赞！设计师完全自学指南》
2. 交互设计：《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计：《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发：《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧：《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案：《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南：《基础知识学起来！为设计师量身打造的DPI指南》
8. 交互设计自学路径图：《零基础入门！给非科班生的自学路径图之交互设计篇》

原文地址：uxplanet
原文作者：Nick Babich
优设译文：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

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

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量150万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com