第一章  色彩理论篇

引语：

    对于色彩的理解特别是在实际的设计项目中的运用这种能力对于一个优秀的设计师来说是必须掌握的一种能力！之前接触过很多初级的设计师（他们包括但并不限于平面设计师、网页设计师、UI设计师等）对于色彩的运用总是觉得非常的无助，他们要不就是凭感觉，要不就是借助于各种工具和方法，也通过各种途径去看很多色彩理论相关的知识，但总体来说收效不大。

    本章将带领大家了解色彩的深层奥秘，通过大量的实际案例来给大家分析配色流程和经验，同时深入的讲解互联网产品色彩体系流程，让设计师在最短的时间内掌握色彩理论真正的精华以及色彩在各种实际项目中的运用经验，下面就让我们开始一趟崭新的色彩旅程吧！

第一节 生命中不可或缺的色彩

    大家生活在一个色彩斑斓的世界里，天空、大地、海洋、森林等等，色彩与我们的生活息息相关，很小的时候就认识红、黄、蓝，但这些颜色比它们看上去要复杂的多，也迷人的多，从光谱的一端到另一端，从可见光到不可见光，它的影响所及，涵盖了我们所有的生活及娱乐方式，颜色能够让生命生存并茁壮成长，能轻易地拨动我们的情绪，因此本章节的主题是围绕色彩来进行讲解的。

一、你的色感正确吗

说到色彩，很多喜欢设计的朋友都会问：

    其实每个人的色彩感觉是不一样的，尤其女性，天生对色彩比较敏感：总体来说女性在对颜色的识别上要强于男性，有人说在远古时代，男性与女性长期的社会分工的角色不同。男性的主要工作是发现猎物并对猎物进行定位、捕杀，而女性负责在野外采集不同颜色的野果，同时通过分辨颜色来识别那些可食用，哪些不能食用（毒蘑菇），这一过程训练了她们对颜色的敏感性，提高了人类的生存机会

    同样在UI设计中，大家要想设计出一些精彩的作品，除了依赖自身的天赋感觉，大家还是非常有必要了解一下“色彩”这门基础学科，掌握了一定的色彩知识将会使我们的设计能力大大提升，而在设计过程中，如何选择合适的色彩来表现页面是非常重要的。

    以下通过一个颜色小测试来看看大家对色彩的感觉。

二、考验你的色彩感觉

    先来做个颜色测试，如下图1-1所示，大家能看出图中的具体数字吗？

图1-1

    答案揭晓一下，正常的人群看到的是数字26，而红绿色盲者中的红色盲者能读出６，绿色盲者只能读出2。

为什么要做这个测试呢？是因为在现实当中，确实是有很多同学存在着先天性的对颜色感知比较弱，对颜色的辨别能力比较差，他们不能分辩自然光谱中的各种颜色或某一种颜色。并且每个人的情况不一样，比如有红绿色盲（红色盲或绿色盲）如图1-2所示，根据自身的条件，尽量不做和颜色有关的工作（可以考虑从事产品设计方面的工作）。

图1-2

第二节 了解色彩的奥秘

一、 掌中的三原色

    色彩中不能再分解的基本色称之为原色，原色可以合成其他的颜色，而其他颜色却不能还原成三原色。从专业角度来说，三原色分两种，一种是色光三原色，一种是颜料三原色，

    1.色光三原色

    色光三原色也就是红(Red)、绿(Green)、蓝(Blue)，俗称RGB，主要是通过主动发光的显示屏发射的彩色光线来呈现颜色的，如图1-3所示，它跟大家看到的印刷品上的颜色是不一样的。

图1-3

    电子显示屏显示的颜色是红、绿、蓝，三个原色组成，这三个原色可以混合出所有的颜色，大家日常生活中接触的电脑显示器、电视、手机屏幕等等皆是用RGB模式生成的，因此在设计软件Photoshop中建立页面文件是也是选择ＲＧＢ，而不是ＣＭＹＫ模式。

    2.颜料三原色

    颜料三原色就是大家在书本或杂志上看到的图像都是颜料三原色的混合而成的（通过印刷或打印），如图1-4所示。

图1-4

    色光三原色(RGB)与颜料三原色最大的区别就在于：RGB模式是一种自发光的色彩模式，你在一间黑暗的房间内仍然可以看见屏幕上的内容，而颜料三原色都是一种依靠反光的色彩模式，大家在看报纸的时候是由阳光或灯光照射到报纸上，才看到内容。

二、色彩三要素详解

    色彩分无彩色系和有彩色系两类，无彩色系是指黑、白、灰系列，有彩色系指包括在可见光谱中的全部色彩，人眼看到的任何一种彩色光都包含色相、明度、纯度这三个特性，这即是色彩的三要素，也是每一种色彩所具有的三种基本属性。具体看图1-5所示。

图1-5

    （1）色相：从字面上来说色相是色彩的相貌，是色彩的首要特征，也是区别各种不同色彩的最准确的标准。

    （2）明度：指色彩的明亮程度。是物体反射出光波数量及强度来决定颜色的深浅程度，即便是同一个颜色，由于反射光波数量不同，也会产生颜色深浅上的变化。

    （3）纯度：指色彩的鲜艳程度，也称饱和度，是物体反射光波频率的纯净程度，色彩越鲜艳，纯度越高，色彩越暗淡，纯度越低。

三、色彩经验之谈

    作为UI设计师，色彩三要素是需要大家牢牢掌握并运用自如的根本知识，上面的简单分析也不能全部诠释色彩三要素的要点，接下来将通过一些案例来详细讲解色彩三要素在设计中是如何实际运用的：

    问读者一个问题：各种色相的颜色如红、橙、黄、绿、青、蓝、紫，它们之间谁的明度最高？谁的明度最低？

    这个问题先不直接给大家答案，下面做个简单的演示，如图1-6所示。

