本期分享城市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é)

1. 對數(shù)據(jù)的了解是數(shù)據(jù)可視化設(shè)計(jì)前的必修課；
2. 尋找最有效的可視化方案，是設(shè)計(jì)數(shù)據(jù)可視化的核心價(jià)值；
3. 大屏數(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é)議