UI设计中色彩与转化率指南——南京UI设计培训分享

　　在设计师的工具箱里，色彩是其中一个强大的工具。毫无意外，色彩可以激起不同的情绪和引起使用者的注意。但如果你曾尝试着设计一个新的方案，你就知道去量身定制色彩方案有多困难。这篇文章南京万和UI设计培训并不是完整的指南针对如何使用色彩在你的设计上，取而代之的是，一个针对在 ＵＩ 和 ＵＸ 设计方案中的情境下色彩理论概论。

　　色光作用于眼的过程，通常是用心理学范围的作用平行而进的，影响感情更内在。康定斯基在这方面贡献很大。他从研究的范围，划分了色彩的直接性心理感应和色彩 的间接性心理感受应。前者是客观性的直观效果，是色彩的固有感情；后者是通过色彩的联想嗜好为媒介知觉于人的感受。那么，这两者的因素往往是同时存在的，它们的关系很难绝对区分，我们只是从研究的角度按两个方面来谈。

　　色彩理论

　　事实上，色彩理论包括了一些事情，但在设计中最基本的互动为互补色（complementation），对比度（contrast），饱和度（vibrancy）:互补色是指我们眼中的色彩与其他的颜色中的关系。选择他们在色谱对面的颜色会使视觉上有一种和谐感。这里有两个普遍使用互补色的例子：三等分色（triadic）与复合色（compound）的色彩方案，下面我们会讨论。

　　对比色是减少眼睛疲劳和专注在使用者的注意力藉由清楚的区分屏幕上的元素，元素之间的高对比度使文字易读和引导读者的注意力。最显而易见的例子是有效的选择背景与文字的颜色，等等你会看到。

　　鲜明度是对色彩情绪的暗示。这个主题在Create Emotion With Color In UX Design有完整的叙述。

　　色环

　　一个色彩环或色彩轮是由一个个颜色色相构成的，并透过一个环来阐述。每一个基本色系（shade of color）都有对立的一组，你可以使用色环去找每一个特定颜色的对立色。

　　图片来源：artsconnected

　　色环中也展示出三原色（primary colors），三间色（secondary colors）和再间色（tertiary colors）。三原色（红，黄，蓝）可以被混合去创造三间色（橘，绿，紫）。浅色（tints）可以添加白色，和暗色（shades）可以添加黑色。更多内容，请咨询南京万和UI设计培训。

　　Create an Effective Color Scheme 创造有效的色彩计画

　　以下有三种容易被接受的色彩计画：三等分色（triadic），复合色（compound），类似色（Analogous colors）

　　三等分色：在三种结构当中三等分色是最基本也是最平衡的。它结合了分别是色谱结尾的三种颜色。有一个非常简单的方法去创造三等分色：在色环当中，选择一个你的基本色，然后画一个等边三角形。三角形中的三个顶点会成为你的三等分色彩方案。

　　红，黄和蓝色位于120度彼此。它们可用于三元配色方案。图片来源：TUTS +

　　藉由使用等边三角形，你可以确保颜色有相同的饱和度（vibrancy）并跟彼此适当互补。

　　复合色：在色环中，色彩对面的颜色我们称为互补色（complementary），他们有着强烈对比，且他们被用来吸引使用者的目光。

　　图片来源：TUTS +

　　举例来说，红色的互补色是绿色。看一下未接来电的讯息在iOS中。互补色彩能立即让使用者注意在重要的事件上。

　　类似色：颜色在色轮当中旁边的颜色我们称为类似色。他们可以被用于在设计当中创造和谐感和延续性。虽然此方法相对简单可以达成，但是关键是你决定要在哪一个色彩鲜明度使用，有可能会太过喧宾夺主。相似色彩方案是根据缜密的色彩选择在色轮当中的相同区域。更多内容，请咨询南京万和UI设计培训。

　　色调黄色和橙色是一个类似的配色方案的一个例子。图片来源： TUTS +

　　在手势导向的任务管理app中，清楚地使用类似色以视觉化安排重要任务的优先顺序，以及特别指出最重要的一个（最上方的项目使用最重的颜色，当然而在比较表单下面的项目就较轻盈和隐晦）