图1-6

    通过图1-6所示，读者应该会发现右侧的灰度图是由左侧的彩色转变而来，这个灰度图很好的解释了这个答案，即在所有的颜色中，明度最高最亮的颜色是黄色，而最暗的是蓝色，不同的颜色具有不同的明度，人们对黄、橙黄、绿色的敏感程度高，所以感觉这些颜色较亮，对蓝、紫、红色视觉敏感度低，所以觉得这些颜色比较暗。

    上面这个结论告诉读者，大家所看到的任何一种颜色，都包含颜色之外的明暗变化对比，这在设计页面的时候起着很重要的作用，接下来将通过几个案例来给大家进一步的分析，如图1-7所示和图1-8所示。

图1-7                                图1-8

    在同样的广告语和面积大小的情况下，不同的颜色会带给用户的视觉感受。左侧的这个图片是黄底黑色文字，同时存在明度的对比和色相的对比，在色彩的层次上更加丰富，视觉冲击力非常强烈，很好的起到了引起注意的宣传作用，相比右侧的白底黑色文字来说，这种设计没有色相的对比，显得较安静，冲击力会相对弱一些，不能很好的引起用户的注意。

   大家再看另一个案例，如图1-9所示和图1-10所示。

图1-9                                图1-10

    上面的两个广告图，左侧的视觉效果会更好一些，这是因为左图使用的是黄颜色的文字，跟蓝色背景形成一种强烈的色相对比和冷暖色的对比，高纯度的广告语跟深蓝色互相冲撞，既充满了活跃的激情，又丰富了整个画面的视觉感观，也更容易引起用户的关注。而右图使用的白色文字只有明度对比，没有任何色相对比，整个画面则显得比较冷静平淡，通过左右两个画面的对比就能看出色彩的魅力和力量。

    接下来，将通过一个手机广告界面案例，给大家来分析色彩三要素是如何在实际设计中运用的：读者看图1-11所示。

图1-11

    这是一个呈现在手机上的高端手表广告界面，我们从色彩方面来进行一番分析：

    首先大家来看看整个画面的调性：高雅大气、高端奢侈、品味不凡、具有强烈的亲和力，画面所传达出来的视觉感受，正是此产品所具备的，相信会给购买人带来一定的心理暗示作用。

    整个画面的调性是由它的主色调、设计元素所决定的，读者能看到广告的主色调是由面积最大的深蓝色背景来决定的，它采用了一种低明度、低纯度的颜色，形成一种高级灰的感觉，而背景前面的手表和文字，则是整个画面的核心和重点，它们采用的是高明度、淡淡的暖颜色，这种产品本身的颜色在纯度和明度方面，跟背景搭配的非常和谐，手表本身的淡黄色是画面唯一的暖颜色，在色彩运用上形成一种有节奏韵律的变化，同时又与深色的背景形成一种强烈的明暗对比，增加了画面的空间感。 

    笔者将在后面的课程会讲到高级灰的知识，大家记住每一个页面中设计时，画面整体一定形成固定的黑白灰的关系，看图1-11的广告画面，我们能清晰的看出，背景是整个画面最黑的部分，而前面的手表和文字，则形成了画面的白和灰的关系，这也是大家将来在设计页面是需要考虑的，通过这个案例分析，我们就能看出整个页面的色彩调合关系。

注：主色调就是整个页面色彩的总体倾向，是大的色彩效果。

第三节 无彩色的精彩

    在上一节中，我们提到色彩分无彩色系和有彩色系两类，无彩色由黑、白、灰系列构成，在UI设计中，无彩色的使用频率非常高，是页面颜色构成的重要元素。从美学层面来说，黑白灰具备两个重要功能，一个是直观的颜色功能，它们属于万能色，能够和任何颜色进行搭配，另一个是页面结构形式上的功能，黑白灰关系的布局和处理是其我们每个UI设计师需要去认真研究和学习的重要组成部分，一个作品的黑白灰关系处理的不合理，都会影响到视觉效果（这部分将放在版式设计中来进行讲解）。而接下来，我们将从黑白灰直观的颜色运用上来给大家进行讲解。

    一、无彩色的概念

    无彩色是由黑色、白色及由黑白调和的各种深浅不同的灰色系列组成，也称中性色。中性色不属于冷色调也不属于暖色调。黑白灰是常用到的三大中性色。如图1-12所示。

图1-12

    从物理学角度看，黑白灰不包括在可见光谱中，故不能称之为色彩，它没有色相和纯度，只有明度，在设计用色上来说，无彩色可以和任何颜色进行搭配。

    但是大家需要记住一点就是，从色彩心理学上来说，黑白灰是可以称为色彩的，因为在心理学上来说，黑白灰有着完整的色彩性质，在色彩系中也扮演着重要角色。接下来我们给大家详细分析一下无彩色在页面设计中是如何运用的：

    二、黑色系的运用

    黑色基本上定义为没有任何可见光进入视觉范围，也就是物体不反射任何颜色的光，人眼的感觉就是黑色的。黑色虽然属于无彩色，但是它和任何一种颜色一样，都带有自己的色彩感情与情绪，首先我们来看看黑色带给我们的感觉： 

    我们通过一些案例给大家进行一番分析，我们看下面这个案例，如图1-13所示。

图1-13

    上图1-13是IBM早期宣传ThinkPad笔记本电脑的网站页面设计，首先我们需要了解一下这款产品的情况，中文名为“思考本”，凭借坚固和可靠的特性在业界享有很高声誉，ThinkPad自问世以来一直保持着黑色的经典外观并对技术有着自己独到的见解。

    因此产品页面整体的调性定位：“我是与众不同的，我拥有的不是普通的PAD，是ThinkPad笔记本电脑”，体现这是一款定位比较高的笔记本产品。

    那么什么颜色能够体现出它的高端和与众不同呢？设计师首选选择了黑色，页面的主色调是通篇的背景黑色，这也是此款笔记本产品的经典外观颜色，符合产品本身的定位，我们再看看画面的其它设计元素：黑色的ThinkPad笔记本产品图形、穿着亮灰色衬衣的冷酷白领造型、白色的广告文字，这些元素没有多余的颜色，通过黑白灰不同的明度搭配，来达到一个画面的和谐，这种纯黑白的设计方式，让人影响深刻，体现出此款产品的肃穆、高冷、孤傲的特性。

    我们再看另一个案例，如图1-14所示。

