最新最全!領導駕駛艙完整製作攻略送上

說到駕艙艙,它通常是給駕駛員提供速度、轉速、燃油油位等信息的設備。它可以幫助飛行員或賽車手快速作出決定。

最新最全!領導駕駛艙完整製作攻略送上

而在企業業務流程管理中,“駕駛艙”可以幫助企業管理者儘可能清楚地查看更多企業活動信息,因此,我們稱之為“領導駕駛艙”,國外稱之為Dashboard。當領導需要了解業務中發生的事情,同時保持日常運營控制時,領導駕駛艙能夠幫助快速做出戰術決策提供可靠的信息。

領導駕駛艙用來實現數據的分析展現,直觀的數據總覽配合層層鑽取追根溯源,可以幫助決策人員發現問題調整戰略,甚至還可以以監控預警模式,實時刷新監控數據,可快速發現問題並及時響應。

領導駕駛艙設計思路

如上文所述,領導駕駛艙的本質是一個彙總展示了對於決策有重要影響的指標的圖表頁面。而數據圖表的展示,可以根據領導對業務的關注程度來自由定製需要展示的項目。所以在進行設計的時候,我們需要考慮到以下兩個部分:

一是,駕駛艙整體主題內容及所需要用到的指標。

二是,還需要考慮駕駛艙整體頁面風格及佈局等展現方式。

我們需要知道如何以最直觀的方式選擇正確的圖形,以便正確地顯示每個指標,保證領導駕駛艙中的信息足夠用於決策分析並且沒有冗餘。領導駕駛艙需要調整各種指標的顏色,保持整體色調一致的同時,對需要醒目的數據用突出的色彩,能幫助管理者快速把握關鍵信息。總而言之,我們應該在儘量簡潔直觀的設計下展示出足夠進行決策分析的信息。

最新最全!領導駕駛艙完整製作攻略送上

此外,有些領導駕駛艙包含了戰略和機密信息,在製作時應該限制相應的權限進行數據管理。在許多業務場景下,領導駕駛艙還需要支持大屏展示,例如高層會議上的展示需求等,這時候需在製作前考慮屏幕適應的問題。

如何實現領導駕駛艙

在經過上述思路介紹後,相信大家一定對如何設計一個完整的領導駕駛艙有了一定的瞭解。但是紙上談兵終覺淺,我們要如何在實際操作中做出既美觀又實用的領導駕駛艙呢?下面我們通過億信ABI舉例,給大家帶來一份乾貨滿滿的領導駕駛艙製作教程。

1、原型設計

在開發之前,我們拿著最終確認的需求,最好是先出個簡單的原型圖,提前構思好整體佈局。一方面我們可以將確定好的指標維度提前規劃好整體的排版佈局以及最佳展現方式,比如是否需要報表參數?哪個指標用哪種統計圖?哪裡需要鑽取?等等,避免開發的時候各種調試,浪費時間;另一方面報表開發需求量大時可以我們還能通過原型圖來評估開發工作量,幫助我們做好項目管控。

畫原型圖的方法有很多種,我們可通過手繪草圖畫一些初版,如果需求不是很複雜,也可以用excel來畫,當然如果項目或者領導要求嚴格需要出高保真原型圖,可以用axure專業的原型工具來畫。

領導駕駛艙的應用場景決定了他對於視覺效果的高要求,設計好了原型圖後,條件允許的情況下,可以讓UI在基於原型圖出酷炫的效果圖,然後切圖給報表開發人員實施。

2、整體佈局開發

接下來就是根據原型圖進行區域劃分及佈局開發。在【數據分析】模塊下找到【新建分析】,新建一個圖表分析。進入報表編輯器後,我們不難發現在左側工具欄中有多種佈局組件,可以根據需求選擇田字型佈局、上下型佈局等常規佈局,也可以選擇手動輸入行列數進行自定義佈局。

只需將所需的佈局組件拖拽到空白的編輯區即可。

最新最全!領導駕駛艙完整製作攻略送上

最新最全!領導駕駛艙完整製作攻略送上

還可以根據需求,對佈局進行合併、拆分以及行高列寬的調整,支持百分比佈局。

最新最全!領導駕駛艙完整製作攻略送上

還可以在大塊佈局完成的情況下使用容器組件對佈局中的區域再加以劃分。

最新最全!領導駕駛艙完整製作攻略送上

至此我們便完成了整個領導駕駛艙的區塊劃分及佈局。此處推薦將大塊區域劃分使用佈局來隔開,小塊的版塊則使用更為靈活的容器進行分隔,便於後期調整及維護。

最新最全!領導駕駛艙完整製作攻略送上

3、組件選擇

在完成佈局之後,需要結合指標性質思考如何選擇正確的圖表組件進行展示分析,然後只需將選擇的組件拖拽到佈局或容器中即可。我們可以在右側的屬性欄進行大小等設置的修改,也可以雙擊組件進行細節的修改。

組件的選擇多種多樣,但不要為了頁面美觀炫目而忘了領導駕駛艙的根本目的,是將核心決策指標使用最正確的組件展示出來,儘可能的簡明扼要,為決策提供更大的便利。

最新最全!領導駕駛艙完整製作攻略送上

4、添加指標

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

在每個統計圖組件的右上方,都有一個表格狀的小按鈕,點擊這個按鈕後可以將指標表格隱藏在對應統計圖的“背面”。這樣表格就作為一個數據來源,只提供數據,不進行展示。

最新最全!領導駕駛艙完整製作攻略送上

最新最全!領導駕駛艙完整製作攻略送上

在拖入指標表格後,通過雙擊統計圖為統計圖賦予數據來源。點擊小手圖標拾取表元中的指標作為數據來源,對指標進行可視化分析展現。

最新最全!領導駕駛艙完整製作攻略送上

其餘組件都可以此類推,全都設置好後便完成了數據與圖形的綁定。

5、整體美化

最後,需要對駕駛艙進行美化和細節調整。例如,給整個駕駛艙添加酷炫美觀的背景圖片,將重要的預警指標進行顏色設置以達到警示效果等。

最新最全!領導駕駛艙完整製作攻略送上

此外,還可以在整個報表的整體設置中添加腳本,通過腳本來完成自定義樣式的設計等,方便了前端開發人員快速實現一些動態效果。

最新最全!領導駕駛艙完整製作攻略送上

通過左側的組件結構樹我們可以瞭解到整個駕駛艙的結構分佈層次等,並對此做出調整。

最新最全!領導駕駛艙完整製作攻略送上

通過以上步驟,便完成了一個領導駕駛艙的製作。具體的細節及設置,都可以根據業務場景來自行定製,十分的便捷及個性化。

案例欣賞

本文還分享了一些優秀的領導駕駛艙案例供大家參考:

最新最全!領導駕駛艙完整製作攻略送上

最新最全!領導駕駛艙完整製作攻略送上

最新最全!領導駕駛艙完整製作攻略送上

最新最全!領導駕駛艙完整製作攻略送上

最新最全!領導駕駛艙完整製作攻略送上

最新最全!領導駕駛艙完整製作攻略送上

以上便是本文的全部內容,這裡給大家做一個小結。進行領導駕駛艙的製作步驟可以概括為:

【定主題】- 【選指標】-【拖布局】 -【挑組件】 -【綁數據】-【添細節】-【美化】,一個領導駕駛艙就完成啦!

今天的分享就到這裡,有興趣的朋友大家可以自己去操作一下。


分享到:


相關文章: