移动端模板还有坑?一定是没开这个功能

楼主
帆软产品经理
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  
分享扩散:

沙发
发表于 2018-9-13 12:18:34
板凳
发表于 2018-9-13 17:00:56
地板
发表于 2018-9-13 20:28:03
密码多少
5楼
发表于 2018-9-14 10:31:25
不错不错哦。
6楼
发表于 2018-9-14 14:16:59
4.7的屏幕现在很少见了吧,大部分是5.5---6.0的。不过我电脑桌面习惯性设置1920x1080分辨率,别个看起来总是感觉很大啊
7楼
发表于 2018-10-24 16:12:59
看起来不错
8楼
发表于 2018-11-29 23:54:26
来自手机
9楼
发表于 2018-12-26 16:19:37
图表空间插件 我去研究研究,
10楼
发表于 2018-12-26 16:57:00
11楼
发表于 2019-3-5 19:32:57
来自手机
有demo模板吗
12楼
发表于 2019-4-9 14:28:37
13楼
发表于 2019-7-23 21:55:21

已删除已删除

14楼
发表于 2019-9-10 09:45:03
楼主你好,请教一下移动端 能实现点击查询后还停留在当前查询的tab块吗?
15楼
发表于 2019-11-14 13:30:34
16楼
发表于 2023-1-10 17:19:31
为啥扫码后显示网络出错(-1004)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部 返回列表