图1-14

    上图1-14是一个许多读者都比较熟悉的案例，名字叫“MONO”，市场定位其实就是将优秀的传统媒体内容以及线上优秀内容进行分发，成为移动端的代替纸质杂志的精品阅读。

    因此我们可以给此款产品进行一个调性定位：“有趣前卫、新鲜猎奇、品味不凡、特立独行”，列出这些标签，我们能看出，都是当前年轻人身上所特有的气质，而它的用户人群定位也正是在18~35岁的年轻人，这个年龄范围的用户不受传统色彩忌讳的约束，也有利于设计师可以大胆启用黑色作为这款产品的主色调。

    我们可以看到，整个界面的主色调由顶部菜单栏和底部导航栏的“黑色（不是纯黑）”来决定的，

    我们对这款产品用色进行一个简单的分析整个页面由于颜色不多，主要是采用明度的对比，抛弃掉纯色和某一种色相倾向，减少了对用户的视觉干扰，在前面的章节里，我们描述了黑色带来的色彩感情与情绪，其中一个就是黑色所特有的高傲、冷峻、内敛的气质，配上产品推送的内容，非常符合年轻人的口味，黑色也是当前时尚杂志界所广泛采用的颜色。除了黑色之外，大家可以发现，顶部和底部的文字还有一个辅助色“亮青色”（在这里可以称为交互色），起着强调的作用，告诉用户这个版块内容的内容属于“亮青色”标签，同时旁边的灰色标签是可以点击显示隐藏的内容，因此这个“亮青色”在这里也起着重要的暗示作用。

    三、白色系的运用

    白色正好和黑色相反，是所有可见光都同时进入视觉范围内。混合后给我们造成的视觉感觉就是白色。

    中国传统的美学上来说，白色是一种独特的视觉语言，已经摆脱了自身的物理属性，巧妙的被运用到画面构图布局当中，自古以来的画家们将画面的“留白”安排到自己的创作中，达到“无画处皆成妙境”的理想效果。而如今的UI设计师更应该要学会古人这些巧妙的处理手法，在自己的作品中适当“留白”，达到“无声胜有声”的效果。

    当然从白色的物理属性来说，它也有着自己的色彩感情与情绪，首先我们来看看白色带给我们的感觉：

    在当今设计界追求极简化设计的时刻，设计师赋予了白色更多的表达机会，也赋予了白色更多的内含，通过一些案例给大家进行一番分析，我们看下面这个案例，如图1-15所示。

图1-15

    图1-15呈现的是一个推广茶叶的作品，画面处理的清新淡雅，大家能明显感觉到一种扑面而来的中国风气息，页面的调性就传达的很明显：“体现出中国上千年传统茶文化的儒雅、茶道美学”。把一款普通的茶叶上升到很高的精神层面上。而对于画面主色调的处理，设计师想到的是以白色为主，小小的画面也蕴含了很多中国传统元素，比如陶瓷艺术、书法艺术，中国的低调谦让等等，这些带有明显中国风的设计元素，被设计师有意识的引用进来，巧妙的运用黑白灰的关系，使整个画面达到了传统美学的诉求。

    画面分析：大面积的白色加亮灰色中和了整个画面，陶瓷的白与茶叶的黑形成视觉冲击，是画面的焦点核心，左上角的书法处理成灰色，让整个画面重心稳了下来，也使整个画面的“黑白灰”关系处理的恰到好处，因此设计师的处理手法值得大家学习借鉴。

    我们再看下面一个案例，如图1-16所示。

图1-16

    图1-16是一款外国手表的页面设计，所传达给我们的调性就是：“简洁、时尚、有活力”，画面的主色调也是以白色加亮灰色为主，与颜色最重的模特手臂构成了完美的“黑白灰”关系，同时手臂组成的圆弧斜线，成功的打破了画面的构图，也带有一定的导向性，把用户的注意力引导到手表上。

    同时大家应该能够发现，这个画面跟图3-4有着相似的色系搭配，但是在不同的设计师的手中却呈现出不一样的意境，一个传统典雅，一个时尚有活力，这就是设计的魅力所在。

    以上呈现的是设计师赋予白色更多内涵的设计，从白色的物理属性来说，任何颜色加入白色都可以提高自身的明度，比如说玫瑰红加入白色，将产生一种轻柔浪漫的感觉；黄色加入白色，将产生一种典雅温馨的感觉；绿色加入白色，将产生一种清新透明的感觉等等，那么大家可以想象，蓝色或咖啡色加入白色后是一种什么样的感觉？

    这些颜色都是可以通过设计软件调配出来，并且在实际的页面设计中会大量运用到。尤其是现在电商大行其道的情况下，在电商产品的页面上这些亮色系运用的比较多，接下来，我们给大家分析一个电商APP界面，如图1-17所示。

