數據可視化是目前對數據展示最常用的方式。
數據的可視化設計有助於將複雜的數據，用最易理解的方式展示在用戶的面前。
數據可視化在中後臺的設計中很常見，通常主要用於分析和決策，對實時性要求不高，從一部分功能上講，其實也有著報告數據的作用。
設計以 2D 平面展示為主，幾乎不會有 3D 設計出現，視覺設計更注重簡單直接，一目瞭然。
例如：米撲財富 - 小白理財
製作數據大屏
數據大屏在上面的基礎上，對實時性要求較高，會更強調數據展示的效果，這也是會流行 FUI 未來主義科幻風格設計的原因，追求視覺上的酷炫效果。
設計上 2D、3D 皆有，還可以伴隨著動效搭配一些可交互的設計，來展示數據之間聯動。
數據大屏的製作可能會包含一些動效交互及3D建模渲染，一般中小型公司通常技術能力有限。如果接到設計製作數據大屏的任務，不妨先和產品技術等一起就表現方式和技術實現等方面做個探討，不要直接進行設計工作，貿然追求超燃的特效，避免最後因為無法實現導致無謂的返工。
互聯網大公司的可視化服務
1. 百度 Suger
Sugar 是百度雲推出的數據可視化服務平臺，目標是解決報表和大屏的數據可視化問題，解放數據可視化系統的開發人力。
上圖是官網提供的案例，界面風格是常規的 FUI 風格。
Sugar 提供了組件編輯平臺，進入平臺後設計師可以直接進行組件的拖拽編輯，打造自己所需要的大屏界面。
在設計師完成後就可以直接交接給開發，進行各類數據源的接入。
這種形式無疑節約了很多的開發時間，設計師也不用再擔心前端開發的效果與自己的差之千里。對於時間緊迫或者自身技術能力不足的項目很適合。
在組件的提供上，Suger 提供了很多的 2D 和 3D 組件，在一定程度上也可以自定義組件。還可以設置數據下鑽和圖表聯動，增強動效交互效果。
平臺的編輯界面總體來說還是很方便設計師適應的，與一般的設計軟件界面差不多。
上方是一些工具，左側是圖層的排布，右側則是一些組件的屬性。設計師可以很快地適應並應用，沒有學習成本，也不會有太高的操作難度。
但是 Suger 在 3D 方面尚有不足，個人感覺沒有阿里雲 DataV、騰訊 RayData 的 3D 效果突出。
最後一點，Suger 目前處於推廣期，推廣期間是免費使用的。
2. 阿里雲DataV
DataV 最著名的一個應用項目應該就是天貓雙11的數據大屏了，每一年都驚豔了無數聚焦於雙11活動的人們。
2019 年的雙11數據大屏設計更是被稱為數據經濟時代的全球清明上河圖。
同樣的，DataV 也提供了一個編輯平臺，連該平臺本身的界面設計也充滿了未來科技感，可以根據模板新建，也可以新建空白頁面。
基本操作模式與 Suger 類似，設計師先建立畫面，後開發進行數據源的接入。
編輯界面的操作難度也不高，稍微瞭解一下，就可以快速入手。
與 Suger 相比，個人更為喜歡 DataV。
DataV 的設計風格與動效交互都會略好一點。
一般企業進行數據大屏的設計項目，其目的更趨向於對外展示。
DataV 在效果的酷炫程度上會更符合領導的要求。
只是 DataV 目前分為基礎版、企業版和專業版收費服務。個人申請有 30 天的基礎版試用期。
具體選擇需要看公司自身內部需求而定。
3. 騰訊RayData
RayData 是我跟隨我們領導去參觀騰訊在寧波的分公司進行了解。
當時展示的項目是深圳的城市大腦，將城市管理集為一體，包含交通、醫療、警務等等。
與其在官網展示的內容一致，只不過官網是截圖，而當時參觀時是有個小姐姐拿著 ipad 一邊交互一邊跟我們講解。
交互與數據聯動的效果很好，當時我們領導很喜歡這種效果。
整體來說，RayData 的數據展示效果也是相當不錯的。
但是 RayData 目前處於內側階段，也沒有平臺提供編輯功能，當前主要的模式是付費定製。
技術開源庫
瞭解一些技術開源庫
一方面可以參照其圖表案例，瞭解各類不同圖表的展示方式;
另一方面是為了保證自己設計的可實現度，不然再炫酷的設計效果如果因為技術開發能力無法實現也是徒勞的。
1. Echarts -百度開源可視化庫
這是一個使用 JavaScript 實現的開源可視化庫，可以流暢地運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器。
4.0 版本還提供了對微信小程序的適配。DataV 中的一些組件也是依賴 Echarts 生成的。
Echarts 提供的圖表很多樣化，幾乎包含常用的、不常用的各類圖表樣式。
且提供有可交互組件，可以對數據進行多維度數據篩取、視圖縮放、展示細節等交互操作。
2. Mapv – 百度地理信息可視化開源庫
用以展示大量地理信息點、線、面的數據。
創建需先上傳地理信息數據，再設置地圖樣式後，即可下載保存。目前僅開放 Beta 版本。
3. 螞蟻AntV
螞蟻金服的 Ant Design，作為設計師應該都是較為熟悉的。
AntV 是螞蟻 Ant 系列下的一個數據可視化解決方案。分為 G2、G6、F2、L7 不同產品，分別對應不同的特性需求。
4. D3.js – 數據驅動的文檔
D3js 是一個基於數據來操作文檔的 JavaScript 庫，適宜用來建造各類可視化圖表。
支持大型數據集和交互與動畫的動態行為。
5. billboard.js – 簡易界面的可交互圖表庫
這是一個基於 D3 V4+ 的 JavaScript 的圖表庫。可以對數據進行視圖縮放、展示細節等交互操作。
6. FusionCharts
FusionCharts 提供了 100 多個交互式圖表和 2000 多個數據驅動的地圖，對不同平臺都可兼容。
同時提供了前端和後端各類框架及代碼語言的插件，來方便開發快速入門。不過這款是收費的，根據不同的使用環境定價不同。
設計輔助工具
1. Kitchen – 螞蟻金服官方插件
這是一個 sketch 的插件工具。
Iconfont 圖標庫我比較常用，可以直接在 sketch 中搜索拖拽，不用再去打開網頁查找了。其次數據填充也比較常用，自動填充時間、地址、城市等挺方便的。sketch 也有自帶的功能，但畢竟自帶的填充都是英文，想要中文的需要自己編寫填充文檔，相對還是比較麻煩。其他是像智能排版、色板等功能，我用的不多，還是以 sketch 自帶功能為主。
另外，與可視化設計相關的就是裡面的圖表生成器了。不過 Kitchen 當前只有一些常規的圖表，不過勝在簡潔明瞭，很適合在此基礎上進行二次設計。該插件還是螞蟻 Ant 系列的官方插件，可以自動配置符合 Ant Design 規範的組件，配合公司採用的 Ant 系列的框架，會方便不少。
2. FusionCool – 阿里Fusion Design開源中後臺UI解決方案輔助工具
這也是一個 sketch 的插件工具。分為圖標、圖表、組件、模塊和模板五大功能區。
Fusion Design 作為一個開源中後臺解決方案，和 Ant Design 有一定類似，但也有所差別。Ant Design 是一套組件庫，Fusion Design 更像是一個組件庫生成工廠。
直接下載安裝 FusionCool 的話，打開 sketch 看到的將是一個默認組件庫，圖表部分的種類樣式比 Kitchen 多了不少。而更厲害的是，你可以在 Fusion Design 上，基於官方庫編輯改造成屬於你自己的設計系統，發佈主題後獲得新的主題包，此時你在 FusionCool 中就可以看到專屬於你的主題包了，在sketch中完成設計後，開發使用 Iceworks 安裝你的主題庫就可以直接編碼實現你的設計。
3. Map Generator – 快速地圖生成填充
這是一款基於谷歌地圖的自動填充的 Sketch 插件，輸入地址後就可以自動生成不同風格樣式的地圖，個人比較喜歡第三款灰色的。
4. Amcharts – 矢量地圖定製下載
這個網站上面提過，但其實設計師用來獲取矢量地圖也很好用，選擇地圖樣式和地區之後，右下方即可以下載 SVG、HTML、Image 格式的圖，十分方便。點擊「Generate Ppxel Map」還可以轉化為像素圓點形式的地圖。
如果需要省份的地圖，網站上無法直接下載，但可以先下載中國 svg 地圖，然後再打開 svg 選擇自己需要的省份模塊即可。
另外，在使用地圖的時候，要注意正確用圖，規範用圖。要有國家版圖意識，符合測繪法。
5. Chart – 圖表插件
圖表樣式非常豐富，這個插件是收費的，每年10美元。
優勢在於可以在 Sketch 中創建包含隨機、表格或者 JSON 數據的圖表。
