在G端項目中，如何做好前端數(shù)據(jù)大屏的設計，是一個值得我們思考的問題。作者結合自己的實際項目經(jīng)驗，與大家共同探討G端可視化大屏的思路，希望對你有所幫助。
(資料圖片僅供參考)
最近在負責一個G端項目，這個項目不同于我之前做的礦山、水利行業(yè)監(jiān)測平臺，以往的行業(yè)因發(fā)展了多年，有政策指引、行業(yè)標準，也有競品可參考分析，需求相對明確。
而這個項目，沒有明確的標準，更多的是需要我們引導和挖掘用戶的需求，怎么將這個故事給講好。
項目分為前端數(shù)據(jù)大屏和后臺數(shù)據(jù)管理，最難的就是前端數(shù)據(jù)大屏的設計，在被總監(jiān)批評多次之后，我總結到了大屏設計的思路，分享給大家！
一、大屏可視化價值
讓業(yè)務決策有據(jù)可依是數(shù)據(jù)可視化大屏的核心價值，主要體現(xiàn)在兩個方面：
①利用數(shù)據(jù)指標進行持續(xù)監(jiān)測和預警，有異常值的時候能夠及時發(fā)出警報，保證業(yè)務的正常進行，比如下面的水文監(jiān)測大屏：
②根據(jù)合適的數(shù)據(jù)模型，發(fā)現(xiàn)并分析業(yè)務問題以及發(fā)展趨勢，及時做出解決措施。不同的業(yè)務層級需要的可視化大屏是不一樣的，比如適合管理層的核心管理駕駛艙，適合銷售人員的銷售進度數(shù)據(jù)大屏。
二、大屏設計常見問題
①數(shù)據(jù)太多；大而全，讓看的人無法一下子找到重點，看的累自然沒人看，也就失去看板的價值。
②數(shù)據(jù)太少且分散；無法在一張大屏看板里，找到需要被結合著一起看的幾個數(shù)據(jù)指標/維度，無法組織起來思考，給人的價值密度就很低，失去看板突出數(shù)據(jù)重點的價值。
③數(shù)據(jù)表達方式有問題（沒有選擇合適的圖表，或是數(shù)據(jù)口徑不統(tǒng)一，讓人看的云里霧里，沒有邏輯性）。
三、大屏設計的思路
大屏的設計思路，其實要明白客戶的本質(zhì)需求，是為了宣傳介紹還是為了實際使用方便，這個很重要，因為這個影響到最終想要呈現(xiàn)的維度和UI設計的風格。
我負責的這個項目主要是為了宣傳介紹，是為了響應國家的政策，對所管轄區(qū)域進行信息化的改革。
客戶其實不能給我們提供太多的需求，需要我們自己去了解這個行業(yè)，去挖掘需求，思考我們能提供給客戶那些有用的價值，這個是和我們正常做產(chǎn)品的思維邏輯是不一樣的。
因此就像我開頭說那樣，在需求不明確的時候，產(chǎn)品經(jīng)理需要引導和深入挖掘項目的需求，怎么給客戶，客戶又怎么給上級領導講一個好故事才是最重要的。
所以在設計大屏時，多以客戶的角度思考問題，想象客戶在給上級領導講解這個大屏時，該以什么角度，什么思路去講，才能讓其了解我們所做的這些亮點和成績。
通過這次設計和總監(jiān)的指導，我總結了以下三步：
1. 梳理業(yè)務需求與使用場景大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業(yè)務，所以大屏設計是在充分了解業(yè)務需求的基礎上進行的。
那什么是業(yè)務需求呢？業(yè)務需求就是要解決的問題或達成的目標。
我負責的這個項目，拿設備管理平臺舉個例子，主要是為了統(tǒng)一接入并管理所有的硬件設備，并在大屏中進行可視化的展示。
2. 根據(jù)業(yè)務場景抽取關鍵指標可視化大屏一般由中心GIS地圖或三維模型和兩側(cè)的信息統(tǒng)計組成。
中心GIS地圖，一般展示一個地球、中國地圖或?qū)》莸牡貓D，地圖中展示一些點位要素的分布或相關重點區(qū)域的分布。
除了這個就是兩側(cè)統(tǒng)計的信息，可以用腦圖將跟這個大屏主題有關的信息全部進行羅列，要從不同角度，全面的思考。
地圖的兩側(cè)可以展示統(tǒng)計信息，最多可分為6塊內(nèi)容，但不一定都需要展示6塊，具體要根據(jù)場景和相關統(tǒng)計信息多少來決定。
拿設備管理大屏舉個例子，我們先羅列出有關設備的所有可統(tǒng)計展示的維度：
根據(jù)用戶的需求來篩選展示的維度，確定關鍵指標，上面也說了，這個大屏重在宣傳介紹，而非實際使用，并且展示的維度要讓用戶好理解，并且讓自己的講解匯報更加的容易通順。
因此從以上15個維度，按照這樣的思維，我們很容易的可以排除3、6、7、9、10、11、14、15，為什么呢？
3；這個統(tǒng)計維度太技術，自己不好講客戶也不好理解。6、7、9、10、11；這些維度太細了，而且這些維度是設備運維的人關心的，而非客戶所關心的。14、15；如果是公司內(nèi)部使用的物聯(lián)網(wǎng)平臺，可以放這兩個展示維度，將使用頻率較高的功能模塊放出來，方便他們快速進入和使用，但這個平臺重在宣傳。然后按照維度從大到小的順序，有時也可以按照總分的形式排列和講解，就是一個模塊是總的統(tǒng)計，其余的模塊都是這個模塊的細分統(tǒng)計，數(shù)字對應模塊一次排列即可，會發(fā)現(xiàn)這樣給用戶講解也會非常通順。
大概可以這樣給客戶講：
設備管理平臺，主要是為了方便管理XX地區(qū)所有的設備，讓我們設備管理更加信息化、智能化。
首先我們制定相關設備接入?yún)f(xié)議，只要滿足協(xié)議，就可以很快捷的接入第三方設備。
設備接入后，通過后臺的智能分析，可以分析出項目上設備數(shù)據(jù)運行的情況，運行異常的設備，會通過短信、釘釘、平臺推送的方式推送至相應運維人員，并通過工單的管理，方便查看和管理設備運維的流程。
相關運維人員獲得信息后，不會像以前一樣，直接去到現(xiàn)場進行問題的排查，而且通過智能診斷，診斷出設備具體是因為電量、傳感器故障、通訊等問題引起的，可以針對性的做出處理，并且現(xiàn)在運維人員可以進行遠程的指令發(fā)送和固件升級，可極大的提高了設備運維的效率，保證平臺數(shù)據(jù)的平穩(wěn)運行。
3. 用合適的可視化圖形表達當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個圖表里篩選出最能體現(xiàn)我們設計意圖的那個就好了。選定圖表注意事項：易理解、可實現(xiàn)。
①易理解：可視化設計要考慮大屏最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
②可實現(xiàn)：我們需要了解現(xiàn)有數(shù)據(jù)的信息、規(guī)模、特征、聯(lián)系等，然后評估數(shù)據(jù)是否能夠支撐相應的可視化表現(xiàn)。
四、推薦一些常用網(wǎng)站
①數(shù)字像素
之前名稱為 ToB design，后改名為數(shù)字像素，不只是大屏，還有一些B端的后臺管理系統(tǒng)，還提供一些素材的下載，也可以在這個平臺學習一些三維可視化的課程。
地址：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的可視化案例，供學習和設計參考。
地址：https://www.hightopo.com/demos/index.html
⑤useAnImations
地址：https://useanimations.com/
網(wǎng)站提供很多動態(tài)圖標樣式可以參考，并可免費下載。
⑥Loading
地址：https://loading.io/
該網(wǎng)站提供各種各樣的loading動畫，供設計者選擇。
⑦RayData
地址：https://web.raykite.com/
提供豐富的模板，自己可以免費搭建大屏展示。
⑧阿里圖標庫
地址：https://www.iconfont.cn/
網(wǎng)站支持免費下載SVG、AI、PNG類型的圖標，產(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)理平臺僅提供信息存儲空間服務。
