观远 BI

移动端布局

创建于 2022-10-27 / 最近更新于 2024-05-21 / 7425
字体: [默认] [大] [更大]

1. 移动端布局概述

移动端布局,是移动端页面中内容(多个卡片)的不同排布方式。为了让移动端页面更加的美观丰富,用户可以在此进行排版和设置,具体包含:页面组件添加及设置、组件库添加及设置、卡片样式设置、页面样式设置等。

2. 布局切换

仪表板中可以由桌面端布局切换为移动端布局(默认为桌面端布局)。用户在桌面端配置相关卡片后,点击仪表板页面上方的布局按钮,即可从桌面端切换为移动端。调整适应为移动端的布局后,即可用于移动端的访问页面。

桌面端布局的操作详见《仪表板设计与管理》

27.jpg

3. 卡片管理

3.1 添加卡片

进入布局页面,若需要添加卡片,选择右侧菜单栏“未显示的卡片”,勾选需要添加的卡片即可将卡片添加到布局页面中。

1.jpg

3.2 移除卡片

若想将卡片从页面中移除,点击该卡片右上角设置按钮中的“从页面中移除”即可。该操作不会删除卡片,仅将卡片放入“未显示卡片”中。

2.jpg

3.3 设置卡片样式

点击卡片右上角设置按钮,选择“样式”,右侧出现样式配置栏。因卡片类型不同,样式配置功能也不同,根据自己所需设置即可。

3.jpg

3.4 移动卡片

方法1:按住卡片正上方进行拖拽,即可拖动卡片到特定的位置。

4.jpg

方法2:首先,点击卡片右上角设置中的“移动位置”。

5.jpg

其次,点击目标卡片后将移动至目标卡片上方。

6.jpg

3.5 编辑卡片

若要重新对卡片进行可视化编辑,点击卡片右上角设置中的“桌面端编辑”即可进入可视化编辑器。(可视化编辑内容详见《可视化编辑》)

7.jpg

此外,也可以直接对外链卡片、图片卡片进行编辑与替换。鼠标移至外链卡片右上角,点击编辑按钮重新编辑即可,编辑完成后移动端、PC端内容保持一致。

移动端布局3.png

鼠标移至图片卡片右上角,点击编辑按钮即可重新上传图片、选择大小模式等,编辑完成后,移动端、PC端内容保持一致。

9.jpg

3.6 复制卡片

若要复制一张一模一样的卡片到另一个页面,点击该卡片右上角设置按钮中的“另存为”,选择复制路径即可。

10.jpg

3.7 格式刷

当有同类型图表卡片时,可以运用格式刷功能,将卡片格式一键粘贴到另外的卡片。

11.jpg

3.8 调整卡片大小

按住卡片右下角进行拉伸,即可调节卡片大小。

用户可启用「精细调节」功能,支持更细粒度的组件宽度调节,该功能启用后不可逆。

功能开启入口位于“页面样式-布局”,具体可参考本文《设置页面样式》

  • 功能启用前:筛选器宽度最小1/6px,卡片宽度最小1/3px,组件宽度不支持调整默认为1。

  • 功能启用后:筛选器/卡片宽度可在2-24px内自由调整,组件宽度不支持调整默认为1。

12.jpg

3.9 设置锚点

在移动端使用时,点开锚点导航,可以看到设置为锚点的卡片名称,点击即可速定位到锚点卡片。将卡片设置为“锚点”,能够将指定卡片添加至页面导航中,在移动端查看时能够快速定位想要查看的内容。设为锚点后,页面右侧会出现现锚点导航标志。

13.jpg

14.jpg

若页面编辑者将卡片锚点取消,或者把卡片重命名,刷新后页面后导航会自动改变。

3.10 扫码输入

为了方便用户在移动端使用筛选器时,在移动端集成到钉钉后,支持通过扫码输入信息,来运用筛选器。点击右上角设置中的“开启扫码输入”即可。

