颜色,是页面整体风格表现的重要基本元素,也是用户直观感知界面内容及产品特性的媒介,合理科学的色彩搭配,有助于提高界面的可用性及一致性。
色彩模型
基于 HSB 色彩模型进行设计,即以色相 Hue、饱和度 Saturation 以及明度 Lightness 三个维度来定义和调整颜色。
更多关于色彩模型的知识,可浏览 色彩模型
色彩体系
产品的是色彩体系主要分为四大类:品牌色、功能色、中性色、扩展色。
品牌色
品牌色是体现产品特性和传播理念最直观的视觉元素之一,又称为主色,常用于强调视觉重量,使用场景主要为页面的重要控件、重要信息等,如主要按钮的底色。产品默认品牌色源自云宏红,系统支持更换主题色以满足个性化需求。
功能色
具备特定功能的颜色,起到传递功能信息、代表某种状态等作用。使用场景主要为消息通知、反馈提醒、表单校验等场景,以表示信息(Info)、成功(Success)、警示(Warning)、错误(Error)等状态。
中性色
包含黑、白、灰,在界面中被大量使用,如标题、文本、分割线、表格用色等等,通过合理的梯度变化来令内容组织具备更好的的层次性,让信息层级得以更好的区分,提升阅读体验。
其中灰色细分为中性灰及蓝调灰,它们的区别主要为:
色彩适用性 | 视觉观感 | |
---|---|---|
中性灰 | 具备普适性,百搭 | 无色彩倾向,偏灰 |
蓝调灰 | 与冷色系主题色更搭 | 有色彩倾向,偏蓝 |
我们采用蓝调灰,提升文字显示品质,预留中性灰,满足主题色定制化的需求。
扩展色
延展的颜色,主要应用场景为数据可视化。
使用原则
- 6-3-1原则,即60%以上的颜色采用中性色,30%为品牌色,10%为功能色
- 谨慎、有目的性的根据场景使用功能色