主题配色
1. 概述
在优化仪表板组件样式时,用户常常需要配置颜色属性,比如设置组件背景色、调整字体颜色等等。然而,如何巧妙搭配各种颜色,使看板呈现出和谐美观的视觉效果,往往让用户感到困扰。
本文将详细地介绍「主题配色」功能,助力用户轻松优化看板整体色彩,同时大幅降低操作成本,让看板设计变得更加简单高效。
2. 什么是主题配色
产品中内置多套主题样式,每套主题样式拥有一套与之相匹配且和谐的颜色方案,即「主题配色」。
以「冷静蓝灰」主题为例,其主题配色应用于整个看板,使看板在视觉上保持一致的风格。
3. 切换「主题样式」
1)图表、「其他」组件的样式设置中使用了主题配色,切换主题样式后,主题配色会相应变化,快速适配看板的整体风格。
例如,将某一主题配色中的颜色设为标题控件的背景色,切换主题样式后,该背景颜色会自动变为新主题对应位置的颜色,确保看板风格的连贯性。
2)若使用标准色作为背景颜色,在切换主题样式后,颜色不会动态改变。
因此,为保证看板整体色彩风格的一致性,建议在修改「其他」组件配色时,优先从主题配色中选取颜色。
3)特别说明:若对画布页面背景、「控件」组件样式设置了主题配色,不支持 1)中的规则,切换主题样式后,将变为主题样式中设置的默认色。
4. 主题配色使用建议
1)主题配色的第一列通常为「背景颜色」,适合用于看板整体背景、图片组件背景等。
2)主题配色的第二列一般作为「文字颜色」,常用于标题、时间控件等。比如,第一行可设为一级标题颜色,第二行设为二级标题颜色,以区分不同层级的文字信息,增强信息的可读性。
3)主题配色中其余列的组合色,用户可根据实际需求灵活设置。这些组合色可用于按钮边框等等,为看板增添丰富的视觉层次。
5. 模板示例
下面将以一个模板演示主题配色的使用:
1)第一列作为背景色使用:
- 第一列第一个为仪表板整体背景颜色;
- 第一列第二个为各区域的图片背景颜色;
这两个背景色搭配起来较为和谐,若有第三层分区,同样可从第一列选取其他颜色,确保背景颜色的协调性。
2)第二列作为文字颜色使用:
- 第二列第一个为一级标题颜色,突出区域主题;
- 第二列第二个为二级标题颜色,辅助区分内容层级;
若存在三级标题,可从该列其他颜色中选择合适的颜色,使各级标题在视觉上层次分明。
3)当模板使用主题配色进行样式设置后,切换主题样式时,看板的颜色会随之改变,且整体依然保持和谐美观。用户无需重新调整颜色搭配,就能轻松切换看板风格。