全球视野下的A/B测试驱动增长—中国台湾篇(三)

色彩与转化率的指南

在设计师的工具箱里,色彩是其中一个强大的工具。没有意外的,色彩可以激起不同的情绪和引起使用者的注意。但如果你曾尝试着设计一个新的专案,你知道有多困难去量身定制色彩计划。

1-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97
开始,我已经撰写了一些简易的参考指南,它可以涵盖基本的色彩理论以及他如何与UX设计相互作用。这篇文章并不是完整的指南针对如何使用色彩在你的设计上,取而代之的是,一个针对在UI和UX设计专案中的情境下色彩理论概论。

色彩理论

事实上,色彩理论包括了一些事情,但在设计中最基本的互动为互补色(complementation),对比度(contrast),饱和度(vibrancy):

  • 互补色是指我们看色彩的方法在他们与其他的颜色中的关系。选择他们在色谱对面的颜色会使视觉上有一种和谐感。这里有两个普遍使用互补色的例子:三等分色( triadic)与复合色(compound)的色彩计划,下面我们会讨论。
  • 对比色是减少眼睛疲劳和专注在使用者的注意力藉由清楚的区分萤幕上的元素,元素之间的高对比度使文字易读和引导读者的注意力。最显而易见的例子是有效的选择背景与文字的颜色,等等你会看到。
  • 鲜明度是色彩情绪的暗示。这个主题在Create Emotion With Color In UX Design有完整的叙述。

色环

一个色彩环或色彩轮是一个颜色色相的构成,透过一个环去阐述。每一个基本色系(shade of color)都有对立的一组,你可以使用色还去找的每一个特定颜色的对立。

2-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

色环中也展示出三原色(primary colors),三间色(secondary colors)和再间色(tertiary colors)。三原色(红,黄,蓝)可以被混合去创造三间色(橘,绿,紫)。浅色(tints)可以添加白色,和暗色(shades)可以添加黑色。

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

以下有三种容易被接受的色彩计划:三等分色( triadic),复合色(compound),类似色(Analogous colors)

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

3-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

借由使用等边三角形,你可以确保颜色有相同的饱和度(vibrancy)和跟彼此适当互补。
复合色: 在色环中,色彩对面的颜色我们称为互补色(complementary),他们有着强烈对比,且他们被用来吸引使用者的目光。

4%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

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

5-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

类似色 :颜色在色轮当中旁边的颜色我们称为类似色。他们可以被用于创造和谐感和延续性再设计当中。虽然此方法相对简单可以达成,但是关键是在哪一个色彩鲜明度你决定要使用,有可能会太过喧宾夺主。相似色彩计划是根据 缜密的色彩选择 在色轮当中的相同区域。

6-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

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

7-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

相似色彩计划能被用于轻盈的心情或气氛在你的app或是网站当中。举例而言,一个静坐的app — Calm使用相似色蓝跟绿去帮助使用者感到放鬆跟宁静。

8-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

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

9-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

色彩中的文字

当你在使用色彩中的颜色,请注意如果使用两个互相明度(value)低的颜色,这会使你的文字非常不好阅读(不管是互补色或是香四色)。这可以特别针对你的行动装置萤幕当你的使用者在室外紧盯着萤幕时。

10-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

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

11-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

只要你决定了你的颜色,向真实使用者在大部分的装置做测试是绝对必要的。如果有任何阅读的问题在你的测试当中展现,那你可以确定你的使用者会有相同的问题。

色彩的影响在转化率上

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

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

12-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

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

虽然他们原本的预测绿色按钮会表现得更好,但结果是红色按钮多了21%的点击。
然而,不太可能概括这些结果到所有的情形。没有一个神奇的颜色可以一直表现得很好在所有的网页跟app上。所以你应该永远测试你使用的颜色在你的网页和你的观众,看看会发生什麽事。

对比度是关键

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

13-%e8%89%b2%e5%bd%a9%e8%bd%ac%e5%8c%96%e7%8e%87%e6%8c%87%e5%8d%97

使用多种的对比色可以凝聚浏览者的注意力在页面上特定的元素(如引动按钮)

结论

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

AB测试 黑客增长 二维码

1397 Views
即刻实践文章理论 A/B测试 灰度发布 产品优化 免费申请
Please wait...

订阅我们

对于每位订阅读者,每两周,吆喝科技会为您发送4篇精选文章,可能是最新的A/B测试实践,也会是你所期待的增长干货。