IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

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

Catherine • 2017-05-22 02:37 • 交互设计

互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩,构成的配色 方案令双眼觉得和谐。最常见的互补配色有两种,三元配色和复合配色,我们将稍后探讨。
对比则可以将不同的元素区分开来,从而降低视觉疲劳,构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别,引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题,我们会随后聊到。
色彩对于用户的情绪上的感染也是一个重要因素。

较小的文本应当确保至少和背景之间有4.5:1的对比度比率
较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1

文章目录[隐藏]

  • 色彩理论
  • 色轮
  • 创造高效的配色方案
  • 文本色彩
  • 色彩对转化率的影响
  • 对比度是关键
  • 结语

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

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

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

色彩理论

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

  • 互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩,构成的配色方案令双眼觉得和谐。最常见的互补配色有两种,三元配色和复合配色,我们将稍后探讨。
  • 对比则可以将不同的元素区分开来,从而降低视觉疲劳,构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别,引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题,我们会随后聊到。
  • 色彩对于用户的情绪上的感染也是一个重要因素。

色轮

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

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

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

创造高效的配色方案

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

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

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

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

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

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

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

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

近似色。色轮上彼此相邻的色彩是类似色,它们能在色彩上营造出协调而连续的感觉。虽然这种配色不是那么好把控的,但是有诀窍,就是注意选取有感染力的色调作为核心,这样可以最大化利用整个方案。一套类似色的配色方案通常是在色轮的同一区域内选取色彩搭配而成。

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

黄色和橙色就能很好的搭配出一套配色方案。

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

著名的任务管理类工具Clear 就是借助类似色配色方案将不同优先级的任务视觉化的处理。

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

类似色配色方案能够用来给APP或者网站营造特定的情绪和氛围。比如医疗类应用Calm 就使用了蓝色和绿色这样的类似色配色来尽量让用户感到轻松和宁静。

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

学习搞定配色方案最好的方法就是不断的练习。创造配色方案的工具很多,Adobe Color CC 无疑是相当可靠的选择。Color CC的调色面板非常的直观,选中的色彩都可以进行单独的修改,方案制定完成之后只需简单的点击几下就能很好的保存下来。

文本色彩

当你在为文本进行色彩选取的时候,需知道文本和周围的色彩如何相互之间对比度低的话,用户是很难进行分辨的。当这种配色出现在移动端上之时,户外的炫光和屏幕本身的反光可能让这种情况更加严重。

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

色彩低对比度让用户的眼睛无法聚焦和分辨信息。

WC3 的网络内容可访问性指南 能帮你更好的解决网页中色彩和对比度的问题。这份指南中规定了对比度的最低标准,确保低视力的用户最起码能看清文本。根据WC3的规范,文本色彩和背景之间的对比度会根据光照强度分为1-21总计21个不同的级别。对于正文文本和图片文本之间,他们提出了如下的建议:

  • 较小的文本应当确保至少和背景之间有4.5:1的对比度比率
  • 较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1

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

一旦你对配色作出了选取,那么用绝大多数的常用设备来验证这个配色的对比度是非常有必要的。测试结果和用户的实际体验是挂钩的,如果识别度有问题,那么应当作出适当调整。

色彩对转化率的影响

UI设计中,色彩搭配不仅仅是一种装饰,合理的设计能够对产品和业务产生直接的影响。色彩对于产品的转化率而言有着诸多影响,它作用于不同的UI控件,直接地影响着用户的交互和体验。而色彩对于转化率的影响,最值得一提的应该是行为召唤(CTA)按钮。

一个CTA 按钮通常牵涉到4件事情:位置,形状,文案和色彩。如果这四个因素在设计上都能良好的配合,那么这就是一个效果良好的CTA按钮了。在按钮的颜色选取和转 换上的争议可能是世界范围内争吵的最多也是最常的一个问题了。有大量的A/B 测试的测试结果显示,CTA 按钮的色彩变化对于注册等交互行为有着重大的影响。HubSpot 曾经共享过一个著名的按钮颜色测试:

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

Performable 所展示的A和B两个版本的按钮颜色测试,页面上的内容都是一样,测试的是颜色对于用户的影响。

虽然大家都预测绿色的按钮效果会更好,但是红色的按钮实际效果比绿色按钮高了21%。

所以,同样的道理,这样的测试结果并不能覆盖所有的情况。并没有一种神奇的色彩能够应用于所有的网页和APP,实际的情况需要根据你的受众、基于测试来进行选取,看看用户会怎样决策。

对比度是关键

如果你想让用户点击某个东西,那么尽量让它脱颖而出。如果你的网站或者APP中使用了大量的蓝色,那么用户可能不会立刻注意到蓝色的按钮,就像浅色 的背景下,浅色的按钮不会显眼。用户之所以会更倾向于CTA按钮也是因为它们对比更明显,会因为鼠标悬停、点击而发生状态改变,让人无法忽视。

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

结语

对色彩的基础知识有完整而深入的理解,是做好网页和APP设计的重要先决条件。这些色彩理论是做好UI设计的重要基石,提升的空间非常的大,怎么提 升还是要取决于你的努力方向。不论你此刻选取的色彩是什么,它们对于整体是一定会有影响的,从对比度、协调度和对用户情绪的感染力上,都有着直接的作用。

 

 