图1-17

    上图1-17是一款APP电商产品叫“网易严选”，是网易旗下的一款原创生活类自营电商品牌，其品牌理念为“好的生活，没那么贵”，因此这款产品的调性定义为：“主打高质量、亲民化生活商品的电商产品”，了解了此款产品的定位后，我们再看他们的设计用色，就不难看出设计师的用心。

    根据百度指数分析，严选的主要用户人群的年龄段在20~40岁之间的年轻人，这也是当前主流电商的消费人群，也更喜欢极简化的设计风格，因此在产品界面的主色调上采用白色为主，整个页面除了商品本身的颜色之外，没有多余的颜色，让整个画面简单直白，容易受到年轻人的欢迎。

    严选的用色有个最大的特色就是：除了商品本身之外，整体偏白，其中的一些商品背景被设计师自己加上淡蓝色、淡黄色、甚至大部分商品不加颜色，以白色为背景，整体界面用色不多，页面看起来非常清爽，能够使用户更好的把注意力关注着商品本身。

    四、灰色系的运用

    灰色系是介于黑和白之间的一系列颜色，大致分为亮灰、深灰、高级灰。其中的高级灰在UI界面设计中占据着很重要的份量，要想体现你的清新范，可以用亮色高级灰，要体现你的耍酷范，可以用深色高级灰，你想要表达的诸多情绪，都可以在高级灰里面找到寄托，本节我们将给大家分析一下高级灰，如图1-18所示。

图1-18

    上图1-18是笔者列出的在设计中常见的高级灰色系，依次为亮色高级灰、中级高级灰、深色高级灰，虽然是“高级灰”，但是它们总体是有个色彩倾向的，学过绘画的同学都知道，这些带色彩倾向的“高级灰”总是会受到画家的追捧，原因就在于它们内敛不张扬的品质，总是能够表达自己的情绪。

    之所以这些高级灰能够收到大家的喜欢，是有一个共同特点，那就是它们的纯度都不高，颜色厚重，能够跟页面的诸多设计元素进行搭配，其目的就是使整个界面达到和谐的目的，这也是我们看一个页面能表现出很“高级”的原因， 

    我们来看下面这几个案例效果，如图1-19所示。

图1-19

    上图1-19列出的是几个产品展示页面，为了体现出产品优良的品质，页面背景整体的色调以亮灰色为主，传达出的一种非常清爽、干净、透亮的感觉，赋予了产品非凡的意境，让用户一看就有种想购买的欲望，这也是在电商广告中常用的一种展现方式。

    同时为了平衡画面“黑白灰”的关系，产品自身的形象元素被处理成画面最重的颜色，即成为了焦点，又起到了平衡画面“黑白灰”的关系。

    同样我们再来看看中级高级灰的一些案例，如图1-20

图1-20

    图1-20所示是几张以中级高级灰为主的案例图，所有画面的色调非常厚重浓郁、柔和，呈现出中级高级灰所特有的雅致美感，我们进一步分析能够看出，整个画面没有高纯度的颜色，所有色彩得饱和度都统一在一个调子中，虽然是拍摄的照片，但是同样能给我们传递出摄影师所精心营造的格调是非常高的，

    很多设计师在设计作品的生活，常常会通过类似的照片来获取配色灵感，取色的时候直接通过PS软件吸取图片中的颜色运用到页面中，因此作为将来的UI设计师，平时碰到好的、非常喜欢的照片，不妨直接借助它来获取一个好用而高效的配色方案。

    接下来我们再来看看深色高级灰的一些案例，如图1-21所示。

 图1-21

    图1-21列出了三个在不同行业的广告图，一个代表了豪车品牌、一个是气质非凡的明星、一个是奢侈品手表，虽然内容不同，但是设计师不约而同的都想到了用最能传达出画面气氛的深色高级灰来做主色调，比如最左边的宝马品牌，画面主色调由沉稳的“暗青色”、时尚的“酒红色”、天空的“蓝灰色”组成，这三种色彩构成了传统与时尚的碰撞，非常符合中年成功人士的口味，是一个儒雅大气的配色效果。

    中间的广告图是一位中国流行男歌手的海报宣传，作为在音乐界摸爬滚打多年的音乐人，已经不是小鲜肉级别了，如何体现出他的“成熟老道”是设计师需要考虑的问题，因此画面的富有变幻的藏青色背景就是最好的诠释，而处于画面前方的广告文字则是核心，白色的中文与淡黄色的英文相呼应，传达出时尚前卫的气息。

    最右边是OMEGE手表的宣传海报，为了体现出手表独特的气质，选用了奥斯卡明星“埃迪·雷德梅尼”作为代言人，画面背景处理成深灰色效果，传递此款产品独有的魅力、成熟、力量。画面前方的手表采用自身的高级亮红色，成为整个画面唯一的颜色焦点，显示出时尚前卫的颜色味道，处理手法跟左边的宝马汽车是一样的。

第四节 五招让你成为配色大师

    色彩基础知识不够扎实？配色灵感枯竭殆尽？作为UI设计师，非常有必要了解一些配色原理，接下来我们将放出五大招，理论结合实际案例的分析，将高手的配色都化为己用，让大家也成为配色大师。

    一、招式一：如何让画面更具冲撞的激情

    要让一个画面给我们带来冲撞的激情，那就需要具备强烈视觉冲击力的颜色，才能让我们的视网膜感受到颜色的力量，这就需要考验设计师是否敢于用显眼的、独特的、大胆的颜色，除此之外，我们还可以巧妙的利用对比色或互补色来进行搭配，达到事半功倍的效果，如1-22所示。

  图1-22

    图1-22是一个常见的标准色相环，在色相环上相距120度到180 度之间的颜色，可以称之为对比色或互补色，当然实际设计中不会去这么严格的限定角度范围，只要颜色之间有色相的明显区别都可以叫对比色。常规来说对比色是有着很大差距的颜色，只要两种不同色相的颜色挨在一起就会显得差距很大，例如：红色和绿色、蓝色和橙色、黄色和紫色，把它们运用到一个画面中，会给人一种强烈的排斥感，如图1-23所示和图1-24所示。

                      图1-23                                                  图1-24

    图1-23中的红和绿在色相环中，正好成180°的角，形成一种互补色的关系，而图1-24中的绿色跟橙色形成对比关系，但是它们两种颜色并不是互补色，只是色相有着明显的区别，而是色相上形成一种比较大的差距。

    因此也可以这样定义对比色：两种可以明显区分的色彩，都叫对比色。同时颜色之间的对比不止局限于色相的对比，还需要把色相之外的明度对比和纯度对比，面积对比、冷暖对比等等考虑进去，这些都是构成色彩效果的重要手段，也是赋予色彩以表现力的重要方法。我们来看一个案例，如图1-25所示。

