數據大屏與數據可視化

數據可視化是目前對數據展示最常用的方式。數據的可視化設計有助于將復雜的數據，用最易理解的方式展示在用戶的面前。

數據可視化在中后臺的設計中很常見，通常主要用于分析和決策，對實時性要求不高，從一部分功能上講，其實也有著報告數據的作用。設計以 2D 平面展示為主，幾乎不會有 3D 設計出現，視覺設計更注重簡單直接，一目了然。

△ 來源 dribbble 作者wuze

數據大屏在上面的基礎上，對實時性要求較高，會更強調數據展示的效果，這也是會流行 FUI 未來主義科幻風格設計的原因，追求視覺上的酷炫效果。設計上 2D、3D 皆有，還可以伴隨著動效搭配一些可交互的設計，來展示數據之間聯動。

△ 來源 dribbble 作者William Chen

制作數據大屏的一點小建議

數據大屏的制作可能會包含一些動效交互及3D建模渲染，一般中小型公司通常技術能力有限。如果接到設計制作數據大屏的任務，不妨先和產品技術等一起就表現方式和技術實現等方面做個探討，不要直接進行設計工作，貿然追求超燃的特效，避免最后因為無法實現導致無謂的返工。

大廠的可視化服務

1. 百度 Suger

網站鏈接：https://cloud.baidu.com/product/sugar.html

Sugar 是百度云推出的數據可視化服務平臺，目標是解決報表和大屏的數據可視化問題，解放數據可視化系統的開發人力。

△ 來源Suger官網

上圖是官網提供的案例，界面風格是常規的 FUI 風格。

Sugar 提供了組件編輯平臺，進入平臺后設計師可以直接進行組件的拖拽編輯，打造自己所需要的大屏界面。在設計師完成后就可以直接交接給開發，進行各類數據源的接入。這種形式無疑節約了很多的開發時間，設計師也不用再擔心前端開發的效果與自己的差之千里。對于時間緊迫或者自身技術能力不足的項目很適合。

在組件的提供上，Suger 提供了很多的 2D 和 3D 組件，在一定程度上也可以自定義組件。還可以設置數據下鉆和圖表聯動，增強動效交互效果。

△ 來源Suger編輯平臺

平臺的編輯界面總體來說還是很方便設計師適應的，與一般的設計軟件界面差不多。上方是一些工具，左側是圖層的排布，右側則是一些組件的屬性。設計師可以很快地適應并應用，沒有學習成本，也不會有太高的操作難度。但是 Suger 在 3D 方面尚有不足，個人感覺沒有阿里云 DataV、騰訊 RayData 的 3D 效果突出。

最后一點，Suger 目前處于推廣期，推廣期間是免費使用的。

2. 阿里云DataV

網站鏈接：https://data.aliyun.com/visual/datav?spm=a2c4g.11174283.2.1.46b66b79vzB03d

DataV 最著名的一個應用項目應該就是天貓雙11的數據大屏了。每一年都驚艷了無數聚焦于雙11活動的人們。2018 年的雙11數據大屏設計更是被稱為數據經濟時代的全球清明上河圖。

△2018天貓雙11大屏

同樣的，DataV 也提供了一個編輯平臺，連該平臺本身的界面設計也充滿了未來科技感，可以根據模板新建，也可以新建空白頁面。基本操作模式與 Suger 類似，設計師先建立畫面，后開發進行數據源的接入。編輯界面的操作難度也不高，稍微了解一下，就可以快速入手。

△ DataV平臺

與 Suger 相比，個人更為喜歡 DataV。DataV 的設計風格與動效交互都會略好一點。一般企業進行數據大屏的設計項目，其目的更趨向于對外展示。DataV 在效果的酷炫程度上會更符合領導的要求。只是 DataV 目前分為基礎版、企業版和專業版收費服務。個人申請有 30 天的基礎版試用期。具體選擇需要看公司自身內部需求而定。

3. 騰訊RayData

網站鏈接：https://cloud.tencent.com/product/raydata

RayData 是我跟隨我們領導去參觀騰訊在寧波的分公司進行了解。當時展示的項目是深圳的城市大腦。將城市管理集為一體，包含交通、醫療、警務等等。與其在官網展示的內容一致，只不過官網是截圖，而當時參觀時是有個小姐姐拿著 ipad 一邊交互一邊跟我們講解。交互與數據聯動的效果很好，當時我們領導很喜歡這種效果。

△ 智慧城市大數據可視化

整體來說，RayData 的數據展示效果也是相當不錯的。但是 RayData 目前處于內側階段，也沒有平臺提供編輯功能，當前主要的模式是付費定制。

技術開源庫

了解一些技術開源庫，一方面可以參照其圖表案例，了解各類不同圖表的展示方式；另一方面是為了保證自己設計的可實現度，不然再炫酷的設計效果如果因為技術開發能力無法實現也是徒勞的。

