在G端項(xiàng)目中，如何做好前端數(shù)據(jù)大屏的設(shè)計(jì)，是一個(gè)值得我們思考的問(wèn)題。作者結(jié)合自己的實(shí)際項(xiàng)目經(jīng)驗(yàn)，與大家共同探討G端可視化大屏的思路，希望對(duì)你有所幫助。

最近在負(fù)責(zé)一個(gè)G端項(xiàng)目，這個(gè)項(xiàng)目不同于我之前做的礦山、水利行業(yè)監(jiān)測(cè)平臺(tái)，以往的行業(yè)因發(fā)展了多年，有政策指引、行業(yè)標(biāo)準(zhǔn)，也有競(jìng)品可參考分析，需求相對(duì)明確。

而這個(gè)項(xiàng)目，沒(méi)有明確的標(biāo)準(zhǔn)，更多的是需要我們引導(dǎo)和挖掘用戶的需求，怎么將這個(gè)故事給講好。

項(xiàng)目分為前端數(shù)據(jù)大屏和后臺(tái)數(shù)據(jù)管理，最難的就是前端數(shù)據(jù)大屏的設(shè)計(jì)，在被總監(jiān)批評(píng)多次之后，我總結(jié)到了大屏設(shè)計(jì)的思路，分享給大家！

一、大屏可視化價(jià)值

讓業(yè)務(wù)決策有據(jù)可依是數(shù)據(jù)可視化大屏的核心價(jià)值，主要體現(xiàn)在兩個(gè)方面：

①利用數(shù)據(jù)指標(biāo)進(jìn)行持續(xù)監(jiān)測(cè)和預(yù)警，有異常值的時(shí)候能夠及時(shí)發(fā)出警報(bào)，保證業(yè)務(wù)的正常進(jìn)行，比如下面的水文監(jiān)測(cè)大屏：

②根據(jù)合適的數(shù)據(jù)模型，發(fā)現(xiàn)并分析業(yè)務(wù)問(wèn)題以及發(fā)展趨勢(shì)，及時(shí)做出解決措施。不同的業(yè)務(wù)層級(jí)需要的可視化大屏是不一樣的，比如適合管理層的核心管理駕駛艙，適合銷(xiāo)售人員的銷(xiāo)售進(jìn)度數(shù)據(jù)大屏。

二、大屏設(shè)計(jì)常見(jiàn)問(wèn)題

①數(shù)據(jù)太多；大而全，讓看的人無(wú)法一下子找到重點(diǎn)，看的累自然沒(méi)人看，也就失去看板的價(jià)值。

②數(shù)據(jù)太少且分散；無(wú)法在一張大屏看板里，找到需要被結(jié)合著一起看的幾個(gè)數(shù)據(jù)指標(biāo)/維度，無(wú)法組織起來(lái)思考，給人的價(jià)值密度就很低，失去看板突出數(shù)據(jù)重點(diǎn)的價(jià)值。

③數(shù)據(jù)表達(dá)方式有問(wèn)題（沒(méi)有選擇合適的圖表，或是數(shù)據(jù)口徑不統(tǒng)一，讓人看的云里霧里，沒(méi)有邏輯性）。

三、大屏設(shè)計(jì)的思路

大屏的設(shè)計(jì)思路，其實(shí)要明白客戶的本質(zhì)需求，是為了宣傳介紹還是為了實(shí)際使用方便，這個(gè)很重要，因?yàn)檫@個(gè)影響到最終想要呈現(xiàn)的維度和UI設(shè)計(jì)的風(fēng)格。

我負(fù)責(zé)的這個(gè)項(xiàng)目主要是為了宣傳介紹，是為了響應(yīng)國(guó)家的政策，對(duì)所管轄區(qū)域進(jìn)行信息化的改革。

客戶其實(shí)不能給我們提供太多的需求，需要我們自己去了解這個(gè)行業(yè)，去挖掘需求，思考我們能提供給客戶那些有用的價(jià)值，這個(gè)是和我們正常做產(chǎn)品的思維邏輯是不一樣的。

