看似復(fù)雜炫酷的數(shù)據(jù)可視化設(shè)計(jì)，用這波神器輕松搞定！

數(shù)據(jù)大屏與數(shù)據(jù)可視化

數(shù)據(jù)可視化是目前對(duì)數(shù)據(jù)展示最常用的方式。數(shù)據(jù)的可視化設(shè)計(jì)有助于將復(fù)雜的數(shù)據(jù)，用最易理解的方式展示在用戶的面前。

數(shù)據(jù)可視化在中后臺(tái)的設(shè)計(jì)中很常見(jiàn)，通常主要用于分析和決策，對(duì)實(shí)時(shí)性要求不高，從一部分功能上講，其實(shí)也有著報(bào)告數(shù)據(jù)的作用。設(shè)計(jì)以 2D 平面展示為主，幾乎不會(huì)有 3D 設(shè)計(jì)出現(xiàn)，視覺(jué)設(shè)計(jì)更注重簡(jiǎn)單直接，一目了然。

△ 來(lái)源 dribbble 作者wuze

數(shù)據(jù)大屏在上面的基礎(chǔ)上，對(duì)實(shí)時(shí)性要求較高，會(huì)更強(qiáng)調(diào)數(shù)據(jù)展示的效果，這也是會(huì)流行 FUI 未來(lái)主義科幻風(fēng)格設(shè)計(jì)的原因，追求視覺(jué)上的酷炫效果。設(shè)計(jì)上 2D、3D 皆有，還可以伴隨著動(dòng)效搭配一些可交互的設(shè)計(jì)，來(lái)展示數(shù)據(jù)之間聯(lián)動(dòng)。

△ 來(lái)源 dribbble 作者William Chen

制作數(shù)據(jù)大屏的一點(diǎn)小建議

數(shù)據(jù)大屏的制作可能會(huì)包含一些動(dòng)效交互及3D建模渲染，一般中小型公司通常技術(shù)能力有限。如果接到設(shè)計(jì)制作數(shù)據(jù)大屏的任務(wù)，不妨先和產(chǎn)品技術(shù)等一起就表現(xiàn)方式和技術(shù)實(shí)現(xiàn)等方面做個(gè)探討，不要直接進(jìn)行設(shè)計(jì)工作，貿(mào)然追求超燃的特效，避免最后因?yàn)闊o(wú)法實(shí)現(xiàn)導(dǎo)致無(wú)謂的返工。

大廠的可視化服務(wù)

1. 百度 Suger

網(wǎng)站鏈接：https://cloud.baidu.com/product/sugar.html

Sugar 是百度云推出的數(shù)據(jù)可視化服務(wù)平臺(tái)，目標(biāo)是解決報(bào)表和大屏的數(shù)據(jù)可視化問(wèn)題，解放數(shù)據(jù)可視化系統(tǒng)的開(kāi)發(fā)人力。

△ 來(lái)源Suger官網(wǎng)

上圖是官網(wǎng)提供的案例，界面風(fēng)格是常規(guī)的 FUI 風(fēng)格。

Sugar 提供了組件編輯平臺(tái)，進(jìn)入平臺(tái)后設(shè)計(jì)師可以直接進(jìn)行組件的拖拽編輯，打造自己所需要的大屏界面。在設(shè)計(jì)師完成后就可以直接交接給開(kāi)發(fā)，進(jìn)行各類數(shù)據(jù)源的接入。這種形式無(wú)疑節(jié)約了很多的開(kāi)發(fā)時(shí)間，設(shè)計(jì)師也不用再擔(dān)心前端開(kāi)發(fā)的效果與自己的差之千里。對(duì)于時(shí)間緊迫或者自身技術(shù)能力不足的項(xiàng)目很適合。

在組件的提供上，Suger 提供了很多的 2D 和 3D 組件，在一定程度上也可以自定義組件。還可以設(shè)置數(shù)據(jù)下鉆和圖表聯(lián)動(dòng)，增強(qiáng)動(dòng)效交互效果。

△ 來(lái)源Suger編輯平臺(tái)