1. Echarts -百度開源可視化庫

網站鏈接：https://echarts.baidu.com/

這是一個使用 JavaScript 實現的開源可視化庫，可以流暢地運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器。4.0 版本還提供了對微信小程序的適配。DataV 中的一些組件也是依賴 Echarts 生成的。

Echarts 提供的圖表很多樣化，幾乎包含常用的、不常用的各類圖表樣式。且提供有可交互組件，可以對數據進行多維度數據篩取、視圖縮放、展示細節等交互操作。

△ 來源Echarts實例

2. Mapv - 百度地理信息可視化開源庫

網站鏈接：https://mapv.baidu.com/

用以展示大量地理信息點、線、面的數據。創建需先上傳地理信息數據，再設置地圖樣式后，即可下載保存。目前僅開放 Beta 版本。

△ 來源Mapv官網

3. 螞蟻AntV

網站鏈接：https://antv.alipay.com/zh-cn/index.html

螞蟻金服的 Ant Design，作為設計師應該都是較為熟悉的。AntV 是螞蟻 Ant 系列下的一個數據可視化解決方案。分為 G2、G6、F2、L7 不同產品，分別對應不同的特性需求。

△ 來源AntV官網

4. D3.js - 數據驅動的文檔

網站鏈接：https://d3js.org/

D3js 是一個基于數據來操作文檔的 JavaScript? 庫，適宜用來建造各類可視化圖表。支持大型數據集和交互與動畫的動態行為。

△ 來源D3js官網

5. billboard.js - 簡易界面的可交互圖表庫

網站鏈接：https://naver.github.io/billboard.js/

這是一個基于 D3 V4+ 的 JavaScript 的圖表庫。可以對數據進行視圖縮放、展示細節等交互操作。

△ 來源billboard官網

6. FusionCharts

網站鏈接：https://www.fusioncharts.com/

FusionCharts 提供了 100 多個交互式圖表和 2000 多個數據驅動的地圖，對不同平臺都可兼容。同時提供了前端和后端各類框架及代碼語言的插件，來方便開發快速入門。不過這款是收費的，根據不同的使用環境定價不同。

△ 來源FusionCharts官網

設計輔助工具

1. Kitchen - 螞蟻金服官方插件

網站鏈接：http://kitchen.alipay.com/

這是一個 sketch 的插件工具。主要功能如下圖：

△ 來源Kitchen官網

Iconfont 圖標庫我比較常用，可以直接在 sketch 中搜索拖拽，不用再去打開網頁查找了。其次數據填充也比較常用，自動填充時間、地址、城市等挺方便的。sketch 也有自帶的功能，但畢竟自帶的填充都是英文，想要中文的需要自己編寫填充文檔，相對還是比較麻煩。其他是像智能排版、色板等功能，我用的不多，還是以 sketch 自帶功能為主。

另外，與可視化設計相關的就是里面的圖表生成器了。不過 Kitchen 當前只有一些常規的圖表，不過勝在簡潔明了，很適合在此基礎上進行二次設計。該插件還是螞蟻 Ant 系列的官方插件，可以自動配置符合 Ant Design 規范的組件，配合公司采用的 Ant 系列的框架，會方便不少。

△ 來源Kitchen插件界面

2. FusionCool - 阿里Fusion Design開源中后臺UI解決方案輔助工具

網站鏈接：https://fusion.design/tool

這也是一個 sketch 的插件工具。分為圖標、圖表、組件、模塊和模板五大功能區。

Fusion Design 作為一個開源中后臺解決方案，和 Ant Design 有一定類似，但也有所差別。Ant Design 是一套組件庫，Fusion Design 更像是一個組件庫生成工廠。

直接下載安裝 FusionCool 的話，打開 sketch 看到的將是一個默認組件庫，圖表部分的種類樣式比 Kitchen 多了不少。而更厲害的是，你可以在 Fusion Design 上，基于官方庫編輯改造成屬于你自己的設計系統，發布主題后獲得新的主題包，此時你在 FusionCool 中就可以看到專屬于你的主題包了，在sketch中完成設計后，開發使用 Iceworks 安裝你的主題庫就可以直接編碼實現你的設計。

△ 來源FusionCool插件界面

3. Map Generator - 快速地圖生成填充

網站鏈接：https://github.com/eddiesigner/sketch-map-generator

這是一款基于谷歌地圖的自動填充的 Sketch 插件，輸入地址后就可以自動生成不同風格樣式的地圖，個人比較喜歡第三款灰色的。

△圖為Map Gnerator生成效果

 

4. Chart - 圖表插件

網站鏈接：https://github.com/pavelkuligin/chart

這個插件是收費的，每年10美元。優勢在于可以在 Sketch 中創建包含隨機、表格或者 JSON 數據的圖表。圖表樣式也是非常豐富了。

△ 來源Chart官網

歡迎關注作者的微信公眾號：「夜的UE筆記」