web设计规范03-B端色彩体系

设计便利签

西安/设计爱好者/3年前/1062浏览

版权

web设计规范03-B端色彩体系

设计便利签

保姆级教程，B端色彩规范应用看这一篇就够了

作为专业的B端设计师,必须有自己完成设计规范和组件库的能力,本章节我们来聊聊B端web设计规范中色彩体系的搭建。

不同于C端产品的运营、营销场景,要求设计的多样性,紧跟认设计流行趋势。B端是一种交互管理工具,作为中后台管理系统,用来帮助企业高效、科稳定的管理、运营、协作,需要相对稳定的色彩体系,这样才能保证产品设计的高效可控,为产品传达信息做好服务,从而实现降本增效。

一、色彩的分类

从各大厂的色彩规范中,可以总结将色彩划分为4种类型:主色、功能色、中性色、扩展色。

二、色彩体系的搭建

确定基础颜色后,为满足各种场景的颜色需求,需要通过添加灰度或者降低透明度, 衍生形成色彩体系。因此我们需要先了解一些色彩的基本理论。

#01色彩三要素与透明度的概念

#02色板的搭建方法

为了满足界面对色彩的需求,需要对颜色进行色板延伸,通过调整颜色的不透明度或HSB的参数值来建立不同梯度的调色板。常用的有3种方去:

1)透明度调整法:

可以依次降低不透明度(80、60、40、20、10)得到浅色色衍生色,或者依次叠加一层黑色透明度(20、40、60、80)得到深色衍生色,借助吸色色工具就可以得到对应的色值。

2)HSB参数调整法:

在保证色相参数不变的情况下,依次调整颜色的饱和度和明)度。浅色衍生色一般是依次降低饱和度S(-15),提高明度B(+5)。而深色衍生色则需需要降低明度B(-15),提高饱和度(+5)。

3)使用色板生成工具自动生成

Ant Design色板生成工具:在基础色板中选择主色,建议选择色板从浅至深的第六个颜色作为主色:

Ant Design色板工具地址：https://ant.design/docs/spec/colors-cn

三、色彩体系的应用

#01确认主色

主色是产品最核心的颜色,使用频率最高,常用于突出信息(文字高亮、重要信息高亮)、引导操作(主按钮)、功能状态表达等。主色通常首选品牌色,在色彩选取时, 需要先明确品牌色在界面中的使用场景及范围。品牌创色是体现产品特性和传播理念最直观的视觉元素之一,可以更好地传递品牌价值,构建统一的界面风格。

当然并不是所有的品牌色都可以作为主色使用。在后台管理系统中,工具类产品的属性比较强,更加强调产品的科技感、稳定性,需要帮助用户沉浸式地完完成工作任务,因此以蓝色为代表的冷色系应用更多。

在定义主色时,建议饱和度S和明度B不低于70。参考Ant Deesign主色定义规范。

Ant Design色板生成工具:在基础色板中选择主色,建议选选择色板从浅至深的第六个颜色作为主色,以下为错误示例演示:

#02功能色

功能色用于特定功能、状态反馈、应用图标、数据表盘等场景,最典型的就是用到反馈的成功、失败、提示/警告、错误、链接等状态,可以向用户反馈操作结果、系统状态等信息。

功能色系需要符合用户的认知习惯,例如绿色代表正常或成功、红色为错误、橙色为警告、蓝色作为链接或运行。

功能色-色彩使用规范:

默认白色背景下规定6号颜色为标准色,而实际应用中当背景比较色比较复杂,导致与色板中的颜色对比不明显,影响到信息识别时,需要根据具体情况再次调节。

色彩规范不能满足所有情况下的设计,只是为了让设计更有章法和依据。

#03中性色

中性色主要是黑白灰三种颜色,由于没有冷暖,也没有色色相,又称为无彩色系。常用于文字、背景、图标、边框和分割线等元素。在使用中性色时注意色彩明度对比关系,突出页面层次感,有利于形成内容层次和区域划分,让界面更加有序,内容结构更加清晰。

中性色-使用规范01:透明度调整法

中性色可以在纯黑(#000)纯白(#fff)基础上通过不透明度来设置色阶,构成中性色色系。特别说明:因为透明度有透光性,透明色之间会相互叠加,也会和背景色有叠加,因此在白色背景下使用时若互相受到干扰(比如图图标设计时,图形之间叠加会造成图标颜色视觉效果差异),因此在使用时可使用换算颜色HSB找到对应的代码值 (HEX) #_ _ _