數據可視化大屏經典案例https:// ** .zhihu.com/video/1212399880146223104

01

寫在前面

伴隨著大數據產業鏈的迅猛發展，許多公司都逐漸運用數據數據可視化。因此數據數據可視化設計，如今肯定是受歡迎的設計之一。許多UI設計師忽然會收到企業數據數據可視化設計的要求，假如不了解數據數據可視化設計，肯定是一頭霧水，不知道從何下手。我試著簡略的將我最近做了的實例開展紀錄共享，存在的不足熱烈歡迎各位隨時隨地溝通交流。

02

文章正文

最先放的是新項目重做前的網頁頁面：

要求詳細介紹

某某運用云，分成五大云服務平臺控制模塊:云空間綜合調度、數據查看安全通道、數據運用解決、數據查看安全通道、管理方法理運作維護保養。每一個大控制模塊下?面有多個分系統。

數據可視化?屏主頁必須展現的主要內容包含:

1. 全局性數據

云服務平臺的數據總產量，及其 4 個關鍵關心數據項，2 個主次關心數據項。

2. 云服務平臺的五?大控制模塊

1. 云空間綜合調度

2. 數據查看安全通道

3.數據運用解決理

4. 數據存儲系統

5. 管理方法理運作維護保養（僅有2個tab切換連接）

3. 檢索作用

檢索種類分成 6 個種類，默認設置選定“綜合性”種類開展檢索;

4. 重點關注數據信息內容按指標值分多層次展現

初始圖上的層面包含:指標值、地圖、地區排名、部?門、類型;

5. 云導航

需求分析

剖析大屏可視化的一些關聯性：

顯示屏大：大屏幕一般全是多屏拼接，總體顯示屏使用面積大。

觀距遠：客戶必須站遠方收看顯示屏，要確保數據文本清楚可見。

互動弱：根據計算機早已不能滿足大屏幕互動要求，如今也是有一部分逐漸選用ipad、手機上、激光燈等方法。

視覺強：背景顏色多選用重色，烘托突顯數據，更強的為觀眾傳遞數據信息內容。

一屏一內容：一屏內容，表明一件關鍵事，統計分析好它的有關數據，防止別的的影響。

融合大屏幕的一些關聯性特性對于見到的網上舊版設計，剖析存在的不足。

1.合理布局錯亂，造成視覺不平衡，看不出來網頁頁面層級。

2.深藍色為主導色彩 淡黃色裝點色調看起來較為單一沒有標準。

3.圖表較為單一，不可以合理傳遞數據信息內容。

融合這種問題開展視覺重做，最先提升網頁布局，根據剖析對網頁頁面再次合理布局，如下圖：

選用柵格化對稱性合理布局 讓總體視覺上下均衡。

視覺設計：

掌握要求，融合數據，剖析出關鍵數據主次數據、總產量數據細分化數據、各數據的層面這些，根據掌握這種可以先設計出一個合理布局模板，還可以在紙上畫出去，合理布局可以在設計全過程中隨時隨地調節。

設計的設計風格，一提及數據數據可視化大伙兒通常能想起高新科技、數據、深藍色等一些廣泛關鍵字。跟顧客溝通交流以后，掌握到客戶滿意度是：想要做一個現代感強較為酷炫的視覺實際效果 ，這也迎合以上這種關鍵字，對于這種關鍵字的提煉出，此外融合大屏幕的應用情景，背景顏色一般會采用淺色調，數據轉變一般會挑選高亮度色彩，讓視覺能夠更好地對焦數據的轉變，也會較節電。

主題元素設計構思環節；

原照：我國地圖首圖控制模塊欠缺質感，如下圖：

重做后：地圖主色改成科技藍，在原來地圖上提升外發亮和雙層黑影累加，使其提升地圖的層次感，地圖上提升科技線條升高的實際效果意味著每一個大城市數據轉變的提高，地圖環境選用較為減弱的旋轉線框環形，烘托地圖行為主體，時的圖像更為豐富多彩。

數據圖表分拆:

在選中數據圖表以前，最先要明確圖表相互關系，可以從下列四個層面開展思索剖析：

1.聯絡：數據中間的關聯性；

2.遍布：指標值里的數據關鍵集中化在什么范疇、主要表現出什么樣的規律性；

3.較為：數據中間具有哪種差別、差異具體反映在哪幾個方面；

4.組成：指標值里的數據都由哪些部份構成、每一部分占有率怎樣；

當明確好剖析層面后，實際上大家能夠采用的圖表種類也就基本上明確了。下面大家只要從為數不多圖表里挑選出充分體現大家設計用意的那一個就好了。

傳統式的圖表例如echarts上圖表在視覺上展現很有可能并不是很美觀大方漂亮，可依據選用的圖表在其基本以上開展裝飾設計，總而言之選中圖表最重要的兩個點便是：易了解、可完成。

易了解：便是要考慮到終端用戶，數據可視化結果應該是一看就懂，不用考慮和過分了解，因此選中圖表時要客觀，防止為了更好地視覺上的功效而挑選一些對客戶不太和諧的圖型及原素。

可完成：主要是跟開發設計早期溝通交流好完成方法，一般都選用開源系統組件庫的占多數例如echarts組件庫，大家設計的圖型圖表，要開發設計可以完成。具體工作上，一些可視化效果開發設計用編碼寫非常容易完成，實際效果也非常好，但這種實際效果設計師用Ps/Ai/Ae這種專用工具仿真模擬的時候會發覺較為艱難；一樣的，一些實際效果設計師用設計專用工具可以隨便完成，但開發設計要用編碼落地式卻十分艱難，因此大屏幕設計中跟開發設計常溝通交流十分關鍵，大家必須確立什么地方設計師可以肆意充分發揮，什么地方必須慎重設計！一個新項目總會有周期時間與費用預算限定，不容易無期限的改動梯度下降法，因此設計師在這兒必須把握關鍵，有選擇，不愛鉆牛角尖、死磕沒放。

大城市排名危害視覺數據多了，會對地圖展現導致危害，跟顧客溝通交流需提升大城市排名數量，只展現前五個，擺脫傳統式條形圖的展現方式選用充電電池晶格常數的展現方式。

從網頁的總體看一下，早已有三處使用了條形圖，柱形圖，假如這兒或是條形圖，那麼網頁頁面看上去會很簡單，圖表都沒有主要表現出多元性，因此如今設計要反映圖表的多樣化也可以有排名的形象化展現。下列圖表選用高新科技園盤的方式，應用科技線條的升高情況意味著排名的順序，全部圖表都選用數據降序來展現排名更為形象化。

最終另附：最后視覺和動畫特效圖

03

—

匯總

大屏幕設計的主要流程：

1、需求分析

2、提升合理布局

3、界定設計關鍵字

4、建立首圖展現設計風格

以上就是我對數據可視化大屏的實例匯總，吧啦吧啦這么多，總算寫完了，期待能幫助到你。此外也有許多地區沒有牽涉到，包含實際設計的實際操作方法、選擇圖型原素的具體做法，及其在各種各樣大屏幕中所需求的比較應的部件等，在巨大的可視化大屏設計系統軟件中，也有許多值得學習參照和改進的專業知識，熱烈歡迎各位大佬糾正，大伙兒一起努力。

—— END ——