我们身处在一个多彩的世界中，物体的不同颜色，会让我们产生不同的情绪。色彩，即光从物体反射到人的眼睛所引起的一种视觉心里感受，按字面含义上理解可分为色和彩。「色」是指人对进入眼睛的光传至大脑时所产生的感觉，「彩」则指多色的意思，是人对光变化的理解。色彩的基本理论虽然老生常谈，但在UI设计中具体怎么运用，还有关于色彩的性格和含义，都是我们需要了解的。因此在学习UI配色之前我们先来了解色彩的基础知识。

原色

所有的色彩都源自“红黄蓝”三种原色，很多人误以为三原色是“红绿蓝”，其实不是。红绿蓝是显示上的三原色，计算机屏幕的显示是色光三原色（红red，绿green，蓝blue）即RGB组成的，每一个像素的颜色都用三原色值来显示，与美术上的三原色不一样。原色是其他颜色调配不出来的。把原色相互混合，可以调和出其他种颜色。

虽然 RGB 在显示设备上表现良好，但并不够人性化。因为人们判断颜色，往往是通过：这是什么颜色？是不是太艳了？是太亮了还是太暗了？这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGB 衍生出了 HSB 模式和 HSL 模式。

印刷三原色为青（Cyan)、品红（Magenta)、黄（Yellow)。是减色模式，混合为深灰色，并不能产生黑，所以在印刷时加上黑色油墨，才能产生纯正的黑，就是CMYK颜色模式。

间色

又叫“二次色”。它是由三原色两两混合调配出来的颜色。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫“三间色”。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。

复色

也叫“复合色”。复色是用原色与间色相调或用间色与间色相调而成的“三次色”复色是最丰富的色彩家族，千变万化，丰富异常，复色包括了除原色和间色以外的所有颜色。例如，黄色与橙色混合得到橙黄，红色与紫色混合得到紫红。

冷暖色

最后由三种原色、三种间色和六种复色组成的系统就称为十二色环，从紫色至黄绿为冷色，黄色至紫色为暖色。冷色令人联想到天空、海洋、冰雪等，产生寒冷、理智、宁静等感觉；暖色则令人联想到太阳、火焰、热血等，产生温暖、热烈、危险等感觉。

1.2色彩三属性

丰富多样的颜色可以分成两大类，即有彩色系和无彩色系。彩色系的颜色具有三个基本特征：色相、明度和饱和度，在色彩学上被称为色彩三大要素或色彩三属性。

色相（Hue）

色相是自然状态下的色彩，是色彩的相貌。简言之，色环上没有改变明暗的色彩。色相是色彩的首要特征，是区别各种不同色彩的标准。例如红、橙、黄、绿、青、蓝、紫就是其中不同的基本色相。黑色是没有色相的中性色。不同的色相在人眼中的差异是色相本身对应光的波长不同而造成的。红色波长最长，紫色的波长最短。

饱和度（Saturation）

饱和度是色彩的纯度，他表示颜色中所含有色成分的比例。增加饱和度，色彩会变得更强烈、鲜艳生动；降低饱和度，颜色中灰色成分越大，色彩会变得暗淡乏味。当一种颜色掺入黑、白或其他色彩时，纯度就产生了变化，当掺入的颜色达到很大的比例时，人的眼睛就无法感知出来了。饱和度为0 的颜色为无彩色，就是黑、白、灰。数值越大，颜色中的灰色越少，颜色越鲜艳。饱和度高的地方给人感觉靠近，而饱和度低的地方则给人的感觉很遥远。高饱和度和低饱和度的色彩都给人坚硬的感觉。

明度（Brightness）

明度，指色彩的明暗度，反应的是色彩的深浅变化。以自然界为例，一些物体在早晨和晚上的色彩不同。如树木和山脉，早晨色调浅；傍晚因为光线减少了，色调变得偏暗。距光源越近的物体，明度越高，反之，则明度越暗。明度在UI设计中扮演重要的角色，明度运用得好，可以实现好的对比效果。明度达到100%时，色彩就会变成白色（黑白模式下）；明度是0%时，就会变成黑色。色彩的明度变化往往会影响到纯度，例如蓝色加入黑色以后明度降低了，同时纯度也降低了；如果蓝色加入白色则明度提高了，纯度却降低了。