图1-25

    图1-25中是一款有关食品的配图，整个画面亲切可爱，非常具有亲和力，让用户对这款食品顿生好感，我们分析一下它的色彩：绿色背景的饱和度和红色青蛙的饱和度是统一的，在这种统一下，形成的红绿对比整体上是和谐的，不会让人产生刺目的感觉，其主要原因就是设计师把图中绿色背景和红色青蛙的纯度降低，使其饱和度形成统一在一个的层面，达到整个画面即和谐又有冲击力。

    大家可以想象，如果把图1-25中绿色背景和红色青蛙的纯度调高是一种什么感觉呢？效果如图1-26所示。

图1-26

    图1-26中是纯度和明度都调高后效果，颜色有点过于鲜艳，过于刺目，也导致整个画面都飘起来了，并且缺少了那种对食品的亲和力，让人非常不相信这款产品的品质，有点像假冒伪略产品，看看这就是用错了颜色对产品带来致命的伤害。

    接下来我们给大家分析一下颜色面积的对比，使其了解在今后的页面设计中，如何考虑不同颜色在页面中所占有的比例，如图1-27所示。 

图1-27

    如图1-27所示，大面积的绿色与小面积的红花，形成一种鲜明的视觉反差，由于互补色彩之间的对比相当强烈，因此想要适当地运用互补色，必须特别慎重考虑色彩彼此间的比例问题。配色时，必须利用大面积的一种颜色与另一个面积较小的互补色来达到平衡。如果两种色彩所占的比例相同，那么对比会显得过于强烈，使画面丢失了焦点核心，在互补的两种颜色上会分配一定的比例，比如3：7或者2：8 。

    因此如图1-27所示，大面积的绿色与小面积的红花的用色关系，是可以直接延伸到设计中的，在实际的设计中，我们需要考虑多种颜色的色相、纯度、明度的协调关系，还需要考虑互相之间的面积对比，这是一个值得大家参考借鉴的方法。

    下面我们通过一个简单的案例进行分析一下，如下图1-28所示。

图1-28

    图1-28是一家手机游戏平台的电商广告，第一感觉就是视觉冲击力很强，画面采用了黄+紫的互补色关系，这种强对比的色彩关系直接冲入我们的视网膜，并且它们的纯度和明度都控制的恰到好处，不会显得生硬，画面整体给人眼前一亮的感觉。

    二、招式二：你了解颜色的左邻右舍吗

    说到左邻右舍，大家估计会想，颜色也有朋友吗？说的没错，颜色不光是我们的好朋友，它们跟相近的颜色形成了很好的邻居关系，这些左邻右舍就是设计中的一个色彩类别“类似色”。类似色也就是相似色，在色环上任意60°角度以内的颜色都可以称为类似色，如图1-29所示，

图1-29

    它们之间含有共同的色素，比如桔红色介于红色和桔黄之间，因此含有这两个颜色的成分，桔黄介于桔红和橙色之间，因此桔黄含有桔红和橙色两种颜色的成分，以此类推我们能很清楚的看到颜色邻里之间的关系，由于类似色较为相近，更像是一家人的关系，可以营造出更为协调、平和的氛围。

    接下来，我们通过几个作品案例来给大家分析一下，如图1-30所示。 

图1-30

    图1-30呈现的是一辆老旧的汽车摄影作品，画面充满了一种非常怀旧的历史沧桑感，主色调是由低饱和度的铁红色构成，破旧的汽车是画面最重的颜色，成为了画面的核心，加上斑驳的肌理突出了老汽车的沧桑感，形成一种温馨、怀旧的氛围，这就是使用颜色的魅力和力量。

    我们来分析一下这幅作品的色彩，画面整体统一在一种“铁红色”的大色调中，因此笔者特意把这个色系的变化提炼了出来，大家可参考图形右侧的4个色块，除了最深的黑色，另外三种颜色都是围绕“铁红色”进行明度上的深浅变化，这是一种典型的低对比的色彩运用模式，也是构成此副作品的主色系。

    我们再来看另一个案例，如图1-31所示。 

图1-31

    图1-31是一个电商广告，画面整体色调采用的是比较时尚的紫色系，符合年轻爱美的消费者心理，设计师采用了深蓝色、紫蓝色、亮紫色等类似色，这些颜色都具有低对比的色彩关系，营造出一种时尚、悦目、和谐的感官。

图形右边的色块是笔者特意提炼出来的颜色范围，通过这个参考能够很清楚看到紫色系中类似色的排列关系，颜色依次从暗到亮，同时选用了红色和黄色作为对比色来突出画面重要的信息，因此一个作品中会同时存在类似色和对比色的用法。

    通过以上两个案例我们可以看出一些规律，类似色除了可以用相邻的颜色，还可以通过同一个颜色增加或降低其明度，来达到调配画面的作用，我们看图1-32所示的色卡。 

图1-32

    这是在家装行业最实际的色彩运用案例，色卡采用鲜艳的高纯度色系印制，一种单纯的色相通过加入不同量的白色，此种颜色在纯度和明度上发生了明显的变化，达到多样化的色彩效果。这也是类似色一种比较典型的用法，此色卡正是利用这种纯度和明度的类似色变化，让用户在选择家装颜色的时候可以利用色卡上由深入浅的柔和渐变效果，使自己能够明确的清楚需要什么颜色。

    给大家留一个作业，可以挑选图1-33中的一张图，对它的用色进行分析。 

