|
2013年12月，4G网络正式商用，2018年7月，三大运营商确定了5G的商用时间表；移动数据时代已然蓬勃发展了5年 从帆软的视角来看，刚刚结束的数据生产力大赛中，移动端的覆盖率已经超过了所有参赛客户的50%
移动数据化已经成为企业数据决策系统中不可或缺的一部分
如何快速部署移动端，让关键业务者快速触及报表与数据，成为许多用户的一个新的问题
- PC与手机屏幕比例相差甚远，PC报表在手机上自适应存在天然缺陷
- PC的交互习惯与移动端完全不同，做出让领导满意的模板有难度
- 不同屏幕尺寸的手机太多，组件的大小该如何调整
本文将通过一个模板实例，教你如何用“手机模板模式”功能摆脱这些问题，快速设计出一张移动端报表
1、开启手机模板模式
设定画布的大小在帆软的自适应逻辑中，如果满足小尺寸上的布局，那模板在更大屏幕上会采用等比例放大的逻辑，从而满足绝大多数的屏幕自适应需求
因此，在制作模板之前，在“模板”>“移动端属性”中将模板设置为手机端模板
设计器会帮我们将画布设置为适配4.7寸手机屏幕的画布大小（375*560），基于当前设计模式设计出的模板，能适配绝大多数的手机屏幕
2、拖入模板中所需的组件
构思一下模板中所需的组件类型与个数，将这些组件从上至下依次拖入画布中，并且依据组件的个数调整画布的整体高度，示例模板中总共有5个组件，这里将画布的整体高度调整为1200像素
2.1主数据模块
通过报表块来展现4个比较关键的指标，利用表格的布局来设计出自己需要的样式，这里用4个格子的背景图片来充当指标icon的角色，灵活多变
需要注意的是，当我们开启手机模板后，报表块中会出现一条边界线（如图中红框），尽量不要超过边界线，可以让表格中的内容有更好的自适应效果
2.2图表块模块
图表块的数据按常规设置即可，这里为了和其他组件保持样式的一致性，我们不配置图表的标题、背景等内容，将其统一放到组件中设置
2.3banner模块
如果想让模板变得更加美观，我们可以选择在顶部插入一张banner图片
图片的引入有多种方式，可以是图片控件（依赖于图片控件插件），也可以使用万能的报表块。当前模板我们选择在报表块中插入一张图片
2.4整体背景与组件标题
我们选择在决策报表的body以及组件中来统一设置不同组件的标题与背景
背景，分别设置body与不同组件的背景颜色，用不同深度的蓝色以实现模板中组件间隔的效果
标题，为每一个组件设置不同的组件标题
3、实时预览与调整
在模板制作过程中，我们需要在手机上预览模板实际的展现效果，从而可以发现并调整模板不合理的地方
我们只需在设计器的预览下拉菜单中选择“移动端预览”，就可以用手机扫码随即预览模板的实际样式
注：JAR包版本为7月3号以后，APP版本为9.3以后
至此，移动端模板就能搭建完成了，我们来看一下最终的效果（微信扫码即可）
编辑于 2018-9-14 10:52
| 
密码多少