色彩心理学是美术知识学习中非常重要的一部分。他所研究的是色彩通过对人视觉上的刺激，而引发人情感和感官上的变化，通过日常生活中人们对应用色彩的经验积累而归纳总结出人类对色彩心理上的预期感受。在生活中，色彩心理学对人们对颜色的认知有很大的影响。为什么交通信号灯用红色表示停止通行而不是绿色呢？为什么大多快餐店用红色或黄色作为品牌的主色？这都是色彩心理学的相关知识。

黑色

黑色代表着品质、高端、时尚、低调、权威、严肃、稳重，是一种充满质感的颜色。它是所有色彩中最有力量的，能很快吸引用户的注意力。作为一种无彩色，能让它和其他色彩百搭，黑色+金黄色，给人一种奢华精致的感觉；黑色+银灰色，则给人一种成熟稳重的感觉；黑色+红色，给人一种时尚潮流的感觉。因此黑色是一种永远流行的主要色彩。

白色

白色代表着纯洁、简单、纯真、朴素、信任、开放、雅致，白色常常被认为是“无色”，即不是色彩。单一使用白色通常不会引起任何情感，但是当白色与其他颜色配合使用时，白色能很好的衬托，大量的留白让其他元素脱颖而出。在界面设计中，作为无彩色的白色，常用于背景色，缓和各种颜色的冲突，以衬托其他色彩，提高画面明度，提高文字可读性。

灰色

灰色是代表着睿智、老实、执着、严肃、压抑、沉稳。介于黑色和白色之间，也属于无彩色，没有色相也没有纯度，只有明度的变化。它和任何颜色都能很好的搭配，也常常用于背景色或用于突出其他彩色。灰色不像黑色那么坚硬刺眼，他更有弹性，它比黑色更有深层次的力量。因此在画面中，很少出现纯黑，基本都是用深灰色来代替黑色，也可以用浅灰色来代替白色。

红色

红色代表着喜庆、热情、欢乐、斗志、奔放、自信，是一种充满能量的颜色。这是最醒目和强势的颜色，一登场即获得全场的关注，甚至能引起一些生理反应，例如心跳呼吸加快等。红色最能烘托气氛，在中国传统节日里都使用热闹的红色来装饰，因此也就不难理解每逢佳节各大电商应用活动页一片红，为的就是发冲动，引人消费。同时红色也代表了警示、告诫。所以在界面设计中常用红色的文字和按钮来警示用户慎重操作。

橙色

橙色代表着温暖、欢乐、辉煌、健康、阳光、年轻、华丽，是一种充满朝气的颜色。橙色并不像红色那样咄咄逼人，而且它烘托出的活跃气氛没有危险的感觉，反而是一种友好。因此越来越多的应用避开常见的红色和蓝色，而选择橙色的原因。

黄色

黄色代表着信心、青春、聪明、尊贵、辉煌、时尚，是一种充满活力的颜色。黄色是明度极高的颜色，其鲜亮的色调使它在众多图标阵列中显得尤为突出。尽管在警示效果上没有红色那么明显和强烈，但是还是能给人很醒目和危险的感觉（例如道路警示牌）。同时因为过于明亮，也是一种非常难以运用的颜色，性格不稳定常有偏差，和别的颜色配合使用易失去本来的性格。不过黄+黑的搭配很流行，例如站酷和美团外卖。

绿色

绿色代表着健康、生命、青春、宁静、自然、和平、安全、舒适，是一种充满希望的颜色。绿色给人无限的安全感，当情绪低落与消极时看一些绿色，能缓解我们焦躁的情绪。绿色在生活中被广泛运用，如安全出口的颜色就是绿色，但绿色的饱和度要适当控制，如高饱和度的绿色也会令人兴奋，引起注意。

青色

青色代表着坚强、古朴、活泼、清爽、柔和、优雅、希望，是一种充满灵动的颜色。青色是一种介于

绿色与蓝色之间的颜色，如果无法界定一种颜色是蓝色还是绿色时，这个颜色就可以被称为青色。豆瓣的主色调是青色，很符合豆瓣小清新的气质，带给用户恬静的感受。

蓝色

