2020-3-27 資深UI設計者
隨著大數據產業的蓬勃發展，很多企業都開始應用數據可視化。所以數據可視化設計，絕對是熱門的設計之一。很多 UI 設計師突然會接到公司數據可視化設計的需求，如果不了解數據可視化設計，肯定是一頭霧水，不知從何入手。本文結合最近設計案例，分享大屏可視化設計過程中遇到的一些問題以及設計思路，供大家一起交流與學習。
△ 最終動態效果圖
首先放的是項目改版前的頁面：
1. 需求介紹
某某應用云，分為五大云平臺模塊：云端綜合調度、數據查詢通道、數據應用處理、數據存儲管理、管理運行維護。每個大模塊下?有若干個子系統。
可視化?屏首頁需要展示的內容包括：
2. 需求分析
分析大屏可視化的一些共性：
結合大屏的一些共性特點針對看到的線上舊版本設計，分析存在的問題。
3. 布局
整合數據，分析出主要數據、次要數據、總量數據、細分數據、各數據的維度等等。首先優化頁面布局，可以先在紙上畫一畫，然后腦子里有大概思路以后再用電腦繪制，如下圖：
采用柵格化對稱布局，讓整體視覺左右平衡。
4. 風格
一提到數據可視化大家往往能想到科技、數據、藍色等一些普遍關鍵詞。
了解到客戶是想做一個科技感強、炫酷的視覺效果。可以在網上找一些效果圖或是自己曾經做過的案例供客戶選擇，確定一個大致的風格，然后結合具體的業務場景進行設計。
5. 顏色
顏色上結合產品使用場景，以及整個產品調性還是以藍色為主，背景選用深色調，讓視覺更好聚焦，內容部分采用比較透亮的藍色系，保證內容與背景有一定的對比關系，便于業務信息傳達。
6. 主體地圖
地圖為大屏的主要展示內容，首先分析展示的目的是為了看清各個城市間的不同分布情況，和城市數據的匯集效果。
如圖：
改版前：地圖過于單薄，沒有立體感，太平缺乏層次，顏色黃色不符合產品調性。
改版后：主色調改為科技藍，在原有地圖上增加外發光和多層陰影疊加，增加地圖的立體感，地圖上增加科技線條上升的效果代表每個城市數據變化的提升，地圖背景采用比較弱化的轉動線條圓形，襯托地圖主體，使得畫面更加豐富。
7. 地圖效果的實現方法
首先用 ps 拉框助手新建一個山東的地圖（拉框助手的使用獲取方法可以參照上篇文章）。
完成后會得到一個叫 map 文件夾的地圖分層文件，如圖所示。這里需要對每個城市的顏色進行調整，為了區分每個城市之間的數據不同關系。
調整完塊之間的顏色后，就需要給地圖整體增加立體效果。
首先，是整體給地圖加了一個描邊和外發光。描邊是為了強化地圖邊緣，外發光是為了地圖與背景有一個區分。
其次為了增加地圖立體感，需要給地圖增加多層陰影疊加的效果。復制現有形狀層，拼合成一個山東省的地圖，如下圖：
最后，把拼合好的圖層移動到 map 文件夾下面，陰影可以添加多層，這里針對每一層進行不同顏色大小的調整，就是下面的這種效果了，地圖的體積厚度感也就出來了。這里只是提供一個大概的思路，大家可以多去嘗試。
整體地圖效果調整完成后，就是給地圖增加些紋理，和上升線條這些細節上的效果了。紋理可以用圖案疊加，或者找一張紋理圖剪切蒙版實現，最后再添加上升線條的效果，地圖的效果就完成了。
最后加上線條上升的動態效果：
8. 數據圖表拆分
在選定數據圖表之前，首先要確定圖表之間的關系，可以從以下四個維度進行思考分析：
可以參照下面這個圖：
△ 圖片來自于網絡，侵刪
當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里篩選出最能體現我們設計意圖的那個就好了。
傳統的圖表比如 echarts 圖表在視覺上展示可能不是很美觀好看，可根據選擇的圖表在其基礎之上進行美化設計，總之選定圖表最重要的兩個點就是：易理解、可實現。
易理解：就是要考慮最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形及元素。
可實現：主要是跟開發前期溝通好實現方式，一般都采用開源組件庫的居多，比如 echarts 組件庫，我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用 Ps/Ai/Ae 這些工具模擬時會發現比較困難。同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難，所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計。一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。
案例中在圖表選擇上，強化科技感元素，條形圖打破傳統條形圖的展示形式，采用電池晶格的展示形式，在保持圖表功能的同時更加凸顯科技感。
從頁面的整體看，已經有兩處用到了條形圖、柱狀圖，如果這里還是條形圖，那么頁面看起來會很單調，圖表也沒有表現出多樣性，所以現在設計要體現圖表的多樣性也能夠有排名的直觀呈現。以下圖表采用科技圓盤的形式，運用科技線條的上升狀態代表排名的先后順序，所有圖表都采用數據降序來展示排名更加直觀。
改版前的圖標樣式比較單一，改版后針對每組數據不同的對比形式，采用比較貼合的圖表進行展示，篇幅原因就不一一做展示了。
附上最終視覺效果圖：
大屏設計需要注意的點：
以上是我對數據可視化大屏的案例總結，希望能幫助到你。除此之外還有很多地方沒有涉及到，包括具體設計的操作方式、選取圖形元素的具體方法，以及在各種大屏中所需要的相對應的組件等，在龐大的可視化大屏設計系統中，還有很多值得學習參考和優化的知識，歡迎溝通交流，大家一起努力。
文章來源：優設