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

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

而這個項目，沒有明確的標準，更多的是需要我們引導和挖掘用戶的需求，怎么將這個故事給講好。

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

一、大屏可視化價值

讓業務決策有據可依是數據可視化大屏的核心價值，主要體現在兩個方面：

①利用數據指標進行持續監測和預警，有異常值的時候能夠及時發出警報，保證業務的正常進行，比如下面的水文監測大屏：

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

二、大屏設計常見問題

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

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

③數據表達方式有問題（沒有選擇合適的圖表，或是數據口徑不統一，讓人看的云里霧里，沒有邏輯性）。

三、大屏設計的思路

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

我負責的這個項目主要是為了宣傳介紹，是為了響應國家的政策，對所管轄區域進行信息化的改革。

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

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

所以在設計大屏時，多以客戶的角度思考問題，想象客戶在給上級領導講解這個大屏時，該以什么角度，什么思路去講，才能讓其了解我們所做的這些亮點和成績。

通過這次設計和總監的指導，我總結了以下三步：

1. 梳理業務需求與使用場景

大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業務，所以大屏設計是在充分了解業務需求的基礎上進行的。

那什么是業務需求呢？業務需求就是要解決的問題或達成的目標。

我負責的這個項目，拿設備管理平臺舉個例子，主要是為了統一接入并管理所有的硬件設備，并在大屏中進行可視化的展示。

2. 根據業務場景抽取關鍵指標

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

中心GIS地圖，一般展示一個地球、中國地圖或對應省份的地圖，地圖中展示一些點位要素的分布或相關重點區域的分布。

除了這個就是兩側統計的信息，可以用腦圖將跟這個大屏主題有關的信息全部進行羅列，要從不同角度，全面的思考。

地圖的兩側可以展示統計信息，最多可分為6塊內容，但不一定都需要展示6塊，具體要根據場景和相關統計信息多少來決定。

拿設備管理大屏舉個例子，我們先羅列出有關設備的所有可統計展示的維度：

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

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

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

然后按照維度從大到小的順序，有時也可以按照總分的形式排列和講解，就是一個模塊是總的統計，其余的模塊都是這個模塊的細分統計，數字對應模塊一次排列即可，會發現這樣給用戶講解也會非常通順。

大概可以這樣給客戶講：

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

首先我們制定相關設備接入協議，只要滿足協議，就可以很快捷的接入第三方設備。

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

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

3. 用合適的可視化圖形表達

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

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

②可實現：我們需要了解現有數據的信息、規模、特征、聯系等，然后評估數據是否能夠支撐相應的可視化表現。

四、推薦一些常用網站

①數字像素

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

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

②Echarts

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

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

③AntV

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

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

④圖撲數

百個2D、3D的可視化案例，供學習和設計參考。

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

⑤useAnImations

地址：https://useanimations.com/

網站提供很多動態圖標樣式可以參考，并可免費下載。

⑥Loading

地址：https://loading.io/

該網站提供各種各樣的loading動畫，供設計者選擇。

⑦RayData

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

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

⑧阿里圖標庫

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

網站支持免費下載SVG、AI、PNG類型的圖標，產品和UI常用的網站之一。