UI配色攻略——科学合理的通过颜色吸引用户、增加粘性

本文由浅到深，讲述了一些色彩的使用技巧，使用时需具体问题具体分析，切忌死搬硬套.

 

一、色彩的基本认知（本模块设计小白可以了解一下，有基础的略过）         

 

 1、色彩由色相、饱和度、明度三要素构成

 

色相(Hue)

即各类色彩的相貌称谓，如大红、普兰、柠檬黄等。色相是色彩的首要特征，是区别各种不同色彩的最准确的的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相也是由原色、间色和复色来构成。

 

饱和度(Saturation)

饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大，饱和度越高；消色成分越大，饱和度越低。

 

明度(Brightness）

明度是眼睛对光源体和物体表面的明暗程度的感觉，主要有由光线强弱决定的一种视觉经验。明度不仅取决于物体照明程度，而且取决于物体表现的反射系数。

 

2、配色的基本认识

基本色环(Color Wheel）

按照光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝、蓝紫、紫、紫红、红和紫中间在加个中间色。在色相环的圆圈里，各种色调按照不同角度排列，则十二色相环每一色相距30度，24色相环每一色相距15度。

 

同一色

色相环中的任意色因明度变化而呈现的色彩。颜色混合是通过在色彩中加入黑、白、灰形成的。统一色调，色彩的纯度和明度是具有共同性，明度按照色相略有变化。

同色系配色是指主色和辅色都在同一色相上，这种配色方法往往会给人页面很一致化的感受

 

同类色

同类色又称类似色。色相环原色起45度以内，含有较多共同的色彩元素的色彩，同类色指色相性质相同，但色度有深浅之分。

 

相邻色

色相环中相距90度，或者相隔五六个数位的两色，为邻近色关系，属中对比效果的色组。色相彼此近似，冷暖性质一致，色调统一和谐，感情特性一致。

相邻色不同于同一色的枯燥乏味。稍微跳动的的色彩也一样保持着设计的稳定性，还能起到强调单独作品的作用

 

对比色

指色相环上色相对比较大、纯度较高的任意两色。对比色之间无过多的共性，对比效果强烈。当对比的两色具有相同的彩度和明度时，对比效果越明显；两色越接近补色，对比效果越强烈。

主导的对比配色需要精准掌控色彩搭配和面积，其中主导色会带动页面的气氛，产生激烈的心理感受。

 

补色

补色又称互补色、余色，亦称强度比色，就是两种颜色(等量)混合后呈现黑灰色，那么这两种颜色以定位互补色。色环的任何直径两端相对之色都称为互补色

补色对比由于色彩过于冲撞，很少用户传统网页界面，一般用于活动 banner，起到吸引用户眼球的作用。

 

二、HSB色彩模型

1、什么是HSB色彩模型

如果你写过HTML和CSS，那么肯定熟悉RGB，三个字母分别表示：R(红)、G(绿)、B(蓝)。这种方式对电脑来说非常直接明了，也是电脑理解颜色的默认方式。对电脑友好并不意味对人类易用，这也是HSB诞生的原因。

HSB代表色相(Hue) – 饱和度(Saturation) – 明度(Brightness)，又称HSV，是一种更人性化的颜色描述方式。为什么这么讲？因为它与人们描述颜色的自然方法一致。

 

2、HSB色彩模式设置及优点 

 

1)、比起 RGB 系统，HSB使用了更贴近人类感官直觉的方式来描述色彩 ，对于设计师来说更容易理解

HSB 的概念很接近色彩学所常使用的色彩空间模型，由于是由三个属性所组合而成，因此常以色立体表示，

但由于我们常用的操作系统依然为二度空间的系统，因此在计算机系统的选色接口中常以不同的接口出现，我想其实大家都很熟悉，像是下图为sketch中的选色器，可以看见一个全彩的色相条，和一个颜色的窗口，滑动色相条即可得到不一样的颜色

 

2)、HSB可以更加科学地保证设计师所使用的不同颜色处于同一明度和饱和度，使用户的视觉体验感更好

