网易有数BI移动端和PC端复用最佳实践

为了提高开发效率,我们都想开发一套报告模板,既能适配移动端也可以适配pc端。首先讲到适配,分两种:

方法1:一套相同布局的模板,在移动端和pc端都可以完成展示。

方法2:在pc端和移动端可以拥有各自的布局模式。对于网易有数BI两套模式都支持。但是支持不一定等于完美展示。这里聊聊最佳实践。

方法1:一套相同布局的模板,在移动端和pc端都可以完美展示。

网易有数BI报告遵循Html5方式,我们可以根据报告尺寸等比缩放,且在不同的终端,交互方式也会自动跳转。

我的建议是报告布局采用通用手机尺寸的长宽比放大到pc端宽的倍数。

举个例子:目前移动端通用型号380:680。

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图1

你会发现在当前画布做报告很小很窄。

那一般的pc端的宽度做报告在1200左右为宜。所以我们可以对移动端都乘以3倍。即画布长度为:380*3:680*3=1140:2040

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图2

用当前画布做报告,体验会比较好。无论拉组件做图表,或者其他操作,开发体验都会比较好。开发完成后,我们看一下pc端的效果。在pc端有两种模式1种自适应窗口模式。

PC端自适应窗口

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图3

PC端自适应宽度

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图4

我个人比较喜欢适应宽度模式。因为自适应宽度,数据看不完可以下拉。或者利用ctrl+鼠标滑轮进行在浏览器上的缩放。

移动端的效果

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图5

移动端方式就非常ok。

方法2:在pc端和移动端可以拥有各自的布局模式。

这种方式核心原理就是用最小代价去重做。有数BI报告在发布移动端的时候,有自动布局和手工布局。手工布局就是把pc端所有的组件重新组合。如果报告的布局非常简单,当前方法还是非常不错的。

例如PC的样式:

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图6

可以利用发布移动端功能的手工布局。

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图7

自己再做自由布局,如图:

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图8

两种方式的优缺点

方案 操作方式 优点 缺点
1套模板同时满足pc和移动端 建议布局大小:1140:2040 (推荐) 满足通用手机端的尺寸。电脑端通过下拉来解决问题。 对于复杂布局,不需要再做调整。 如果pc端长宽比和移动端的长宽比相差特别大,展现不佳
移动端和pc端 发布到移动端,选择手工布局 每个端都是专门定制展现比较美观。 复杂的组合图形,有时候打散在组装非常麻烦,且效果不一定满足。

布局小技巧:

技巧1:

要学会用自定义画布功能。同时位移步长10像素,有助于对组件的微调。

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图9

技巧2:

利用ctrl选中多个组件,对多个组件进行组合。这样组件就为一体。方便后期的复制和布局。

尤其是前面的方法2,利用组合功能,提高手工布局的灵活性。

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图10

技巧3:

利用报告分享功能预览报告,然后利用浏览器的开发者模式,可以对开发完成的报告,以不用尺寸的方式查看,以此模拟移动端。(注意:个别交互功能浏览器可能会和实际移动端有差异。)

小技巧:网易有数BI移动端和PC端复用最佳实践 - 图11

技巧4:

手机端有时候别忘了可以有横屏功能(自动旋转),有些pc端的报告。利用手机横屏功能效果也不错。