页面样式(主题)
1. 概述
制作分析看板时,为提升看板的美观度和信息传达效果,用户需要对看板进行设计美化、样式调整等操作。
观远BI提供了“主题换肤”功能,能够帮助用户以低成本、低难度的方式轻松打造出优质的视觉看板。此功能通过一键操作实现仪表板的换肤,满足用户对美观度和 UI 细节的高要求,从全局样式到组件、卡片样式等各个元素都可以灵活调整,提升数据消费满意度。
2. 使用指导
在仪表板页面,点击“页面样式”,即可进入页面样式编辑状态,可以在右侧一键应用主题。
用户可选用主题,一键调整仪表板的样式和UI风格。还可在此基础上调节仪表板样式,具体的配置流程将在下文进行详细说明。
注意:在主题编辑状态下,如果想要开启精细调节,则需要先保存当前编辑内容,再开启。
2.1. 仪表板主题
观远 BI 的“主题换肤”功能通过预设的页面主题模板,能让生产者按照企业UI风格或看板分析内容切换样式和风格,而除了内置的6套主题模板之外,用户还可前往云市场下载更多主题。
(1)内置主题
观远BI内置了「简约」、「翠绿」、「深蓝」、「哑光黑」、「灰白」、「商务蓝」6个主题,管理员/页面所有者可以在此处切换主题。同时,您还可以一键更换图表色系,图表的色系选择依赖于观远 BI 企业视觉库中的配色方案,管理员可以管理员设置中定义并添加更多的配色方案,以供企业用户选择。观远BI提供了多种配色方案,详情请参阅 《基本配色方法》。
(2)云市场下载主题
在企业级数据分析场景下,页面风格需要随着不同公司/部门主体、不同业务进行更换,甚至有时会按照节假日、活动进行调整,6套主题模版很难完全满足各类场景。因此,除了系统自带的主题,观远在云市场中上传了大批免费主题模版,支持一键下载,下载后在页面设置样式时可以使用。
适用场景:
集团型企业,数据分析师需要按照不同分公司的风格制作看板,需要更多可选主题模版;
针对不同业务场景,适用的风格模版需要更加丰富;
节假日/活动等,需要因时制宜地更换看板风格。
注意:
1. 使用此功能前需要开通云市场功能。
2. 仅管理员可以下载主题资源。
1. 进入云市场,选择“视觉风格”,选择“应用方式”为主题,“应用对象”为仪表板,即可定位到仪表板主题模版。
2. 定位到感兴趣的主题后,可以点击进入主题详情预览效果图,管理员可以操作下载安装到仪表板,让分析师可以一键换肤。
3. 管理员下载好的主题,会直接展示在仪表板主题功能中的主题列表,数据分析师在制作看板时,进入主题界面,选择对应主题即可应用成功。
4. 若不再希望数据分析师使用这个主题,管理员可以在 管理员设置 > 资源管理 > 企业视觉 > 仪表板主题 中,删除云市场下载的主题。
2.2. 全局样式
全局样式是指在观远BI中对仪表板整体外观和布局进行的统一设置,通过配置全局布局,用户可以调整仪表板的页面布局、卡片间距、背景颜色等属性,使仪表板展示效果更加美观、整齐和符合使用需求。
以下是全局样式的配置项及其说明:
配置项 | 配置项说明 |
布局类型 | 用户可以在该板块中,设置整个仪表板、卡片和卡片组的页面布局;支持瀑布流和自适应两种布局方式。
|
紧凑布局 |
|
宽度自适应 | 开启等比缩放后,用户可选择默认宽度或自定义宽度,系统将按照设置的宽度和屏幕宽度之比,等比缩放页面。 注意:仅在瀑布流类型下可使用等比缩放。 |
精细调节 | 默认情况下,用户只能按照系统提供的框架进行卡片大小调整,开启精细调节开关后,单位高度和单位宽度均会变小,拉伸卡片高宽时会更加精确,用户可按照自己的需要更加精确地调整卡片大小,但开关开启后就不能再关闭。 注意:主题编辑状态下,开启精细调节,会自动保存当前编辑内容。 |
背景色 | 点击方框,可直接设置背景色。
|
背景图片 | 打开“显示图片”开关,点击“选择图片”或“更换”按钮,即可上传图片。
|
卡片间距 | 用户可通过设置间距数值大小,调整整个页面的卡片(组)与卡片(组)之间的距离。 |
卡片工具栏 | 卡片工具栏的图标默认状态下将显示在仪表板上,可通过开启卡片工具栏的“隐藏”按钮,隐藏图标。
|
2.3. 仪表板组件样式
仪表板组件样式是指在观远BI中,支持对仪表板中的布局组件统一进行调整,目前支持配置“仪表板标题”和“小标题”的文本样式,以及组件背景的背景色、icon图、背景高度、下边距和顶部距离等。
仪表板标题:设置为显示后,会在顶部展示仪表板标题内容;
小标题:可以在新建卡片处添加小标题组件,页面中可以同时添加多个,用以给仪表板内容作分区。小标题支持配置顶部距离,用以调整与上部分内容的相对距离(顶部距离)。
2.4. 卡片
用户可对卡片样式进行统一配置,保持仪表板中的卡片在视觉上的一致性,支持配置的内容有“卡片样式”、“卡片标题”。
卡片样式:用户可以通过设置卡片背景色和背景图、开启/关闭边框、边框颜色和大小、卡片圆角大小、开启/关闭阴影,调整卡片的样式。
卡片标题:可以统一调整仪表板中所有卡片的标题内容,包括标题区域的高度、顶部和底部边框的配置。
注意:卡片标题的配置不包含指标卡、对比指标卡,可在图表属性-指标卡/对比指标卡中分别进行样式调整)。
2.5. 图表属性
在「卡片」配置栏中,用户可对大部分的卡片样式进行统一配置。而对于一些特殊的卡片,包括:“指标卡”、“对比指标卡”、“表格”,观远BI支持用户在“图表属性”中对这些卡片进行更加具有针对性的统一调整。
指标卡:可以统一调整仪表板中单指标卡类型卡片的样式,配置项具体包括:指标和标签的样式、指标卡背景、指标卡标题。
对比指标卡:可以统一调整仪表板中对比指标卡类型卡片的样式,对比指标卡除支持配置对比指标样式外,其余配置项和单指标卡相同。
表格:可以统一调整仪表板中表格类型卡片的样式,配置项具体包括:表格主题、滚动条、表格各部分颜色及字体样式。
注意:通用的表格样式设置不包含轮播列表,需要在轮播列表的编辑中设置轮播列表样式。
3. 最佳实践
3.1. 与组件模板搭配使用
观远 BI 的组件模板旨在满足不同行业常见的看板布局、样式需求,内含专业的 UI 设计规范和各行业业务场景属性。这方便用户梳理美化设计思路,只需两步:① 应用市场下载,② 应用并替换数据,用户即可快速完成精美仪表板的快速搭建。
而看板主题的一键换肤功能更是锦上添花,它可以在上述步骤的基础上,进一步对整体色系或细节样式进行精细化的快速调整。这两者的完美结合,让数据的展示更具美感,为用户的工作效率带来更大的提升。
3.2. 沉淀为页面模板,企业内部共享
为统一企业内部的仪表板视觉风格,用户可通过使用统一的页面模板,在制作新的仪表板时一键应用,即可确保每次
在制作仪表板时常会遇到以下问题:
企业内部的仪表板风格多样,影响了品牌视觉的统一性;
制作新的仪表板时,难以复用之前做好的仪表板,导致新的仪表板制作需要从零开始,效率较低。
针对以上问题,观远BI提供了“页面模板”功能,管理员只需创建符合企业视觉体系的看板,利用主题换肤能力的加持,并一键转化为“页面模板”。将其沉淀至企业视觉库 — 组件(页面)模板中,就可以实现全公司的企业视觉标准统一管理。
利用组件模板的高复用特性,生产者只需根据业务场景,来选择最合适的页面模板,就可以轻松搭建符合企业视觉标准的精美看板,更进一步满足企业个性化与品牌要求。