译文来自:优设

译者:@陈子木

原文地址:uxplanet

原文作者:Nick Babich

 

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28753/

APP设计GUIioslogoPSUIUI设计UX交互产品产品经理图标理论用户移动端视觉设计设计师译文转化率配色配色指南
赞 (0)
CatherineCatherine
0
生成海报
译文|界面设计中,关于字体设计的10 个锦囊
上一篇 2017-05-22 01:34
UI设计有哪些规范?
下一篇 2017-05-22 03:40

相关推荐

  • Don't make me think 读书总结 从零开始学交互

    Don't make me think 读书总结

       这本书算是一本很入门的交互设计图书,很多内容其实都是通过以前的积累已经知道的内容。我相信对于大家来说,“要记得在每个页面上加导航栏”这种提醒已经不需要了。所以,我在下面列出一些看完过后,觉得可以温习…

    2015-08-20
  • 梦想成为“全栈设计师”的你,可能需要这份视觉设计知识体系规划书 交互设计

    梦想成为“全栈设计师”的你,可能需要这份视觉设计知识体系规划书

    此文主要适读人群:梦想成为“全栈设计师”的你(偏向移动端产品)!当然设计都是相通的,即使你的职位是产品设计、交互设计、网页设计、平面设计也都不妨一看,相信你也可以有所收获!1、对app基础控件的认知
    2、字体
    3、配色
    4、图标设计
    5、标注与切图规范
    6、排版的基础原则
    7、简单的动效设计
    8、走察规范
    9、交互常识
    10、项目文件管理
    11、个人素材、资源库
    12、开发常识
    13、数据分析能力
    14、产品常识
    15、用研常识

    2017-05-10
  • App界面设计风格 | App界面交互设计规范

    App界面设计风格 APP设计风格是指APP通过主要的几种颜色搭配、页面布局和NPC等给用户呈现出的整体视觉感受。 一个APP开始启动设计时,第一步应该用主要页面定下整个APP的设计风格,然后其他页面按着统一的设计风格…

    交互设计 2015-08-26
  • 移动端体验设计6大禁 交互设计

    移动端体验设计6大禁

    我们一开始为什么去安装应用程序?是为了使我们的生活更方便。但当一个应用无法满足这一要求时,用户肯定就会离它而去。一个应用的成功是受多种因素影响的,其中整体移动用户体验是最重要的影响因素。绝佳的用户体验是一个应用程序成功的关键。

    2017-05-17
  • 用户体验设计师常用的21款工具和应用 交互设计

    用户体验设计师常用的21款工具和应用

    工作在用户体验团队中会经常需要用到一些在线工具。对于UX的世界,不管你是一个新手还是一个经验丰富的老鸟,你都不应该停止寻找一些会让你的工作变得轻松的工具。在这篇文章中,我们为你准备了21款有用户体验设计的相关工具。

    2017-05-29
  • 关于Android和IOS交互上那些事 交互设计

    关于Android和IOS交互上那些事

    先说Android平台,自从material design面世以来,市场上很多Android app在设计上参差不齐。可能由于设备及用户使用习惯等各种原因,大多数app都还在以Android 4.0的规范在做设计,当然也有很多app为了省事,直接从iOS上照搬过来。因此,真正以MD为设计基础的应用并不多。下面是一些整体的框架记录,更为详细的交互细节以后再说。

    2017-06-03
  • 五一福利大放送,再不收藏就没有了哦 交互设计

    五一福利大放送,再不收藏就没有了哦

    老板阿西太抠,说了好久才同意五一送福利,今天小编就放血,给大家送点福利,机会不是天天有该出手时就出手。 图标和字体想怎么用就怎么就,让设计不再孤单,要的就是这个范儿。 字体下载地址:http://pan.baidu.co…

    2015-05-01
  • 在不同屏幕和设备上,创建用户体验设计的8个步骤 交互设计

    在不同屏幕和设备上,创建用户体验设计的8个步骤

    从具有微型屏幕的智能手表到最广泛的电视屏幕,其中所开发的内容,应以便在各种屏幕尺寸之间进行查看和交互。但针对不同设备的设计更多的只是调整在不同的屏幕上显示的内容大小。它涉及到很多复杂性:设计师需要把每个设备中的用户体验最大化,以便用户相信实际上应用程序是为他们的设备设计的,而不是简单地拉伸到适合屏幕。为了创建一个好的用户体验,有必要制定一个针对各种设备和屏幕尺寸的策略。

    2017-04-29
  • 交互设计师的60日计划之第十一天

    今天又是上下午都有会,下午还感冒了…差点忘记写每日,要睡了突然想起来,就拿用研小总结凑个数吧。 20150806 及时给出反馈结果 用户的一些基本特点比起用户体验更注重功能,期望能有更多的功能。开发人员学习能力…

    交互专题 2015-08-20
  • 浅聊四个主流的页面间跳转动效 交互设计

    浅聊四个主流的页面间跳转动效

    最近一直在做交互规范总结的工作,在不断梳理页面间跳转逻辑的同时,发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效,却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范,花了大量时间把玩现在公司线上的产品以及国内外优秀的APP,尤其是苹 果、谷歌自己开发的APP。(如果某些方面在设计规范中并没有给出答案,就在原生APP中找答案吧!)

    2017-05-29
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress