观远 BI

页面样式(主题)

创建于 2024-08-01 / 最近更新于 2024-08-05 / 294
字体: [默认] [大] [更大]

1. 概述

制作分析看板时,为提升看板的美观度和信息传达效果,用户需要对看板进行设计美化、样式调整等操作。

观远BI提供了“主题换肤”功能,能够帮助用户以低成本、低难度的方式轻松打造出优质的视觉看板。此功能通过一键操作实现仪表板的换肤,满足用户对美观度和 UI 细节的高要求,从全局样式到组件、卡片样式等各个元素都可以灵活调整,提升数据消费满意度。

1.gif

2. 使用指导

在仪表板页面,点击“页面样式”,即可进入页面样式编辑状态,可以在右侧一键应用主题。

用户可选用主题,一键调整仪表板的样式和UI风格。还可在此基础上调节仪表板样式,具体的配置流程将在下文进行详细说明。

2.png

3.png

注意:在主题编辑状态下,如果想要开启精细调节,则需要先保存当前编辑内容,再开启。

2.1. 仪表板主题

观远 BI 的“主题换肤”功能通过预设的页面主题模板,能让生产者按照企业UI风格或看板分析内容切换样式和风格,而除了内置的6套主题模板之外,用户还可前往云市场下载更多主题。

(1)内置主题

观远BI内置了「简约」、「翠绿」、「深蓝」、「哑光黑」、「灰白」、「商务蓝」6个主题,管理员/页面所有者可以在此处切换主题。同时,您还可以一键更换图表色系,图表的色系选择依赖于观远 BI 企业视觉库中的配色方案,管理员可以管理员设置中定义并添加更多的配色方案,以供企业用户选择。观远BI提供了多种配色方案,详情请参阅 《基本配色方法》

4.png

(2)云市场下载主题

在企业级数据分析场景下,页面风格需要随着不同公司/部门主体、不同业务进行更换,甚至有时会按照节假日、活动进行调整,6套主题模版很难完全满足各类场景。因此,除了系统自带的主题,观远在云市场中上传了大批免费主题模版,支持一键下载,下载后在页面设置样式时可以使用。

适用场景:

  • 集团型企业,数据分析师需要按照不同分公司的风格制作看板,需要更多可选主题模版;

  • 针对不同业务场景,适用的风格模版需要更加丰富;

  • 节假日/活动等,需要因时制宜地更换看板风格。

注意:
1. 使用此功能前需要开通云市场功能。
2. 仅管理员可以下载主题资源。

1. 进入云市场,选择“视觉风格”,选择“应用方式”为主题,“应用对象”为仪表板,即可定位到仪表板主题模版。

5.png

2. 定位到感兴趣的主题后,可以点击进入主题详情预览效果图,管理员可以操作下载安装到仪表板,让分析师可以一键换肤。

6.png

3. 管理员下载好的主题,会直接展示在仪表板主题功能中的主题列表,数据分析师在制作看板时,进入主题界面,选择对应主题即可应用成功。

7.png

4. 若不再希望数据分析师使用这个主题,管理员可以在 管理员设置 > 资源管理 > 企业视觉 > 仪表板主题 中,删除云市场下载的主题。

8.png

2.2. 全局样式

全局样式是指在观远BI中对仪表板整体外观和布局进行的统一设置,通过配置全局布局,用户可以调整仪表板的页面布局、卡片间距、背景颜色等属性,使仪表板展示效果更加美观、整齐和符合使用需求。

9.png

以下是全局样式的配置项及其说明:

配置项

配置项说明

布局类型

用户可以在该板块中,设置整个仪表板、卡片和卡片组的页面布局;支持瀑布流和自适应两种布局方式。

  • 瀑布流:传统式的页面布局方式,适合纵向扩展内容较多的页面;

  • 自适应:仪表板内容可自适应浏览窗口大小,适合单页就能够展示完整、内容紧凑的页面。

紧凑布局

  • 开启紧凑布局后,各卡片(组)的位置将自动上移排列,布局紧凑统一;

  • 关闭后,用户可根据需要,自由移动放置卡片(组)。

宽度自适应

开启等比缩放后,用户可选择默认宽度或自定义宽度,系统将按照设置的宽度和屏幕宽度之比,等比缩放页面。

注意:仅在瀑布流类型下可使用等比缩放。

精细调节

默认情况下,用户只能按照系统提供的框架进行卡片大小调整,开启精细调节开关后,单位高度和单位宽度均会变小,拉伸卡片高宽时会更加精确,用户可按照自己的需要更加精确地调整卡片大小,但开关开启后就不能再关闭。

注意:主题编辑状态下,开启精细调节,会自动保存当前编辑内容。

背景色

点击方框,可直接设置背景色。

  • 点击“默认”按钮,可一键切回系统默认颜色;

  • 点击右下角的星号,可查看并应用系统提供的各种配色。

背景图片

打开“显示图片”开关,点击“选择图片”或“更换”按钮,即可上传图片。

  • 支持填写图片链接或本地上传;

  • 支持自适应、原比例、全铺满三种展示方式。

卡片间距

用户可通过设置间距数值大小,调整整个页面的卡片(组)与卡片(组)之间的距离。

卡片工具栏



卡片工具栏的图标默认状态下将显示在仪表板上,可通过开启卡片工具栏的“隐藏”按钮,隐藏图标。

  • 用户可根据需要,将图标设置成全部或部分隐藏,支持预览设置效果,设置后仅对访问者生效。

  • 移动端和桌面端的卡片工具栏的显隐需要分别设置。

2.3. 仪表板组件样式

仪表板组件样式是指在观远BI中,支持对仪表板中的布局组件统一进行调整,目前支持配置“仪表板标题”和“小标题”的文本样式,以及组件背景的背景色、icon图、背景高度、下边距和顶部距离等。

  • 仪表板标题:设置为显示后,会在顶部展示仪表板标题内容;

  • 小标题:可以在新建卡片处添加小标题组件,页面中可以同时添加多个,用以给仪表板内容作分区。小标题支持配置顶部距离,用以调整与上部分内容的相对距离(顶部距离)。

10.png

2.4. 卡片

用户可对卡片样式进行统一配置,保持仪表板中的卡片在视觉上的一致性,支持配置的内容有“卡片样式”、“卡片标题”。

  • 卡片样式:用户可以通过设置卡片背景色和背景图、开启/关闭边框、边框颜色和大小、卡片圆角大小、开启/关闭阴影,调整卡片的样式。

  • 卡片标题:可以统一调整仪表板中所有卡片的标题内容,包括标题区域的高度、顶部和底部边框的配置。

注意:卡片标题的配置不包含指标卡、对比指标卡,可在图表属性-指标卡/对比指标卡中分别进行样式调整)。

11.png

2.5. 图表属性

在「卡片」配置栏中,用户可对大部分的卡片样式进行统一配置。而对于一些特殊的卡片,包括:“指标卡”、“对比指标卡”、“表格”,观远BI支持用户在“图表属性”中对这些卡片进行更加具有针对性的统一调整。

  • 指标卡:可以统一调整仪表板中单指标卡类型卡片的样式,配置项具体包括:指标和标签的样式、指标卡背景、指标卡标题。

12.png

  • 对比指标卡:可以统一调整仪表板中对比指标卡类型卡片的样式,对比指标卡除支持配置对比指标样式外,其余配置项和单指标卡相同。

13.png

  • 表格:可以统一调整仪表板中表格类型卡片的样式,配置项具体包括:表格主题、滚动条、表格各部分颜色及字体样式。

注意:通用的表格样式设置不包含轮播列表,需要在轮播列表的编辑中设置轮播列表样式。

14.png

3. 最佳实践

3.1. 与组件模板搭配使用

观远 BI 的组件模板旨在满足不同行业常见的看板布局、样式需求,内含专业的 UI 设计规范和各行业业务场景属性。这方便用户梳理美化设计思路,只需两步:① 应用市场下载,② 应用并替换数据,用户即可快速完成精美仪表板的快速搭建。

而看板主题的一键换肤功能更是锦上添花,它可以在上述步骤的基础上,进一步对整体色系或细节样式进行精细化的快速调整。这两者的完美结合,让数据的展示更具美感,为用户的工作效率带来更大的提升。

15.gif

3.2. 沉淀为页面模板,企业内部共享

为统一企业内部的仪表板视觉风格,用户可通过使用统一的页面模板,在制作新的仪表板时一键应用,即可确保每次

在制作仪表板时常会遇到以下问题:

  • 企业内部的仪表板风格多样,影响了品牌视觉的统一性;

  • 制作新的仪表板时,难以复用之前做好的仪表板,导致新的仪表板制作需要从零开始,效率较低。

针对以上问题,观远BI提供了“页面模板”功能,管理员只需创建符合企业视觉体系的看板,利用主题换肤能力的加持,并一键转化为“页面模板”。将其沉淀至企业视觉库 — 组件(页面)模板中,就可以实现全公司的企业视觉标准统一管理。

利用组件模板的高复用特性,生产者只需根据业务场景,来选择最合适的页面模板,就可以轻松搭建符合企业视觉标准的精美看板,更进一步满足企业个性化与品牌要求。

16.png


0 人点赞过