UI设计蓝色篇

由于业余时间提炼文章，比较佛系，离上次更文是有段时间了，但还是会坚持做分享~

继续引用之前的思路，今天还加了一个新的知识点，其实也会发现，不管过去时间多久，这些颜色搭配都是有规律的，掌握好它们，设计起来也会事半功倍，请干了下面满满的干货。

我们一直都在强调色彩三要素的重要性，还有一个专业名词叫色调，它也拥有巨大的神秘力量，这个词大家应该都不陌生，比如你到一家花店，想要买一束花，店员会问你送给谁，建议给你搭配合适色调感觉的花，或者你本来就已经想好要什么色调的；再比如你买了一个新房子，你要装修，需要去定风格，定色调，是要柔和的，还是要明亮的等等。刚好我在花艺专业书籍里面看过专门讲色调的，不管是花艺还是UI设计中，都有相通的地方，值得学习。

那什么是色调？简单来说，就是颜色，图像的相对明暗程度。常用的4个色调是淡色调、灰色调、亮色调和暗色调。那么色相跟它有什么区别呢？我的理解是色调是与你要设计的场景的氛围之间的关系，比如柔软、明亮、朴素、华丽等。我们都知道色彩三要素的重要性，那么色调配色同样是十分关键的，在确定具体的色相之前，先从色调开始构思是配色理论之一。在UI领域中，运用在定主色调阶段，为什么用这个色调其实是有很多可以考究的，我用蓝色做了下图示例：

从上图可以看出，对于一种色相来说，色调的不同会带来复杂而微妙的色彩差异。可以分的很细很多，又是另一种配色的思路，这里就先不细说4大色调的用法了。

大自然中蓝色的有：天空、大海、蓝色的花（很少）、蝴蝶（少）、蓝色的眼睛等等，蓝色也属于大自然比较稀有的颜色，人们都喜欢这样的颜色，比如连续的下雨阴天，会特别盼望见到蓝天白云，有人说蓝色是忧郁的，在不同的温度或者气候的时候，蓝色呈现的颜色也是有差别的，也就是上面说到的色调，不管怎样，我喜欢这样的蓝色。

看着上面的图，是不是觉得蓝色巧好看，那在UI界面色彩搭配上又有什么优缺点呢？我们怎么搭配能让界面更加好看生动呢？待下面细细道来。

根据色相环，我们都知道，蓝色是属于冷色系，在生活中也是常能看到的一种颜色，有湖蓝、天蓝、电光蓝、宝石蓝、靛蓝、孔雀蓝、深蓝、矢车菊蓝等等。其表现一种稳重、冷静、清爽、清凉、信赖、诚实、知识、理性、忧郁、孤独的特质。合适在科技、健康、知识、财富、天气、社交等多种领域使用。我还是对现在市面的常见APP的颜色搭配，做案例分析，帮助对颜色搭配的理解。

如上图所示，根据现在市面上主流的APP来看，常用的是电光蓝、钻蓝和孔雀蓝，下面就重点分析这3种颜色搭配。

这个颜色自带金属和光芒的效果，属于亮色调，你会发现，汽车用这个颜色特别显眼，也会觉得很炫很帅气，在APP的应用中，也会给人一种冷静、平和、理性的感觉。

（1）蓝色+金色+复合光色（偏冷色系）:适合需要偏冷色系处理的界面，且需要让整个页面显得更高级些。如下图：

知乎的内容是越来越丰富了，UI界面细节和颜色的处理上，我觉得都是值得借鉴的，将金色作为辅助色，让整个页面都提升了档次，再加上复合光色偏冷色系的辅助，整个页面也饱满了许多。图一，辅助色是冷色系为主，则还是维持着冷静理智的氛围；图二是会员界面，色彩更丰富些，用金色作为辅助色，不会太突兀，却又有色差，冷暖平衡，我认为是一种比较舒服的状态。

（2）蓝色+红色+复合光色（偏冷色系）:适合需要偏冷色系处理的界面，且比较常规的使用搭配方法。如下图：

上图为某招聘APP界面，主色调依然是冷色系，辅助色用红色作为点缀，在界面上也是比较突出的，符合产品定位，能让应聘者第一时间看到一些关键的提示，另外banner图上的黑黄颜色搭配，让整个界面一种阳光刚硬的印象。

这个颜色比较低调，属于暗灰色调里面的，直接用来做为APP的主色会觉得暗了点，稍微提高点饱和度感觉就不一样了。

（1）蓝色+复合光色（饱和度比主色低一点）:适合主色是冷色系，但整个产品定位是要有热闹营销的感觉。如下图：

上图作为外卖的产品定位，用蓝色是稍显得冷静理智了些的，首页整个辅助都是用饱和度比主色的低一点的复合光色。其中有星选和药店是用的跟主色同个饱和度，在这些色块中，饱和度高的色块会凸显出来，从而不会让页面的主次因为颜色被盖掉，在视觉上有一种层次的变化。

（2）蓝色+蓝色+红色（偏冷色系）:适合常规的以冷色系为主的界面。

上图是支付宝的首页，大家都知道支付宝主要是日常生活各项所需功能，其次才是社交。里面的分类也特别多，但支付宝推广的主要功能服务等，都是用的比主色饱和度高一点，明度低一点的辅助色，其他的功能则用复合光色，且都是用暖色系来平衡冷度。只是辅助色的蓝色的色差不够明显，视觉上看上去跟主色是一样的。

这个颜色鉴于绿色和蓝色之间，孔雀蓝是瓷器釉色之一，由瓷器釉色得名，这个颜色很美，至今也没有一个完全准确的数值赋予这个颜色，是除了金银以外的一个特殊色。其实也会发现，这个颜色用在UI界面中的不多，这里也只是一个接近于这种颜色的取值来定义的，来看看它可以怎么搭配吧。

（1）蓝色+复合光色:适合主色是冷色系，但整个产品定位是要有热闹营销的感觉。

在旅游互联网行业来说，去哪儿的UI界面颜色搭配一直都比较舒服，且设计的图标流程也是还不错的，也是我喜欢使用的一个APP，颜色作为分类色块，整个重点模块是非常清晰地呈现出来的，界面也不会因为主色的蓝色而显得冷清，反而看起来很是热闹，符合旅游的产品定位，有一种由『冷』变『暖』的感觉。需要注意的是，现在流行渐变处理，会让界面显得更加立体一些，如果改成纯色的也是一样可以搭配的。

（2）蓝色+黄色+灰色:这种颜色搭配，有一种冷暖中和的效果，使整个页面变得比较中性。如下图：

上图是在我的界面，背景是灰色调，用饱和度差不多的黄色作为辅助色，打破常规的五颜六色的图标，这样的颜色搭配也让界面更加清爽、中性，便于查找自己想要的，当然如果界面内容太少，还是不建议单一颜色处理，会让界面显得过于呆板。

看到这里，你会发现，上面的3种颜色搭配都会有共通的地方，如果只出现冷色系色彩的搭配，容易使画面显得过于冷淡，因此都是通过跟大自然的绿色、黄色、橙色等暖色系的搭配，可以展现温暖的、有生机的氛围。所以总结出下面5种常用的配色方案：

（1）蓝+金+复合光色

（2）蓝+红+复合光色

（3）蓝+复合光色

（4）蓝+蓝+红

（5）蓝+黄+灰

做了3期颜色搭配分享了，会发现复合光色真是万能的，不管主色是什么，它都可以搭配~amazing~~这期的分享就到这里了，下期见~~