數(shù)據(jù)可視化大屏案例分析
很多UI設(shè)計(jì)師突然會(huì)接到公司數(shù)據(jù)可視化設(shè)計(jì)的需求,如果不了解數(shù)據(jù)可視化設(shè)計(jì),肯定是一頭霧水,不知從何入手。我嘗試簡(jiǎn)要的把我近期做過的案例進(jìn)行記錄分享,不足之處歡迎大家隨時(shí)交流。
隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展,很多企業(yè)都開始應(yīng)用數(shù)據(jù)可視化。所以數(shù)據(jù)可視化設(shè)計(jì),如今絕對(duì)是熱門的設(shè)計(jì)之一。
很多UI設(shè)計(jì)師突然會(huì)接到公司數(shù)據(jù)可視化設(shè)計(jì)的需求,如果不了解數(shù)據(jù)可視化設(shè)計(jì),肯定是一頭霧水,不知從何入手。我嘗試簡(jiǎn)要的把我近期做過的案例進(jìn)行記錄分享,不足之處歡迎大家隨時(shí)交流。
首先放的是項(xiàng)目改版前的頁面:
需求介紹
某某應(yīng)用云,分為五大云平臺(tái)模塊:云端綜合調(diào)度、數(shù)據(jù)查詢通道、數(shù)據(jù)應(yīng)用處理、數(shù)據(jù)查詢通道、管理理運(yùn)行維護(hù)。每個(gè)大模塊下?面有若干個(gè)子系統(tǒng)。
可視化?屏首頁需要展示的內(nèi)容包括:
(1)全局?jǐn)?shù)據(jù)
云平臺(tái)的數(shù)據(jù)總量,以及 4 個(gè)重要關(guān)注數(shù)據(jù)項(xiàng),2 個(gè)次要關(guān)注數(shù)據(jù)項(xiàng)。
(2)云平臺(tái)的五?大模塊
- 云端綜合調(diào)度
- 數(shù)據(jù)查詢通道
- 數(shù)據(jù)應(yīng)用處理理
- 數(shù)據(jù)存儲(chǔ)管理
- 管理理運(yùn)行維護(hù)(只有兩個(gè)tab切換鏈接)
(3)搜索功能
搜索類型分為 6 個(gè)類型,默認(rèn)選中“綜合”類型進(jìn)行搜索。
(4)重點(diǎn)關(guān)注數(shù)據(jù)信息按指標(biāo)分多維度展示
原始圖上的維度包括:指標(biāo)、地圖、地域排名、部?門、類別。
(5)云導(dǎo)航
需求分析
分析大屏可視化的一些共性:
- 屏幕大:大屏一般都是多屏拼接,整體屏幕面積大。
- 觀距遠(yuǎn):用戶需要站遠(yuǎn)處觀看屏幕,要保證數(shù)據(jù)文字清晰可見。
- 交互弱:通過電腦已經(jīng)無法滿足大屏交互需求,現(xiàn)在也有部分開始采用ipad、手機(jī)、激光筆等方式。
- 視覺強(qiáng):背景色多采用重色,襯托凸顯數(shù)據(jù),更好的為觀者傳達(dá)數(shù)據(jù)信息。
- 一屏一內(nèi)容:一屏內(nèi)容,說明一件主要事,統(tǒng)計(jì)好它的相關(guān)數(shù)據(jù),避免其他的干擾。
結(jié)合大屏的一些共性特點(diǎn)針對(duì)看到的線上舊版本設(shè)計(jì),分析存在的問題。
- 布局混亂,導(dǎo)致視覺不平衡,看不出頁面層次。
- 藍(lán)色為主色調(diào) 黃色點(diǎn)綴顏色顯得比較單一沒有規(guī)則。
- 圖表比較單一,不能有效傳達(dá)數(shù)據(jù)信息。
結(jié)合這些問題進(jìn)行視覺改版,首先優(yōu)化頁面布局,通過分析對(duì)頁面重新布局,如下圖:
采用柵格化對(duì)稱布局 讓整體視覺左右平衡。
視覺設(shè)計(jì):
了解需求,整合數(shù)據(jù),分析出主要數(shù)據(jù)次要數(shù)據(jù)、總量數(shù)據(jù)細(xì)分?jǐn)?shù)據(jù)、各數(shù)據(jù)的維度等等,通過了解這些可以先設(shè)計(jì)出一個(gè)布局模版,也可以在紙上畫出來,布局可以在設(shè)計(jì)過程中隨時(shí)調(diào)整。
設(shè)計(jì)的風(fēng)格,一提到數(shù)據(jù)可視化大家往往能想到科技、數(shù)據(jù)、藍(lán)色等一些普遍關(guān)鍵詞。
跟客戶溝通之后,了解到客戶需求是:想做一個(gè)科技感強(qiáng)比較炫酷的視覺效果 。這也貼合以上這些關(guān)鍵詞,針對(duì)這些關(guān)鍵詞的提煉。
另外結(jié)合大屏的使用場(chǎng)景,背景色一般會(huì)選用暗色調(diào),數(shù)據(jù)變化一般會(huì)選擇高亮色調(diào),讓視覺更好地聚焦數(shù)據(jù)的變化,也會(huì)較省電。
主題風(fēng)格構(gòu)思階段:
原圖:中國(guó)地圖主圖模塊缺乏層次感,如圖:
?
改版后:地圖主色調(diào)改為科技藍(lán),在原有地圖上增加外發(fā)光和多層陰影疊加,使其增加地圖的立體感,地圖上增加科技線條上升的效果代表每個(gè)城市數(shù)據(jù)變化的提升。地圖背景采用比較弱化的轉(zhuǎn)動(dòng)線條圓形,襯托地圖主體,時(shí)的畫面更加豐富。
數(shù)據(jù)圖表拆分:
在選定數(shù)據(jù)圖表之前,首先要確定圖表之間的關(guān)系,可以從以下四個(gè)維度進(jìn)行思考分析:
- 聯(lián)系:數(shù)據(jù)之間的相關(guān)性;
- 分布:指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律;
- 比較:數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面;
- 構(gòu)成:指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。
當(dāng)確定好分析維度后,事實(shí)上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個(gè)圖表里,篩選出最能體現(xiàn)我們?cè)O(shè)計(jì)意圖的那個(gè)就好了。
傳統(tǒng)的圖表比如echarts上圖表在視覺上展示可能不是很美觀好看,可根據(jù)選擇的圖表在其基礎(chǔ)之上進(jìn)行美化設(shè)計(jì),總之選定圖表最重要的兩個(gè)點(diǎn)就是:易理解、可實(shí)現(xiàn)。
易理解:就是要考慮最終用戶,可視化結(jié)果應(yīng)該是一看就懂,不需要思考和過度理解,因而選定圖表時(shí)要理性,避免為了視覺上的效果而選擇一些對(duì)用戶不太友好的圖形及元素。
可實(shí)現(xiàn):主要是跟開發(fā)前期溝通好實(shí)現(xiàn)方式,一般都采用開源組件庫(kù)的居多比如echarts組件庫(kù),我們?cè)O(shè)計(jì)的圖形圖表,要開發(fā)能夠?qū)崿F(xiàn)。
實(shí)際工作中,一些可視化效果開發(fā)用代碼寫很容易實(shí)現(xiàn),效果也不錯(cuò),但這些效果設(shè)計(jì)師用Ps/Ai/Ae這些工具模擬時(shí)會(huì)發(fā)現(xiàn)比較困難。
同樣的,某些效果設(shè)計(jì)師用設(shè)計(jì)工具可以輕易實(shí)現(xiàn),但開發(fā)要用代碼落地卻非常困難。所以大屏設(shè)計(jì)中跟開發(fā)常溝通非常重要,我們需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮,哪些地方需要謹(jǐn)慎設(shè)計(jì)!
一個(gè)項(xiàng)目總有周期與預(yù)算限制,不會(huì)無限期的修改迭代,所以設(shè)計(jì)師在這里需要抓住重點(diǎn),有取舍,不鉆牛角尖、死磕不放。
城市排名影響視覺數(shù)據(jù)多了,會(huì)對(duì)地圖展示造成影響,跟客戶溝通需優(yōu)化城市排名個(gè)數(shù),只展示前五個(gè),打破傳統(tǒng)條形圖的展示形式采用電池晶格的展示形式。
從頁面的整體看一下,已經(jīng)有三處用到了條形圖,柱狀圖,如果這里還是條形圖。那么頁面看起來會(huì)很單調(diào),圖表也沒有表現(xiàn)出多樣性。所以現(xiàn)在設(shè)計(jì)要體現(xiàn)圖表的多樣性,也能夠有排名的直觀呈現(xiàn)。
以下圖表采用科技圓盤的形式,運(yùn)用科技線條的上升狀態(tài)代表排名的先后順序,所有圖表都采用數(shù)據(jù)降序來展示排名更加直觀。
最后附上:最終視覺和動(dòng)態(tài)效果圖
總結(jié)
大屏設(shè)計(jì)的基本步驟:
- 需求分析
- 優(yōu)化布局
- 定義設(shè)計(jì)關(guān)鍵詞
- 確立主圖展示風(fēng)格
以上是我對(duì)數(shù)據(jù)可視化大屏的案例總結(jié),巴拉巴拉這么多,終于寫完了,希望能幫助到你。
除此之外還有很多地方?jīng)]有涉及到,包括具體設(shè)計(jì)的操作方式、選取圖形元素的具體方法,以及在各種大屏中所需要的相對(duì)應(yīng)的組件等。在龐大的可視化大屏設(shè)計(jì)系統(tǒng)中,還有很多值得學(xué)習(xí)參考和優(yōu)化的知識(shí),歡迎各位大佬指正,大家一起努力。
本文由 @小六 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
學(xué)習(xí)了,請(qǐng)問中國(guó)地圖的效果可以分享下么,謝謝。想在axure中使用。
如果圖表暫無數(shù)據(jù)應(yīng)該怎么顯示呢
謝謝分享,學(xué)習(xí)啦
設(shè)計(jì):請(qǐng)問動(dòng)效是拿什么軟件做的
ae