三、圖表組織

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

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

A）如何展示單個數據？

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

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

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

△ 中（Clue）右（支付寶）

B）如何展示主次數據?

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

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

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

C）如何展示大量數據？

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

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

△  City Guides

四、動效

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

A）以時間先后動態呈現數據

△  Spendee

B）導航切換

△  Dribbble

C）展示更多功能

△ Dribbble

D）屏幕橫縱向切換數據

△  Dribbble

五、字體

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

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

△ CityGuides by National Geographic

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

最后附上一個在數據圖表設計上有豐富經驗的團隊Rally//dribbble.com/rally

代表作：City Guides、Snowbird

轉自：  

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

新年新禧新氣象，送禮送福送優惠！優惠詳情點擊查看>>