|以前的报表都白做了!app上做可视化数据分析,这个方法太强了
移动应用时代 , 办公移动化已经成为了企业经营的一大发展趋势 , 在企业数据管理领域 , 移动端报表也成为了现代企业运营管理的迫切需要 。
通过移动数据分析 , 可以帮助管理者实时了解业务状态 , 及时获取企业营运状况 。
随着移动端的发展 , 这种影响力得以扩大 。 无论是管理者还是一线业务人员 , 都可以同移动端报表随时随地地进行沟通和分析 , 比如FineMobile 。
但是在移动端数据报表开发的过程中 , 开发者经常会遇到以下几个问题:
- 在PC上设计手机报表 , 总觉得差距有点大
- 如何在有限的屏幕内把数据展现地更有层次?
- 厌倦了流式布局?想要让数据拥有更多交互?
- C端的APP越做越好看 , 领导的审美需求被无限放大?
移动驾驶舱开发流程如下:
本文插图
一、开启手机画布
在PC端设计器中设计移动端模板 , 由于屏幕尺寸的较大差异 , 在组件布局、组件大小的设置上可能会存在很多的问题 。
利用手机画布的新功能 , 在设计报表之前时 , 将画布切换为适应手机尺寸 , 让模板内容在设计器上的样式与手机上的最终效果更为接近 , 减少不必要的调整
打开FineReport设计器 , 在模板里选择移动端属性 , 设置为手机端模板 , 设计器会自动将画布调整为适配4.7寸手机屏幕画布的大小(375*560)
本文插图
本文插图
二、整体流式布局
C端主流APP的流布局设计同样适用于B端的数据展现 , 双指在屏幕上滑动的过程中获取自己想关注的数据内容 , 在整体布局的设计中 , 建议采用:先汇总再细分的原则
将不同时间粒度下的汇总数据优先呈现出来 , 让管理者一眼就能看到指标当前的进展与状态 , 做到心中有数以后再向下拆解 。
本文插图
三、丰富组件
1、多维度展示
由于手机屏幕尺寸有限 , 如果一张模板只单纯的使用流式布局 , 想要新增内容就会让模板的高度越来越高 , 管理者在阅读这样的模板时就需要耗费大量的下滑动作 , 我们可以针对整个模板或者在某一个组件上增加一下交互动作 , 让数据更加立体化 。
tab组件
将不同维度数据的内容填充至不同的tab页内部 , 即可在一张模板内部预览不同维度的数据 。 除默认样式外 , 移动端还提供4种tab样式供选择:上菜单式、下菜单式、滑动式、联排式
上菜单式:
本文插图
下菜单式:
本文插图
滑动式:
本文插图
联排式:
本文插图
单选按钮组
当模板样式统一 , 只需要按照不同维度过滤查看相应的数据时 , 可以使用单选按钮组控件来实现 。
本文插图
侧边导航
当流式布局页面比较长时 , 可以有一个快速定位的悬浮窗 , 点击后可以导航到本页面的指定位置 , 提高交互体验
本文插图
图表切换
当用户需要很方便的在模板局部切换查看不同的组件时 , 可以利用图表切换功能 , 可以很好地提高空间利用率和报表的美观度 。
按钮切换:
本文插图
自动轮播:
本文插图
2、联动钻取
因为手机屏幕的限制 , 移动端一般不会直接展示“PC大宽表” , 一般会用决策报表将所有的关键指标汇总展示 , 再通过钻取的方式查看具体某一指标的明细数据 。
展示多层级数据的同时 , 一定要考虑到交互动作 , 保证用户在浏览数据的同时 , 具有极佳的体验感 。
移动端弹窗
弹窗形式-模板:
本文插图
弹窗形式-文本:
本文插图
普通钻取
当我们需要钻取的子报表内容过多时 , 弹窗就不适用了 , 这时候我们需要在主报表里做一些下划线、高亮的效果能够提醒用户 , 这里是可以钻取的 , 就已经达到目的了 。 主子报表的UI风格保持一致 , 实现方式同PC一致 , 这里就不赘述了 。
3、参数应用
无论是决策报表还是普通报表 , 参数在移动端应用都较为频繁 , 如何在移动端更好的应用参数查询?分享以下几个技巧 。
参数面板
本文插图
四、细节优化
如何在展示数据的同时 , 提升移动端模板效果呢?对于开发者来说 , 是一个较为困难的事情 , 这里提供了一些小技巧 , 希望能帮助大家 。
1、横幅
为了提升移动端模板的美观性 , 横幅的应用比较常见 。 一般来说横幅会放置在最上方 , 主要结构分为几种:
- 报表主标题+公司logo , 提升整张报表较高的美观程度
- 用户名称+公司logo , 增强用户体验
- 报表主标题+核心指标 , 突出移动报表的核心指标
本文插图
2、指标卡
移动端因屏幕大小限制 , 需要我们合理利用移动端的每一寸空间 , 同时移动端对于视觉和交互的要求会更高 , 如何合理展示数据呢?一句话总结:尽量避免‘大宽表’的直接展示 , 合理利用指标卡展示汇总数据
本文插图
本文插图
3、数据点缀
一般我们会选用图表组件将数据可视化 , 当然 , 我们还可以利用报表块的强大功能 , 将数据本身与颜色、进度条、增长趋势组合起来 , 让数据更具凸显的效果 。
本文插图
4、配色
选取颜色的时候注意颜色的连贯性 , 整理了移动端模板的常用配色表分享给大家 。
本文插图
【|以前的报表都白做了!app上做可视化数据分析,这个方法太强了】本篇完 , 希望大家所有收获 , 至于移动端报表的工具和图表展示 , 回复“移动端”即可 。
推荐阅读
- 腾讯控股的保险代理平台“微保”被深圳银保监局处罚
- 成龙的功夫是杂技,洪金宝胖的不灵活,周比利评价两人实战能力
- 凉茶|凉茶最大的问题不是添加西药,而是冒充饮料
- 台风|里弗斯谈独行侠:不会忽视有联盟前五球员的球队
- 高考遇洪水,交警铁骑送 景德镇考生的"国宾待遇"
- 未来的大学生活“长啥样”? 来看学长为你写下的万字指南
- 不起眼的朗姐|和老人出去旅游,为什么会觉得心累?网友:只要老妈身体允许以后还要带她去,哈哈哈哈
- 粤游记|旅游就该诗酒趁年华,带你一起到东京,我们玩点不一样的!
- 三分钟游世界|云南新走红一座公园,门票高达100元,但去过的游客都说好
- 识别“95”号段中的“李鬼” 这些小技巧要掌握!
