关于B端设计那些事儿 - 配色篇

一：配色篇

1.RGB

      B端设计目前占领市场比重越来越大，原因是B端与C端最大的差别就是一个是面向企业或者特定用户群体的企业级产品，纯粹为解决问题而生；一个呢是面向普通大众消费者；所以在色彩的使用及设计时斟酌的中心截然不同；但是呢，他们有有一个共通的，那就是它们的输出环境只存在于电子屏幕中，所以统一使用 RGB 色彩显示模式。

     说到这儿，我们就来分析一下 RGB ；百度君中解释道：RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。话不多说，解释的这么详细了那我就不多逼逼了，那我就上个配图呼应一下深入理解吧（配图来自于SKETCH） 

右侧指向分别代表R 、 G 、B不同色值的数值，左侧一串十六进制的代码指代具体的 RGB 色，设计时可进行直接复制取用延展设计；但是对于RGB色值的准确度来讲，在不同的分辨率下色纸的显示效果都是有偏差的；给予这个问题相关的行业提出了WEB安全色的概念，即这些色彩在不同的显示环境下，能实现最接近的色彩效果

率下色纸的显示效果都是有偏差的；给予这个问题相关的行业提出了WEB安全色的概念，即这些色彩在不同的显示环境下，能实现最接近的色彩效果

那么安全色都有哪些呢？这里可以参考 Google 的 MD 色卡进行延展；当然安全色只是一个行业辅助；我们不能安全照搬可以分析一下后将这个原理结合公司品牌主色即辅助色去延展，这样我们在制作色彩规范的时候就不会出现太大的问题 。

2.B端项目中的配色目标

     说到B端的配色，毋庸置疑主要的目标就是在项目设计的过程中定义出主色、辅助色、中性色 者三种色彩类型，并且将其应用到合理的位置中

在C端机B端的定位上我们上一节有讲，因为其用户群体的不同，则在B端的配色上会更加偏向于功能化，更理性且更简单干净；在平时的练习中，可以看到追波、pinterest中会出现很多既新颖又个性化的一些设计，但是这些只能出现在概念稿的个人练习中，真正在项目软件系统中这些案例是千万不可沿用的；比如下图

  

    这些过度花哨的颜色会干扰用户对界面信息的识别、操作效率，所以我们在设计时要尽量的排除一些颜色的过渡设计

那么通过以上的案例分析关于主色、辅助色、我们该如何进行定义设计呢？

主色：即产品中的品牌色，是整套项目最核心，重要性最高的颜色。主色的选择通常和品牌息息相关，比如腾讯云的蓝色，阿里云的橙色，七麦的绿色。

辅助色：在B端的设计场景中辅助色是用来在系统中进行强调、标识、区分的色彩，相对比主色辅助色的目的性更强，是完全贴合操作效率来制定的。

比如说我们常见的 Ant.design 中使用的辅助色，他们都有相对应的寓意场景；

中性色：是系统中色彩使用的相关灰色，因为灰色是没有色相、冷暖的区别，所以我们也称它们为中性色。主要应用在文字、背景、分割线等基础元素中。

B 端的配色，即了解这三个色彩类型以后，能正确制定合理的颜色，并应用进项目中去。下面，我们分别对每个类别进行简单的讲解。

1 - 主色的应用规则

在B端的色彩场景设计中，大多数情况下主色是不需要设计师自行去进行选择的，因为在项目初期会有相关的品牌色、LOGO给到设计师，此时主色直接取用即可，

和C端中，最大的一个不同就是主色的应用概率在B端中场景较低不需要进行大面积的填充，而在C端中则就大为相反了；那么在B端设计中，主色的使用范围应用场景均在以下几个类型中：

• LOGO

• 关键按钮

• 选中状态

• 高亮文本、图标

• 标签用色

2- 辅助色的应用规则

主色确定之后我们就要进行辅助色的定义了，那么在B端中呢，我们不需要像在C端一样展示给用户丰富多彩吸引眼球的视觉效果，而是在配色上要格外遵循奥卡姆剃刀定律中的，如无必要，勿增实体的原则；尽可能做到可以提效增本即可。

为了满足功能性的需求，可以为B端添加的辅助色类别也是非常的有限的，辅助色的使用范围应用场景均在以下几个类型中：

• 链接 、选中                 蓝色

• 正确、成功                  绿色

• 警示、失败 错误           红色

• 提醒、注意                  橙黄色

• 失效、未完成               蓝灰色

3- 中性色的应用规则

在同一个界面中均都包含了多个模块、层级，以及数之不尽的文本字段。在这么多的内容中，我们要根据模块、文字的权重，选择合理的中性色进行设计填充，目的是为了突出信息的优先级及一致性的对比

制定中性色的方式：首先通过对各竞品的分析以及客关的理解得知在电子显示器中，人眼对偏冷的中性色是耐受的（舒适），所以专业的 B 端项目中，中性色都带有一定的冷色色相和饱和度，比如下图是 Element 中性色在拾色器区域的分布，就并不是全灰的。

所以在中性色中适当的加入冷色是有必要的，同时，我们用 HSB 色彩模式中的 B 值作为中性色灰度的主要量化标准，全黑时 B 值为 0，白色为 100，每个定义出来的灰度都可以用 B 值作为代号，如 B20、B40 等

好了，配色就先说到这里呢