B端设计规范指南(三):配色

一、RGB适用条件下应运而生的WEB安全色

B 端设计也是 UI 设计的一种,因为只在网络媒介上,也就是显示屏幕上传播,所以我们采用的色彩模式不是适应于打印的CMYK,而是RGB模式。

(RGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。RGB 即光的三原色,因为每个像素点是由 R 红色、G 绿色、B 蓝色三种颜色的不同色彩强度混合而成。所以 RGB 色的表示可以由 3 个颜色各自使用 0-255 中的数值来呈现,)

在计算机中,为了方便记录和调用,使用了一串十六进制的代码来指代具体的 RGB 色。

理论上,只要是 RGB 模式,随便你怎么选色,16 进制码进行了相应的定位,我们就可以在不同的软件和设备中显示同样的色彩。但是实际效果上仍然有一些误差,是因为不同的系统与设备的硬件设施的不同和对程序的解码上有所偏差。

所以 WEB 安全色就开始应运而生,为了解决这样的问题。

目的是为了色彩在不同的显示环境下,能实现最接近的色彩效果。

当我们用对应的色卡或者工具帮助选色就可以很好地使色彩在WEB安全色之内。建议使用 Google 的 MD 色卡。同时我们可以通过下面这个链接中的网页工具,帮助我们快速实现选色和复制色彩代码的操作。

网站链接:https://www.materialpalette.com/colors

设计 B 端界面时,WEB的安全配色只是一部分,但是我们还是要遵循B端的主色,去选择最接近的,辅助色使用安全色、中性色可以任意定义。

二、B端的总体配色

主要的目标就是在项目设计过程中定义出 主色、辅助色、中性色 三种色彩类型,并把它们应用到合理的位置中去。

B 端的配色更功能化,更理性。

所以B端的配色一定是有非常明确的简洁视觉风格的(至少当下来说是这样)所以更加艺术性的页面这里是需要我们排除借鉴的。因为过于花里胡哨的设计会增常人们对主要信息的识别时间和检索的效率。

主色:是这套产品中的品牌色彩,是整套项目最核心,重要性最高的颜色。主色的选择和品牌的个性息息相关。并且一旦确定很少会更换,其品牌下的产品都会遵循这一套色彩。

辅助色:用来在系统中进行强调、标识、区分的彩色系统。满足一些个性化的需求方案。在 B 端是没有这种诉求的。辅助色具有更多的目的性。(比如说google和国外流行框架 StarBootstrap Admin 中使用的辅助色)用来区分不同的使用场景。

中性色:是一套系统中色彩使用的相关灰色,无色相、无冷暖区别。中性色的应用场景一般在在文字、背景、分割线等基础元素中,在视觉层次上比较靠后。

二、B端的具体配色选择

1. 主色的应用规则

B 端的主色也就是产品的品牌色,一般可以直接使用品牌色,直接复制相关的RGB十六进制数即可。品牌色的存在意义很大程度上来说是用来证明品牌的存在,去强化人们对品牌的记忆点,也是方便设计团队对外对内的汇报陈述,并不是任何情况下都直接用品牌色对界面色彩进行填充的。(假设品牌色是紫色、荧光黄、暗棕色之类的,那么这类颜色本身的内涵、寓意是难以满足功能需求的,我们要尽可能减少它们的出现面积、频次。)

简单说就是:品牌色 不等于 主色。

在 B 端设计中,主色的应用是最不需要大面积填充的,但是是很常见的、耐用的:

意思就是在视觉上过一个面积进行一次主色的提醒,构成连贯的视觉效应,和品牌色具有一些相关的属性,但是又互相区别。

  • LOGO
  • 关键按钮
  • 选中状态
  • 高亮文本、图标
  • 标签用色

2. 辅助色的应用规则

有了主色,辅助色就要开始登上舞台了。

B 端彩色的搭配原则只有一个,那就是 —— 能省就省。

B 端彩色的搭配设计目的是为了设计一个用来使用的软件系统。——一定是清晰的、高效的、安全的。这是其中设计的三个原色,从视觉方面出发。

如无必要,勿增辅色。

B 端项目添加的辅助色类型其实也非常的有限,按寓意划分常见的也就以下几种:

  • 正确、通过
  • 链接、选中
  • 警示、错误
  • 提醒、注意
  • 失效、未完成

相信看到这里,你们脑海中已经有画面了。我们会为正确使用绿色、链接使用蓝色、警示使用红色等等。这些都是具有普世性的颜色,与用户的长期经验吻合,没有识别的成本。

而如果为了个性而个性,对辅助用色另辟蹊径,相当于在异国自驾时使用蓝灯行棕色停的系统,异国风情是有了,说翻车也就翻车了。

所以,针对 B 端辅助色的使用上,如果自己没有把握和经验,可以套用下方我们整理的 RGB 安全色,填充到页面对应的元素中去:

用谷歌色卡各选 3 个同类色出来,并进行标记

  • 正确、通过:绿色
  • 链接、选中:蓝色
  • 警示、错误:红色
  • 提醒、注意:黄色
  • 失效、未完成:蓝灰

3. 中性色的应用规则

B 端的辅助色找起来不难,难的是中性色的使用和搭配上。

任何完整的 B 端的项目,同一个界面中都包含了多个模块、层级,以及数之不尽的文本字段。在这么多的内容中,我们要根据模块、文字的权重,选择合理的中性色填充。

我们要理解在电子显示器中,偏冷的中性色是在人眼视觉汇总偏舒适的,所以中性色在拾色器区域的分布,就并不是全灰的,或者是偏暖的灰,因为偏暖的灰总给人一种不够清爽、理性的感觉。加入冷色是有必要的。

同时,我们用 HSB 色彩模式中的 B 值作为灰度的主要量化标准,全黑时 B 值为 0,白色为 100,每个定义出来的灰度都可以用 B 值作为代号,如 B20、B40 等。这样是很明确的表达,能够提升我们的设计效率。

(定义出 5-8 级的中性色,就可以满足项目中的大多数场景。)

透明度和色值所呈现的中性色是不能等价的。只有在色彩的不同状态(选中/失效等)下再应用透明度。

结尾

B 端配色远远比 C 端更简单,可用的色彩范围更小,耶更容易设计师们上手。而我们需要有相应的能力就是做适当的减法,并且要有强烈的逻辑性和一个不断改进和尝试的思想。毕竟好的设计都是更新迭代出来的。

我们下期再见 ~~!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注