视觉风格
系统级色彩体系
基础色斑
基础色板共计 120 个颜色,包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。
中性色板
中性色包含了黑、白、灰。在中后台的网页设计中被大量使用到,合理地选择中性色能够令页面信息具备良好的主次关系,助力阅读体验。中性色板一共包含了从白到黑的 10 个颜色。
产品级色彩体系
品牌色
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时,需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色,我们建议选择色板从浅至深的第六个颜色作为主色。应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景。
功能色
功能色代表了明确的信息以及状态,比如成功、出错、失败、提醒、链接等。
功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下,功能色尽量保持一致,不要有过多的自定义干扰用户的认知体验。
中性色
中性色主要被大量的应用在界面的文字部分,此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异,同时结合 WCAG 2.0 标准。
企业级产品设计中的色彩应用
在中后台产品的设计中,我们对于色彩的态度是克制的。色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率,影响信息的清晰传达的这些原则之上,理性的选择颜色是关键。当然在配图插画以及展示性页面中可以适当打破这一思路。