也许你会觉得 HSB 并没有比较简单，但是实际使用过就会发现，它是多么的好用。例如下图的男女比例的背景色块，如果用RGB调色只能通过设计师的眼睛和经验来调整他们是否处于同样的色调中，但是用HSB来调色，保持S和B值相同，只需要滑动色相条即可得到完全一样的色调，省时省力还科学

 

三、色彩使用规则

 

1、色调的分类

色调（color tone）是不同色相但是具有同样亮度和纯度的颜色进行的分组，

 

极浅vp（very pale）色调：

是纯度最低、亮度最高的，干净清淡的颜色，给人清的，柔弱的，女性的，年轻的，淡的，可爱的印象。

 

亮灰色lg（light grayish）色调：

纯度低，中高亮度的色调，给人高贵、安定、古朴的印象和轻柔的感觉。

 

中灰色mg（medium grayish）色调：

低纯度中亮度，具有浊，不起眼，古朴，稳健，安定的气氛。

 

深灰dg（dark grayish）色调：

低纯度和中低亮度，给人漂亮、安定、自然的感觉。

 

极暗vd（very dark）色调：

是纯度和亮度都最低的色调，具有厚重牢固的感觉，给人非常暗，阴暗，厚重，坚固、男性的印象。

 

浅的pl（pale）色调：

中纯度和高亮度的色调，给人干净、浅、爽朗的感觉。

 

柔软sf（soft）色调：

中纯度和中高亮度，给人稳健温柔的感觉。相比浅色给人感觉更安定。

 

晦暗dl（dull）色调：

中纯度和中亮度的色调，给人安心高雅的感觉，一般说的中间色就是晦暗色调。

 

暗dk（dark）色调：

中纯度和低亮度的色调，具有结实，成熟，古朴的色调印象。

 

亮It（light）色调: 

高纯度高亮度的色调，具有明亮、健康、活泼，年轻而稳定的印象。

 

强st（strong）色调：

高纯度和中高亮度的色调，充满活力，冗长，热情，开放的印象。

 

深dp（deep）色调：

高纯度和低亮度的色调，具有力量感和深度，给人深的，浓的，传统的等印象。

 

活泼VV（vivid）色调：

高纯度和中亮度的色调，较为鲜艳，鲜明，华丽，鲜艳，鲜活的印象。

 

2、色调配色技巧

同色相环配色技巧原理一样，色调也有3种基本的配色技巧。

1）同色调的配色：

同色调的颜色几乎没有亮度和纯度差，是比较容易统一和协调的配色。

 

2）邻近色调配色：

具有一定的亮度和纯度差但是差值不大，比较容易调和，容易传达原有印象。有纵向邻近、横向邻近、和斜向邻近三种。

 

3）对比色调配色：

亮度与纯度差很大，是极具张力的配色方法。是色调图上相隔很远的色调的配色。自由选择色相，有亮度对比、纯度对比、亮度和纯度对比这三种配色方式。

 

3、配色网站推荐

推荐是三个比较好用的、简单操作的配色网站，有需要的可以收藏

1、coolors.co

2、designspiration.com

3、materialpalette.com

 

四、常用色分析 

 

除了医疗作用外，颜色还有一定的象征意义和社会属性，对人类生活有着举足轻重的影响。颜色心理学领域的佼佼者，美国罗切斯特大学安德鲁.埃利奥特说，以前从来没有人做过这种联系。他表示：“颜色研究表明的是，我们的行为会受到我们没有留意，习以为常的事物的影响。”

据国外媒体报道，人们常常认为，穿着红色服装是自信的表现。同时，科学家们也认为，运动员身穿红色运动服更容易取得好成绩。然而，英国罗彻斯特大学的安德鲁·埃里奥特等人开展的一项最新研究却显示，红色会抑制人们思维的活跃性。

埃里奥特和他的研究小组共对一些中学的高年级学生和部分大学生进行了四次研究。期间，他们向被测试者发放了一些用于进行智力水平测试的纸片——在各张纸片的右上角分别用红色、灰色或绿色表明了序号。

