找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

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

shalor 社区微信达人帆软员工 浪迹天涯(Lv4)
发表于 2018-9-13 11:58:20 | 显示全部楼层 |取消关注该作者的回复
2013年12月,4G网络正式商用,2018年7月,三大运营商确定了5G的商用时间表;移动数据时代已然蓬勃发展了5年
从帆软的视角来看,刚刚结束的数据生产力大赛中,移动端的覆盖率已经超过了所有参赛客户的50%
移动数据化已经成为企业数据决策系统中不可或缺的一部分

如何快速部署移动端,让关键业务者快速触及报表与数据,成为许多用户的一个新的问题

  • PC与手机屏幕比例相差甚远,PC报表在手机上自适应存在天然缺陷
  • PC的交互习惯与移动端完全不同,做出让领导满意的模板有难度
  • 不同屏幕尺寸的手机太多,组件的大小该如何调整

本文将通过一个模板实例,教你如何用“手机模板模式”功能摆脱这些问题,快速设计出一张移动端报表
0整体 流程.png
1、开启手机模板模式

设定画布的大小在帆软的自适应逻辑中,如果满足小尺寸上的布局,那模板在更大屏幕上会采用等比例放大的逻辑,从而满足绝大多数的屏幕自适应需求

因此,在制作模板之前,在“模板”>“移动端属性”中将模板设置为手机端模板
1设置画布大小.png

设计器会帮我们将画布设置为适配4.7寸手机屏幕的画布大小(375*560),基于当前设计模式设计出的模板,能适配绝大多数的手机屏幕

1.1设置画布大小.png

2、拖入模板中所需的组件

构思一下模板中所需的组件类型与个数,将这些组件从上至下依次拖入画布中,并且依据组件的个数调整画布的整体高度,示例模板中总共有5个组件,这里将画布的整体高度调整为1200像素
2拖入组件.png

2.1主数据模块

通过报表块来展现4个比较关键的指标,利用表格的布局来设计出自己需要的样式,这里用4个格子的背景图片来充当指标icon的角色,灵活多变
需要注意的是,当我们开启手机模板后,报表块中会出现一条边界线(如图中红框),尽量不要超过边界线,可以让表格中的内容有更好的自适应效果
3主数据块.png

2.2图表块模块

图表块的数据按常规设置即可,这里为了和其他组件保持样式的一致性,我们不配置图表的标题、背景等内容,将其统一放到组件中设置


2.3banner模块

如果想让模板变得更加美观,我们可以选择在顶部插入一张banner图片
图片的引入有多种方式,可以是图片控件(依赖于图片控件插件),也可以使用万能的报表块。当前模板我们选择在报表块中插入一张图片
4banner.png

2.4整体背景与组件标题

我们选择在决策报表的body以及组件中来统一设置不同组件的标题与背景
背景,分别设置body与不同组件的背景颜色,用不同深度的蓝色以实现模板中组件间隔的效果
标题,为每一个组件设置不同的组件标题
6背景2.png

3、实时预览与调整

在模板制作过程中,我们需要在手机上预览模板实际的展现效果,从而可以发现并调整模板不合理的地方
我们只需在设计器的预览下拉菜单中选择“移动端预览”,就可以用手机扫码随即预览模板的实际样式
注:JAR包版本为7月3号以后,APP版本为9.3以后
5预览.png



至此,移动端模板就能搭建完成了,我们来看一下最终的效果(微信扫码即可)
模板.png




编辑于 2018-9-14 10:52  
此帖共有 278 位番薯登录后查看

已有1人关注本帖

jinqh
回复

使用道具 举报

cherishdqy 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP2
发表于 2018-9-13 12:18:34 | 显示全部楼层 |取消关注该作者的回复
  收起(1)
  • shalor shalor
    2018-09-13 13:37 评论
  • 评论

回复 支持 反对

使用道具 举报

15991602646 实名认证 渐入佳境(Lv2)
发表于 2018-9-13 17:00:56 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

星痕 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP1
发表于 2018-9-13 20:28:03 | 显示全部楼层 |取消关注该作者的回复
密码多少
  收起(3)
  • shalor shalor : 啥密码?
    2018-09-14 09:08 评论
  • 星痕 星痕 : 评论 shalor :不是让我们扫码看吗?用户密码多少
    2018-09-14 09:25 评论
  • shalor shalor : 评论 星痕 :微信扫码即可
    2018-09-14 10:52 评论
  • 评论

回复 支持 反对

使用道具 举报

flyingsnake 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2018-9-14 10:31:25 | 显示全部楼层 |取消关注该作者的回复
不错不错哦。
  • 评论

回复 支持 反对

使用道具 举报

郁金香  初出茅庐(Lv3)
发表于 2018-9-14 14:16:59 | 显示全部楼层 |取消关注该作者的回复
4.7的屏幕现在很少见了吧,大部分是5.5---6.0的。不过我电脑桌面习惯性设置1920x1080分辨率,别个看起来总是感觉很大啊
  收起(1)
  • shalor shalor : 模板在小尺寸上做,到大屏幕只会放大,不会存在任何的适应问题;但是反过来,要缩小,就可能存在问题了
    2018-09-17 09:44 评论
  • 评论

回复 支持 反对

使用道具 举报

xhqw821  初学乍练(Lv1)
发表于 2018-10-24 16:12:59 | 显示全部楼层 |取消关注该作者的回复
看起来不错
  • 评论

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

联系管理员@兔子酱|联系帆软|免责声明|手机版|帆软社区|Copyright © 帆软软件有限公司 ( 苏ICP备14031611号-3 )

GMT+8, 2018-11-20 04:07 , Processed in 0.419375 second(s), 120 queries , Gzip On.

返回顶部 返回列表