數據大屏與數據可視化

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

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

△ 來源 dribbble 作者wuze

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

云南体彩网△ 來源 dribbble 作者William Chen

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

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

大廠的可視化服務

1. 百度 Suger

網站鏈接:

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

云南体彩网△ 來源Suger官網

云南体彩网上圖是官網提供的案例,界面風格是慣例的 FUI 風格。

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

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

云南体彩网△ 來源Suger編輯平臺

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

云南体彩网最后一點,Suger 目前處于推廣期,推廣期間是免費使用的。

2. 阿里云DataV

網站鏈接:

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

△ 智慧城市大數據可視化

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

技術開源庫

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

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

網站鏈接:

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

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

△ 來源Echarts實例

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

網站鏈接:

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

△ 來源Mapv官網

3. 螞蟻AntV

網站鏈接:

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

△ 來源AntV官網

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

網站鏈接:

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

△ 來源D3js官網

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

網站鏈接:

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

△ 來源billboard官網

6. FusionCharts

網站鏈接:

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

云南体彩网△ 來源FusionCharts官網

設計輔助工具

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

網站鏈接:

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

△ 來源Kitchen官網

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

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

云南体彩网△ 來源Kitchen插件界面

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

網站鏈接:

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

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

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

△ 來源FusionCool插件界面

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

網站鏈接:

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

△圖為Map Gnerator生成效果

 

4. Chart – 圖表插件

網站鏈接:

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

云南体彩网△ 來源Chart官網

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

點贊 4
收藏 386

發表評論 已發布 11

還可以輸入 800 個字
 
 
載入中....
相關推薦
11 收藏