结果，凡是所持纸片上用红色标明序号的学生，其所获得的智力水平评分均明显低于那些手持灰色或绿色序号纸片的学生。先前的研究已经证实，人们在日常生活中所接触到的颜色会对人的潜意识产生影响，只不过这种影响非常短暂。

埃里奥特教授认为，红色首先会使人们联想到错误和失败。谈到这一点，大多数人肯定都会想到老师在判卷时所使用的红墨水。当然，有关禁止的信号通常也以红色表示。而在自然界中，红色则是一种警示色。随后进行的另外两项研究则证实，当受测试者眼看着红色回答问题时，他们通常会选择那些较为简单的问题进行解答－－这是人们在面对困难时所选择的最经典的方法。

与红色相对的是，蓝色能够促进创新；黄色，则是最令人愉快的颜色，它被认为是愉快的象征，可以刺激神经系统和改善大脑功能，激发人的朝气，令人思维敏捷。另外还有，橙色，是新思想和年轻的象征，令人感到温暖、活泼和热情，能启发人的思维，可有效地激发人的情绪和促进消化功能。

赏心悦目的色彩能够通过视神经传递到大脑神经细胞，从而有利于促进人的智力发育。在和谐色彩中生活的少年儿童，其创造力高于普通环境中的成长者。若常处于让人心情压抑的色彩环境中，则会影响大脑神经细胞的发育，从而使智力下降。所以，我们在平时日常生活中，正确的应用色彩心理学，改善生活环境色彩，让我们的心情更舒适，思维更敏锐。

所以一定不要让自己孩子在高考的时候穿什么红色的外套，旗开得胜什么的，可能会影响思维活跃度，导致考试成绩不理想

 

橙色稍稍混入黑色或白色，会变成一种稳重、含蓄又火热的暖色，但混入较多的黑色，就成为一种烧焦的色；橙色中加入较多的白色会带来一种甜腻的感觉。由于位于可见光的中低频频段,橙色在空气中的衍射能力仅次于红色，而其色感比红色更暖，最饱和的橙色应该是色彩中感受最暖的颜色，能给人有庄严、尊贵、神秘等感觉，所以基本上属于心理色性。历史上许多权贵和宗教界都用以装点自己，现代社会上往往作为标志色和宣传色。不过也是容易造成视觉疲劳的色。

 

英国埃塞克斯大学做了一项研究显示，绿色是很特别的颜色，在四季分明之地方，如见到春天之树木、有绿色的嫩叶，大自然的颜色。在绿色环境中锻炼能提高情绪、活力和愉悦感。也就是说，户外锻炼有益身心。

色彩心理学家早就指出，人们在高频率颜色(如绿色，蓝色和紫色)的环境下会产生平静的感觉，而在中低频率颜色(如红色，橙色和黄色)的环境下更容易兴奋和激动。这一现象可能是在人类进化的过程出现的。因为对于原始人类来说，绿色的环境意味着充足的食物和水源，对绿色的积极感觉在进化过程中融入大脑。

英国埃塞克斯大学的研究者选取十四名男大学生，要求他们在室内固定单车上骑行5分钟，并观看关于森林的纪录片。随后，研究者将视频背景由绿色转换为黑色、白色和红色，让志愿者在观看这3种颜色视频的同时，又分别骑行了5分钟。结果发现，他们在观看绿色视频时疲劳感低，情绪也能保持愉悦；而观看红色背景视频时，他们更容易情绪不稳。

 

紫色跨越了暖色和冷色，所以可以根据所结合的色彩创建与众不同的情调。带些红色的深紫色可以产生一个暖色盘。浅紫色是较贵的，常常会联想到浪漫。当结合玫红色的时候，可以创建一个很女性化的色盘。一个比较男人的色盘可以使用偏红偏黑的深紫色。泥土和自然的色彩可以结合红紫色和浅褐色或者亮紫色+绿色。黄色和紫色是对比色，可以创建强对比度的色盘。

 

 

 

 

原文地址：站酷

作者：木子浅谈