图1-33（图形颜色分析欣赏）

    三、招式三：让页面温情起来

    在色彩心理学上，人的视觉透过不同的色彩，会从知觉、感情、记忆、思想方面产生极为复杂的心理效应，刺激的颜色会让你焦躁不安，平和的颜色会让你的心灵得到洗礼，这就能说明为什么有些对一些老旧的颜色是会产生依赖，它们能唤起你记忆深处内心的那份安宁和温暖。在色彩学上根据心理感受，把颜色分为暖色系、冷色系和中性色调（无彩色）。如图1-34所示。

图1-34

    图1-34是一个360°的色轮，暖、冷色各占据两边，形成一种视觉上的对比，但这种对比也是相对的，冷色和暖色没有严格的界定，要体现出一种颜色的倾向，还需要看它们跟哪种颜色搭配，比如我们认为橙色是暖色，但是在红色面前，橙色会显得偏冷，但在黄色面前，橙色会偏暖。冷色和暖色没有严格的界定，它们之间对比也是相对而言的，如图1-35所示，我们先做个小测试： 

图1-35

    图1-35中，大家认为左右两个图中间的小紫色块，哪边的颜色更冷？哪边的更暖？

    答案揭晓：其实左右两个小紫色块的颜色是一样的，正是因为左右两个图的背景颜色不同产生的视觉误差，小紫色块在蓝色的背景上，显得更暖，在红色的背景上显得更冷，这也是色彩的奇妙之处。了解了这种对比关系，将来在实际运用中，大家就不会生硬的套用某一种颜色，而是根据画面周围其它的颜色，进行协调处理。

    暖色系是指让人看了有温暖感的颜色，在我们的视觉中，红、橙、黄能带给人温馨、和谐、温暖的感觉，这是出于人们的心理和感情联想。它会使人联想到太阳、火焰、热血，带给人们一种饱满，张扬，激动，暴躁，活跃、外向的感觉。温情的画面正是基于这一色彩心理，被设计师很好的表达出来，我们来看一个案例如图1-36所示。 

图1-36

    图1-36所示的图片，同样的图像但是色调不一样，冷暖的色调带给人是天差地别的感受，左边的蓝色调叶子，整体以冰冷的蓝色调为主，心理上会带给我们一种冷诺冰霜、寒风刺骨的感觉，而右边偏橙色的叶子，给人一种阳光洒在秋天落叶上面，带着一种夏天刚过去的温暖气息，这就是色彩带给我们最直观的感受。

    我们再看另外一个案例，如图1-37所示。 

图1-37

    图1-37所示的图片，是一个婚戒产品的广告作品，婚戒是每个女孩都向往和期待的，也是女性用户关注最多的，可以说这个广告主要是定位于女性用户，因此能看到画面整体色调采用的是女性用户比较喜欢的粉色系，粉色在提高明度后，就变成了一种适合女性的柔美、唯美、甜蜜温暖的颜色，在之前灰色系的课程中提到过，任何颜色加入白色后，都将产生清新、通透、干净的感觉，图1-37正好是一个比较恰当的案例，设计师使用这种温暖的粉色系，非常能体现出产品的氛围。了解这些颜色背后蕴含的寓意后，将给我们的UI界面增添无限精彩！

    给大家留一个作业，可以挑选图1-38中的一个作品，对它的用色进行分析。 

图1-38（暖色系作品欣赏）

    四、招式四：营造宁静的空间就得看这里

    我们来做一个测试，大家可以随着我的语句来想象以下场景：远离喧闹、灯光柔和、绿色植物、熏香喝茶，可以想象，每个人的内心都有一方属于自己的宁静空间，一个幽静的、远离尘嚣的、让你可以冥想的世界。以上所说的景象是一种摆脱了内心的焦躁，带着一种超凡脱俗的意境，如图1-39所示。

图1-39

    图1-39所示的图，给人一种世外桃源般的意境，绿色和蓝绿色布满整个画面，一股清新的气息铺面而来，瞬间让人心灵得到净化，这应该也是大家向往的世界。

如果要在我们的设计作品中体现出这种意境，大家会考虑使用什么样的色系呢？红色吗？在红色环境中，人的脉搏会加快，血压有所升高，情绪容易兴奋冲动，橙色？黄色？它们都是警示色，使用不当都会产生刺目感，让人不安，那么为什么蓝色或绿色会产生这种效果呢？

    冷色系是跟暖色相对的色系，它们包含绿色、青色、蓝色、紫色等等，象征着：森林、大地、蓝天大海，冷色系的色域范围如图1-40所示。

图1-40

    作为一名设计师，是有必要去了解这些颜色背后的含义，也能够很好的运用到作品中去。冷色系在设计中的运用比较广，比如我们要在页面中营造一种清新淡雅的风格，我们可以采用什么什么颜色，如图1-41所示。

图1-41

    图1-41是戴尔笔记本在夏季做的一款推销广告页面，画面的调性主要是围绕夏季的清凉、清新的主题来进行用色的，主色调采用纯度相对偏高的青色，配合前面酒红色的电脑，形成一种冷暖上、空间上的对比，强烈的对比也体现出一种年轻时尚的活力，画面中的图形与文字都采用四平八稳的居中对齐方式，体现出电脑的稳定性，这个广告的出现，也让人眼前一亮，在炎炎的夏日顿时有种凉爽的感觉。

    我们再来看另外一个案例，如图1-42所示。

图1-42

    图1-42是一款国外关于旅游指南的APP产品界面设计，我们来分析一下它的色系，主色调是低纯度的蓝色背景色，这种低纯度的蓝色属于冷色系中的一种深色高级灰，这样使页面的调性比较清新高雅致、沉稳大气。除此之外，在界面中，设计师没有加多余的颜色，完全依靠不同的产品图片来打破这种沉静素雅气氛。

    给大家留一个作业，可以挑选图1-43中的一个作品，对它的用色进行分析。

