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

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

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

△ 來源 dribbble 作者wuze

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

△ 來源 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法實(shí)現(xiàn)導(dǎo)致無謂的返工。

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

1. 百度 Suger

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

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

△ 來源Suger官網(wǎng)

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

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

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

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

平臺(tái)的編輯界面總體來說還是很方便設(shè)計(jì)師適應(yīng)的，與一般的設(shè)計(jì)軟件界面差不多。上方是一些工具，左側(cè)是圖層的排布，右側(cè)則是一些組件的屬性。設(shè)計(jì)師可以很快地適應(yīng)并應(yīng)用，沒有學(xué)習(xí)成本，也不會(huì)有太高的操作難度。但是 Suger 在 3D 方面尚有不足，個(gè)人感覺沒有阿里云 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ù)大屏了。每一年都驚艷了無數(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ì)也充滿了未來科技感，可以根據(jù)模板新建，也可以新建空白頁面。基本操作模式與 Suger 類似，設(shè)計(jì)師先建立畫面，后開發(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)目，其目的更趨向于對外展示。DataV 在效果的酷炫程度上會(huì)更符合領(lǐng)導(dǎo)的要求。只是 DataV 目前分為基礎(chǔ)版、企業(yè)版和專業(yè)版收費(fèi)服務(wù)。個(gè)人申請有 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)容一致，只不過官網(wǎng)是截圖，而當(dāng)時(shí)參觀時(shí)是有個(gè)小姐姐拿著 ipad 一邊交互一邊跟我們講解。交互與數(shù)據(jù)聯(lián)動(dòng)的效果很好，當(dāng)時(shí)我們領(lǐng)導(dǎo)很喜歡這種效果。

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

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

技術(shù)開源庫

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

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

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

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

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

△ 來源Echarts實(shí)例

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

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

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

△ 來源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)品，分別對應(yīng)不同的特性需求。

△ 來源AntV官網(wǎng)

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

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

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

△ 來源D3js官網(wǎng)

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

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

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

△ 來源billboard官網(wǎng)

6. FusionCharts

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

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

△ 來源FusionCharts官網(wǎng)

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

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

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

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

△ 來源Kitchen官網(wǎng)

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

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

△ 來源Kitchen插件界面

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

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

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

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

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

△ 來源FusionCool插件界面

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

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

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

△圖為Map Gnerator生成效果

4. Amcharts – 矢量地圖定制下載

網(wǎng)站鏈接：http://pixelmap.amcharts.com/#

這個(gè)網(wǎng)站上面提過，但其實(shí)設(shè)計(jì)師用來獲取矢量地圖也很好用，選擇地圖樣式和地區(qū)之后，右下方即可以下載 SVG、HTML、Image 格式的圖，十分方便。點(diǎn)擊「Generate Ppxel Map」還可以轉(zhuǎn)化為像素圓點(diǎn)形式的地圖。

如果需要省份的地圖，網(wǎng)站上無法直接下載，但可以先下載中國 svg 地圖，然后再打開 svg 選擇自己需要的省份模塊即可。

另外，在使用地圖的時(shí)候，要注意正確用圖，規(guī)范用圖。要有國家版圖意識(shí)，符合測繪法。

標(biāo)準(zhǔn)地圖可以參考國家自然資源局提供的標(biāo)準(zhǔn)地圖服務(wù)，服務(wù)網(wǎng)址：http://bzdt.ch.mnr.gov.cn/index.html

5. Chart – 圖表插件

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

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

△ 來源Chart官網(wǎng)

以下內(nèi)容可能對你有用

20個(gè)CAD絕對實(shí)用技巧 ！

你發(fā)給老板的Excel表格，都應(yīng)該是這樣的

表格合并，你還在復(fù)制粘貼？教你一鍵合并，超簡單！

面試：如何回答最賤題“你最大的缺點(diǎn)”？

知乎最高贊！這些軟件堪稱神器，卻不為大眾所知！

菜鳥在線教育

成長、技能、教育、互聯(lián)網(wǎng)

在看點(diǎn)一下 大家都知道

總結(jié)

以上是生活随笔為你收集整理的echarts 大屏可视化_看似复杂炫酷的数据可视化设计，用这波神器轻松搞定！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。