FacebookTwitterLineHatena

從PC端到行動端的老番薯(客戶)時常跟我們抱怨,在PC上做好的複雜報表在行動端壓根就不能看嘛,簡直就是「災難」,你們說的良好的自適應效果都是吹牛逼!產品君表示批評的對,由於手機屏幕比較小,複雜報表在現有的手機上展示的效果確實不盡如人意,不過,我們也一直沒有停止對複雜報表展現效果優化的思考。

今天讓我們用兩種方式來改善這樣的「災難效果」吧!

我們先用demo中的一張複雜報表來看一看在行動端的展現效果:

這樣一張PC端的複雜報表(列數大於10)在行動端豎屏狀態原始效果如左圖;

如果您不想對模板本身做調整,可以設置 ① 表頭凍結顯示、② 豎屏縱向自適應,通過左右滑動來查看,但是效果依然欠缺,如右圖;

在這樣的效果下,只能採取橫屏的方式查看,這樣的屏幕比例更接近PC,效果會略好一些;
但是使用手機橫屏的操作在交互上更繁瑣,在5寸左右的屏幕上瀏覽這麼多數據依然影響使用。

我們分析了這類列數較多的複雜報表製作的樣式,一般有兩種類型:

1、所有列是同一維度的數據,比如是時間維度,一年12個月
2、不同的列是不同維度的數據,如demo所示,是對「地區」、「供應商」、「僱員」三個維度的分析

對於第一種類型,建議採用橫屏查看,或者減少行數,再採用上面提及的 ① 表頭凍結顯示、② 豎屏縱向自適應,通過左右滑動來查看,實現方式參考幫助文檔:行動端自適應

對於第二種類型,我們可以採用APP界面的設計思路,將分析維度與表格主體拆分開來,通過點擊不同維度名稱查看不同維度的數據。

下面我們來介紹如何通過兩種方式達成這樣的效果

1、表單聯動
新建兩個報表塊,上面的報表塊用於參數的控制,下面的報表塊用於數據分析;報表塊之間的參數聯動,控制主報表列的隱藏。從而達成:點擊維度名稱,切換查看內容的效果。

這樣在表單報表塊中,單一維度的數據就可以只通過上下滑動來顯示,展現效果大大提升,示例中除了不同維度的數據,還提供了全部顯示的方式,全量的數據可以通過上下左右滑動來顯示。

實際效果如下:

註:有兩種超鏈的方式,分別為動態參數(當前頁重新刷新)和當前表單對象(被聯動的表單對象刷新)

2、tab組件
針對數據維度創建tab組件,在tab塊內創建報表塊,將原先的報表內容直接複製到新建的報表塊內,刪除掉非當前維度的數據列。
同樣,在表單報表塊中,單一維度的數據就可以只通過上下滑動來顯示,全量的數據可以通過上下左右滑動來顯示。

實際效果如下:

註:tab組件需要使用H5解析,相關版本支援請參考幫助文檔:表單支援html5方式解析
3、兩種效果優勢對比
從工作量上來說,兩種方式差別不大,表單聯動方式增加了參數聯動和報表隱藏的工作,tab組件方式增加了多個新建報表塊的工作,由於我們支援表單組件和報表塊內容的復用,因此操作比較簡單。

● 表單聯動
優勢:可以按照自己的喜好設置維度切換的效果,並且採用原生解析,不會損失APP自帶功能
缺陷:只有一個展示框,不同寬度的展示內容不能採用單一的豎屏橫向自適應來解決,需要略微調整報表寬度
維度比較多的時候切換的效果有缺陷,刷新上面的報表塊會直接從最左邊顯示,切換的效果就顯示不出來了

● tab組件
優勢:不同維度有不同的報表塊,可以針對列數多少分別設置豎屏的自適應方式,更加合理
缺陷:tab組件需要H5解析,暫時不支援收藏、批註分享等功能

其實還有第三種方式,使用單選按鈕組控制項進行參數的控制,但是目前這個控制項的樣式還比較丑,檢討中。。。不過產品君表示我們下半年是要做優化的嘛。

附件下載:解救行動端複雜報表.rar

喜歡這篇文章嗎?歡迎分享按讚,給予我們支持和鼓勵!

熱門文章推薦

立即試用,可獲取更多 報表範本和案例

免費試用
  • Line【FineReport報表軟體】

帆軟FineReport臉書官方賬號
加入好友

回覆簡報送最新10.0產品簡報

  • 臉書【帆軟軟體】

帆軟FineReport臉書官方賬號

按讚送資訊人才必備懶人包

  • 商務問題諮詢

  • 台灣: 0933-790886

    或 0989-092892

    taiwan@fanruan.com

    港澳: (+852) 68508566

    international@fanruan.com

  • 技術問題諮詢

  • 線上客服:點擊右側「聯繫我們」按鈕

    郵件諮詢:support@fanruan.com

    服務時間:工作日 9:00~12:00,13:30~17:30

返回頂部