UI界面设计的用色，你都会了吗？——红色篇（一）

今天分享我一直积累的东西，会写成系列分享给大家，以下纯干货，请接着~

我们手机上看到的APP应用，小程序，那这些UI界面的颜色是随便选择的吗？答案肯定不是，一般大公司都会有品牌策划，App用的颜色，有时候不仅只是一个应用的颜色，还是对品牌的推广，比如某猫、某狗、某拉、微信、QQ等；小公司可能只是一个颜色，但是怎么用色还是需要探讨的。

很多刚入行或入行不久的设计师，一般都会跟着设计论坛临摹/练习那些好的用色，当然现在有很多配色器，可以让你轻松配色，但你们对用色掌握了多少？可能甚至有些入行多年的设计师，由于某些原因，也是没有掌握色彩搭配的基本原理的，但掌握了这些，对于你以后进行创作会有很大帮助，这里我总结了关于App和小程序UI界面设计中的色彩搭配基础知识系列，今天要分享是红色。

--{ 色彩三要素 }--

首先我们先来了解下基础知识，色彩三要素有哪些？并且有什么作用？

色彩三要素包括色彩明度、饱和度和色相。如下图：

上图是我以正红色画的对比图，都是我们上学的时候就有学过的，下面我简单总结下：

色彩明度：即色彩的亮度或明度；颜色有深浅、明暗的变化。如上图，当每个格子的白色增加越多，则明度越高，当黑色增加越多，则明度越低。

色相：即是色调。我们都知道三原色有红、黄、蓝，复合光色有红、橙、黄、绿、蓝、靛、紫（一些光给人以温暖的感觉，通常称为暖光，其中，绿色和紫色是介于暖色系和冷色系中间。）

饱和度：也就是纯度，通常是指色彩的鲜艳度，纯度越高，颜色越鲜艳。

UI界面设计时，可以通过对相同的色彩，运用不同的明度、饱和度和色相进行调色，给人感觉是不一样的。这其中的搭配还涉及到互补色和类似色的运用，在这里简单描述下分别是什么意思：

互补色：简单来说，是色轮上大概相差180度角的位置，两种色块放一起，会引起强烈对比的色觉，会感到红的更红、绿的更绿。比如：红—青、黄—蓝、红—绿。

类似色：在色轮上大概90度角内相邻接的色统称为类似色，例如红－红橙－橙、黄－黄绿－绿、青－青紫－紫等均为类似色。相对来说，色相差别会比较弱，请看下图：

如上图，我们可以看到，当我们大面积使用红色的时候，白色、灰色背景的舒适度要好些。黑色、互补色、冷色调作为背景时对比比较强烈，但黑色跟红色搭配比其他两个舒适些；互补色作为背景，红色边上会有虚化的感觉，对比很强烈；冷色调比如上图用的蓝色作为背景色，对比也较明显，但是看上去比较突兀。最后一个类似色，我用了橙色作为背景色，因为太相近的颜色，红色表现得不明显。所以，我们设计的时候，用什么颜色和红色一起搭配会让界面舒服好看，下面我给大家细细道来。

--{ 这些红色-你都会用吗？}--

我们不难发现，基本上的购物App和小程序界面都喜欢用暖色系，其中红色做为主色调的居多，作为最刺激人类情感的的色彩，我们怎么在UI界面中使用合适？

首先，我们先来看一张图

如上图，我们生活中有很多是红色的场景、事物，不同的红色代表的寓意也不一样。

红色又分为：正红、深红、品红、粉红、酒红、绯红、洋红、紫红、朱红等等，它的颜色属性有：热情、活泼、华丽、刺激、欲望、浪漫、喜庆、奔放和危险提醒等。可见它的应用范围非常广，有柔有刚，不局限于某个领域，下面就按照颜色来分析使用场景，可以先看下面我根据不同的红色，做的一个明暗深浅的对比图。

--| 01 深红 |--