因此就像我開(kāi)頭說(shuō)那樣，在需求不明確的時(shí)候，產(chǎn)品經(jīng)理需要引導(dǎo)和深入挖掘項(xiàng)目的需求，怎么給客戶，客戶又怎么給上級(jí)領(lǐng)導(dǎo)講一個(gè)好故事才是最重要的。

所以在設(shè)計(jì)大屏?xí)r，多以客戶的角度思考問(wèn)題，想象客戶在給上級(jí)領(lǐng)導(dǎo)講解這個(gè)大屏?xí)r，該以什么角度，什么思路去講，才能讓其了解我們所做的這些亮點(diǎn)和成績(jī)。

通過(guò)這次設(shè)計(jì)和總監(jiān)的指導(dǎo)，我總結(jié)了以下三步：

1. 梳理業(yè)務(wù)需求與使用場(chǎng)景

大屏設(shè)計(jì)要避免為了展示而展示，排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù)，所以大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。

那什么是業(yè)務(wù)需求呢？業(yè)務(wù)需求就是要解決的問(wèn)題或達(dá)成的目標(biāo)。

我負(fù)責(zé)的這個(gè)項(xiàng)目，拿設(shè)備管理平臺(tái)舉個(gè)例子，主要是為了統(tǒng)一接入并管理所有的硬件設(shè)備，并在大屏中進(jìn)行可視化的展示。

2. 根據(jù)業(yè)務(wù)場(chǎng)景抽取關(guān)鍵指標(biāo)

可視化大屏一般由中心GIS地圖或三維模型和兩側(cè)的信息統(tǒng)計(jì)組成。

中心GIS地圖，一般展示一個(gè)地球、中國(guó)地圖或?qū)?yīng)省份的地圖，地圖中展示一些點(diǎn)位要素的分布或相關(guān)重點(diǎn)區(qū)域的分布。

除了這個(gè)就是兩側(cè)統(tǒng)計(jì)的信息，可以用腦圖將跟這個(gè)大屏主題有關(guān)的信息全部進(jìn)行羅列，要從不同角度，全面的思考。

地圖的兩側(cè)可以展示統(tǒng)計(jì)信息，最多可分為6塊內(nèi)容，但不一定都需要展示6塊，具體要根據(jù)場(chǎng)景和相關(guān)統(tǒng)計(jì)信息多少來(lái)決定。

拿設(shè)備管理大屏舉個(gè)例子，我們先羅列出有關(guān)設(shè)備的所有可統(tǒng)計(jì)展示的維度：

根據(jù)用戶的需求來(lái)篩選展示的維度，確定關(guān)鍵指標(biāo)，上面也說(shuō)了，這個(gè)大屏重在宣傳介紹，而非實(shí)際使用，并且展示的維度要讓用戶好理解，并且讓自己的講解匯報(bào)更加的容易通順。

因此從以上15個(gè)維度，按照這樣的思維，我們很容易的可以排除3、6、7、9、10、11、14、15，為什么呢？

• 3；這個(gè)統(tǒng)計(jì)維度太技術(shù)，自己不好講客戶也不好理解。
• 6、7、9、10、11；這些維度太細(xì)了，而且這些維度是設(shè)備運(yùn)維的人關(guān)心的，而非客戶所關(guān)心的。
• 14、15；如果是公司內(nèi)部使用的物聯(lián)網(wǎng)平臺(tái)，可以放這兩個(gè)展示維度，將使用頻率較高的功能模塊放出來(lái)，方便他們快速進(jìn)入和使用，但這個(gè)平臺(tái)重在宣傳。

然后按照維度從大到小的順序，有時(shí)也可以按照總分的形式排列和講解，就是一個(gè)模塊是總的統(tǒng)計(jì)，其余的模塊都是這個(gè)模塊的細(xì)分統(tǒng)計(jì)，數(shù)字對(duì)應(yīng)模塊一次排列即可，會(huì)發(fā)現(xiàn)這樣給用戶講解也會(huì)非常通順。

大概可以這樣給客戶講：

