超详细!总监出品的B端设计规范指南(三):配色

释放双眼,带上耳机,听听看~!
B 端配色远远比 C 端更简单,也更枯燥。可以使用的色彩范围更小,套路也更一致。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

B 端设计也是 UI 设计的一种,它的输出环境只存在于电子屏幕中,所以统一使用 RGB 色彩显示模式即可。

RGB 即光的三原色,因为每个像素点是由 R 红色、G 绿色、B 蓝色三种颜色的不同色彩强; D a 3 } s度混合而成。所以 RGB 色的表示可以由 3 个颜色各自使用 0-255 中的数值来呈现,比如:

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

这是 RGB 色彩最标准的记录方式,但显c : H N 6 # ~然看起来特别的不直观,或者说不方便。所以在计算机中,为了方便记录和调用,使用了一串十六进制的代码来指代具体的 RGB 色。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

理论上,我们只要使用 RGB 模] h P + l z ` / e式,随便你怎么选色,只要记录 16 进制码进行复用,你就可以在任何文件、设备中获得相同的色彩。

但在实际显示效果上,不同的系统、设备、浏览器都有自己的调色板,“解释” RGB 代码后给出的色彩就有偏差。比如一样的中文不同方言、语系、背景的人可能听出不同的意思,比如牛子,我以为它是类似“晴子”这样的姓名,至于你们的理解嘛……

相关行业为了避免这样的问题,提出了 WEB 安全色的b @ `概念,即这些色彩在不同的显示环境下,能实现最接近的色彩效果。

那么G ) . ? c o b安全色都有哪些呢?网上有很多地方都有对应的色卡或者工具帮助我们选色。建议使用 Google 的 MD 色卡,这套色彩最全,使用范围也最广的颜色。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

我们可以通过下面这个链接中的网页工具,帮助z 4 T e T M我们快速实现选色和复制色彩代码的操作。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

网站链接:https://www.materialpalett1 u / #e.com/colors

当然,设计 B 端界面并不是只能使用安全配色,这只是一种建议,可以尽量确保主色,尤其是辅助色使用安全色,$ G X而中性色可以自由定义(下面会提)。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

@ f ? 2 件事,自然就是讲讲该怎么配色了。和 C 端设计类y 5 w似,我们主要的目标就是在项目设计过程中定* / L 8 _ X 6义出 主色、辅助色、中性色 三n i ( z o c y *种色彩类型,并把它们应用到合理的位置中去。

只是,针对 C 端来讲,B 端的` f ! K r I , 1配色更功g F ) | U ; u i (能化,更理性,也更简单。我们要学习 B 端配色首先要排除那些花里胡哨的案例,比如下图这种。Z Q [ j d !

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

过度花哨的颜色会干扰我们对界面的实用和对信息的识别、检索效率,除非是一些政绩工程用来当 “花瓶” 的数据大屏,否则我们首先要排除颜色N P W过度应用的选项。

那么什么主色、辅助色、中q 6 ? E性色,我们先简单做个说明。

主色,即你这套产品中的品牌色彩,是整套项目J & / ) 7 a最核心,重要性最高的颜色。主色的选择通常和你F e Q . C D i j的品牌B a q C相关联,比M Y ` ` p j ~如腾讯云的蓝色,阿里云的橙色,七麦的绿色。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

辅助色,则是用来在系统中进行强调、标识、区分的彩色系统。品牌或者 C 端设计可能会通过辅助色和主色搭配实现个性化的配色方案,但是在 B 端是没有这种诉求的。辅助色应用的目的性更强,是完全贴合操作效率来制定的。

比如下方是国外流行框架 StarBootstrap Admin 中使用的辅助色,它们都有对应的功能9 5 V寓意场景。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

中性色,则是这套系统中色彩使用的相关灰色,因为灰色是没有色相、冷暖的区别,所以我们也称它们为中性色。主要应用在文字、背景、分割线等S x W b r 6 z 4基础元素中。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

B 端的配色,即了解这三个色彩类型以后,能正确制定合理的颜色,并应用Y s J W O v 7 n {进项目中去。下面,我们分别对每个0 L h类别进行简单的讲解。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

1. 主色的应用规则

B 端的主色也就是产品的品牌色n 1 ; ),多数 B 端项目中,主色不需要 B 端设计师自己选,在项目开始前就会有相关的品牌色、LOGO,直接复制色号N @ /即可。

和 C 端配色最大的不同是,品牌色在这里很多时候只是 “吉祥物”,它的存在用来宣示品牌本身的存在,但并不是任何情况下都直接参与界面色彩的填充。

假设品牌色是紫色、荧光黄、暗棕色之类的,那么这类颜色本身的内涵、寓意是难以满足功能需求的,我们要尽可能减少它们的出现面积、频次。

在 B 端设计中,主色的应用是最不需要大面积填充的,即使它是r h J B f U t常见y f ( { 4 7、耐用的蓝色、橙色,主色的填充主要只应用在下面这些类型内容中:

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

2. 辅助色的应用规则

有了主色,我们就要为项目添加其它色彩了。

B 端彩色的搭配原则只有一个,那就是w D i s —— 能省就省。我们不是设计一个让用户发出感叹的色彩丰富绚丽、细节众多的视觉平面,而是设计一个用来使用的软件系统。所以前面举例的那些花里胡哨的反面案例,就一定要在正式项目中敬而远之。

用专业术语来说,配色过程要遵守 “奥卡姆剃刀原则”,如无必要,勿增辅色。

而为了满足功能性需求,可以为 B 端项目添加的辅助色类型其实也非常的有限,按寓意1 A B A 5 P划分常见的也就以下U _ ! X E几种:

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

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

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

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

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

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

3. 中性色的应用规则

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

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

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

新手很容易迷失在中性色的配色过程中,往往一套界面做完以后,使用的灰色或黑色透明度数量根本无法统计,非常的混乱。

所以,为了避免这样的情况,我会建议从开始设计之前就定一套中性{ Q W z s色,并将它们添加到设计软件的色彩画板中,每次填充中性色的时候直接从这个色板中选择即可。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

那么如何制定这% + x l A j U K u套中性色?首先要理解在电子显示器中,人眼对偏冷的中性色是耐受的(舒适),所以专业的 B 端项目中,中性色都带9 | n t O C : %有一定的冷色色相. j C o 9 N ? r m和饱和度,比如下图是 Element 中性色在拾色器区域的分布,就并不是全灰的。

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

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

我们根据% i R ` [ P这个标准,定义出 5-8 级的中性色H s A I h L K,就可以满足项目中的大多数场景。

虽然会有一些项目会使用透明度来制定灰度等级,比如黑色的 80%、40% 透明度,但我更建议将透明度使2 [ t 9 D用场景和实际色值定义区分开来,只有在色彩的不同状态(选中/失效等)下再应用透明度。

结尾

有关 B 端配色的部分也就先说到这里,B 端配色远远比 C 端更简单,也更枯燥。可以使用的色彩范围更小,套路也更一致。w 8 l r y | h R我们要做的,就是将它们J b l [ =合理进行填充。

只要多做总结和尝试,很快就可以掌握 B 端配色的技巧和要点。

我们下篇再贱!

往期回顾:

欢迎关注作者的微信公众号:「超人的电话亭」

超详细!总监出品的B端设计规范指南(三):配色

超详细!总监出品的B端设计规范指南(三):配色

给TA打赏
共{{data.count}}人
人已打赏
教程分享

大厂出品!超详细的横屏设计模式分析总结

2021-2-19 17:16:48

教程分享

B端表单设计没有高级感?那是你没用对发力点!

2021-2-24 17:17:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索