3个章节 ，帮你学会B端设计师必须掌握的颜色设定
颜色是我们 B 端设计重要的设计媒介 ，上篇文章我们讲解了色彩空间 ，端设的颜定了解到不同色彩空间对于设计方案究竟会有哪些影响～
但有了影响还是计师不够 ，今天我们来说说 B 端项目当中颜色搭配的掌握底层逻辑 ，讲解清楚不同颜色（品牌色 、色设中性色个章节辅助色）之间的帮学必须使用技巧 ，主要是端设的颜定技巧～
想让大家明白 ：
为什么 B 端项目的品牌色可以进行调整 ？
中性色设定的背后逻辑 ？
不同的辅助色之间我应该如何进行梳理？
一 、品牌色
品牌色是计师系统颜色的灵魂，它主要是掌握用来强调页面当中的品牌价值。也就是色设很多颜色一看 ，我们就能立马想到对应个章节品牌 。
比如 绿色 ，帮学必须我们能立马想到微信；红色我们能想到 可口可乐 ，端设的颜定这就是品牌色所赋予的价值 。
1. 品牌色的设定
在 B 端设计当中 ，品牌色的使用场景会有些特殊 。一般会被用来强调页面当中的关键信息 ，比如在 B 端系统当中的 主按钮 、导航菜单、文字链接 、选中状态 ，我们都可以使用品牌色的方式进行呈现 。
因此对于品牌色的设定就会显得至关重要 。如果设定为 蓝色 、紫色 、绿色，会与整体的设计较为协调 ，因此较为容易处理 。比如 ：钉钉 、飞书 ，都采取蓝紫色的方式确定整体品牌色 。
但如果颜色为 红色 、橙色 、黄色 ，处理起来则会比较麻烦 ，需要考虑品牌色与辅助色相混淆的问题。
比如 我们要为 中信银行企业端 设计 B 端产品 ，这时候它的红色就会和系统当中的警告色相冲突，那我们应该怎么办 ？
① 辅助色微调 ：我们可以考虑延续中信银行品牌色 ，但对辅助色的红色进行微调 ，使大家能够明显感受到区别 ，这样能够快速解决问题 。
比如在这里 ，就可以考虑将辅助色红色调整为更偏暖的橙红色 ，这样就能够与品牌色形成较大差别。
② 重新设定 ：在品牌色的基础上 ，为企业端的用户单独设定一套以蓝色为主的颜色风格，这样能够保证颜色的使用上不会出现较大问题 。
比如京东在自己品牌色的红色的基础上，为商家后台单独设定蓝色为品牌色 ，进行呈现和延展 。同样的例子还有 小红书 、淘宝 等...
2. 品牌色的使用
在品牌色当中 ，它的使用场景不同 ，会衍生出不同的颜色色值 ，需要在页面当中使用 。我们把这部分衍生出来的颜色叫做色阶 。
比如在这个页面当中 ，除了品牌色之外 ，还会有按钮的选中状态 ，Tab 的切换状态 等等 ，都会使用与品牌色相关的颜色进行呈现 。
在梳理时 ，需要根据自己的颜色进行合理的安排与设定 ，这里给大家罗列了色阶的使用场景 ，大家可以保存查看。
那这些颜色怎么来 ？在色阶的设定上 ，通常会有几种办法 ：
① 黑白透明度叠加法：根据我们确定的品牌色 ，通过叠加 10% 透明度的白或者黑，进而能够推导出对应色阶 。
这种做法整体会比较简单 ，但操作起来会存在相应的误差 ，因为对于颜色只修改了它的明度 ，并没有对色度进行修改 ，会稍稍有些不合理 。
② 色彩空间计算法 ：同样在 Figma 当中 ，我们可以使用色彩空间的计算方式，快速生成对应的颜色色阶 。但也是一样的问题，只会存在明度 Tone 的变化。同时我试用下来 ，发现蓝色生成出来色阶较深 ，感觉不算特别理想 。
③ 自动生成法 ：生成法就是最简单高效的方式 。通过 Arco Design 所提供的颜色生成平台 ，我们可以将自己的品牌色进行输入 ，就能生成导出对应的颜色色值 。这种方式既高效 ，同时结果又较为准确 ，然后截图就可以自己在 Figma 里面快速吸取颜色 。
网址 ： https://arco.design/palette/list
3. 品牌色的使用面积
那品牌色到底使用多少呢 ？
其实在页面当中 ，我们不需要哪哪都放品牌色～
因此在使用品牌色，我们需要遵守系统的 631 原则 ，也就是我们会将整个页面的颜色进行划分 ，其中品牌色只会占据整个页面的 10% 的比例 ，剩余的中性色、白色/弱灰色 会占据整个页面的 30% 与 60%。
当然 ，这个也并不是绝对，我们也会与页面的类型相关 ，进行相应微调 。
4. 为什么现在品牌色也不太重要
因为现在的 B 端产品，大多数都是以蓝色为主，你会发现我们不能做到 "看到某一个颜色 ，就能立马想起你来～"
在这样的背景下 ，品牌色的使用就会更为局限
所以建议大家在最初颜色的设定上 ，尽可能地将时间留给页面的设定上 ，而品牌色上就根据页面设定的初稿进行微调则会更为合理 。
二 、中性色
中性色非常重要 ，在我看过 1000 多份同学的作业当中 ，中性色是最容易犯错的。
因为对于 B 端页面而言 ，本质上就是页面的"排版设计"，所以使用合理的中性色能够让用户更容易获取信息 。
1. 中性色的设定
这里给到大家两个页面 ，你会发现右侧明显会更好 ，更清晰 ，它的设计原理就用到一句话 ："黑下来、浅上去"
首先我们先介绍一个中性色的色阶 ，整体会分为 ：深色区域与浅色区域 。
黑下去 ，是让深色区域的颜色加重 。
因为深色区域的颜色大多都是用在 标题 、正文 等颜色 ，这部分需要强调页面的识别性 ，因此颜色越黑 ，用户阅读的难度就会越低 。
同时不同颜色之间还是会有明显的区分 ，所以在设定时我们会将颜色控制在 #242424 之间 。（只要灰色是在 2 开头左右的范围都是可以的）
浅上去，是将浅色的部分尽量减弱 。
因为浅色区域大多是用在 描边 、背景 等辅助信息的区域 ，这部分就需要减少颜色的占比 ，使得中性色对页面的干扰减少 。比如太多灰色会造成页面太散 、和文字进行搭配就会很难识别 ，所以我们在使用上就会减少颜色色值 。
在整体的颜色趋势上，你会发现它是形成这样的一个趋势 。
2. 中性色的原理
同时"深下来 、浅上去"也是为了让它能够更好的满足 WCAG 的要求 ，这样的设定我们的色彩对比度都会在 7.0 以上 。
比如在 语雀之前的迭代当中，设计师就是通过加深颜色 ，让产品的无障碍能力提高 ，进而能够更好的呈现页面当中的内容 。但别人在设计时 ，描述的就会更具有价值 ，大家可以学习别人的表述方式。
同时对于中性色的使用 ，我们可以考虑融入一点点蓝色，这样对于灰色而言整体会更加干净 ，会让你的中性色更具质感 。这里给你推荐一组具备蓝色的中性色，大家可以直接参考 。
三 、辅助色
辅助色主要是向用户明确的传达成功 、警告、错误 、链接等信息和状态 。它主要起到的是辅助的作用 ，因此出现的频率不算太高 。
通常在辅助色的设定上 ，我们会优先考虑 红 、绿 、黄 等特殊颜色 ，但在 B 端设计的工作当中 ，辅助颜色的管理反而更为重要 。
1. 辅助色的要点
这里想问问大家 ，你是否遇到这种情况。
在一个系统当中 ，颜色的使用过于的混乱。比如在审批模块当中 ，绿色代表进行中；在通知模块当中；绿色代表个人消息；在商机阶段当中，绿色代表成单 ，你会发现辅助色的使用就会出现混乱的场景 ，如果你没有合理的梳理 ，就会导致辅助色异常混乱 。
这时候我们就需要根据 ：先描述颜色的含义，再梳理不同的模块 ，最后确定不同的状态下究竟应该用哪些颜色 。
这里 ，我们整理了颜色 ，一共包含 ：蓝色 、红色 、橙色 、绿色 、黄色、灰色...
进一步描述不同的颜色 ，具体会有哪些含义
然后梳理用到辅助色模块有哪些 ，将其进行记录
最后根据颜色含义和模块语义进行匹配 ，选择更为合理的辅助颜色 ，这才是我们需要去做到的 。
2. 辅助色的设定
那涉及到这么多颜色 ，如何设定 ？
对于日常工作中 ，如果系统没有特殊要求 ，我们可以直接按照设计系统当中的辅助色进行使用 ，这就不需要太多思考 ，较为简单 。
那如果自己有一定设置的特殊要求 ，就可以考虑使用 Color Space 插件来快速产出辅助色 ，不过在使用下来 ，你会发现辅助色的提示性不够 ，我们还可以对颜色进行微调 ，让它色度更高 ，也就是更为鲜艳 ，这样才能起到辅助色的作用 。
最后就是将前面提到的辅助色色值与所使用的模块进行整理 ，放在系统当中的表格处 ，在后续的使用时 ，大家都可以根据颜色的要求进行合理的输出和匹配～
作者 ： CE青年Youthce