一:配色篇
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端设计中,主色的使用范围应用场景均在以下几个类型中:
2- 辅助色的应用规则
主色确定以后我们就要进行辅助色的定义了,那么在B端中呢,我们不需要像在C端一样展示给用户丰富多彩吸引眼珠的视觉疗效,而是在配色上要分外遵守奥卡姆剃刀定律中的,如无必要,勿增实体的原则;尽可能做到可以提效增本即可。
为了满足功能性的需求,可以为B端添加的辅助色类别也是十分的有限的,辅助色的使用范围应用场景均在以下几个类型中:
3- 中性色的应用规则
在同一个界面中均都包含了多个模块、层级,以及数之不尽的文本数组。在这么多的内容中,我们要按照模块、文字的权重,选择合理的中性色进行设计填充,目的是为了突出信息的优先级及一致性的对比
制定中性色的形式:首先通过对各竞品的剖析以及客关的理解得悉在电子显示器中,人眼对偏冷的中性色是耐受的(舒适),所以专业的 B 端项目中,中性色都带有一定的冷色色相和饱和度,比如下图是 Element 中性色在拾色器区域的分布,就并不是全灰的。
所以在中性色中适当的加入暗色是有必要的,同时,我们用 HSB 色彩模式中的 B 值作为中性色灰度的主要量化标准,全黑时 B 值为 0,白色为 100,每个定义下来的灰度都可以用 B 值作为代号,如 B20、B40 等
好了,配色就先说到这儿呢