都说俺们IT人员不懂美工，移动端报表做的各种心酸心累啊， PC的表格是在手机上看真是又丑又长，看看其他APP页面都绚丽多彩交互好，我们的简直惨不忍睹，尤其是领导层看报表，报表看起来不漂亮，哪有心情看具体的数据， 怎么办？
移动端专属的布局与配色解决方案来啦！！！
我们的方案收集了实际客户各个业务场景下的报表，专门由帆软UI进行美化。
并且提供多套配色风格及排版样式以及对应的实际模板，并且对移动报表如何突出数据、如何考虑布局排版、如何提高使用体验以及一些常用的设置进行了说明。
需要者可以根据实际业务需要，借鉴该方案中样式及布局，或从中启发思路，来实现自己好看的报表。
想想是不是有点小激动呢 下面赶紧来看内容吧！
方案效果图及介绍：
方案采用同一套Demo，由UE设计了经典、清新、商务3种配色风格，效果如下。ps.论坛展示有限哦，大家可以戳底部下载高清截图以及相应的工程包
经典系列为典型的商务蓝色风格，庄重但不失美观，沉稳精致。
清新系列活泼明亮，偏向于扁平化，充满热情。
金属商务系列高端大气，精致美观。
方案说明：
1、调色表
1.1 没有难看的颜色，只有不协调的配色，利用进阶色表，来进行色彩搭配吧，我们每个人都可以成为视觉设计师
在进阶色表中，按照固定规则提取颜色，来应用到自己的报表中或者图表中，就能生成色彩协调的视觉效果
例如可以横向依次选取同一色系的颜色：
也可以纵向依次选取颜色：
或者对角线选取颜色，或者跳格取色，按照特定规律提取颜色然后组合，就可以得到良好的颜色效果，选取颜色的时候注意颜色的连贯性
1.2 也可以取下方常用颜色表中的颜色进行组合
2、怎样才能做出调理清晰的报表？
一般情况下，我们制作的报表不会简单的只有一个表格或者一个图表，而是包含了很丰富的内容，很多的组件组合而来，这个时候怎样才能让我们做出来的报表更加具有条理性呢？
关键是需要对我们报表里面的内容按照类别或者模块来进行划分，合理的布局，每个模块通过明显的标题或者分割来进行区分
就像下图偏深色短／长条标题划分，是最常用的一种形式：
采用深色短线或者其他图标来分割内容也是不错的选择：
侧边栏的颜色块也可以起到很好的分块作用，或者是通过颜色的渐变来区分：
浅色分割条，会让你的报表看起来很清爽：
相同模块的小类别之间也可以用一个浅色的横线来分割，来加强报表的可阅读性：
3、明细数据转为卡片显示
明细表如果列数比较多，条数不是很多的时候，可以转换成相同格式的卡片显示，在手机上面的效果更好，可读性更强
4、避免多层次钻取与返回，试着尽量放在一个报表内部进行切换
钻取层数如果过多的话，看报表的人的操作体验就会下降很多，因为不知道现在自己已经下钻到哪一层，以及如何返回到第一层
因此在报表制作的时候，可以多用tab的形式来将多个报表放在一个页面里面来实现，这样实用性更强
现在移动端还不支持tab组件，可以采用表格的超级链接>动态参数来实现，等移动端实现了tab组件，就会更加方便了
5、学会弱化显示
一张报表中的数据有很多，制作的报表需要有主次概念，视觉上有一定的层次感，先看什么、后看什么，根据先后顺序，我们需要对显示的内容进行加粗、加深或者是淡化
不要所有的文字都用相同的格式，要敢于将数据进行弱化显示
例如下面的模板，不通的字体颜色给我们带来的视觉层次感
6、适当的视觉冲击会突出的异常的数据
分析类的报表最重的目的就是要找出数据所呈现出来的异常从而让我们去找出问题与结论，例如同期比下降了，销售额没有达到目标，针对这些数据结果，我们需要重点突出出来
这个时候采用整体颜色背景，给我们带来的视觉冲击会更强烈
移动端解决方案完整工程打包
链接: https://pan.baidu.com/s/1c2HFlAC 密码: axpy
往期移动端干货回顾：
【专题汇总】移动端解决方案
编辑于 2017-12-28 11:52
编辑于 2017-12-28 11:53
|
太棒了