手机已经成为了人们生活中必不可少的一部分，除了用来娱乐生活，打发时间之外，手机也渐渐成为企业管理的重要武器。通过制作好的移动端报表，领导随时随地就能查看企业各类的业务数据，及时发现企业生产中出现的问题并给出相应的解决办法，提高企业决策的效率。然而，在制作移动端模板的过程中，屏幕的限制似乎让数据的呈现成为了难题，大家经常遇到这些困难：
- 模板太丑，不能给人眼前一亮
- 领导总是嫌弃交互体验感差
- 屏幕太小，想展示的数据太多，放不下
别担心，这些问题都是小事，本期老司机带你们上车，教你如何在十分钟做出一张华丽丰富的移动端模板！
先给你们放几张效果图，大饱眼福：
下面切入正题，小编将带着大家一起，体验一下移动端的高阶玩法，十分钟搞定DEMO模板，给自己少一点压力，让领导多一点满意
1.开启手机模版模式，调整画布大小
第一步，打开FineReport设计器，在模板里选择移动端属性，设置为手机端模板，设计器会自动将画布调整为适配4.7寸手机屏幕画布的大小（375*560）
2.搭配丰富组件，交互效果更加
根据需要展示的数据指标整理数据，构思模板的组件类型与个数，组件个数过多时可以采用下面两种方式： - 根据组件大小和个数调整画布整体高度
- tab组件，将不同数据填至不同的tab页
本文实例模版采用了tab组件样式，将丰富的组件填充在不同的tab页，交互体验更佳
2.1主数据报表块
通过报表块来展现两个相对关键的指标，内嵌了两个图表（仪表盘），利用表格布局合理设计出所需要样式，让数据展示更加清晰
注：尽量不超过边界线，让报表块中内容有更好的自适应效果
2.2tab块
通过tab块将月度、年度两个维度的数据内容分别填充到不同的tab页面，实现在一张模板的内部预览不同维度的数据。
选择移动端tab效果：控件设置选中tabpane>样式模板>设置移动端tab样式
tab样式有上菜单式、下菜单式、滑动式，丰富的tab样式等你来解锁
了解最新tab样式，直接戳右边链接：https://help.finereport.com/doc-view-2679.html
2.3参数面板
本文实例模板采用直接在报表主体内直接查询的方式，交互效果更赞！ 注：仅在APP端适用，H5暂不可用
顶部参数插件直通车：https://market.fanruan.com/plugin/824
顶部参数面板使用说明：https://help.finereport.com/doc-view-2656.html
3.细节优化，模板更美观
3.1组件间隔及圆角
一般情况下，移动端的报表内容会有很多组件组成，为了能够让用户阅读起来更加舒适，我们需要对报表内容进行合理的划分和布局边距及组件间隔设置：控件设置>body>移动端>内边距、组件间隔
圆角设置：控件设置>某报表块/图表块>属性>样式>圆角
3.2点缀数据，突出重点
一般我们会选用图表组件将数据可视化，当然，我们还可以利用报表块的强大功能，利用条件属性等将不同数据标注不同的颜色、背景、边框甚至图片等，突出重点数据
本文实例模板采用条件属性+背景突出指标完成率
4.成果展示
本张移动端的模板基本上就制作完成了，我们一起来看下效果
最后，重点来了！！！
小编今天忍痛割爱，将本文中出现的demo模板全部送给大家，希望大家喜欢！
编辑于 2019-6-5 20:20
| 
