你当前所在位置:首页 > IT技术探讨 > 小白学UI|如何做出诱人的UI配色(基础篇)

小白学UI|如何做出诱人的UI配色(基础篇)

你懂“色”吗?

你的作品够“色”吗?

你是不是经常在界面设计中

为用什么颜色而纠结烦恼?

辛辛苦苦设计好了,

却因色彩搭配不合理而被否定?

为什么别人家的设计那么优秀?


UI配色 (1).jpg


如果你在UI设计中有以上烦恼,小编可以郑重的告诉你:那是因为你还不懂“色”,或者说你“色”的功底还不够。

 

所以,我想你现在很有必要,放下手头的事情,好好地跟小宝君一起来学学如何做出诱人的UI配色。

 

为了照顾初学UI设计的小白,我们还是从最基本的色彩原理说起吧:


认识RGB与HSB


· RGB

RGB是一种用于显示器的色彩模式,由光学三原色(红Red、绿Green、蓝Blue)组成,我们称之为RGB色彩模式。


UI配色 (2).jpg


RGB色彩模式几乎包括了人类视力所能感知的所有颜色,我们可以通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各种颜色。例如:


UI配色 (3).jpg


· HSB

HSB是色彩的三个要素,分别是色相(Hues)、饱和度(Saturation)和明度(Brightness)。


·· 色相(Hues)

色相,顾名思义,就是指色彩的相貌,是自然状态下的色彩。例如橙色的胡萝卜,这个橙色指的就是色相。下图是最基本的色相,有红橙黄绿青蓝紫。


UI配色 (4).jpg


需要注意的是:黑色和白色是无色相的。


·· 饱和度(Saturation)

指色彩的鲜艳程度。例如我们说这位姐姐的唇彩颜色好鲜艳,就是指这个唇彩颜色的饱和度很高。


UI配色 (5).jpg


饱和度最高的色彩就是原色,随着饱和度的降低,色彩就会变黯淡,降到最低就会失去色相,变为无彩色,也就是只剩下灰度(黑白之间的各种灰色)。


·· 明度(Brightness)

指色彩的明暗度,即深浅程度。色彩越接近黑色明度越低,越接近白色明度越高。我们说这个颜色好亮,就是指这个颜色的明度很高。


UI配色 (6).jpg


··· 明度与亮度的区别

亮度是指发光的强度,与物体表面色彩反射的光量有关。一般来说,彩色物体表面的反射光量越多,亮度就越高。


UI配色 (7).jpg


明度是一个心理颜色概念,是指人们所感知到的色彩的明暗程度,它以亮度为基础,但不等同于亮度。例如蓝色的光量很高,但其明度却低。


UI配色 (8).jpg


色彩搭配基础


· 色环

UI配色 (9).jpg


色环对于UI设计师来说是一个重要的工具,特别是对于菜鸟级别的设计师。通常包括12种颜色。


· 单色搭配( Monochromatic )

UI配色 (10).jpg


单色搭配就是单一色系的搭配,通过调整颜色的深浅、明暗或饱和度来形成明暗的层次关系。


UI配色 (11).jpg


单色搭配在app UI设计中一直都是一个不错的选择,特别是蓝色系和绿色系。


· 类比色搭配( Analogous )

UI配色 (12).jpg


类比色搭配是指选用一款颜色作为主色调,色轮中临近的颜色作为辅色。因为在色轮中相互靠的很近,所以搭配起来不会有很突兀的感觉。


UI配色 (13).jpg


类比色搭配通过一个色彩渐变的效果,来给用户提供不同任务优先级顺序的视觉提示。


· 互补色搭配( Complement )

UI配色 (14).jpg


在色轮上直线相对的两种颜色称为互补色。互补色因为互相处于对方的对立面,所以搭配起来会形成强烈的对比效果,进而吸引用户的注意力。


UI配色 (15).jpg


例如,当我们的眼睛看到一大块绿色区域时,一小块红色就会显得特别突出。


色彩心理学


· 色彩的情绪影响

我们身处在一个多彩的世界中,物体的不同颜色,会让我们产生不同的情绪。例如:


UI配色 (16).jpg


· 色彩的性别偏好

男生和女生的色彩偏好是不同的,一般来说,男生较喜欢蓝色系,女生较喜欢红色系。


下图是根据JoeHallock的研究,不同性别的色彩选择,从最喜欢的色彩到不那么喜欢的色彩分别所占的比例。


UI配色 (17).jpg


从图中可以看出:


男生喜欢蓝色、黑色、灰色和白色较多;

女生喜欢紫色、红色、黄色较多;

男生和女生都喜欢绿色,而且占比一致,看来绿色是男女通吃的色彩;

此外,蓝色是所有色系中最受欢迎的色彩。


· 不同性格人群的色彩偏好

不同性格人群面对不同的色彩所产生的心理感受也是有差异的。


CSMP性格系统从宏观上把性格分成了四类:和平型、活泼型、完美型、力量型。


下表是不同性格人群色彩偏好的调查分析结果:


UI配色 (18).jpg


从上表可以看出,灰色在各种性格人群中是比较安全的色彩。


小结


在UI设计中,懂得如何配色,是一项非常重要的美术素养。但许多初学UI的小白,往往一开始就把学习精力放在设计技巧上,而忽略了“色”的功底,这样就会造成在设计工作中出现“技术有余、水平不足”的现象。


所以,掌握以上这些色彩学的基础知识是很有必要的。当然,关于UI设计中色彩的知识远不止这些,限于篇幅,今天就写到这里。


我们下一篇将带来色彩运用的进阶篇。想跟着我们一起学习的朋友可以多多关注我们哦!

课程预约