看似復雜炫酷的數據可視化設計,用這波神器輕松搞定! - 優設網 - UISDC

看似復雜炫酷的數據可視化設計,用這波神器輕松搞定!

2019/09/04 27092評論 10

數據大屏與數據可視化

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

數據可視化在中后臺的設計中很常見,通常主要用于分析和決策,對實時性要求不高,從一部分功能上講,其實也有著報告數據的作用。設計以 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 也提供了一個編輯平臺,連該平臺本身的界面設計也充滿了未來科技感,可以根據模板新建,也可以新建空白頁面?;靜僮髂J接?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 – 螞蟻金服官方插件

網站鏈接://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 的插件工具。分為圖標、圖表、組件、??楹湍0邐宕蠊δ芮?。

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筆記」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/data-visualization-tool

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 界面設計 版式設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里