什么是領(lǐng)導(dǎo)駕駛艙

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

而在企業(yè)業(yè)務(wù)流程管理中，“駕駛艙”可以幫助企業(yè)管理者盡可能清楚地查看更多企業(yè)活動(dòng)信息，因此，我們稱之為“領(lǐng)導(dǎo)駕駛艙”，國外稱之為Dashboard。當(dāng)領(lǐng)導(dǎo)需要了解業(yè)務(wù)中發(fā)生的事情，同時(shí)保持日常運(yùn)營控制時(shí)，領(lǐng)導(dǎo)駕駛艙能夠幫助快速做出戰(zhàn)術(shù)決策提供可靠的信息。

領(lǐng)導(dǎo)駕駛艙用來實(shí)現(xiàn)數(shù)據(jù)的分析展現(xiàn)，直觀的數(shù)據(jù)總覽配合層層鉆取追根溯源，可以幫助決策人員發(fā)現(xiàn)問題調(diào)整戰(zhàn)略，甚至還可以以監(jiān)控預(yù)警模式，實(shí)時(shí)刷新監(jiān)控?cái)?shù)據(jù)，可快速發(fā)現(xiàn)問題并及時(shí)響應(yīng)。

領(lǐng)導(dǎo)駕駛艙設(shè)計(jì)思路

如上文所述，領(lǐng)導(dǎo)駕駛艙的本質(zhì)是一個(gè)匯總展示了對于決策有重要影響的指標(biāo)的圖表頁面。而數(shù)據(jù)圖表的展示，可以根據(jù)領(lǐng)導(dǎo)對業(yè)務(wù)的關(guān)注程度來自由定制需要展示的項(xiàng)目。所以在進(jìn)行設(shè)計(jì)的時(shí)候，我們需要考慮到以下兩個(gè)部分：

一是，駕駛艙整體主題內(nèi)容及所需要用到的指標(biāo)。

二是，還需要考慮駕駛艙整體頁面風(fēng)格及布局等展現(xiàn)方式。

我們需要知道如何以最直觀的方式選擇正確的圖形，以便正確地顯示每個(gè)指標(biāo)，保證領(lǐng)導(dǎo)駕駛艙中的信息足夠用于決策分析并且沒有冗余。領(lǐng)導(dǎo)駕駛艙需要調(diào)整各種指標(biāo)的顏色，保持整體色調(diào)一致的同時(shí)，對需要醒目的數(shù)據(jù)用突出的色彩，能幫助管理者快速把握關(guān)鍵信息。總而言之，我們應(yīng)該在盡量簡潔直觀的設(shè)計(jì)下展示出足夠進(jìn)行決策分析的信息。

此外，有些領(lǐng)導(dǎo)駕駛艙包含了戰(zhàn)略和機(jī)密信息，在制作時(shí)應(yīng)該限制相應(yīng)的權(quán)限進(jìn)行數(shù)據(jù)管理。在許多業(yè)務(wù)場景下，領(lǐng)導(dǎo)駕駛艙還需要支持大屏展示，例如高層會(huì)議上的展示需求等，這時(shí)候需在制作前考慮屏幕適應(yīng)的問題。

如何實(shí)現(xiàn)領(lǐng)導(dǎo)駕駛艙

在經(jīng)過上述思路介紹后，相信大家一定對如何設(shè)計(jì)一個(gè)完整的領(lǐng)導(dǎo)駕駛艙有了一定的了解。但是紙上談兵終覺淺，我們要如何在實(shí)際操作中做出既美觀又實(shí)用的領(lǐng)導(dǎo)駕駛艙呢？下面我們通過億信ABI舉例，給大家?guī)硪环莞韶洕M滿的領(lǐng)導(dǎo)駕駛艙制作教程。

1、原型設(shè)計(jì)

在開發(fā)之前，我們拿著最終確認(rèn)的需求，最好是先出個(gè)簡單的原型圖，提前構(gòu)思好整體布局。一方面我們可以將確定好的指標(biāo)維度提前規(guī)劃好整體的排版布局以及最佳展現(xiàn)方式，比如是否需要報(bào)表參數(shù)？哪個(gè)指標(biāo)用哪種統(tǒng)計(jì)圖？哪里需要鉆取？等等，避免開發(fā)的時(shí)候各種調(diào)試，浪費(fèi)時(shí)間；另一方面報(bào)表開發(fā)需求量大時(shí)可以我們還能通過原型圖來評(píng)估開發(fā)工作量，幫助我們做好項(xiàng)目管控。

畫原型圖的方法有很多種，我們可通過手繪草圖畫一些初版，如果需求不是很復(fù)雜，也可以用excel來畫，當(dāng)然如果項(xiàng)目或者領(lǐng)導(dǎo)要求嚴(yán)格需要出高保真原型圖，可以用axure專業(yè)的原型工具來畫。

