UI设计中的色彩使用

夏 梦 （广东科学技术职业学院计算机工程技术学院 519090）

在设计领域，颜色是相当主观的一样事物。某种颜色会唤起某人的情绪反应，但是同样的颜色对于不同的人而言，由于个人偏好、成长背景、文化习俗的不同，唤起的可能就是另一种完全不同的情绪反应。有时，像改变颜色的明度或是饱和度这样小的调整都会给人带来完全不同的视觉和心理感受。同一种颜色在不同的国度，因为文化习俗以及地理环境的不同，也会又不一样的代表意义。

一、认知色彩

色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。人对颜色的感觉不仅仅由光的物理性质所决定，人对颜色的感觉往往也会受到环境颜色的影响。有时人们也将物质产生不同颜色的物理特性直接称为颜色。

色相是最最基本的颜色术语、通常用来表示物体本身的固有色。当我们说红、黄、蓝时，我们说的就是色相。设计的色调可用来给网站的访问者传递重要信息。

饱和度是指某一色相在特定的光照条件下是如何呈现的。可以把饱和度看成是色调的鲜亮与灰暗、浊与纯。

明度也被称作亮度，它是指颜色的亮与暗。

当灰色加入到一个色相中时，便产生了色值，色值要比纯的色相柔和或是灰暗些；当黑色加入到一个色相中时，便产生了暗色泽，颜色变暗；当白色加入到一种色相中时，就会形成浅色泽，颜色变亮。

二、赋予色彩的情感

我们把颜色分为冷色和暖色。

暖色包含红、橙、黄以及这三种颜色的变种。它们分别是火焰、果实以及日出和夕阳的颜色，它们通常象征活力、激情、积极和运动。红和黄这两种颜色都属于三原色，而橙色则处于两种颜色之间，这意味着红色和黄色是真正的暖色，没法通过混和一种暖色和冷色而获得。我们在设计中使用红、橙、黄以体现出激情、快乐、热忱和活力的主调来。

研究发现暖色有勾起食欲的作用，所以很多是餐饮品牌都喜欢用暖色，如三大快餐巨头：肯德基、麦当劳、必胜客都是用红色和黄色来作为自己的标准色或者是辅助色。暖色也是有活力的象征，所以运动品牌也钟爱暖色，像耐克。当然暖色也有消极的一面，暖色使人心跳加快、血压升高，视觉停留在暖色时间过长，会使人产生焦躁不安的情绪。所以在医院这样的需要冷静的场所，是几乎不会出现暖色的，特别是红色。

那么在设计UI时，暖色的使用范围我们就很清楚了，餐饮类、娱乐类、运动类等等都可以使用暖色来作为主色调。

冷色系包含蓝色、绿色和紫色，相对暖色，视觉强度要弱。它们是夜、水和自然的代表颜色，通常给人感觉是舒缓，放松，甚至有一点冷淡。

蓝色是冷色系中唯一的原色，这意味着其他颜色是由蓝色混合某种暖色而成（混合黄色得到绿色，混合红色得到紫色），绿色继承了黄色的一些属性，而紫色则继承了红色的一些属性。在设计中使用冷色可以营造一种冷静、严谨或专业的感觉。

一些高科技企业为了传达一种专业、严谨的心理感受，通常使用深蓝色作为企业标准色。跟大自然相关的一些界面设计通常喜欢用绿色作为主色调，特别是橄榄绿，给人传达一种清新自然的感受。

紫色是女性钟爱的颜色，它传达了高贵、性感、诱惑、魅力等感情色彩，高端奢侈品常用紫色来作为主色调，服务于女性的机构，如塑身美颜的美容行业，很多都用紫色来作为企业主色调。

黄色：青春、乐观、豁达。常被作为点睛之笔。

红色：活力、速度、紧迫感，常用用于节庆。

蓝色：信任、安全、有底蕴、神秘，常用于企业、银行、安全中心等行业机构。

绿色：生命力、轻松、天然、无污染，常用于跟自然相关的行业。

橙色：积极、进取、活力，耐克专卖店使用的也是橙，代表活力与运动。

粉色：浪漫、女人、可爱，常用于女性消费行业或者是儿童用品等。

黑色：影响力、时髦、严肃，常用于奢侈品营销等。

紫色：高贵、冷艳、诱惑，常用于美妆或美颜塑形的女性产品设计中等。

当然每一种颜色的感情色彩不是一定的，饱和度和明度的不同，色彩传达出来的感受也会完全不同；颜色之间的搭配的不同，也会让色彩又不一样的感觉；颜色搭配时，每种颜色的比例不同，也会出现不同的视觉效果。

所以要使用好色彩，除了了解各种色彩的感情色彩，更重要的是通过正确的色彩搭配，向用户传达不同的情感。

三、色彩的搭配

1.黑白灰

如果没有更好的配色方案，可以选择黑白灰进行搭配，正如我们穿衣搭配一样，有可能不出彩，但是至少不会错。当然，黑白灰也需要有丰富的层次，否则整个界面就会感觉很单调无趣了。

2.黑白灰基础上加入一种或者两种颜色

如果你觉得黑白灰过于单调，那么可以试着在黑白灰的基础上加入一种或者两种颜色，会使得整个画面鲜亮活跃起来。

3.使用同一色相的不同饱和度或者明度的颜色进行搭配

使用同一色相的颜色进行搭配，整个画面色调非常的统一整体，不会乱，又不乏丰富的细节，不失为一种好的色彩搭配方式。

4.邻近色搭配

邻近色都互相含有彼此的颜色，所以邻近色的搭配一般来说都是比较协调的，比起同意色相内的颜色搭配，邻近色的搭配会使界面色彩看上去更加丰富，更加活跃。

5.使用互补色进行搭配

互补色的搭配对于新手来说是比较有挑战性的，比例或者饱和度选择不好的话都会使效果大打折扣，所以，使用互补色要注意颜色之间比例的搭配。

6.使用自然风景照片进行主色调设计

大自然的色彩搭配是最美的，选择一张色彩明快丰富的风景照片作为背景色，用模糊的方式对其进行处理，在上面呈现文字和画面是很好的选择。

当两种及两种以上的颜色放在一起时，任何一个色彩都会被当作其他色彩的参照物，他们之间出现色彩对比关系。色彩的对比是绝对的，因为两种以上色彩在配置中，总会在色相、饱和度、明度和大小比例方面或多或少地有所差别，这种差别必然会导致不同程度的对比效果。对比强烈的颜色需要加强共性来进行调和，对比较弱的配色需要加强对比来进行调和。说得简单点，当你明显感觉到一种颜色的力量过弱或者过强时都需要调整。为了某一目的，应调整色彩的色相、纯度、明度和面积等方面，以达到色彩集合的和谐、统一。如果我们使用两种很难调和在一起的颜色进行搭配，这时就需要介于两种颜色之间的辅助色。

四、总结

把色彩当人看，当你确定一个界面的主色调时，其他的颜色要不就和“她”和平共处，要不就和“她”打架，谁实力坚挺，谁就住在整个画面。而设计师就是那个调停安排的人，帮助“他们”解决问题。

[1][日]伊达千代著.悦之文化译.色彩设计的原理.北京：中信出版社，2011.10 ：33-39.

[2]梁景红.写给大家看的色彩书①——配色基础.北京：人民邮电出版社，2011.1 ：96-128.