三、圖表組織

了解基本的圖表類型后，接下來的重點是進行圖表的組織。

移動設備最大的特點是屏幕小，用戶每次可接收的數(shù)據(jù)信息量小，所以如何有效組織圖表信息是一個重要的設計點。

A）如何展示單個數(shù)據(jù)？

鑒于APP屏幕小，單個頁面中就展示一個重要數(shù)據(jù)，如何設計？

此時選用圓形，會是一個不錯的選擇，因為它在頁面中形成視覺中心。不管是餅狀圖，還是環(huán)形圖，或是擁有視覺中心的雷達圖，都會讓頁面上呈現(xiàn)一個視覺重點。

單個數(shù)據(jù)未免有些單調(diào)，為了讓頁面更加豐富，可采用深色、彩色、圖片為背景輔以純色的圖形（如芝麻信用分），或者將像Clue一樣，用重色將圖形撐滿，求得視覺上的飽滿。

△ 中（Clue）右（支付寶）

B）如何展示主次數(shù)據(jù)?

要在頁面中展示兩到三種類型的數(shù)據(jù)，如何設計？

此時要注意以稍大的篇幅突出重點數(shù)據(jù)，弱化次要數(shù)據(jù)，盡量讓主次數(shù)據(jù)的圖表類型不一致，曲線圖、餅圖、環(huán)形圖、柱狀圖等基礎圖表，交替使用，這樣使得整個頁面層次清晰，內(nèi)容豐富。

△ 上：中右（Dribbble）  下：中（FitPort）右（Spendee）

C）如何展示大量數(shù)據(jù)？

還有一種類型，整個頁面要分幾大模塊展示大量的數(shù)據(jù)信息，如何設計？

用戶可能要刷幾屏才能把所有的數(shù)據(jù)閱讀完，此時，建議每個模塊單獨采用一種圖表類型，各個模塊的圖表類型均不同，這樣會減輕用戶對數(shù)據(jù)展示的疲勞度。

△  City Guides

四、動效

動效可以提升產(chǎn)品趣味性，尤其在展示大量數(shù)據(jù)信息時，使用動效能緩解閱讀壓力。數(shù)據(jù)圖表中常見的動效有以下幾種：

A）以時間先后動態(tài)呈現(xiàn)數(shù)據(jù)

△  Spendee

B）導航切換

△  Dribbble

C）展示更多功能

△ Dribbble

D）屏幕橫縱向切換數(shù)據(jù)

△  Dribbble

五、字體

一款字體使用的好，能彰顯整個APP的氣質(zhì)，讓整個APP特立獨行。但鑒于APP字體版權及字體包大小，多數(shù)APP開發(fā)者都不把字體作為考慮范疇。

CityGuides是一款特別出色的APP，其圖表設計很棒，字體選用也與整個風格設計相得益彰，非常出彩。有興趣的可以網(wǎng)上下載這個字體（Optigiant），非商業(yè)用途的情況很受用。

△ CityGuides by National Geographic

APP中數(shù)據(jù)圖表設計遠不止于此，還是實踐出真知。

最后附上一個在數(shù)據(jù)圖表設計上有豐富經(jīng)驗的團隊Rally//dribbble.com/rally

代表作：City Guides、Snowbird

轉自：  

點擊【圖表專題】了解更多圖表相關資訊

新年新禧新氣象，送禮送福送優(yōu)惠！優(yōu)惠詳情點擊查看>>