设计主页 > 网站制作 > 配色方案 >

让你的设计拥有高转化率的配色知识简明指南

优设译 / 陈子木 时间:2016-07-08 09:00

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

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

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

色彩理论

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

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

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

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

色轮

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

1-MGTsBa5RLRRdzbACtqiDwg

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

创造高效的配色方案

想要构建一套可行的配色方案,通常有三种可靠可行的配色方案:三元色(Tradic),近似色(Analogous)和复合色(Compound)。

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

0-qUNX5cpaOKgvX04N

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

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

0-AAXRr81-qjajurR_

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

1-OjNfcCT96VSmWeV6tu68ew