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

(資料圖片僅供參考)

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

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

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

一、大屏可視化價值

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

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

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

二、大屏設(shè)計常見問題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

大概可以這樣給客戶講：

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

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

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

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

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

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

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

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

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

①數(shù)字像素

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

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

②Echarts

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

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

③AntV

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

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

④圖撲數(shù)

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

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

⑤useAnImations

地址：https://useanimations.com/

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

⑥Loading

地址：https://loading.io/

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

⑦RayData

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

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

⑧阿里圖標(biāo)庫

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

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

本文由@晨陽產(chǎn)品筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。