上面的红色对比图可以看出，正红色的颜色太鲜艳，不合适在应用中大面积的使用。正红加黑色调出来的深红色，纯度和明度都是适中的，看起来舒服些。我们常用的App里面使用深红色的也是比较多的，给人感觉没有正红那么鲜艳，但又有喜庆和刺激感，视觉上比较让人接受，这里举3个栗子来分析。

（一）

红色+米黄色：给人很温柔、舒服的感觉，适合这种卖家居的场景。

网易的UI界面风格一直是我个人比较喜欢的，我怎么觉得应该给我广告费呢？(*^__^*)~上图为严选的首页，没有像其他购物网站那么花哨，但是我还是在上面剁手了不少。看上面的提取色，整体色调是暖色系，深红为主色调，辅色在主色的基础上，提高明度，色彩由『热』变『暖』，再加一个米色的类似色进行调和，没有其他过多的颜色，不花哨，模块分类很清晰，视觉上看着很舒服。

（二）

网易云音乐的UI界面也是比较舒服简洁，它的设计和配色值得很多设计师们借鉴，看上面的3个界面的提取色，以深红为主色，有三种配色方案：

1、红色+黄色：红色为主色，黄色作为点缀或突出点都行，有种喜庆的感觉，想一下我们过年挂的灯笼，中间是红色，下面的絮絮是黄色的。

2、红色+黑色+金色：给人比较高端、尊贵的感觉。现在很多商家的黑卡会员，就喜欢用黑金颜色，来打造一种尊贵感，有别于普通会员。

3、红色+冷色系：在有大片暖色系中，运用冷色点缀，会比较突出但又不突兀。（不过是要注意用明度高些，纯度适中的色相来表现）如上面图一首页banner上有个粉蓝色写着活动的标签，会在整个界面中起到点亮提醒的作用，如果换成其他暖色系的可以吗？我们来试试，请看下图：

如上图，对比会发现：上图的第一张和第四张标签的颜色会相对比较突出，但又不突兀；图二因为banner图上已经有黄色，所以再用黄色作为标签虽然画面协调，但是不突出；图三用主色的低纯度来设计，发现并不突出，放在那个地方色感太弱，会被其他的红色所覆盖，这种颜色可以作为辅助，但没有提亮的效果。

（三）

如上图，今日头条首页的配色也是基本暖色系为主，红色主色，黄色辅助，由于这里是新闻咨询类的App，图片的颜色是无法完全控制的，所以这里图片颜色先忽略不计，但我们在做UI高保真图的时候，还是建议找的图片颜色，要能跟界面颜色协调的，这样还能帮助你快速通稿哦~

这里还用了一种配色方案：

红色+复合光色：用于首页、个人中心等页面需要用多个颜色来区分功能/指引的作用，则选择和复合光色配合使用。（但应注意选择明度高、纯度适中的颜色，让整个页面有颜色的部分突出的同时，不会觉得突兀。）复习下上面提到的复合光色有：红、橙、黄、绿、蓝、靛、紫，那红色作为主色了，其他颜色就可以相应的作为辅助色使用。（如上面图二）

图二中，我发现最后一个绿色的明度和纯度跟其他的不一样，那我尝试把绿色的明度调成跟其他三个接近，看看效果如何：

如上图，当右图修改后的绿色，是跟前面三个接近的明度和纯度，跟上面的红色按钮刚好是互补色，形成了强烈的对比，此时两个颜色都很显眼，但这个界面明显是要强调和突出登录按钮的，修改的那个绿色明显是不合适。原图中的绿色图标，跟其他三个相比，把明度降低，纯度提高了，界面看起来也是和谐了很多。所以，我们在设计过程中，需要动态的调整对颜色的取值，最终是让界面看起来平衡协调。

颜色的确实有很多内容要写，今天先分享到这里，还有其他红色的用法下一期再继续分享给大家，希望对你们有帮助~