蓝色代表着冷静、科技、灵性、自由、放松、未来、理智、纯净、商务，是一种充满理性的颜色。蓝色是天空的颜色，是大海的颜色。在色彩心理学的测试中发现，几乎没有人对蓝色反感。纯净的蓝色通常让人联想到海洋和天空，可以抚平内心的伤口，让人的内心感到平和，有助于人的头脑变得冷静。例如twitter的主色调是蓝色，在社交应用里蓝色是一种很安全的颜色，高纯度的颜色传递了信赖、年轻和沟通的氛围。

紫色

紫色代表着高贵、浪漫、优雅、性感、幸运、梦幻、时尚、创造性，是一种充满神秘的颜色。是小孩子和有创造力的人十分喜欢的颜色。紫色的光波最短，在自然界中较少见到，所以被引申为象征高贵的色彩。紫色的明度在所有有彩色的颜色中是最低的。与不同的颜色结合会展现厨不同的风格特色。紫+粉常用于女性化的产品调性，黄色是紫色的对比色。

当我们讨论色彩的时候，聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的选择，但是实际上，色彩对于用户的心理和行为的影响相对更深，最终会反映在用户体验和行为反馈上。

当然，色彩理论是一个相对复杂的主题。从用户体验的角度上来说，色彩所涉及到的远不是配色方案这一个维度。通常，我们聊得最多的是不同色彩所产生的心理效应，以及多色彩搭配时，相互之间的影响和可访问性上的问题。设计师可以将色彩更好地运用到设计中，而无需重新考虑整个过程。一旦设计师掌握了基础知识，色彩理论中最有意义的部分之一就是学习将更多意想不到的色彩融入他们的设计中。

3.1 色彩心理学和用户体验紧密关联

界面颜色的情感影响不容忽视。尽管有些颜色在Ui设计中是“通用的”（例如，黑色，白色和灰色，实际上几乎所有好的设计中都使用了其中的至少一种），但它们结合使用的颜色可能会对体验设计产生巨大影响。当然，颜色的使用方式也会对颜色的感知产生巨大影响。以蓝色为例，在简约的布局当中，大面积使用蓝色作为主色调，和在大面积白底上使用很小的一抹蓝色用来强调 CTA按钮，所带来体验是截然不同的。

3.2.1 尊重文化差异

人类对于色彩都有着共通的认知，但不同国家对于色彩赋予了不同的含义。红色在中国象征着喜庆、财富和爱情，而在西方国家被赋予了流血、牺牲、暴力和激进的文化意义，贬义的味道更重一些。而白色与红色相反，白色在中国代表了死亡、反动和投降，以白色为主的设计常常会被视之为过于「素」，认为不够吉利。而西方国家却认为白色高雅、纯洁和幸运，因此要根据不同的文化背景，使用不同的色彩，才能更好地降低被误解的风险。

例如股票交易市场，在国际股票市场通常是绿涨红跌，这是因为红色在西方国家代表着财政赤字，绿色代表着财富；而在中国正好相反是红涨绿跌，这是因为在中国红色象征着财富。

设计师必须根据产品的目标受众来审视其调色板的文化含义，这一点很重要。如果产品要面向全球受众，请确保在使用的颜色和图像之间取得平衡，以防止负面的文化内涵。如果产品主要只针对特定文化，则设计师可以不用太关心所选调色板在其他文化中可能产生的影响。

4.1色彩的应用

人脑对于色彩的记忆度要高于形态，即一个App给用户留下深刻印象的往往是界面的色彩。例如说到支付宝，我们可能想不起它的首页长什么样子，标签栏图标是那些，但能马上记起它的界面主色是蓝色。因此运用好色彩对UI设计十分重要，它能直观的呈现产品的气质和性格，能有效的帮助用户组织和阅读信息，与界面设计产生联系和记忆。好的配色往往依靠设计师审美、感觉搭配出来，但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑，下面结合相关案例为大家讲解色彩运用的几个技巧。

4.1.1 不得触碰的禁区

分析研究了很多优秀设计作品，发现他们在用色的时候有一部分区域是不会使用的，也就是我们常说的“配色禁区”。当然，这里的“禁区”是带双引号带的，并没有什么绝对的禁区，只是说这些颜色不易控制，在连基础色都没有驾驭好之前，尽量少碰。

综合看来，不管是那种禁区，右下角区域的颜色是很少用的。毕竟他们又脏又深，当然什么颜色都能驾驭的大师请略过。

