數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享:城市GDP大屏案例【進(jìn)階篇】
本期分享城市GDP大屏數(shù)據(jù)可視化設(shè)計(jì),通過設(shè)計(jì)讓表格里雜亂的數(shù)據(jù)更好的可視化呈現(xiàn);通過數(shù)據(jù)的背景定義設(shè)計(jì)主題;通過分類數(shù)據(jù)構(gòu)圖布局頁面;通過黃金比例讓元素間更有層次。
案例解析
本產(chǎn)品沒有原型圖,拿到的只是Excel數(shù)據(jù)表格,所以這意味著要從0到1梳理數(shù)據(jù)指標(biāo),產(chǎn)品需求是展示全國各城市的GDP相關(guān)維度數(shù)據(jù),通過城市選擇查看該城市最新一年GDP數(shù)據(jù)指標(biāo)和歷年趨勢。
16年-18年北京GDP數(shù)據(jù)
通過梳理,數(shù)據(jù)可以分為“經(jīng)濟(jì)數(shù)據(jù)”和“人口數(shù)據(jù)”兩大類,其中經(jīng)濟(jì)數(shù)據(jù)分為5項(xiàng),人口數(shù)據(jù)分為3項(xiàng),功能上要切換全國各個(gè)城市,所以考慮到了加全國地圖,這樣基本的布局就可以確定了,如下圖所示。
大屏設(shè)計(jì)布局
布局上把經(jīng)濟(jì)類數(shù)據(jù)、人口類數(shù)據(jù)分別放一起,這其實(shí)是數(shù)據(jù)分類展示的基本概念,想象一下大屏的使用場景,如果經(jīng)濟(jì)數(shù)據(jù)和人口數(shù)據(jù)穿插展示,那觀者可能會(huì)左右走動(dòng)或來回?fù)u頭瀏覽,因?yàn)槠聊缓艽?。分類展示?shù)據(jù)不僅符合觀者的瀏覽順序,同樣也給講解人員提供一個(gè)從經(jīng)濟(jì)到人口很好的解說順序。
加入中國地圖不光是為了能夠提升視覺表現(xiàn),更重要的是一個(gè)所見即所得概念,例如用戶要查看幾個(gè)沿海城市數(shù)據(jù),有了地圖就可以很直觀的呈現(xiàn)給用戶。
設(shè)計(jì)流程到了這一步,就需要跟需求方確認(rèn),沒問題再往下走,防止對需求、數(shù)據(jù)的理解偏差。
接下來就是設(shè)計(jì)階段,設(shè)計(jì)風(fēng)格上沒有過于表現(xiàn)科技感,因?yàn)閲页鞘蠫DP的數(shù)據(jù)展示需要一種和諧、穩(wěn)定、冷靜的感覺,重要的是安安靜靜地把數(shù)據(jù)呈現(xiàn)的客觀合理,所以布局上也采用中規(guī)中矩左右平衡的版式,這樣能體現(xiàn)一種平穩(wěn)、和諧的展示畫面。
看表設(shè)計(jì)圖
最終設(shè)計(jì)稿?
?匹配合適的圖表
圖表一
KPI圖
直接把數(shù)據(jù)用文字的形式展示出來稱為KPI圖,一般用于關(guān)鍵業(yè)務(wù)指標(biāo)的數(shù)據(jù)展示,比如總數(shù)據(jù)、結(jié)果數(shù)據(jù)等。
回到圖表解說,GDP數(shù)據(jù)不僅關(guān)注總量,同時(shí)也關(guān)注GDP的增長率,并且要對比往年數(shù)據(jù),沒有對比增長率就失去了數(shù)據(jù)的意義,所以增長率的展示在設(shè)計(jì)上加強(qiáng)了視覺表現(xiàn),并把歷年的增長率用曲線圖展示。
點(diǎn)擊右上角“看趨勢”按鈕,在二級(jí)頁面查看相關(guān)的次要數(shù)據(jù),這樣就通過展示數(shù)據(jù)的優(yōu)先級(jí),落實(shí)到了頁面當(dāng)中。
圖表二
環(huán)形圖與面積圖
了解數(shù)據(jù)是數(shù)據(jù)可視化設(shè)計(jì)的基礎(chǔ),上圖如果不了解“三產(chǎn)”是什么意思,都代表什么,那你的設(shè)計(jì)是沒有依據(jù)的,這里普及一下三產(chǎn)的意思:
三產(chǎn)代表三個(gè)產(chǎn)業(yè),第一產(chǎn)業(yè)是農(nóng)業(yè);第二產(chǎn)業(yè)是工業(yè);第三產(chǎn)業(yè)是服務(wù)業(yè),GDP實(shí)際就是第一、二、三產(chǎn)業(yè)的增加值之和。
通過對數(shù)據(jù)的了解,三產(chǎn)的比例總和為100%,使用環(huán)形圖最為合適,不一樣的是環(huán)形圖通常每個(gè)類別展示的順序是從12點(diǎn)方向順時(shí)針從大到小排列展示,但三產(chǎn)這種則不同,它的類別是按第一產(chǎn)業(yè)到第三產(chǎn)業(yè)有明確規(guī)律順序,所以類別有明確順序的,要按類別順序走,不管誰占比大,誰占比小,這樣才符合觀者的閱讀習(xí)慣。
三產(chǎn)的趨勢使用100%堆積面積圖,不僅可以對每年每個(gè)產(chǎn)業(yè)做對比,同時(shí)也可以看到歷年的趨勢變化。
圖表三
柱狀圖
頁面的上方可切換年份,所以當(dāng)用戶切換到2018年時(shí),需要重點(diǎn)突出2018年份數(shù)據(jù),同理,切換到另一個(gè)年份也要突出選中的。
圖表四
條形圖
收入和支出屬于同類數(shù)據(jù)應(yīng)使用一個(gè)圖表,兩者具有對比關(guān)系,所以使用有對比性的條形圖,其中支出數(shù)據(jù)包括教育支出與科技支出,用堆積條形圖展示。
數(shù)據(jù)可視化設(shè)計(jì),通??梢园褞в行?shù)的數(shù)據(jù)四舍五入,這樣不僅可以提高觀者的閱讀性,數(shù)據(jù)看上去也會(huì)井然有序。如上圖,圖表收入數(shù)據(jù)5081.26億元,四舍五入可以寫成5081億元。
圖表五
數(shù)據(jù)可視化的本質(zhì),就是找尋一個(gè)可視化的媒介,例如圖表就是數(shù)據(jù)可視化的媒介,上圖地圖的交互性強(qiáng)調(diào)了全市數(shù)據(jù)與市區(qū)數(shù)據(jù)切換展示,同樣起到了媒介的作用,通過全市與市區(qū)的地圖切換,可以更直觀呈現(xiàn)數(shù)據(jù)的歸屬。
在數(shù)據(jù)可視化的展示上,尋找最有效的可視化方案,就是設(shè)計(jì)數(shù)據(jù)可視化的核心價(jià)值。
大屏的黃金比例技法
黃金比例0.618:1蘊(yùn)藏著豐富的美學(xué)價(jià)值,在APP、Web的設(shè)計(jì)范疇內(nèi),有些時(shí)候是很難運(yùn)用黃金比例設(shè)計(jì),因?yàn)榻换バ袨椋煌直媛蔬m配問題,但大屏設(shè)計(jì)不一樣,尺寸比例是固定的,所以大屏設(shè)計(jì)要善于運(yùn)用黃金比例構(gòu)圖、留白、解決層次比例等。
構(gòu)圖布局中的黃金比例
黃金比例構(gòu)圖
上圖運(yùn)用黃金比例構(gòu)圖,使其畫面看起來更有比例性、和諧性,同時(shí)也通過黃金比例強(qiáng)調(diào)了頁面主次視覺,最最重要的是讓設(shè)計(jì)更有理有據(jù)了。
元素間的黃金比例
元素間的黃金比例
黃金比例不用刻意精準(zhǔn)的去計(jì)算,牢記0.618比例,時(shí)刻要有使用黃金比例的意識(shí),例如布局兩個(gè)元素,第一個(gè)100px,第二個(gè)首先要考慮嘗試60px或160px,培養(yǎng)這種使用意識(shí)很重要。
上圖,圖標(biāo)加邊框,文字加背景是一種出彩設(shè)計(jì)技法,可以使畫面更飽滿,有效區(qū)分層次。
留白中的黃金比例
留白的圖標(biāo)設(shè)計(jì)
適當(dāng)?shù)牧舭卓梢宰尳缑娓袑哟巍⒑粑?,黃金比例是留白的很好方式,上圖的圖標(biāo)如果沒有邊框,跟臨近的元素對比視覺上不平衡,圖標(biāo)放大又過于突兀,所以通過黃金比例留白給圖標(biāo)加邊框,使其跟臨近的元素找到視覺平衡感。
總結(jié)
- 對數(shù)據(jù)的了解是數(shù)據(jù)可視化設(shè)計(jì)前的必修課;
- 尋找最有效的可視化方案,是設(shè)計(jì)數(shù)據(jù)可視化的核心價(jià)值;
- 大屏數(shù)據(jù)可視化設(shè)計(jì)要善于運(yùn)用黃金比例。
#專欄作家#
作者:吳星辰,微信公眾號(hào):互聯(lián)網(wǎng)設(shè)計(jì)幫
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議
為什么現(xiàn)在都是音頻了,真不好用
不懂就問,三產(chǎn)占比用餅圖是不是比環(huán)形圖會(huì)更合適些?
我們做了一個(gè)產(chǎn)品原型,想邀請你參與進(jìn)來,試著用你的洞見來打造一個(gè)優(yōu)秀的產(chǎn)品,聯(lián)系一下吧?