平臺(tái)的編輯界面總體來(lái)說(shuō)還是很方便設(shè)計(jì)師適應(yīng)的，與一般的設(shè)計(jì)軟件界面差不多。上方是一些工具，左側(cè)是圖層的排布，右側(cè)則是一些組件的屬性。設(shè)計(jì)師可以很快地適應(yīng)并應(yīng)用，沒(méi)有學(xué)習(xí)成本，也不會(huì)有太高的操作難度。但是 Suger 在 3D 方面尚有不足，個(gè)人感覺(jué)沒(méi)有阿里云 DataV、騰訊 RayData 的 3D 效果突出。

最后一點(diǎn)，Suger 目前處于推廣期，推廣期間是免費(fèi)使用的。

2. 阿里云DataV

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

DataV 最著名的一個(gè)應(yīng)用項(xiàng)目應(yīng)該就是天貓雙11的數(shù)據(jù)大屏了。每一年都驚艷了無(wú)數(shù)聚焦于雙11活動(dòng)的人們。2018 年的雙11數(shù)據(jù)大屏設(shè)計(jì)更是被稱為數(shù)據(jù)經(jīng)濟(jì)時(shí)代的全球清明上河圖。

△2018天貓雙11大屏

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

△ DataV平臺(tái)

與 Suger 相比，個(gè)人更為喜歡 DataV。DataV 的設(shè)計(jì)風(fēng)格與動(dòng)效交互都會(huì)略好一點(diǎn)。一般企業(yè)進(jìn)行數(shù)據(jù)大屏的設(shè)計(jì)項(xiàng)目，其目的更趨向于對(duì)外展示。DataV 在效果的酷炫程度上會(huì)更符合領(lǐng)導(dǎo)的要求。只是 DataV 目前分為基礎(chǔ)版、企業(yè)版和專業(yè)版收費(fèi)服務(wù)。個(gè)人申請(qǐng)有 30 天的基礎(chǔ)版試用期。具體選擇需要看公司自身內(nèi)部需求而定。

3. 騰訊RayData

網(wǎng)站鏈接：https://cloud.tencent.com/product/raydata

RayData 是我跟隨我們領(lǐng)導(dǎo)去參觀騰訊在寧波的分公司進(jìn)行了解。當(dāng)時(shí)展示的項(xiàng)目是深圳的城市大腦。將城市管理集為一體，包含交通、醫(yī)療、警務(wù)等等。與其在官網(wǎng)展示的內(nèi)容一致，只不過(guò)官網(wǎng)是截圖，而當(dāng)時(shí)參觀時(shí)是有個(gè)小姐姐拿著 ipad 一邊交互一邊跟我們講解。交互與數(shù)據(jù)聯(lián)動(dòng)的效果很好，當(dāng)時(shí)我們領(lǐng)導(dǎo)很喜歡這種效果。

△ 智慧城市大數(shù)據(jù)可視化

整體來(lái)說(shuō)，RayData 的數(shù)據(jù)展示效果也是相當(dāng)不錯(cuò)的。但是 RayData 目前處于內(nèi)側(cè)階段，也沒(méi)有平臺(tái)提供編輯功能，當(dāng)前主要的模式是付費(fèi)定制。

技術(shù)開(kāi)源庫(kù)

了解一些技術(shù)開(kāi)源庫(kù)，一方面可以參照其圖表案例，了解各類不同圖表的展示方式；另一方面是為了保證自己設(shè)計(jì)的可實(shí)現(xiàn)度，不然再炫酷的設(shè)計(jì)效果如果因?yàn)榧夹g(shù)開(kāi)發(fā)能力無(wú)法實(shí)現(xiàn)也是徒勞的。

1. Echarts -百度開(kāi)源可視化庫(kù)

網(wǎng)站鏈接：https://echarts.baidu.com/

這是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢地運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器。4.0 版本還提供了對(duì)微信小程序的適配。DataV 中的一些組件也是依賴 Echarts 生成的。

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

△ 來(lái)源Echarts實(shí)例