設(shè)備管理平臺(tái)，主要是為了方便管理XX地區(qū)所有的設(shè)備，讓我們?cè)O(shè)備管理更加信息化、智能化。

首先我們制定相關(guān)設(shè)備接入?yún)f(xié)議，只要滿足協(xié)議，就可以很快捷的接入第三方設(shè)備。

設(shè)備接入后，通過(guò)后臺(tái)的智能分析，可以分析出項(xiàng)目上設(shè)備數(shù)據(jù)運(yùn)行的情況，運(yùn)行異常的設(shè)備，會(huì)通過(guò)短信、釘釘、平臺(tái)推送的方式推送至相應(yīng)運(yùn)維人員，并通過(guò)工單的管理，方便查看和管理設(shè)備運(yùn)維的流程。

相關(guān)運(yùn)維人員獲得信息后，不會(huì)像以前一樣，直接去到現(xiàn)場(chǎng)進(jìn)行問(wèn)題的排查，而且通過(guò)智能診斷，診斷出設(shè)備具體是因?yàn)殡娏?、傳感器故障、通訊等?wèn)題引起的，可以針對(duì)性的做出處理，并且現(xiàn)在運(yùn)維人員可以進(jìn)行遠(yuǎn)程的指令發(fā)送和固件升級(jí)，可極大的提高了設(shè)備運(yùn)維的效率，保證平臺(tái)數(shù)據(jù)的平穩(wěn)運(yùn)行。

3. 用合適的可視化圖形表達(dá)

當(dāng)確定好分析維度后，事實(shí)上我們所能選用的圖表類(lèi)型也就基本確定了。接下來(lái)我們只需要從少數(shù)幾個(gè)圖表里篩選出最能體現(xiàn)我們?cè)O(shè)計(jì)意圖的那個(gè)就好了。選定圖表注意事項(xiàng)：易理解、可實(shí)現(xiàn)。

①易理解：可視化設(shè)計(jì)要考慮大屏最終用戶，可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過(guò)度理解，因而選定圖表時(shí)要理性，避免為了視覺(jué)上的效果而選擇一些對(duì)用戶不太友好的圖形。

②可實(shí)現(xiàn)：我們需要了解現(xiàn)有數(shù)據(jù)的信息、規(guī)模、特征、聯(lián)系等，然后評(píng)估數(shù)據(jù)是否能夠支撐相應(yīng)的可視化表現(xiàn)。

四、推薦一些常用網(wǎng)站

①數(shù)字像素

之前名稱(chēng)為 ToB design，后改名為數(shù)字像素，不只是大屏，還有一些B端的后臺(tái)管理系統(tǒng)，還提供一些素材的下載，也可以在這個(gè)平臺(tái)學(xué)習(xí)一些三維可視化的課程。

地址：https://www.shuzixs.com/#/home

②Echarts

提供豐富的圖表展示，前端可以直接引用代碼開(kāi)發(fā)。

地址：https://echarts.apache.org/zh/index.html

③AntV

和echarts類(lèi)似，提供豐富的圖表展示，前端可以直接引用代碼開(kāi)發(fā)。

地址：https://g2plot.antv.antgroup.com/examples#area-basic

④圖撲數(shù)

百個(gè)2D、3D的可視化案例，供學(xué)習(xí)和設(shè)計(jì)參考。

地址：https://www.hightopo.com/demos/index.html

⑤useAnImations

地址：https://useanimations.com/

網(wǎng)站提供很多動(dòng)態(tài)圖標(biāo)樣式可以參考，并可免費(fèi)下載。

⑥Loading

地址：https://loading.io/

該網(wǎng)站提供各種各樣的loading動(dòng)畫(huà)，供設(shè)計(jì)者選擇。

⑦RayData

地址：https://web.raykite.com/

提供豐富的模板，自己可以免費(fèi)搭建大屏展示。

⑧阿里圖標(biāo)庫(kù)

地址：https://www.iconfont.cn/

網(wǎng)站支持免費(fèi)下載SVG、AI、PNG類(lèi)型的圖標(biāo)，產(chǎn)品和UI常用的網(wǎng)站之一。