移动应用时代,办公移动化已经成为了企业经营的一大发展趋势,在企业数据管理领域,移动端报表也成为了现代企业运营管理的迫切需要。

通过移动数据分析,可以帮助管理者实时了解业务状态,及时获取企业营运状况。

随着移动端的发展,这种影响力得以扩大。无论是管理者还是一线业务人员,都可以同移动端报表随时随地地进行沟通和分析,比如FineMobile。

但是在移动端数据报表开发的过程中,开发者经常会遇到以下几个问题:

  • 在PC上设计手机报表,总觉得差距有点大
  • 如何在有限的屏幕内把数据展现地更有层次?
  • 厌倦了流式布局?想要让数据拥有更多交互?
  • C端的APP越做越好看,领导的审美需求被无限放大?

为了帮助大家解决移动端报表开发难题,我特地呈上超全的移动端驾驶舱教程。

移动驾驶舱开发流程如下:

android做数据可视化 安卓 数据可视化_数据分析

 

一、开启手机画布

在PC端设计器中设计移动端模板,由于屏幕尺寸的较大差异,在组件布局、组件大小的设置上可能会存在很多的问题。

利用手机画布的新功能,在设计报表之前时,将画布切换为适应手机尺寸,让模板内容在设计器上的样式与手机上的最终效果更为接近,减少不必要的调整

打开FineReport设计器,在模板里选择移动端属性,设置为手机端模板,设计器会自动将画布调整为适配4.7寸手机屏幕画布的大小(375*560)

android做数据可视化 安卓 数据可视化_数据分析_02

 

android做数据可视化 安卓 数据可视化_数据分析_03

 

二、整体流式布局

C端主流APP的流布局设计同样适用于B端的数据展现,双指在屏幕上滑动的过程中获取自己想关注的数据内容,在整体布局的设计中,建议采用:先汇总再细分的原则

将不同时间粒度下的汇总数据优先呈现出来,让管理者一眼就能看到指标当前的进展与状态,做到心中有数以后再向下拆解。

android做数据可视化 安卓 数据可视化_大数据_04

 

三、丰富组件

1、多维度展示

由于手机屏幕尺寸有限,如果一张模板只单纯的使用流式布局,想要新增内容就会让模板的高度越来越高,管理者在阅读这样的模板时就需要耗费大量的下滑动作,我们可以针对整个模板或者在某一个组件上增加一下交互动作,让数据更加立体化。

tab组件

将不同维度数据的内容填充至不同的tab页内部,即可在一张模板内部预览不同维度的数据。除默认样式外,移动端还提供4种tab样式供选择:上菜单式、下菜单式、滑动式、联排式

上菜单式:

android做数据可视化 安卓 数据可视化_大数据_05

 

下菜单式:

android做数据可视化 安卓 数据可视化_数据可视化_06

 

滑动式:

android做数据可视化 安卓 数据可视化_大数据_07

 

联排式:

android做数据可视化 安卓 数据可视化_数据可视化_08

 

单选按钮组

当模板样式统一,只需要按照不同维度过滤查看相应的数据时,可以使用单选按钮组控件来实现。

android做数据可视化 安卓 数据可视化_移动端_09

 

侧边导航

当流式布局页面比较长时,可以有一个快速定位的悬浮窗,点击后可以导航到本页面的指定位置,提高交互体验

android做数据可视化 安卓 数据可视化_移动端_10

 

图表切换

当用户需要很方便的在模板局部切换查看不同的组件时,可以利用图表切换功能,可以很好地提高空间利用率和报表的美观度。

按钮切换:

android做数据可视化 安卓 数据可视化_android做数据可视化_11

 

自动轮播:

android做数据可视化 安卓 数据可视化_数据分析_12

 

2、联动钻取

因为手机屏幕的限制,移动端一般不会直接展示“PC大宽表”,一般会用决策报表将所有的关键指标汇总展示,再通过钻取的方式查看具体某一指标的明细数据。

展示多层级数据的同时,一定要考虑到交互动作,保证用户在浏览数据的同时,具有极佳的体验感。

移动端弹窗

弹窗形式-模板:

android做数据可视化 安卓 数据可视化_数据分析_13

 

弹窗形式-文本:

android做数据可视化 安卓 数据可视化_大数据_14

 

普通钻取

当我们需要钻取的子报表内容过多时,弹窗就不适用了,这时候我们需要在主报表里做一些下划线、高亮的效果能够提醒用户,这里是可以钻取的,就已经达到目的了。主子报表的UI风格保持一致,实现方式同PC一致,这里就不赘述了。

3、参数应用

无论是决策报表还是普通报表,参数在移动端应用都较为频繁,如何在移动端更好的应用参数查询?分享以下几个技巧。

参数面板

android做数据可视化 安卓 数据可视化_数据可视化_15

 

四、细节优化

如何在展示数据的同时,提升移动端模板效果呢?对于开发者来说,是一个较为困难的事情,这里提供了一些小技巧,希望能帮助大家。

1、横幅

为了提升移动端模板的美观性,横幅的应用比较常见。一般来说横幅会放置在最上方,主要结构分为几种:

  • 报表主标题+公司logo,提升整张报表较高的美观程度
  • 用户名称+公司logo,增强用户体验
  • 报表主标题+核心指标,突出移动报表的核心指标

android做数据可视化 安卓 数据可视化_数据分析_16

 

2、指标卡

移动端因屏幕大小限制,需要我们合理利用移动端的每一寸空间,同时移动端对于视觉和交互的要求会更高,如何合理展示数据呢?一句话总结:尽量避免‘大宽表’的直接展示,合理利用指标卡展示汇总数据

android做数据可视化 安卓 数据可视化_数据可视化_17

 

android做数据可视化 安卓 数据可视化_大数据_18

 

3、数据点缀

一般我们会选用图表组件将数据可视化,当然,我们还可以利用报表块的强大功能,将数据本身与颜色、进度条、增长趋势组合起来,让数据更具凸显的效果。

android做数据可视化 安卓 数据可视化_数据可视化_19

 

4、配色

选取颜色的时候注意颜色的连贯性,整理了移动端模板的常用配色表分享给大家。

android做数据可视化 安卓 数据可视化_大数据_20