4.1.2 色调一致

在App设计之前应先确定界面的主色调，主色将占据界面中很大的比例，通常是品牌色，而辅助色、点缀色、背景色等都应以主色调为基准来搭配，这样才能保证App整体色调的一致。色调一致的界面，能带给用户始终如一的视觉体验。例如马蜂窝将黄色（品牌色）作为主色，以及从主色搭配出的蓝色（对比色）贯穿App始终。

4.1.3 60-30-10原则

60% 30% 10%的原则，是达到色彩平衡的最佳比例。在60%的空间使用主色，可以运用到导航栏、按钮、图标等关键的元素中，使之成为整个App的视觉焦点和色彩关系；30%的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下10%的空间为点缀色，可以用在一些不太重要的元素又需要区分的时候。6:3:1原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。

4.1.4 色不过三

经常很多大神在网上说配色不要超过三种色，其实就是「色不过三」原则，即在一个页面中不要使用超过3种颜色搭配，这也和上面说的“60-30-10原则”类似，即一个主色、一个辅助色和一个点缀色。但在实际UI设计中，迫于产品的需要可能会使用更多数量的色彩，但切记不可超过7种色相（注意不是7种色值），每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。

4.1.5 远离纯黑色和纯灰色

黑色就像没有生命力的深渊，使用户陷入冷冷的负面情绪中。远离纯黑色和纯灰色，是因为它们不存在于现实世界里。尝试在纯黑和纯灰中加入一些色调，会让界面看上去更柔和自然。另外，纯黑色还会与白色产生强烈的对比度，看久了会使人疲劳，让用户产生焦虑的情绪。MONO的导航栏并不是深黑色，而是加入了蓝色的低饱和度蓝黑色，它的界面背景也是加入了蓝色的的浅色，这样就不会让界面看上去死气沉沉的。

4.1.6 遵循色彩心理学

前文我们已经了解过各种色彩的心理学知识，就是为了我们在进行App设计时提供依据。这些色彩都是源于人类对大自然最原始的感受，蓝色的天空、绿色的草地、黄色的沙漠等等，自然的色彩，对于我们来说是司空见惯的，但其中却蕴含着丰富的美感，并达到了和谐统一。网易云音乐使用红色作为主色，这种热情奔放的颜色传递出一种充满能量、自信的气质。

4.1.7 良好的可读性

良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验，而一个可读性差的界面则会成为用户浏览的障碍。那如何确保界面具有良好的可读性呢？这就需要在界面设计中注意色彩搭配的对比，如在浅色背景上使用深色文字，在深色背景上使用浅色文字，使用高对比的度的亮色展示重要的元素，用低对比度的浅色来体现需要弱化和次要的内容。例如苹果Music的主要功能入口，标签栏图标、按钮等都是用了高纯度的红色，与其他元素从形成鲜明对比，就连深灰色的辅助文字都有着清晰的可读性。

4.1.8 从大自然中获得灵感

配色中尽量使用大众熟悉的色彩，如自然界中人们常见的色彩等。从大自然中获取的配色灵感可以使你的设计更加切合用户的审美，非常自然。而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。我们可以搜集各种与自然风光相关的图片，从中提取色彩运用到设计中，这些几近完美的搭配呈现出来的和谐美感能瞬间打动人心。天气应用Marline就是一个很好的例子，它的界面背景渐变就参考大自然的变化，随着不同时间段呈现出清晨、日出、正午、日落、深夜、雨天等渐变色，打开应用即唤起了用户的快乐情绪。

4.1.9 将UX颜色与品牌相匹配

品牌价值在创建调色板中发挥关键作用，但是它们不是唯一重要的因素，行业规范也是关键。使用与品牌主要竞争产品几乎相同的配色方案不失一种好方法。配色在品牌视觉中所发挥的作用是不言而喻的，但是，色彩本身的内涵和情绪特质并不是全部。比如一个行业当中，很多产品都使用了蓝色，那么你的产品继续使用蓝色，可以让用户更快「识别出」你所属的领域，但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出，可以试着使用不同的色彩。

写在最后

其实无论是色彩理论还是配色方法，最本质的东西就那些，更多的还是需要设计师在日后的工作中不断的摸索和积累。

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。