图1-43（广告用色分析欣赏）

    五、招式五：学会装酷的搭配方法

    首先大家跟我来思考以下3个问题：何为酷？你是如何理解酷的？可以列出你脑子里关于酷的关键词，每个人对酷的理解不一样的，不同年龄段的人对酷的看法也不一样。

    年轻人所认为的“酷”就是：处处要体现出跟别人不一样的地方，比如奇装异服的穿着、言行怪异的举止等等，这些都是青春期所特有的，他们觉得这就是酷。

    中老年人对“酷”的理解：整洁得体、品质感、品牌意识等等，且不排除有那些喜欢朋克风格的老顽童，很多年轻人也加入这个行列。

    面对不同的用户，我们在设计类似页面的时候，需要搭配不同的色彩和设计元素来达到效果，那么如何真正的理解“酷”的含义？如何在设计上更好的定位于“酷”呢？

    如图1-44所示，是一些典型的、非常酷炫的朋克风格在设计中的运用，比如通过在服饰中佩戴金属类的饰品或者采用破烂粗糙布料来追求一种独特的味道，在一些UI游戏界面中或图标设计中，使用浓重的暗色系和工业金属风格，来达到页面酷炫的效果，但是在一些常规的UI界面设计中，我们不一定非得用金属质感，酷炫的特效来表现出视觉上的酷，首先我们要摆脱“酷”这个字本身所带来的局限，我们在页面设计中，通过色彩搭配、图形元素等等，来传递出产品内涵的“酷”，因此我们可以总结两种装酷的搭配方法：

图1-44

    方法一：用“暗色系”体现画面的格调，如图1-45所示。

图1-45

    图1-45所示，是瑞士名表欧米伽为配合007电影而推出的一款“007限量版腕表”广告，画面整体采用“暗色系”为主色调，做为，画面整体的深色体现出代言人詹姆斯·邦德面部刚毅的色彩，体现出他的无穷魅力，而画面右侧的腕表和文字与面部形成一种均衡对比，其非凡的前沿设计与神秘的暗黑风格交相辉映，将邦德的人物性格与角色使命衬托得淋漓尽致，可称之为一种男性的“酷”。

    方法二：用“纯色＋深色”的搭配传达出力量，如图1-46所示： 

图1-46

    图1-46所示，是纯度比较高的黄色背景+深色图形搭配模式，这种搭配模式传达到我们视觉中的第一感受就是视觉冲击力特别强，深色的图形显得异常的深沉和沉重，但是一碰到比较有活力的黄色，得使得图形部分跃然于画面之外，这种搭配模式打破了常规的设计用色，高纯度与零饱和零明度的深色结合，非常适合用在一些年轻的主题页面上，像时尚类和运动类的页面，由于年轻人在家容易受到家中管制，情绪比较压抑，在这类主题页面上，纯色+深色系的配搭，在这一刻引爆了年轻人的情绪，通过画面将压抑的情绪爆发出来。

    给大家留一个作业，可以挑选图1-47中的一个作品，对它的用色进行分析。 

图1-47

第五节 构建互联网产品的色彩体系流程

    如何构建一个互联网产品的色彩体系，涉及到的因素很多，从产品本身的特性到公司品牌色的约束，以及设计师个人对色彩的认知和爱好等等，都会对一款产品的色彩运用产生很大的差别，接下来，笔者将从以下几个方面来进行解析。

    一、产品调性的确立

    要确立产品的调性，需要先了解这个产品的特性。大家比较熟知的互联网公司，像360、网易等公司都有自己不同的产品，这些产品有着不同的特质，比如可在线杀毒的360安全卫士、在线听歌曲的网易云音乐、在线实时通讯QQ软件等等，它们都有一个共同点，那就是依托互联网，用户不需要购买这些产品就可以免费使用。但是也需要区别这些产品的不同特性，产品的核心功能的不同，导致它们分别有着不同的用户群体，用户使用场景也千差万别。

比如说360安全卫士，如图1-48所示。

图1-48

    360安全卫士是360公司推出的功能强大的杀毒软件，它的核心功能是保护用户电脑不受病毒侵害。也是广大用户最为熟知并接受的软件，抛弃它的功能不说，从产品界面设计上分析，它是如何让用户接受并放心使用的呢？这个是需要考验设计师功夫的，我们知道360的品牌色是绿色系，绿色是大自然的颜色，也是安全、环保、希望的象征，设计师兼顾了这两方面的考虑，在软件界面的用色上是遵从了品牌绿色，“让大家放心安全的使用”，则是这款产品的调性，也符合用户的心理，绿色系也很好的把这一款产品的理念传达出来了。

    不管是WEB端还是移动端产品，都是公司对外展示的一个平台，也是宣传产品的重要方式，作为UI设计师，大家在如何确立产品界面的调性上，是很有必要了解公司内部产品的特性，同时需要遵从企业的理念和文化，根据对公司这些方面的了解来进行设计，通过色彩的色相、明度、纯度三方面的和谐匹配，从而能够在页面上准确的传达出产品所具备的特质。

    二、主色系的确立

    在之前的章节中，笔者说到一个产品的界面设计，是需要有一个主色调的，也就是接下来的要讲解的主色系，主色系也是页面的第一主色系，它既要符合产品的定位和风格，也是构建这个产品色彩体系的核心色彩。

    图1-49呈现的是一个常见的红，橙，黄，绿，青，蓝，紫主要色相带，它是按照太阳光谱的次序把色相依次排列的呈现方式，并使其首尾衔接，成为一个完整的光谱。这些主要色相，是大家能够轻易识别物体，构成自然万物的基本颜色，互联网产品虽然是摸不着、看不见的产品，但是设计师可以运用不同的色彩，让这些产品更具精神内涵和品质。

