B端设计师必修课：品牌色、中性色与辅助色的使用指南

B端设计师必修课：品牌色、中性色与辅助色的使用指南

在B端设计中，颜色的运用不仅关乎视觉美感，更是传递信息、提升用户体验的关键要素。本文将从品牌色、中性色和辅助色三个方面，深入解析B端设计中颜色设定的核心技巧，帮助设计师打造既专业又实用的界面设计。

品牌色：系统颜色的灵魂

品牌色是系统颜色的灵魂，它主要用于强调页面中的品牌价值。例如，绿色让人联想到微信，红色则让人想到可口可乐。

品牌色的设定

在B端设计中，品牌色的使用场景较为特殊。通常，品牌色会被用来强调页面中的关键信息，如主按钮、导航菜单、文字链接和选中状态等。对于品牌色的设定，蓝色、紫色和绿色较为容易处理，而红色、橙色和黄色则需要特别注意，避免与系统中的警告色产生冲突。

以中信银行企业端设计为例，如果其品牌色为红色，可以考虑以下两种解决方案：

1. 辅助色微调：延续中信银行的品牌色，但对辅助色的红色进行微调，使其与品牌色形成明显差异。
2. 重新设定：在品牌色的基础上，为企业端用户单独设定一套以蓝色为主的颜色风格。

品牌色的使用

品牌色的使用场景不同，会衍生出不同的颜色色值，这些衍生出来的颜色被称为色阶。常见的色阶使用场景包括按钮的选中状态和Tab的切换状态等。

在色阶的设定上，有以下几种方法：

1. 黑白透明度叠加法：通过叠加10%透明度的白或黑来推导色阶，但这种方法只修改了颜色的明度，未对色度进行调整。
2. 色彩空间计算法：使用Figma等工具进行色彩空间计算，但这种方法也只存在明度的变化。
3. 自动生成法：使用Arco Design提供的颜色生成平台，输入品牌色后即可生成对应的颜色色值，这种方法既高效又准确。

品牌色的使用面积

在页面中使用品牌色时，应遵守631原则：品牌色占据页面的10%，中性色和白色/弱灰色分别占据30%和60%。这个比例可以根据页面类型进行适当调整。

中性色：提升页面可读性的关键

中性色在B端设计中非常重要，使用不当会影响用户体验。中性色的设定应遵循“黑下来、浅上去”的原则。

中性色的设定

中性色可以分为深色区域和浅色区域：

• 深色区域：用于标题和正文等需要强调识别性的部分，颜色应控制在#242424左右。
• 浅色区域：用于描边和背景等辅助信息区域，颜色应尽量减弱，以减少对页面的干扰。

中性色的原理

“深下来、浅上去”的设定有助于满足WCAG的要求，使色彩对比度达到7.0以上。在语雀的迭代中，设计师通过加深颜色来提高产品的无障碍能力。

辅助色：信息传达的辅助工具

辅助色主要用于向用户传达成功、警告、错误、链接等信息和状态。在B端设计中，辅助色的管理尤为重要。

辅助色的要点

为了避免颜色使用的混乱，需要先描述颜色的含义，再梳理不同的模块，最后确定不同状态下的颜色使用。常见的辅助色包括红、绿、黄等。

辅助色的设定

在日常工作中，如果没有特殊要求，可以直接使用设计系统中的辅助色。如果需要特殊设定，可以使用Color Space插件来快速产出辅助色，并对颜色进行微调，使其更为鲜艳。最后，需要将辅助色色值与所使用的模块进行整理，方便后续使用。