前言?
本期分享城市GDP大屏數(shù)據(jù)可視化設(shè)計(jì)，通過設(shè)計(jì)讓表格里雜亂的數(shù)據(jù)更好的可視化呈現(xiàn)瘤旨；通過數(shù)據(jù)的背景定義設(shè)計(jì)主題烟很；通過分類數(shù)據(jù)構(gòu)圖布局頁面；通過黃金比例讓元素間更有層次蜓耻。
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ì)流程到了這一步蔼卡，就需要跟需求方確認(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ù)等。
圖表二：
環(huán)形圖與面積圖
圖表三：
柱狀圖
頁面的上方可切換年份，所以當(dāng)用戶切換到2018年時(shí)赏僧，需要重點(diǎn)突出2018年份數(shù)據(jù)大猛，同理，切換到另一個(gè)年份也要突出選中的淀零。
大屏的黃金比例技法
黃金比例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)圖布局中的黃金比例
上圖運(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ū)分層次。
留白中的黃金比例
適當(dāng)?shù)牧舭卓梢宰尳缑娓袑哟伟跖选⒑粑行伎龋S金比例是留白的很好方式，上圖的圖標(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)用黃金比例撒桨。
差不多就寫完了...大家覺得有幫助的話，記得點(diǎn)在贊和轉(zhuǎn)發(fā)～
