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

我们总希望自己的设计能够拥有不错的转化率，但是高转化率并非一蹴而就，也没有一劳永逸的万能方案，一切都是要从基础上着手。今天我们聊聊要做高转化率的设计，应当具备哪些色彩上的基础知识~ 对设计师而言，色彩是最强有力的工具之一，不同的色彩能够唤起用户不同的情绪和不同的感受，这也是大家都熟知的事情。可如果你真的从零开始一个全新的设计项目就会发现，要拿出一套真正适合这个项目的配色方案是何其艰难。 为此，我开始着手撰写这篇涵盖了基础色彩理论和UX规则的快速参考指南。这篇文章并非系统而完备的色彩设计说明，它更接近于一份为UI和UX设计项目而准备的色彩使用概述。 色彩理论 色彩理论中涵盖了许多内容，但是其中最基本的还是通过对比、互补和感染实现色彩与用户的互动： ·互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩，构成的配色方案令双眼觉得和谐。最常见的互补配色有两种，三元配色和复合配色，我们将稍后探讨。 ·对比则可以将不同的元素区分开来，从而降低视觉疲劳，构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别，引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题，我们会随后聊到。 ·色彩对于用户的情绪上的感染也是一个重要因素。 色轮 每次谈及色彩和配色，总是绕不过色轮。色轮上每一个色彩在对称的位置上都有一个与之“相反”的色。 INCLUDEPICTURE \d /wp-content/uploads/2016/07/1-MGTsBa5RLRRdzbACtqiDwg.jpeg \* MERGEFORMATINET  色轮的功能不只是为你呈现出互补色。色轮以三原色（Primary Colors）红、黄和蓝为基础，两两混合创造出次色（Secondary colors）橙色、绿色和紫色。在这六个不同的色彩的基础上，加入白色能够创造出不同的色调，加入黑色营造出色度的差异。 创造高效的配色方案 想要构建一套可行的配色方案，通常有三种可靠可行的配色方案：三元色（Tradic），近似色（Analogous）和复合色（Compound）。 三元色。这种配色方案是几种配色方案中最均衡的，在色轮上选取三个位置互成120度角的三种色彩，以它们的位置为端点能在色轮内画一个等边三角形。 INCLUDEPICTURE \d /wp-content/uploads/2016/07/0-qUNX5cpaOKgvX04N.jpg \* MERGEFORMATINET  通过这个等边三角形，你能确保配色方案中的三种色彩带来的感染力、对用户的影响是均衡的，并且相互之间能够形成可靠的搭配。 复合色。色轮上相互对称位置上的色彩构成互补色，而两组相邻互补色构成的配色方案则为复合色。这两组色彩的强对比是吸引用户注意力的重要手段。 INCLUDEPICTURE \d /wp-content/uploads/2016/07/0-AAXRr81-qjajurR_.jpg \* MERGEFORMATINET  举个例子，红色和绿色就是一组互补色。iOS 中电话图标和右上角的数量提示标识就很好的构成了色彩对比。 INCLUDEPICTURE \d /wp-content/uploads/2016/07/1-OjNfcCT96VSmWeV6tu68ew1.jpeg \* MERGEFORMATINET  近似色。色轮上彼此相邻的色彩是类似色，它们能在色彩上营造出协调而连续的感觉。虽然这种配色不是那么好把控的，但是有诀窍，就是注意选取有感染力的色调作为核心，这样可以最大化利用整个方案。一套类似色的配色方案通常是在色轮的同一区域内选取色彩搭配而成。 INCLUDEPICTURE \d /wp-content/uploads/2016/07/0-GmWqCn_trRfbguAX.jpg \* MERGEFORMATINET  黄色和橙色就能很好的搭配出一套配色方案。 INCLUDEPICTURE \d /wp-content/uploads/2016/07/1-1KKhHrF-XE01sfyzmrLDTw.png \* MERGEFORMATINET  著名的任务管理类工具Clear 就是借助类似色配色方案将不同优先级的任务视觉化的处理。 INCLUDEPICTURE \d /wp-content/uploads/2016/07/1-Tm0nkWNmJvPU9-liGZcqYw.png \* MERGEFORMATINET  类似色配色方案能够用来给APP或者网站营造特定的情绪和氛围。比如医疗类应用Calm 就使用了蓝色和绿色这样的类似色配色来尽量让用户感到轻松和宁静。 INCLUDEPICTURE \d /w