UI必学基础 ！用最直白易懂的方法讲配色！
在今天 ，用最易懂受限于国内激烈的直白市场竞争，C 端产品为了争夺用户注意力，法讲界面的配色设计越来越复杂 ，色彩越来越丰富（花哨） ，必学极简的基础风格只存在于少数头部产品和工具类产品中 。
这种风气会传导到招聘的法讲要求中，也就是配色对作品集的审视 ，往往更重视能驾驭复杂视觉风格的必学作品 ，而不是基础极简的风格。
所以，用最易懂除了界面设计中对界面 、组件框架样式的设计创新外 ，最重要的就是对界面配色的管理和表现 。而配色作为所有设计类型的终极难题之一 ，长期困扰着初级 UI 设计师。
所以我们今天的主题，就是用最简单 、适用的逻辑 ，来解释 UI 配色的方法 ！
一 、色彩的选择模式认识
学会配色首先要理解色彩，以及在 UI 设计中要配哪些“色”。
首先是对色彩的描述 ，相信大家或多或少听说过 RGB 、CMYK 之类的名词 ，它们就是对不同场景下的色彩描述方法 。
比如显示器成像 ，是由一个个像素点显示不同色彩组成的 ，而像素点的颜色由三个发光晶体管控制 ，即 Red 红 、Green 绿、Blue 蓝 ，它们发出不同强弱的光进行混合 ，从而形成新像素点上最后显示的色彩 ，所以也叫 RGB 色 。
而对于现实世界的物体的染色 、印刷 ，就要使用具体的颜料上色 ，为了节省成本工业界不可能提供成百上千万的颜料类型 ，所以使用了 Cyan 青色、Magenta 洋红色 、Yellow 黄色三个颜色作为基础进行混合 ，生成其它颜色 。而因为 Black 黑色、灰色难以用别的颜色混出来，所以单独提供，于是就有了 CMYK 色 。
在 UI 设计中，我们的设计内容无须进行打印 ，所以只会以 RGB 模式记录和显示 。但是 RGB 色的记录模式比较复杂 ，即每个色值有 0-255 的 256 个颜色 ，要分别记录这三个数值 ，且它们混合后的色彩很难判断。
所以虽然 UI 中用的是 RGB ，但我们日常选色使用的却是 HSB 模式 ，即将颜色划分成色相 Hue 、饱和度 Saturation 、明度 Brightnessd 。它是对色彩逻辑上的定义 ，会根据应用的需要转化成 RGB 和 CMYK，所以不用纠结它不是 RGB 不能显示怎么办 。
而多数 UI 软件的色彩选择面板 ，就是使用 HSB 的选色逻辑来设计的 ，有一个横向的色相条，加一个表示明度 、饱和度的矩形区域 。
虽然色相条是一个长方形 ，但用过应该能发现它的首尾都是红色，因为 HSB 模式下建立的色相是一个 360 度的环形 ，也叫色环 。选色面板用的色相条 ，就是这个色环截开拉直后的效果 ，所以首尾是同一颜色 。
使用 HSB 选色的逻辑 —— 先确定色相 ，再调节饱和度和明度。
如果饱和度 S 值为零 ，则色彩没有任何色相只剩下黑白灰，即中性色 。明度 B 值控制亮度 ，0 即完全没有亮度所以是黑色 ，100 最亮则是白色 ，即颜色越深 B 值越小 ，B 值越大颜色越亮。
学会使用 HSB 选色和微调的方式是进行配色的关键 ，因为专业的设计过程会有清晰的色彩应用思路 ，会直接通过色彩面板去找到自己要的颜色 ，甚至是直接手动输入数值，而不是把选色面板当盲盒随机拖一个出来去测试 。
在 UI 设计过程中 ，如果软件的色彩面板默认是其它模式 ，优先将它们先切换成 HSB （有些是 HEX）模式 。
二 、UI 界面的色彩类型认识
了解选色模式是第一步 ，而第二步就是认识 UI 界面中应用的色彩类型有哪些 ，为进一步掌握配色做准备 。
在过去 ，我们将界面的配色分为主色 、辅助色、中性色三种类型 ，但这次我们要做出新的定义 ，以满足目前 UI 设计趋势的需要 。
UI 界面中应用的色彩可以分成 ：品牌色 、功能色 、中性色 、装饰色 、内容色等 ，四个大类 。
1. 品牌色
品牌色即组成产品品牌基调 、个性的核心色彩 ，用于区分自己和其它产品之间的区别。而品牌色并不是只有一个 ，而是包含主色 、辅助色两个分类 。
首先品牌主色，是品牌的核心色调 ，是和品牌进行绑定的色彩锚点 ，比如想到美团就是黄色 ，想到肯德基就是红色 ，想到星巴克就是绿色 。常规的品牌主色有且只能有一个 。
而辅助色 ，则是建立在品牌色彩系统内搭配主色出现的色彩。比如麦当劳的核心主色是黄色（LOGO 色，"金"拱门），但相信麦当劳的红色你们一定也不陌生 ，它们经常相伴出现 。再比如沃尔玛 ，虽然主色是蓝色但是黄色在品牌制品和包装上也没少用 。
辅助色可以只有一个也可以有多个 ，作为补充比使用单一主色会更具辨识度和丰富性 。但它不是必须的 ，因为在 UI 界面中出现的颜色往往非常多 ，品牌辅助色的加入往往会让配色变得更困难 ，反而成为拖累 。
2. 功能色
功能色 ，就是根据界面传达信息 、隐喻所应用的色彩 ，具有比较明确的工具作用而存在 。部分场景下用户对色彩代表的寓意认识根深蒂固时 ，那么我们就有必要顺应这种认识来添加色彩 。
比如电商中红色代表价格 、折扣 ，工具产品里绿色代表成功通过 ，国内金融产品里红色代表上涨绿色代表下跌 ，币圈行业反过来绿色代表上涨红色代表下跌等。
功能色的应用是必要的 ，因为色彩也是用于传递信息的关键要素之一 。但是 ，功能色不一定完全和品牌色脱节 ，如果品牌色和想要的功能色接近 ，往往直接使用品牌色即可 ，不用创建新的颜色 。
比如京东的价格 、优惠用的就是品牌主色 ，支付宝的确认 、同意用的也是品牌主色 。
3. 中性色
中性色就是黑白灰 ，即没有颜色的“颜色” 。
一个项目再怎么花哨 ，也会包含不需要使用花哨色彩的背景 、文字 、图标 ，而通常它们在整个应用内的占比才是最大的 ，而不是品牌色！
中性色是支撑整个产品色彩体系的骨架 ，用好中性色就能让界面被用户快速理解 、认识 。所以在一些品牌色就是以黑色为主色的产品中 ，用户也并不会因为产品没有使用其它色相而不知道应用怎么使用 。
4. 装饰色
前面提到的三种色彩类型，都是要进入项目设计规范内的“标准色” ，而应用实际设计过程中光靠这些标准色是无法满足所有场景的 。
比如一些特定的活动页面 ，或者装饰图标 ，运营场景等 ，都会根据具体的需求或美观性应用其它色彩。
装饰色的配置没有非常具体的要求 ，在一定程度上就是脱离原有的规范标准 ，作为一个独立的设计去完成。所以很多大厂产品在不同页面中的运营需求不同，于是装饰色各用各的，导致最终呈现出来的结果非常割裂 。
装饰色是在今天的移动端设计中最大的难题 ，因为我们要加入很多新的色彩进去会和规范色形成冲突 。虽然线上很多产品的配色都有种放弃治疗的决绝，但在招聘环节中对色彩的应用上这些要求又全部回来辣（就是这么分裂） ！
5. 内容色
最后一个 ，就是内容色了，即产品内展示的内容所使用的色彩 ，如用户的照片，商品的图片 ，广告的图片等等 。
某种程度上来说内容用什么颜色是不可控的，不在配色的考虑范围内 。但对于一些特定的产品中 ，内容用什么颜色是有确定性的 ，甚至直接规范内容制作 、拍摄 、后期的用色规范 ，让整体的配色能更统一和谐。
比如美妆 、服装 、茶饮类品牌自家的应用或小程序 ：
并且在作品集项目和评审中 ，设计师自己输出的界面也是要考虑内容用色的 ，因为内容往往在页面中占比很大 ，用色的好坏会直接影响观看者对整个页面的评价 ，所以我们必须要把它当成配色的一部分来处理 。
比如我们前阵子之前分享过的案例 ：
配色就是完成对上面五种色彩类型的选择 、控制 、管理 ，形成最终呈现的效果。
结尾
今天的分享就到这里 ，时间有限一口气写不完 ，下一篇会继续展开对配色方法的具体介绍和案例演示 。
作者：超人的电话亭
在今天 ，用最易懂受限于国内激烈的直白市场竞争，C 端产品为了争夺用户注意力，法讲界面的配色设计越来越复杂 ，色彩越来越丰富（花哨） ，必学极简的基础风格只存在于少数头部产品和工具类产品中 。
这种风气会传导到招聘的法讲要求中，也就是配色对作品集的审视 ，往往更重视能驾驭复杂视觉风格的必学作品 ，而不是基础极简的风格。
所以，用最易懂除了界面设计中对界面 、组件框架样式的设计创新外 ，最重要的就是对界面配色的管理和表现 。而配色作为所有设计类型的终极难题之一 ，长期困扰着初级 UI 设计师。
所以我们今天的主题，就是用最简单 、适用的逻辑 ，来解释 UI 配色的方法 ！
一 、色彩的选择模式认识
学会配色首先要理解色彩，以及在 UI 设计中要配哪些“色”。
首先是对色彩的描述 ，相信大家或多或少听说过 RGB 、CMYK 之类的名词 ，它们就是对不同场景下的色彩描述方法 。
比如显示器成像 ，是由一个个像素点显示不同色彩组成的 ，而像素点的颜色由三个发光晶体管控制 ，即 Red 红 、Green 绿、Blue 蓝 ，它们发出不同强弱的光进行混合 ，从而形成新像素点上最后显示的色彩 ，所以也叫 RGB 色 。
而对于现实世界的物体的染色 、印刷 ，就要使用具体的颜料上色 ，为了节省成本工业界不可能提供成百上千万的颜料类型 ，所以使用了 Cyan 青色、Magenta 洋红色 、Yellow 黄色三个颜色作为基础进行混合 ，生成其它颜色 。而因为 Black 黑色、灰色难以用别的颜色混出来，所以单独提供，于是就有了 CMYK 色 。
在 UI 设计中，我们的设计内容无须进行打印 ，所以只会以 RGB 模式记录和显示 。但是 RGB 色的记录模式比较复杂 ，即每个色值有 0-255 的 256 个颜色 ，要分别记录这三个数值 ，且它们混合后的色彩很难判断。
所以虽然 UI 中用的是 RGB ，但我们日常选色使用的却是 HSB 模式 ，即将颜色划分成色相 Hue 、饱和度 Saturation 、明度 Brightnessd 。它是对色彩逻辑上的定义 ，会根据应用的需要转化成 RGB 和 CMYK，所以不用纠结它不是 RGB 不能显示怎么办 。
而多数 UI 软件的色彩选择面板 ，就是使用 HSB 的选色逻辑来设计的 ，有一个横向的色相条，加一个表示明度 、饱和度的矩形区域 。
虽然色相条是一个长方形 ，但用过应该能发现它的首尾都是红色，因为 HSB 模式下建立的色相是一个 360 度的环形 ，也叫色环 。选色面板用的色相条 ，就是这个色环截开拉直后的效果 ，所以首尾是同一颜色 。
使用 HSB 选色的逻辑 —— 先确定色相 ，再调节饱和度和明度。
如果饱和度 S 值为零 ，则色彩没有任何色相只剩下黑白灰，即中性色 。明度 B 值控制亮度 ，0 即完全没有亮度所以是黑色 ，100 最亮则是白色 ，即颜色越深 B 值越小 ，B 值越大颜色越亮。
学会使用 HSB 选色和微调的方式是进行配色的关键 ，因为专业的设计过程会有清晰的色彩应用思路 ，会直接通过色彩面板去找到自己要的颜色 ，甚至是直接手动输入数值，而不是把选色面板当盲盒随机拖一个出来去测试 。
在 UI 设计过程中 ，如果软件的色彩面板默认是其它模式 ，优先将它们先切换成 HSB （有些是 HEX）模式 。
二 、UI 界面的色彩类型认识
了解选色模式是第一步 ，而第二步就是认识 UI 界面中应用的色彩类型有哪些 ，为进一步掌握配色做准备 。
在过去 ，我们将界面的配色分为主色 、辅助色、中性色三种类型 ，但这次我们要做出新的定义 ，以满足目前 UI 设计趋势的需要 。
UI 界面中应用的色彩可以分成 ：品牌色 、功能色 、中性色 、装饰色 、内容色等 ，四个大类 。
1. 品牌色
品牌色即组成产品品牌基调 、个性的核心色彩 ，用于区分自己和其它产品之间的区别。而品牌色并不是只有一个 ，而是包含主色 、辅助色两个分类 。
首先品牌主色，是品牌的核心色调 ，是和品牌进行绑定的色彩锚点 ，比如想到美团就是黄色 ，想到肯德基就是红色 ，想到星巴克就是绿色 。常规的品牌主色有且只能有一个 。
而辅助色 ，则是建立在品牌色彩系统内搭配主色出现的色彩。比如麦当劳的核心主色是黄色（LOGO 色，"金"拱门），但相信麦当劳的红色你们一定也不陌生 ，它们经常相伴出现 。再比如沃尔玛 ，虽然主色是蓝色但是黄色在品牌制品和包装上也没少用 。
辅助色可以只有一个也可以有多个 ，作为补充比使用单一主色会更具辨识度和丰富性 。但它不是必须的 ，因为在 UI 界面中出现的颜色往往非常多 ，品牌辅助色的加入往往会让配色变得更困难 ，反而成为拖累 。
2. 功能色
功能色 ，就是根据界面传达信息 、隐喻所应用的色彩 ，具有比较明确的工具作用而存在 。部分场景下用户对色彩代表的寓意认识根深蒂固时 ，那么我们就有必要顺应这种认识来添加色彩 。
比如电商中红色代表价格 、折扣 ，工具产品里绿色代表成功通过 ，国内金融产品里红色代表上涨绿色代表下跌 ，币圈行业反过来绿色代表上涨红色代表下跌等。
功能色的应用是必要的 ，因为色彩也是用于传递信息的关键要素之一 。但是 ，功能色不一定完全和品牌色脱节 ，如果品牌色和想要的功能色接近 ，往往直接使用品牌色即可 ，不用创建新的颜色 。
比如京东的价格 、优惠用的就是品牌主色 ，支付宝的确认 、同意用的也是品牌主色 。
3. 中性色
中性色就是黑白灰 ，即没有颜色的“颜色” 。
一个项目再怎么花哨 ，也会包含不需要使用花哨色彩的背景 、文字 、图标 ，而通常它们在整个应用内的占比才是最大的 ，而不是品牌色！
中性色是支撑整个产品色彩体系的骨架 ，用好中性色就能让界面被用户快速理解 、认识 。所以在一些品牌色就是以黑色为主色的产品中 ，用户也并不会因为产品没有使用其它色相而不知道应用怎么使用 。
4. 装饰色
前面提到的三种色彩类型，都是要进入项目设计规范内的“标准色” ，而应用实际设计过程中光靠这些标准色是无法满足所有场景的 。
比如一些特定的活动页面 ，或者装饰图标 ，运营场景等 ，都会根据具体的需求或美观性应用其它色彩。
装饰色的配置没有非常具体的要求 ，在一定程度上就是脱离原有的规范标准 ，作为一个独立的设计去完成。所以很多大厂产品在不同页面中的运营需求不同，于是装饰色各用各的，导致最终呈现出来的结果非常割裂 。
装饰色是在今天的移动端设计中最大的难题 ，因为我们要加入很多新的色彩进去会和规范色形成冲突 。虽然线上很多产品的配色都有种放弃治疗的决绝，但在招聘环节中对色彩的应用上这些要求又全部回来辣（就是这么分裂） ！
5. 内容色
最后一个 ，就是内容色了，即产品内展示的内容所使用的色彩 ，如用户的照片，商品的图片 ，广告的图片等等 。
某种程度上来说内容用什么颜色是不可控的，不在配色的考虑范围内 。但对于一些特定的产品中 ，内容用什么颜色是有确定性的 ，甚至直接规范内容制作 、拍摄 、后期的用色规范 ，让整体的配色能更统一和谐。
比如美妆 、服装 、茶饮类品牌自家的应用或小程序 ：
并且在作品集项目和评审中 ，设计师自己输出的界面也是要考虑内容用色的 ，因为内容往往在页面中占比很大 ，用色的好坏会直接影响观看者对整个页面的评价 ，所以我们必须要把它当成配色的一部分来处理 。
比如我们前阵子之前分享过的案例 ：
配色就是完成对上面五种色彩类型的选择 、控制 、管理 ，形成最终呈现的效果。
结尾
今天的分享就到这里 ，时间有限一口气写不完 ，下一篇会继续展开对配色方法的具体介绍和案例演示 。
作者：超人的电话亭