4. 基础组件

4.1 基础组件类型

观远数据在系统内预置了9种基础组件类型,包括:

  • 筛选器组:存放筛选器的容器,支持存放多个筛选器卡片;

  • 标签页:存放标签页的容器,支持存放多个标签页,每个标签页可以存放多个卡片;

  • 卡片组:存放卡片的容器,支持存放多个卡片;

  • 单指标组:存放指标卡的容器,支持存放多个指标卡;

  • 对比指标组:存放对比指标卡的容器,支持存放多个对比指标卡;

  • 平铺指标组:存放指标卡的模块,支持存放多个指标卡;与3.1中单指标组有些类似,但外形更加美观,自带icon,并且可以拖动以设置大小。

  • 对比单指标组:存放对比指标卡的模块,支持存放多个对比指标卡;与3.1中对比指标组有些类似,但外形更加美观,自带icon,并且可以拖动以设置大小。

  • 主次指标组:存放指标卡的模块,支持存放多个指标卡,且可以将指标卡分为主次指标卡组分别存放。

  • 页头组件:放置在页头的容器,一般用于存放具有汇总性数据或重要性数据的卡片,支持存放多个卡片及指标卡。

4.2 添加基础组件

首先点击右侧菜单栏“基础组件”,其次点击所选组件右上角的“+”即可添加到布局页面中。

15.jpg

以标签页为例,点击页面布局中的“添加”按钮,跳转到编辑框。

16.jpg

勾选所需卡片,点击“确定”。

17.jpg

可以看到所选卡片已在标签页组中呈现。

18.jpg

指标组以平铺指标组为例,勾选所需指标卡,点击“确定”。

19.jpg

可以看到所选指标卡已在指标卡组中呈现,点击布局中的卡片,右侧会显示样式配置栏,可进行相关配置:

  • 一行显示指标数:每行能够显示的指标卡数量。因移动端页面大小受限,所以只能设置2或3;

  • 对比指标显示:通过选择数字,设置对比指标卡的卡片数;

  • 组内指标卡:点击“编辑”可以对现有内容进行修改;拖动icon前面的“三横”按钮可以进行组内位置移动;点击icon下拉框可以切换icon样式;点击“垃圾桶”按钮,可以删除该指标卡;

  • 主/对比指标卡:可以个性化设置指标卡内的字体样式。

(注意:每一种指标卡可以设置的相关配置会有差异,根据页面提示操作即可)。

20.jpg

5. 组件模版

在仪表板搭建过程中,美化仪表板页面需要大量经验技巧和素材,为此观远数据在应用市场上线了多套“组件模版”,实现组件化使用,提高页面颜值的同时提升仪表板搭建效率。此外,用户若有自己的优秀素材和模板,管理员可以将其设置为自建模版,在仪表板移动端布局编辑中供所有人使用。

以下内容为移动端组件模版的概述说明,更详细的操作介绍,可在《组件模版》具体查看。

5.1 创建模版

自建模版:移动端布局-卡片设置按钮-创建模版-为模版命名;将素材卡片添加至“自建模版”后,具有仪表板编辑权限的用户皆可使用。

1.jpg

下载应用市场模版:右上角九宫格-应用市场-下载并安装心仪模版;安装好后,具有仪表板编辑权限的用户皆可使用。

5.png

6.png

5.2 管理模版

管理模版:右上角九宫格-管理员设置-资源管理-企业视觉;

可对组件模版进行重命名、预览、删除,也可以进行分组、调整组内顺序等操作。

15.png

5.3 应用模版

具有仪表板编辑权限的用户皆可使用管理员添加的组件模版,使用时可替换卡片、替换数据集以及进行重命名、查看字段示例等操作。编辑完成后,桌面端的卡片池会相应同步,同时支持添加至桌面端仪表板页面。

17.png

6. 页面管理

6.1 选择适配尺寸

