手把手教程!五步解鎖移動領導駕駛艙製作

移動領導駕駛艙作為移動BI的核心應用,通過實時圖形化展示業務指標數據,能夠讓企業領導者像在汽車駕駛艙裡面對儀表盤一樣,直觀地監測企業運營情況,並對異常關鍵指標預警和挖掘分析,實現決策分析無處不在的實時動態管理。

眾所周知,企業領導者不可能長時間坐在電腦前,移動設備成為必須使用的終端。因此,移動端可視化分析對於企業領導者來說意義重大。

今天,教大家制作移動領導駕駛艙,只需掌握好下面的5個步驟就可以刷刷刷“變”出漂亮的領導駕駛艙!這裡以資產日報駕駛艙為例,介紹一個完整的駕駛艙搭建實例,手把手教你搭建移動駕駛艙。

以下跳過了數據準備和數據清洗的步驟,直接從駕駛艙的設計上手。使用工具:億信ABI

手把手教程!五步解鎖移動領導駕駛艙製作

第一步:理清需求,設計草圖

領導駕駛艙呈現的數據是領導最關注的,也是最彙總的數據,可以讓領導一眼就看明白數據重點、形勢走向,以便及時做出精準判斷,有效決策。

比如上圖是資產日報移動駕駛艙頁面。首先要搞清楚資產日報最關注的是什麼:資金來源、資金支出、資金結餘結構。這張頁面的重點就圍繞這個三個關注點展開來,然後依靠時間來展示這三個關注點。

這就需要整理出駕駛艙會包含的內容,可通過思維導圖進行梳理。這個環節就是去梳理展示什麼主題、什麼維度、什麼指標,以及報表需要實現的分析、交互等功能,比如怎麼跳到其他條線駕駛艙去看數據,進行分析,以及這個領導駕駛艙會給予公司管理什麼樣的支撐。期間需要不斷和業務方溝通,最好能畫出demo,引導一起思考,給出合理建議。所謂前期多溝通,後期才少返工嘛。

第二步:佈局設計

根據第一步的設計稿規劃報表佈局。佈局看似簡單,其實是很重要的一個步驟,需要縱觀整個頁面的排版情況,充分考慮各組件的擺放位置。也要重複考慮移動端自適應。各個手機、平板分辨率差異很大,所以要滿足移動端報表的自適應規則。

最簡單流式佈局,將所有關注點均以平鋪的方式展開,能夠快速一覽數據內容。

以上圖駕駛艙為例,在億信ABI中佈局如下圖所示,灰色虛線為佈局組件的劃分,勾選“手機自動排版”。

APP計算時,會根據佈局代碼成流式佈局,並每個佈局自動水平撐滿來滿足不移動端的屏幕大小。

手把手教程!五步解鎖移動領導駕駛艙製作

第三步:基本元素設計

佈局中數字和圖形是主要組成元素,佔據了絕大多數版面,要達到更好的展現效果就需要發揮不同元素的特長。

(1)數字

數字的表達,直觀、簡潔,且佔用空間少,是最直接展示方式。在移動駕駛艙場景中適合應用於重點業務指標的展示,在報表的最顯眼位置放入諸多重點數字可以快速地一覽業務的全貌。

其缺點在於無法更深入的瞭解數字的背後的趨勢,佔比,分佈等更深層次的含義。

(2)圖形

圖形在數據內容的表達上表現的更豐富,在視覺上也能達到更好的效果。在移動駕駛艙場景中適合應用於業績達成率、重點指標走勢等,以便用戶對業績現狀與趨勢有更加直觀的把控。

就使用者而言,移動端報表講究隨時獲取,所以在設計上,需要避繁就簡,直擊重點。比如:資金來源分四類現金流入,四大類型用表格顯示,現金金額則用數字直觀表達出來。像下圖資金來源佔比分析,使用佔比圖表達出來更為豐富,更為直觀。

手把手教程!五步解鎖移動領導駕駛艙製作

第四步:對接數據

報表的佈局、美觀很重要,但是數據的有效性依然是第一位的,如果報表脫離了數據價值本身,那再好看也沒有任何意義。

在億信ABI中,所有展示組件的數據來源都可以通過表格來獲取,所以需要將業務數據對接到億信ABI中後,通過表格給統計圖等組件提供數據。

手把手教程!五步解鎖移動領導駕駛艙製作

第五步:細節美化

最後需要對我們製作的分析展現進行美化,包括設置背景顏色、邊框樣式、文字顏色、大小、統計圖配色、添加圖片一個都不能少喔,做出來的領導駕駛艙一定美美噠。友情提示:不要忘記設置統計圖提示信息的樣式和表格的整行高亮及選中樣式。

當然,駕駛艙製作的最後一個重要步驟就是加入動態的效果以及一些細節優化。所謂“死的表格不如動的圖形”,我們不僅要努力讓大家能夠解讀數據,還要讓他們還可以輕鬆甚至愉快地完成這些工作。

悄悄告訴你,億信ABI中有很多可以實現的動態效果,比如自動輪播、播放組件、時間滑動軸等等。當然,還可以在整個報表的整體設置中添加腳本,通過腳本來完成自定義樣式的設計等,方便了前端開發人員快速實現一些動態效果。

以上就是通過億信ABI從移動端設計的思路梳理的移動駕駛艙製作教程,當然在具體實施過程中,需要全局把控,從報表結構、數據選擇、主頁設計、元素搭配組合等方面著手設計,循序漸進,這必然是一個不斷打磨的過程。


分享到:


相關文章: