颜色,是页面整体风格表现的重要基本元素,也是用户直观感知界面内容及产品特性的媒介,合理科学的色彩搭配,有助于提高界面的可用性及一致性。

色彩模型

基于 HSB 色彩模型进行设计,即以色相 Hue、饱和度 Saturation 以及明度 Lightness 三个维度来定义和调整颜色。
更多关于色彩模型的知识,可浏览 色彩模型

色彩体系

产品的是色彩体系主要分为四大类:品牌色、功能色、中性色、扩展色。

品牌色

品牌色是体现产品特性和传播理念最直观的视觉元素之一,又称为主色,常用于强调视觉重量,使用场景主要为页面的重要控件、重要信息等,如主要按钮的底色。产品默认品牌色源自云宏红,系统支持更换主题色以满足个性化需求。
image.png

功能色

具备特定功能的颜色,起到传递功能信息、代表某种状态等作用。使用场景主要为消息通知、反馈提醒、表单校验等场景,以表示信息(Info)、成功(Success)、警示(Warning)、错误(Error)等状态。
image.png

中性色

包含黑、白、灰,在界面中被大量使用,如标题、文本、分割线、表格用色等等,通过合理的梯度变化来令内容组织具备更好的的层次性,让信息层级得以更好的区分,提升阅读体验。

image.png

其中灰色细分为中性灰及蓝调灰,它们的区别主要为:

色彩适用性 视觉观感
中性灰 具备普适性,百搭 无色彩倾向,偏灰
蓝调灰 与冷色系主题色更搭 有色彩倾向,偏蓝

我们采用蓝调灰,提升文字显示品质,预留中性灰,满足主题色定制化的需求。

扩展色

延展的颜色,主要应用场景为数据可视化。

使用原则

  • 6-3-1原则,即60%以上的颜色采用中性色,30%为品牌色,10%为功能色
  • 谨慎、有目的性的根据场景使用功能色

无障碍设计