web端支持预览不同分辨率的移动端设备效果,提供常见移动端设备型号及对应分辨率的快捷选项;除此以外,也支持自定义移动端预览的分辨率。

提供的快捷移动端设备型号及分辨率选项如下:

image.png

具体操作如下:

第一步,用户进入系统页面,在右上方选择“移动端布局”。

undefined

第二步,选择适配对应终端的型号即可。

image.png

在移动端配置筛选器时,将按照屏幕的宽度来适配选项的个数。

具体操作如下:

第一步,进入 BI 系统界面,在上侧导航栏中选择“仪表板”后,在右上方选择“移动端布局”。

undefined

第二步,点击右侧“筛选器组”右上方的添加按钮,会出现筛选条件的自适应提示信息-“筛选条件显示将自适应屏幕,其余收在更多里”。

undefined

IPad、iPone 13/13 Pro、HUAWEI Mate Pad 三款移动端设备自适应效果展示如下:

undefined

undefined

undefined

6.2 设置页面大小

用户可以根据自己的习惯,设置布局页面大小。此设置不影响移动端上界面大小。

22.jpg

6.3 设置页面样式

点击页面正上方“页面样式”,可以对页面布局、页面中卡片、页面背景的样式进行设置:

功能调整位置可调节参数
页面样式顶部页面样式同步


布局
宽度自适应
卡片间距调节
启用精细调节,该功能不可逆
卡片圆角调节
是否显示阴影
是否显示边框
页面背景背景色配置
是否显示图片
卡片工具栏是否显示卡片工具栏

设置宽度自适应

解决不同型号手机阅览看板效果不一致的问题。

适用场景:移动端看数时,由于用户手机型号不同,卡片需要根据不同宽度进行自适应,保证用户看到的看板与管理看板的人是一致的效果。

核心步骤

  1. 移动端布局中,点击「页面样式」,可以开启宽度自适应;

  2. 开启宽度自适应后,会按设置的宽度下画布和目标屏幕下画布的宽度之比,将画布进行宽度自适应(不同手机型号预览时看到的长宽比一致)。

注意:

开启宽度自适应后,不支持调整表格列宽和布局组件的分割线;

使用组件素材时,建议将宽度自适应的基准宽度设置为375,否则素材效果可能出现不同程度的失真。

image.png

6.4 重置布局

重置布局是将已设置的布局全部清除,并将页面中原有的卡片全部放置回页面中,卡片池中的卡片则依然自动存在于“未显示的卡片”中。(卡片池相关内容详见《仪表板使用与管理》)

24.jpg

6.5 清空画布

点击页面上方“清空画布”,页面中的卡片全部归于“未显示的卡片”中。

25.jpg 

6.6 快捷查询

为便于移动端筛选数据,用户可以将需要反复使用的查询条件保存至“快捷查询”,实现快速查看。同时,移动端和桌面端的快捷查询保持数据同步。

  • 开启快捷查询

在仪表板的移动端布局中,开启上方的“快捷查询”按钮。

30.jpg

之后,在移动端的侧边栏处,就可以看到刚刚开启的“快捷查询”。

31.png

  • 新增快捷查询

设置筛选值,点击“快捷查询”按钮,在弹出的菜单栏中,选择“新增查询”。

32.png

配置信息,完成后点击“保存”,即可将当前页面的筛选值新建为快捷查询。

34.png  33.png

  • 修改快捷查询

选择一个快捷查询,点击页面上方的筛选器,修改筛选器值,点击确定,页面即可按该筛选条件刷新。

35.png 36.png

再点击“快捷查询”,并选择“保存查询”,即可将刚刚修改的筛选值设置为当前快捷查询中的快捷筛选项。

37.png 38.png

若想修改快捷查询的名称,是否为默认和公开以及删除快捷查询,可点击对应快捷查询右侧的“...”按钮。

39.png 40.png


12 人点赞过