2. Mapv - 百度地理信息可視化開(kāi)源庫(kù)

網(wǎng)站鏈接：https://mapv.baidu.com/

用以展示大量地理信息點(diǎn)、線、面的數(shù)據(jù)。創(chuàng)建需先上傳地理信息數(shù)據(jù)，再設(shè)置地圖樣式后，即可下載保存。目前僅開(kāi)放 Beta 版本。

△ 來(lái)源Mapv官網(wǎng)

3. 螞蟻AntV

網(wǎng)站鏈接：https://antv.alipay.com/zh-cn/index.html

螞蟻金服的 Ant Design，作為設(shè)計(jì)師應(yīng)該都是較為熟悉的。AntV 是螞蟻 Ant 系列下的一個(gè)數(shù)據(jù)可視化解決方案。分為 G2、G6、F2、L7 不同產(chǎn)品，分別對(duì)應(yīng)不同的特性需求。

△ 來(lái)源AntV官網(wǎng)

4. D3.js - 數(shù)據(jù)驅(qū)動(dòng)的文檔

網(wǎng)站鏈接：https://d3js.org/

D3js 是一個(gè)基于數(shù)據(jù)來(lái)操作文檔的 JavaScript? 庫(kù)，適宜用來(lái)建造各類可視化圖表。支持大型數(shù)據(jù)集和交互與動(dòng)畫的動(dòng)態(tài)行為。

△ 來(lái)源D3js官網(wǎng)

5. billboard.js - 簡(jiǎn)易界面的可交互圖表庫(kù)

網(wǎng)站鏈接：https://naver.github.io/billboard.js/

這是一個(gè)基于 D3 V4+ 的 JavaScript 的圖表庫(kù)。可以對(duì)數(shù)據(jù)進(jìn)行視圖縮放、展示細(xì)節(jié)等交互操作。

△ 來(lái)源billboard官網(wǎng)

6. FusionCharts

網(wǎng)站鏈接：https://www.fusioncharts.com/

FusionCharts 提供了 100 多個(gè)交互式圖表和 2000 多個(gè)數(shù)據(jù)驅(qū)動(dòng)的地圖，對(duì)不同平臺(tái)都可兼容。同時(shí)提供了前端和后端各類框架及代碼語(yǔ)言的插件，來(lái)方便開(kāi)發(fā)快速入門。不過(guò)這款是收費(fèi)的，根據(jù)不同的使用環(huán)境定價(jià)不同。

△ 來(lái)源FusionCharts官網(wǎng)

設(shè)計(jì)輔助工具

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

網(wǎng)站鏈接：http://kitchen.alipay.com/

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

△ 來(lái)源Kitchen官網(wǎng)

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

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

△ 來(lái)源Kitchen插件界面

2. FusionCool - 阿里Fusion Design開(kāi)源中后臺(tái)UI解決方案輔助工具

網(wǎng)站鏈接：https://fusion.design/tool

這也是一個(gè) sketch 的插件工具。分為圖標(biāo)、圖表、組件、模塊和模板五大功能區(qū)。

Fusion Design 作為一個(gè)開(kāi)源中后臺(tái)解決方案，和 Ant Design 有一定類似，但也有所差別。Ant Design 是一套組件庫(kù)，F(xiàn)usion Design 更像是一個(gè)組件庫(kù)生成工廠。

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

△ 來(lái)源FusionCool插件界面

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

網(wǎng)站鏈接：https://github.com/eddiesigner/sketch-map-generator

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

△圖為Map Gnerator生成效果

 

4. Chart - 圖表插件

網(wǎng)站鏈接：https://github.com/pavelkuligin/chart

這個(gè)插件是收費(fèi)的，每年10美元。優(yōu)勢(shì)在于可以在 Sketch 中創(chuàng)建包含隨機(jī)、表格或者 JSON 數(shù)據(jù)的圖表。圖表樣式也是非常豐富了。

△ 來(lái)源Chart官網(wǎng)

歡迎關(guān)注作者的微信公眾號(hào)：「夜的UE筆記」