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

让你的设计拥有高转化率的配色知识简明指南 我们总希望自己的设计能够拥有不错的转化率 ， 是高转化率并非一蹴而就 ，也没有一劳永逸的万 能方案 ，一切都是要从基础上着手。今天我们聊聊要做高转化率的设计 ，应当具备哪些色彩上的基 础知识~ 对设计师而言 ，色彩是最强有力的工具之一 ，不同的色彩能够唤起用户不同的情绪和不同的感受 ， 这也是大家都熟知的事情。可如果你真的从零开始一个全新的设计项目就会发现 ，要拿出一套真正 适合这个项目的配色方案是何其艰难。 为此 ，我开始着手撰写这篇涵盖了基础色彩理论和UX规则的快速参考指南。这篇文章并非系统而完 备的色彩设计说明 ，它更接近于一份为UI和UX设计项目而准备的色彩使用概述。 色彩理论 色彩理论中涵盖了许多内容 ， 是其中最基本的还是通过对比、互补和感染实现色彩与用户的互动 ： 互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩 ，构成的配色方案令双眼觉得和谐。最常见的互补配色有两种 ，三元配色和复合配色 ，我们 将稍后探讨。 对比则可以将不同的元素区分开来 ，从而降低视觉疲劳 ，构建出视觉重心和焦点。元素之 间的高对比度让文字更容易被识别 ，引导用户注意到更关键的信息。背景和背景之上文本的 色彩选取就是一个非常常见的对比度的问题 ，我们会随后聊到。 色彩对于用户的情绪上的感染也是一个重要因素。 色轮 每次谈及色彩和配色 ，总是绕不过色轮。色轮上每一个色彩在对称的位置上都有一个与之“相反” 的色。 色轮的功能不只是为你呈现出互补色。色轮以三原色 （Primary Co lo rs ）红、黄和蓝为基础 ，两两混 合创造出次色 （Seco ndary co lo rs ）橙色、绿色和紫色。在这六个不同的色彩的基础上 ，加入白色 能够创造出不同的色调 ，加入黑色营造出色度的差异。 创造高效的配色方案 想要构建一套可行的配色方案 ，通常有三种可靠可行的配色方案 ：三元色 （T radic ），近似 色 （A nalogo us ）和复合色 （Co mpo und ）。 三元色。这种配色方案是几种配色方案中最均衡的 ，在色轮上选取三个位置互成120度角的三种 色彩 ，以它们的位置为端点能在色轮内画一个等边三角形。 通过这个等边三角形 ，你能确保配色方案中的三种色彩带来的感染力、对用户的影响是均衡的 ，并 且相互之间能够形成可靠的搭配。 复合色。色轮上相互对称位置上的色彩构成互补色 ，而两组相邻互补色构成的配色方案则为复合色 。这两组色彩的强对比是吸引用户注意力的重要手段。 举个例子 ，红色和绿色就是一组互补色。iO S 中电话图标和右上角的数量提示标识就很好的构成了 色彩对比。 近似色。色轮上彼此相邻的色彩是类似色 ，它们能在色彩上营造出协调而连续的感觉。虽然这种配 色不是那么好把控的 ， 是有诀窍 ，就是注意选取有感染力的色调作为核心 ，这样可以最大化利用 整个方案。一套类似色的配色方案通常是在色轮的同一区域内选取色彩搭配而成。 黄色和橙色就能很好的搭配出一套配色方案。 著名的任务管理类工具Clear 就是借助类似色配色方案将不同优先级的任务视觉化的处理。 类似色配色方案能够用来给A PP或者网站营造特定的情绪和氛围。比如医疗类应用Calm 就使用了 蓝色和绿色这样的类似色配色来尽量让用户感到轻松和宁静。 学习搞定配色方案最好的方法就是不断的练习。创造配色方案的工具很多 ，A do e Co lo r CC 无疑 是相当可靠的选择。Co lo r CC的调色面板非常的直观 ，选中的色彩都可以进行单独的修改 ，方案制 定完成之后只需简单的点击几下就能很好的保存下来。 文本色彩 当你在为文本进行色彩选取的时候 ，需知道文本和周围的色彩如何相互之间对比度低的话 ，用户是 很难进行分辨的。当这种配色出现在移动端上之时 ，户外的炫光和屏幕本身的反光可能让这种情况 更加严重。 色彩低对比度让用户的眼睛无法聚焦和分辨信息。 W C3 的网络内容可访问性指南 能帮你更好的解决网页中色彩和对比度的问题。这份指南中规定了 对比度的最低标准 ，确保低视力的用户最起码能看清文本。根据W C3的规范 ，文本色彩和背景之间 的对比度会根据光照强度分为1-21总计21个不同的级别。对于正文文本和图片文本之间 ，他们提出 了如下的建议 ： 较小的文本应当确保至少和背景之间有4 .5:1的对比度比率 较大的文本 （14 pt 粗体 ，18pt 常规 ）应