普通报表(cpt)制作

编辑
  • 文档创建者:caixiaolan
  • 浏览次数:7109次
  • 编辑次数:9次
  • 最近更新:Kevin-s 于 2019-06-06
  • 1. 页面大小选择

    首先考虑 cpt 页面的大小,在模板>移动端属性中,选择模板设置,勾选设置为手机模板画布大小,页面则以 4.7 寸屏幕手机进行适配,如下所示:

    注:若模板中有内容,在设置为手机端专属模板时,会触发另存为以“_mobile”为后缀的模板,详情参考:设置手机端模板


    2. 普通报表制作

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

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


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

    3. 复杂组件报表制作

    如果要设计比较复杂的手机端报表,建议依然采取流式布局,宽度大小保持不动,依次往下添加元素。

    注:不支持悬浮元素;8.0 里 cpt 和决策报表的报表块中直接使用新图表时需要使用 H5 解析9.0 直接支持 cpt 和决策报表的报表块里的新图表,无需 H5 解析

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

    3.1 条理清晰的分割

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

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

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

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



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

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

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

    侧边栏的颜色块也可以起到很好的分块作用,或者是通过颜色的渐变来区分:

    方法四 使用浅色分隔条

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


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

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


    3.2 明细数据卡片化

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



    3.3 避免多层次钻取与返回

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

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

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

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


    3.4 弱化显示

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

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

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


    3.5 适当的视觉冲击

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

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

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

    附件列表


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

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]