一、概要
PC 端和手機端的範本在一定程度是有區別的,本文將分別介紹如何製作PC 端和手機端的共用frm範本和cpt範本。
二、決策報表(frm範本)
在勾選【設定為行動端範本】後,在右側點選【行動設備】,勾選【手機重佈局】。
PC 端用決策報表設計的範本在手機端透過手機重佈局能夠達成自我調整效果。
但是在設計共用範本時需要注意以下問題:
組件的大小(寬高比)的設計需要同時考慮 PC 螢幕和手機螢幕的適用,儘量避免使用寬高比過大的組件。
由於手機螢幕的寬度有限,將寬度過寬的組件壓縮在手機螢幕上顯示,展現效果比較差。
例如下圖2,柱形圖涉及了很多位人員的資料,這時在手機端展示就不太美觀了。
圖表的圖例儘可能放在圖表下方。
三、表格(cpt)
一般而言,不推薦使用 cpt 來設計 PC 和行動端共用且組件較多的報表,cpt 只能被整體的縮放,組件過多的表格無法同時適配於 PC 和行動端的螢幕。
如果是想把 PC 端已經設計好的報表移植到手機上來查看,需要注意以下問題:
如果不想對範本本身做調整,可以設定表頭凍結顯示、豎屏縱向自我調整,透過左右滑動來查看。
對於所有欄是同一維度的資料,比如是時間維度,一年 12 個月,可以採用橫屏查看,或者減少列數,或者可以設定表頭凍結顯示、 豎屏縱向自我調整,透過左右滑動來查看。
對於不同的欄是不同維度的資料,是對“地區”、“供應商”、“僱員”三個維度的分析,可以採用 App 介面的設計思路,將分析維度與表格主體拆分開來,透過點選不同維度名稱查看不同維度的資料。