图1-49

    而在当前品牌横行的互联网时代，每一家公司都拥有自己的品牌色（也称标准色），是为塑造独特的企业形象而确定的某一特定的色彩或一组色彩系统，运用在所有的设计媒体上，从线下的实体产品到线上的虚拟产品，品牌色自始自终都贯穿其中，无不透露出自己的品牌色的力量，因此每一个企业的具体产品，都拥有自己的品牌色。

    很多人对一个品牌的最初印象，来自其商标或者Logo。

    图1-50所呈现的是美国柯达公司早期的品牌色（黄+红），从LOGO（旧版）、线下实体店、产品外包装、官网均呈现出统一的品牌色标识，通过其标志性的“黄色”，传达出特有的视觉刺激与心理反应。

图1-50

    因此色彩不仅能够帮助品牌极为简易的建立用户认知，同时站在消费者角度，色彩也能够在理解和决策阶段起到一定的影响作用。色彩往往能够体现互联网品牌的创始人的审美和喜好，而设计师对于色彩的挑选和取舍，也是完成作品中的必备环节。

    下面将通过“网易云音乐”这款互联网在线音乐产品，来简单给大家讲解一下它是如何构建自己的色彩体系流程的。大家先看它的几个产品的界面，如图1-51所示。

图1-51

    图1-51是“网易云音乐”客户端的几个界面，大家第一视觉能感觉到，它们的主色调是红色，这是因为设计中，顶部状态栏的颜色决定了页面的整体色调，因而给人的第一视觉是红色调，页面底部导航采用的深色显得画面非常沉稳，红色+深色的搭配提升了页面的整体品质，体现出产品的一种高端感，为什么云音乐用红色来作为它的主色系呢？

   （1）需要了解它的产品定位：是一款专注于发现和分享音乐的产品。开创了以歌单为线索，融入用户、明星、主播等元素的音乐社交模式，也是目前最热的高品质音乐社交产品。

    （2）需要了解它的目标用户：主抓年轻用户，尤其是在线大学生，他们都是热爱音乐、对音乐有较高需求的高素质年轻人群，同时也是一群热血沸腾，富有激情的年轻群体。

    （3）从色彩的心理学分析：红色属于暖色系，是最容易激发情感的一种颜色，也充满了活力，在中国人眼里，红色是属于喜庆的颜色，会给人带来快乐。

    （4）品牌色的影响力：网易是一家以红色系作为品牌色的公司，如图1-52所示。

图1-52

    图1-52列出了部分网易旗下的几个产品LOGO，大家能够看到，红色延用到它们大部分的产品中，作为网易旗下的一款在线音乐产品，自然而然也延续了品牌红色。

    高品质的产品定位加上大量优质的年轻用户群体，使得云音乐大胆的使用了热情奔放的红色，红色是云音乐的官方默认皮肤，也是云音乐原汁原味的设计初心。因此经典红作为官方默认的主色系与目标用户年轻人群是十分契合的。

    以上四点简要分析了一下云音乐这款产品主色系的确立原因。

    三、辅助色的运用

    在上一节中，给大家简单分析了一下如何确立页面主色系，接下来，给大家讲一讲有关辅助色的运用，常规来说辅助色是指除了主色之外的颜色，但是在如今移动互联网发展趋势下，手机端的UI界面设计则把辅助色扩展到更多的领域，因此也可以把辅助色归纳为以下两大类：

    1. 从色彩属性出发

    辅助色是配合主色系用来丰富整个页面的视觉效果，它最早是运用在平面设计的企业VI系统中（企业视觉识别系统），如果没有辅助色的存在，整个VI系统将非常单调。随着平面设计发展到网络时代，在网页设计、专题页面设计中，辅助色发挥着越来越重要的作用。大家下面这个案例，如图1-53所示。

图1-53

    图1-53是一个常见的活动页面设计，大家能一眼看出主色调是蓝色，蓝色占据了页面的大部分面积，同时页面中搭配了其它的几种辅助色，纯度比较高的黄色和绿色使得整个画面生动有趣、形式感很强，让人看了非常安全宁静，是用色比较合理的一个案例。

    在页面设计中，任何颜色都可以和任何其他的色彩相配，要体现出颜色的主次关系，关键在于它们被使用的比例，同时一个页面很少看到单一的颜色，而是辅助色跟主色搭配的比较紧密，营造出要表达的产品诉求。

    2. 从功能角度出发

    在移动互联网时代，各种移动终端代替电脑成为大家上网的主要方式，它们可以不受时间、场地的限制，在这种机遇下，各种APP产品也孕育而生，因此对设计师也提出了很大的挑战，在网页时代，用户是被动接受信息，在如今手机中的产品，更多的需要关注用户的使用行为、使用场景、体验好不好等等，因此在常规的APP系列界面中，用户的交互行为、引导用户点击的按钮、暗示或提示的功能，都有着自己的颜色，这些都可以纳入辅助色的范畴。接下来通过一些案例给大家分析一下UI界面中常见的这几种辅助色。

    图1-54是云音乐的一个栏目页，作为标签式导航，如何正确告诉用户这是可以点击，而不是误认为标题，此时的红色文字和红色横条，将起着很关键的作用，这种红色辅助色将实时反映在用户每一步的交互上，让用户不迷失方向，能清晰的看到自己处于哪一个栏目位置，也是起着引导用户行为的作用。

图1-54

    第二个案例如图1-55所示，是对一个电商的商品详情页进行简单的分析，从中大家能够看出，在一个产品界面中，小面积的辅助色也能够发挥非常重要的作用，醒目的橙色和桔红色带有天然、亲和、热烈的气氛，在常规的电商购物页面上，橙色和红色起着非常明显的引导作用，从色彩心理学来说，醒目的暖色系能明显影响到消费者的购买情绪。

图1-55

    部分作品图片选取自网络，如有侵权，请告知，谢谢！