領(lǐng)導(dǎo)駕駛艙的應(yīng)用場景決定了他對于視覺效果的高要求，設(shè)計(jì)好了原型圖后，條件允許的情況下，可以讓UI在基于原型圖出酷炫的效果圖，然后切圖給報(bào)表開發(fā)人員實(shí)施。

2、整體布局開發(fā)

接下來就是根據(jù)原型圖進(jìn)行區(qū)域劃分及布局開發(fā)。在【數(shù)據(jù)分析】模塊下找到【新建分析】，新建一個(gè)圖表分析。進(jìn)入報(bào)表編輯器后，我們不難發(fā)現(xiàn)在左側(cè)工具欄中有多種布局組件，可以根據(jù)需求選擇田字型布局、上下型布局等常規(guī)布局，也可以選擇手動(dòng)輸入行列數(shù)進(jìn)行自定義布局。

只需將所需的布局組件拖拽到空白的編輯區(qū)即可。

還可以根據(jù)需求，對布局進(jìn)行合并、拆分以及行高列寬的調(diào)整，支持百分比布局。

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

至此我們便完成了整個(gè)領(lǐng)導(dǎo)駕駛艙的區(qū)塊劃分及布局。此處推薦將大塊區(qū)域劃分使用布局來隔開，小塊的版塊則使用更為靈活的容器進(jìn)行分隔，便于后期調(diào)整及維護(hù)。

3、組件選擇

在完成布局之后，需要結(jié)合指標(biāo)性質(zhì)思考如何選擇正確的圖表組件進(jìn)行展示分析，然后只需將選擇的組件拖拽到布局或容器中即可。我們可以在右側(cè)的屬性欄進(jìn)行大小等設(shè)置的修改，也可以雙擊組件進(jìn)行細(xì)節(jié)的修改。

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

4、添加指標(biāo)

在億信ABI中，所有展示組件的數(shù)據(jù)來源都可以通過表格來獲取，所以需要將業(yè)務(wù)數(shù)據(jù)對接到億信ABI中后，通過表格給統(tǒng)計(jì)圖等組件提供數(shù)據(jù)。

在每個(gè)統(tǒng)計(jì)圖組件的右上方，都有一個(gè)表格狀的小按鈕，點(diǎn)擊這個(gè)按鈕后可以將指標(biāo)表格隱藏在對應(yīng)統(tǒng)計(jì)圖的“背面”。這樣表格就作為一個(gè)數(shù)據(jù)來源，只提供數(shù)據(jù)，不進(jìn)行展示。

在拖入指標(biāo)表格后，通過雙擊統(tǒng)計(jì)圖為統(tǒng)計(jì)圖賦予數(shù)據(jù)來源。點(diǎn)擊小手圖標(biāo)拾取表元中的指標(biāo)作為數(shù)據(jù)來源，對指標(biāo)進(jìn)行可視化分析展現(xiàn)。     

其余組件都可以此類推，全都設(shè)置好后便完成了數(shù)據(jù)與圖形的綁定。

5、整體美化

最后，需要對駕駛艙進(jìn)行美化和細(xì)節(jié)調(diào)整。例如，給整個(gè)駕駛艙添加酷炫美觀的背景圖片，將重要的預(yù)警指標(biāo)進(jìn)行顏色設(shè)置以達(dá)到警示效果等。

此外，還可以在整個(gè)報(bào)表的整體設(shè)置中添加腳本，通過腳本來完成自定義樣式的設(shè)計(jì)等，方便了前端開發(fā)人員快速實(shí)現(xiàn)一些動(dòng)態(tài)效果。    

通過左側(cè)的組件結(jié)構(gòu)樹我們可以了解到整個(gè)駕駛艙的結(jié)構(gòu)分布層次等，并對此做出調(diào)整。

通過以上步驟，便完成了一個(gè)領(lǐng)導(dǎo)駕駛艙的制作。具體的細(xì)節(jié)及設(shè)置，都可以根據(jù)業(yè)務(wù)場景來自行定制，十分的便捷及個(gè)性化。

案例欣賞

本文還分享了一些優(yōu)秀的領(lǐng)導(dǎo)駕駛艙案例供大家參考：

以上便是本文的全部內(nèi)容，這里給大家做一個(gè)小結(jié)。進(jìn)行領(lǐng)導(dǎo)駕駛艙的制作步驟可以概括為：

【定主題】- 【選指標(biāo)】-【拖布局】 -【挑組件】 -【綁數(shù)據(jù)】-【添細(xì)節(jié)】-【美化】，一個(gè)領(lǐng)導(dǎo)駕駛艙就完成啦！

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

億信ABI免費(fèi)體驗(yàn)地址：abi.esensoft.com