普通报表(cpt)制作

编辑
文档创建者:caixiaolan (69992 )     浏览次数:2265次     编辑次数:4次     最近更新:jiangsr 于 2018-01-18     

目录:

1. 页面大小选择编辑

首先考虑cpt页面的大小,在模板>页面设置中,选择纸张大小为手机大屏,默认宽度为表格原始宽度7列。可参考:移动端预定义纸张大小


2. 普通报表制作编辑

如果只是实现简单的数据展现,只需要按照PC一贯的思路进行设计。

设计完之后需要在模板>移动端属性中,设置自适应方式为:竖屏横向自适应,如下图所示:


注:如果列数超过7列很多,请不要设置竖屏横向自适应,试试纵向自适应也许会有更好的效果


3. 复杂组件报表制作编辑

如果要设计比较复杂的手机端报表,建议依然采取流式布局,宽度大小保持不动,依次往下添加元素。
注:不支持悬浮元素;8.0里cpt和决策报表的报表块中直接使用新图表时需要使用H5解析9.0直接支持cpt和决策报表的报表块里的新图表,无需h5解析

可以看出,下图就是采用的流式布局:

222

3.1 条理清晰的分割

一般情况下,我们制作的报表不会简单的只有一个表格或者一个图表,而是包含了很丰富的内容,很多的组件组合而来,这个时候怎样才能让我们做出来的报表更加具有条理性呢?

关键是需要对我们报表里面的内容按照类别或者模块来进行划分,合理的布局,每个模块通过明显的标题或者分割来进行区分。

方法一 使用偏深色的长短标题

就像下图使用的深蓝色的长短标题划分,是最常用的一种形式:

222

方法二 使用深色短线或图标

采用深色短线或者其他图标来分割内容也是不错的选择:

222

方法三 使用侧边栏颜色块或渐变色

侧边栏的颜色块也可以起到很好的分块作用,或者是通过颜色的渐变来区分:
222
方法四 使用浅色分隔条

浅色分割条,会让你的报表看起来很清爽:

222
方法五 相同模块间使用浅色分割线

相同模块的小类别之间也可以用一个浅色的横线来分割,来加强报表的可阅读性:

222


3.2 明细数据卡片化

明细表如果列数比较多,条数不是很多的时候,可以转换成相同格式的卡片显示,在手机上面的效果更好,可读性更强。
222



3.3 避免多层次钻取与返回

钻取层数如果过多的话,看报表的人的操作体验就会下降很多,因为不知道现在自己已经下钻到哪一层,以及如何返回到第一层。

因此在报表制作的时候,可以多用tab的形式来将多个报表放在一个页面里面来实现,这样实用性更强。

可以采用表格的超级链接>动态参数或者tab组件来实现。

具体可以参考巧用tab布局,APP的布局效果我们也能做

222


3.4 弱化显示

 一张报表中的数据有很多,制作的报表需要有主次概念,视觉上有一定的层次感,先看什么、后看什么,根据先后顺序,我们需要对显示的内容进行加粗、加深或者是淡化。

不要所有的文字都用相同的格式,要敢于将数据进行弱化显示。

例如下面的模板,使用不同的字体颜色给我们带来视觉层次感。

222


3.5 适当的视觉冲击

分析类的报表最重要的目的就是要找出数据所呈现出来的异常从而让我们去找出相关的问题与结论,例如同期比下降了,销售额没有达到目标,这些数据结果,我们需要重点突出出来。

这个时候采用颜色背景,会给我们带来更强烈的视觉冲击。

222

想要呈现出更好的布局效果,可参考手机端布局与配色方案

附件列表


主题: 移动端
标签: 暂无标签 编辑/添加标签
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: