你出門會帶什麽?對於大多數人來說,一個手機就夠了。
原先手機隻能用來通話、短信,現在隨著移動應用的出現,手機已經漸漸能夠取代了一些pc端的功能,成為了企業管理的利器。
吃早餐時,某零售企業的CEO老張看著手機裏的月報,本月運營情況便一目了然;
候機室裏,區域銷售經理小陳的手機收到了銷售異常預警,從而為快速組織應對爭取了時間;
會議間隙,人力資源總監小李拿出了手機查看公司人力情況,根據公司發展戰略,組織製定人力資源戰略規劃......
由此可見,辦公移動化已經成為了企業經營的一大發展趨勢,在企業數據管理領域,移動端報表也成為了現代企業運營管理的迫切需要。
移動端報表應該怎麽做?很多報表工程師做pc端的報表模版已經很熟練了,但一遇到移動端模版還是很犯難:總覺得手機屏幕太小,想放的數據放不下;領導對移動端模版越來越追求美感;模版缺乏交互感,幹巴巴的沒人願意看....
其實移動端的製作並不難,我們通常把移動端報表稱為移動駕駛艙,也就是把企業經營日報、各類數據分析報告等數據做成可視化放到了移動端設備上,換句話來說就是個迷你版的dashboard ,和pc端的做法其實差不不大,換湯不換藥,下麵我就用FineReport的移動端來教一下大家如何製作移動端模版。
關於FineReport,這裏就不再介紹了,詳見《從隻用Excel做報表,到可視化報表工具真香,他經曆了什麽》。
一、需求調研
無論是PC端還是移動端,動手設計報表模版之前,肯定是要有需求調研這一步的,報表做了是給誰看的,老板想看什麽內容,有哪些關鍵指標要展示等等,這些問題都是要提前搞清楚的.
二、模版製作
1、數據鏈接
數據鏈接的部分和pc端完全一樣,點擊服務器——定義數據鏈接,鏈接好數據源,當然了還是支持30多種數據源的。
2、開啟手機模板模式,調整畫布大小
FineReport的普通報表模式和決策報表模式都可以用來製作移動端模版,兩者的區別和pc端一樣,普通報表模式適合傳統報表製作,決策報表各組件之間是獨立的,可以自由布局,操作靈活,適合做駕駛艙。給管理層和決策層做的移動端模版大多是用來監控數據的,一般選用決策報表模式。
普通報表模式
決策報表模式
在PC設計器中設計手機模板,由於屏幕尺寸的較大差異,我們可能會對組件布局、組件大小的設置存在很多的問題,所以在設計手機報表之前時,要將模版設置為手機端模版。
設計器會自動調整為適配手機屏幕的大小,適應手機尺寸,讓模板內容在設計器上的樣式與手機上的最終效果更為接近,減少不必要的調整。
2、布局設計
在整體布局的設計中,建議采用:先匯總再細分的原則。
先將不同時間粒度下的匯總數據優先呈現出來,讓管理者一眼就能看到指標當前的進展與狀態,然後再向下拆解詳細數據,數據細分過程中需要按照一定的分析邏輯,比如說:整體走勢、趨勢分析——分類占比分析——分類明細數據
比方說我們要做一張公司年度利潤表,就要先把簽約總金額額,淨利潤等重要數據匯總,然後按照城市維度拆分明細數據,這樣老板一眼就能了解到關鍵指標情況,若發現異常然後再查找明細數據發現問題。
除了自己設計布局之外,也可以參考一些已有的demo模版,在文末給大家準備了體驗地址。
3、選擇報表組件
根據需要展示的數據指標整理數據,選擇模板所需要的報表組件,操作和pc端相同
當組件個數過多時可以采用下麵兩種方式:一是根據組件大小和個數調整畫布整體高度,二是利用tab組件,把不同數據填至不同的tab頁。
在決策報表模式下,拖拽tab到畫布上,在控件設置選中tabpane>樣式模板>設置移動端tab樣式,tab樣式有上菜單式、下菜單式、滑動式等。
然後再分別將每個tab塊對應的圖標組件內容填充
預覽時,點擊不同的tab塊就可以跳轉到相應的報表頁麵
4、細節優化
4.1組件間隔
移動端的APP為了滿足用戶閱讀的舒適感,會為不同類型的功能區域之間設置間隔,移動端報表也是一樣,我們需要讓用戶更願意閱讀模板中的數據。
一般情況下,移動報表不會簡單的隻有一個表格或者一個圖表,而是包含了很豐富的內容,由很多的組件組合而來,這個時候怎樣才能讓我們做出來的報表更加具有條理性呢?關鍵是需要對我們報表裏麵的內容按照類別或者模塊來進行劃分,合理的布局。
點擊控件設置>body>移動端>內邊距、組件間隔進行設置
4.2點綴數據,突出重點
除了通過獨立的圖表組件將數據可視化以外,還可以利用報表塊的強大功能,將數據本身與顏色、進度條、增長趨勢組合起來,突出重點數據:
5、結果展示與分享
最後,一張移動端模版就基本做成了,用手機掃描二維碼就可以在移動端預覽,網絡不好的時候可以開啟離線模式,離線查看報表,還可以設置定時消息推送,與微信、釘釘等平台集成,通知老板及時查看。
6、移動端報表的其他應用場景
移動端報表在企業的應用場景遠不止上麵所說的滿足管理層的數據查看需求,對業務層來說,移動端報表也可以為日常的業務分析和業務處理提供指南針,比如銷售日報、生產日報等日報推送;移動端掃碼查詢商品信息;移動端外出業務員形成管理等等。
關注我,並轉發該文章,私信回複“app”,即可獲得移動端報表和demo體驗地址!