中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本期分享城市GDP大屏數據可視化設計，通過設計讓表格里雜亂的數據更好的可視化呈現；通過數據的背景定義設計主題；通過分類數據構圖布局頁面；通過黃金比例讓元素間更有層次。

案例解析

本產品沒有原型圖，拿到的只是Excel數據表格，所以這意味著要從0到1梳理數據指標，產品需求是展示全國各城市的GDP相關維度數據，通過城市選擇查看該城市最新一年GDP數據指標和歷年趨勢。

16年-18年北京GDP數據

通過梳理，數據可以分為“經濟數據”和“人口數據”兩大類，其中經濟數據分為5項，人口數據分為3項，功能上要切換全國各個城市，所以考慮到了加全國地圖，這樣基本的布局就可以確定了，如下圖所示。

大屏設計布局

布局上把經濟類數據、人口類數據分別放一起，這其實是數據分類展示的基本概念，想象一下大屏的使用場景，如果經濟數據和人口數據穿插展示，那觀者可能會左右走動或來回搖頭瀏覽，因為屏幕很大。分類展示數據不僅符合觀者的瀏覽順序，同樣也給講解人員提供一個從經濟到人口很好的解說順序。

加入中國地圖不光是為了能夠提升視覺表現，更重要的是一個所見即所得概念，例如用戶要查看幾個沿海城市數據，有了地圖就可以很直觀的呈現給用戶。

設計流程到了這一步，就需要跟需求方確認，沒問題再往下走，防止對需求、數據的理解偏差。

接下來就是設計階段，設計風格上沒有過于表現科技感，因為國家城市GDP的數據展示需要一種和諧、穩定、冷靜的感覺，重要的是安安靜靜地把數據呈現的客觀合理，所以布局上也采用中規中矩左右平衡的版式，這樣能體現一種平穩、和諧的展示畫面。

看表設計圖

最終設計稿?

?匹配合適的圖表

圖表一

KPI圖

直接把數據用文字的形式展示出來稱為KPI圖，一般用于關鍵業務指標的數據展示，比如總數據、結果數據等。

回到圖表解說，GDP數據不僅關注總量，同時也關注GDP的增長率，并且要對比往年數據，沒有對比增長率就失去了數據的意義，所以增長率的展示在設計上加強了視覺表現，并把歷年的增長率用曲線圖展示。

點擊右上角“看趨勢”按鈕，在二級頁面查看相關的次要數據，這樣就通過展示數據的優先級，落實到了頁面當中。

圖表二

環形圖與面積圖

了解數據是數據可視化設計的基礎，上圖如果不了解“三產”是什么意思，都代表什么，那你的設計是沒有依據的，這里普及一下三產的意思：

三產代表三個產業，第一產業是農業；第二產業是工業；第三產業是服務業，GDP實際就是第一、二、三產業的增加值之和。

通過對數據的了解，三產的比例總和為100%，使用環形圖最為合適，不一樣的是環形圖通常每個類別展示的順序是從12點方向順時針從大到小排列展示，但三產這種則不同，它的類別是按第一產業到第三產業有明確規律順序，所以類別有明確順序的，要按類別順序走，不管誰占比大，誰占比小，這樣才符合觀者的閱讀習慣。

三產的趨勢使用100%堆積面積圖，不僅可以對每年每個產業做對比，同時也可以看到歷年的趨勢變化。

圖表三

柱狀圖

頁面的上方可切換年份，所以當用戶切換到2018年時，需要重點突出2018年份數據，同理，切換到另一個年份也要突出選中的。

圖表四

條形圖

收入和支出屬于同類數據應使用一個圖表，兩者具有對比關系，所以使用有對比性的條形圖，其中支出數據包括教育支出與科技支出，用堆積條形圖展示。

數據可視化設計，通?？梢园褞в行档臄祿纳嵛迦?，這樣不僅可以提高觀者的閱讀性，數據看上去也會井然有序。如上圖，圖表收入數據5081.26億元，四舍五入可以寫成5081億元。

圖表五

數據可視化的本質，就是找尋一個可視化的媒介，例如圖表就是數據可視化的媒介，上圖地圖的交互性強調了全市數據與市區數據切換展示，同樣起到了媒介的作用，通過全市與市區的地圖切換，可以更直觀呈現數據的歸屬。

在數據可視化的展示上，尋找最有效的可視化方案，就是設計數據可視化的核心價值。

大屏的黃金比例技法

黃金比例0.618:1蘊藏著豐富的美學價值，在APP、Web的設計范疇內，有些時候是很難運用黃金比例設計，因為交互行為，不同分辨率適配問題，但大屏設計不一樣，尺寸比例是固定的，所以大屏設計要善于運用黃金比例構圖、留白、解決層次比例等。

構圖布局中的黃金比例

黃金比例構圖

上圖運用黃金比例構圖，使其畫面看起來更有比例性、和諧性，同時也通過黃金比例強調了頁面主次視覺，最最重要的是讓設計更有理有據了。

元素間的黃金比例

元素間的黃金比例

黃金比例不用刻意精準的去計算，牢記0.618比例，時刻要有使用黃金比例的意識，例如布局兩個元素，第一個100px，第二個首先要考慮嘗試60px或160px，培養這種使用意識很重要。

上圖，圖標加邊框，文字加背景是一種出彩設計技法，可以使畫面更飽滿，有效區分層次。

留白中的黃金比例

留白的圖標設計

適當的留白可以讓界面更有層次、呼吸感，黃金比例是留白的很好方式，上圖的圖標如果沒有邊框，跟臨近的元素對比視覺上不平衡，圖標放大又過于突兀，所以通過黃金比例留白給圖標加邊框，使其跟臨近的元素找到視覺平衡感。

總結

1. 對數據的了解是數據可視化設計前的必修課；
2. 尋找最有效的可視化方案，是設計數據可視化的核心價值；
3. 大屏數據可視化設計要善于運用黃金比例。

#專欄作家#

作者：吳星辰，微信公眾號：互聯網設計幫

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議