　　Clear For iOS

　　相似色彩计画能被用于轻盈的心情或气氛在你的app或是网站当中。南京万和UI设计培训举例而言，一个静坐的app — Calm使用相似色蓝跟绿去帮助使用者感到放松跟宁静。

　　淡蓝色的天空和水的颜色，它可以提神，自由和平静。绿色与健康有关。

　　最佳学习创造出漂亮的色彩计画是持续练习。第一次，你可以使用自动配色工具。Color CC 是由 Adobe 开发的工具，提供直觉的方法去创造色彩调色盘。他有着直觉的介面，每一个在调色盘的颜色可以独立编辑，最后的调色盘可以简单地被储存。

　　Adobe颜色CC（以前称为的Kuler）是配色方案创建一个伟大的工具。色彩中的文字当你在使用色彩中的颜色，请注意如果使用两个互相明度（value）低的颜色，这会使你的文字非常不好阅读（不管是互补色或是相似色）。这可以特别针对你的行动装置屏幕当你的使用者在室外紧盯着屏幕时。

　　上图：缺乏文本和背景将推动用户疯狂之间的对比，他们的眼睛不知道要专注于哪种颜色

　　下图：高对比度的文字更可读

　　WC3’s Web Content Accessibility Guidelines 是一个好的起始点。他们建立了一个对比的极简标准，让使用者可以在可视度低的情况下阅读他们的文字。跟据WC3，颜色与背景间的对比度比例约为1:1比21:1的明度（ luminance）或是发散的强光（intensity of light emitted）之间。以下是WC3建议的主题文字与影像文字的比例：

　　小字相对于背景的对比度比例（contrast ratio）至少为4.5:1

　　大字相对于背景的对比度比例（contrast ratio）至少为3:1

　　左：文本的这些线路不符合彩色对比度和建议，以及难以阅读对他们的背景色。

　　图片来源：材料设计

　　只要你决定了你的颜色，向真实使用者在大部分的装置做测试是绝对必要的。如果有任何阅读的问题在你的测试当中展现，那你可以确定你的使用者会有相同的问题。更多内容，请咨询南京万和UI设计培训。

　　色彩在转换率上的影响

　　UI 设计中，色彩理论的价值多过于视觉装饰，它可以对你的生意造成极大的影响。这个段落我们会着重在 CTA （call-to-action）按钮上。

　　一个 CTA 按钮是包含四件事情：位置，形状，文字，以及颜色。如果这元素互相配合，你将会有一个好的 CTA 按钮。按钮颜色在转换率优化领域中是其中一个持续最久的辩论。有大量的A/B测试结果说明改变引动按钮的颜色如何巨大的影响注册率。举例而言，HubSpot 分享了一个著名的按钮颜色测试

　　Ａ 和 Ｂ 版本的按钮颜色表现的测试。其他的东西完全一样。只有按钮的颜色不同

　　虽然他们原本的预测绿色按钮会表现得更好，但结果是红色按钮多了21％的点击。

　　然而，不太可能概括这些结果到所有的情形。没有一个神奇的颜色可以一直表现得很好在所有的网页跟 App 上。所以你应该永远测试你使用的颜色在你的网页和你的观众，看看会发生什么事。

　　对比度是关键

　　如果你希望使用者按某个东西，让他显而易见。如果你的网页或是app使用很多白色，使用者可能不会马上注意白色的按纽，就好比深色的按钮不会在深色的背景凸显。使用者较常点击引动按钮在背景与其有强烈的对比下。

　　使用多种的对比色可以聚焦访问者对页面上特定元素的注意力（如 “下载” 按钮）

　　对于色彩使用的基本了解是网页与 App 设计的先决条件。南京万和UI设计培训所讨论的仅是色彩理论能如何增强你的 ＵＩ 设计的基础。但是没有任何限制你想在颜色上下多深的功夫在你的 App 上。不管你选了什么颜色，一般而言，他们会有明确的影响在你的设计上 — 透过传达对比度与熟悉度去唤起明确的情绪。