返回

更新|B端系统设计规范

#B端UI设计
54%
进度
0/0
知识点
0
笔记
概览
B端设计规范基本认识
B端系统的设计规范是什么
设计规范的主要内容说明
设计规范的创建流程分享
设计规范的创建工具和载体
样式规范的整理说明
色彩规范的定义
字体规范的定义
图标规范的定义
描边规范的定义
圆角规范的定义
投影规范的定义
首页知识库B端UI设计更新|B端系统设计规范

色彩规范的定义

酸梅干超人 编辑于 2025-04-206人正在学
00

色彩规范,即定义项目中使用的色彩类型和色号。色彩规范的定义需要完成以下工作内容:

  • 品牌色定义
  • 功能色定义
  • 中性色定义
  • 色彩变体定义
  • 特殊色彩定义

品牌色定义

品牌色是一个品牌或产品的色彩身份标识,用于输出和强化品牌认识,也是项目中最重要的颜色类型,要应用在项目全权重最高的元素和区域,是奠定项目色彩应用的基础。

品牌色包含两种色彩类型,主色和辅助色。

品牌色的定义包含两种情况,第一种是项目在设计前已经创建过品牌VI和色彩规范,则项目中就可以沿用这些色彩。比如为麦当劳设计某套内部管理系统,那么就可以沿用黄色作为主色(金拱门Uknow?),红色作为辅助色。

第二种情况,则是没有关联品牌VI规范的项目,要重新选择项目的品牌主色和辅助色,这就需要设计师自己根据项目的设计情况做出选择。

对于普通B端项目来说,品牌色只需要定义个主色即可,无需额外增加品牌辅助色。且B端产品相对C端产品的使用场景更单一,主要输出的情绪是专业、稳重、商务、科技,所以主色基本就围绕在蓝、绿、红、紫这寥寥几个色相范围内选择。

最后要强调如无特殊理由,项目中的品牌主色有且只能有一个

功能色定义

功能色是借助色彩特性传达特殊信息的相应色彩,比如错误提示用红色,正确提示用绿色,警示操作用黄色等等。

功能色的定义由项目中应用的字段、控件、组件内容决定,因为这些元素需要用到特定的色彩来有效地传递信息,而不仅仅是为了视觉的美观程度创建功能色。所以,要定义多少功能色也有需求推导而来,而不仅仅是考虑视觉的美观程度。

这也是功能色和品牌辅助色的不同,辅助色更多是配合主色来实现一些特殊的视觉方案和观看体验,突出品牌的调性和特质。

但品牌色也可以作为功能色使用,比如前面麦当劳的配色,辅助色可以作为错误、警告色来使用,不用额外再创建一个相似的红色功能色。

中性色定义

中性色即没有色彩的颜色,是构成项目基础色彩框架和信息对比度的黑、白、灰色。一个项目想要有效的呈现背景、描边、文字信息,就需要应用多种中性色实现强弱的对比。

中性色的定义主要由HSB中的B值(灰度值)决定,B值越小越黑越大越亮。

中性色的定义数量无需过多,合理的中性色数量在6-8个即可。虽然中性色名义上是无色(饱和度S为0),但实际项目应用中,可以适当为中性色填加蓝色的色相,让界面整体偏冷色调,降低用户的用眼疲劳。

比如Arco的中性灰色,就使用了非纯灰的“蓝灰”色。点击查看

色彩变体定义

色彩变体,是指一种色彩类型的同状态变化,用于满足界面交互过程或信息表现上的变体需要。

比如一个按钮,包含了默认 Defult、鼠标悬浮 Hover、鼠标点击 Click、禁用 Disable等状态,我们往往需要使用不同的色彩来表达这些状态,通过色彩的差异让用户感知到状态的变更。

那如果按钮默认使用的是主色,那么它在其它状态中应用的颜色应该属于哪种类型?是品牌色,还是功能色……这么归类肯定都不合适,把色彩变体本身作为一个分类也不合适。

色彩变体是一个色彩类型的不同状态和表现,创建变体只是为这个色彩类型做补充,而不是创建出新的色彩类型出来。

特殊色彩定义

除了前面提到的色彩类型外,往往根据项目需求还会定义一些特殊的色彩类型。

比如图表使用多独立定义一套图表用色,或是装饰图标用得多定义标准渐变色,以及SaaS运营活动多另外创建一个运营用色标准等等。

色彩的定义根据实际设计的需求触发,需要加多少定多少。无需像B端组件库一样提前定义出一整套色卡再进行选色。

所以定义好的颜色,可以在软件的色彩样式表中进行添加,并创建相应的分类和命名,方便我们在后续设计中进行选择。

软件色彩样式定义,可以查看Figma的相关笔记:点击跳转

点赞
收藏
学会
356006
下一篇: 字体规范的定义
字体规范,是定义项目中使用的文字类型和具体属性参数。字体规范的定义要完成对以下字体类型的设置: 标题字体 正文字体 注释字体 数字字体 其它字体 标题字体 标题就是用于标示关键信息的文本,比如页面名、组件名、数据名等等。一个项目的界面中往往需要用到多种规格的标题,来表现不同层级、权重的信息。 标题的...
笔记 (2)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