數據時代，APP如何進行數據可視化設計？

在做APP設計的時候，難免會遇到一些需要展示數據的場景。使用傳統的表格和文檔展示數據不僅難看，也影響用戶理解數據的含義。而數據可視化設計能將數據以更加直觀的方式展現出來，使數據更加客觀、更有說服力。

※ 以數據可視化為主的APP有哪些？ ※

通過大量的瀏覽收集，小編總結出使用數據可視化的APP無外乎下面這幾類：天氣類、運動類、健康類、財務類、專業數據分析類。感興趣的設計師可以直接在App Store搜索相應關鍵詞，就能夠找到許多。以下為大家準備了一些有代表性的APP。

天氣類

「Fresh Air」的APP，從設計上區別於常規天氣APP,可以根據時間和溫度背景色有調整。

↑Fresh Air

運動類

隨著各種手環的流行，大家對步數、睡眠質量等數據也更加看重。國外除了Fitbit、Jawbone、MisfitShine手環外，國內的科技公司也相繼推出各種價格上更佔優勢的手環，比如小米手環。鑒於這類APP大家都比較熟悉，以下就列舉了一個大家可能不太了解的APP，界面以深色底為主：FitPort，它的數據比較豐富，除了記錄步數外，還對體重和能量消耗有記錄。

↑FitPort

健康類

Clue是一款姨媽助手，在數據展示上比美柚等做得更輕鬆，它會根據不同階段的心情做可視化，比如臨近姨媽期用一些爆炸雲朵表達煩躁的心情。

↑Clue

財務類

各種記賬類APP和理財類APP幾乎囊括了所有圖表樣式，趨勢圖、餅狀圖、柱狀圖應有盡有。以下列舉的Spendee在圖表設計上算是行業翹楚。

↑Spendee

專業數據分析類

隨著移動辦公的需要，有一些專業的數據分析平台精鍊了產品功能，需要在移動端展現。以下列舉的Google Quicklytics 便是Google Analytics在移動端的產品體現。

↑Quicklytics

※ 如何做好數據可視化？※

看了這麼多的競品，相信大家對數據可視化已經有了直觀的感受。如果你想要做好數據可視化應該怎麼切入呢？大家從以下幾個方向進行嘗試：配色、圖表類型、圖表組合方式、動效、文字。下面將結合實際案例為大家進行詳細說明。

配色

大家在做設計的時候，一定都知道不同的配色會帶來不同的情感體驗。同樣的可視化設計也需要考慮到配色對數據的影響。

1、深色底

深色底上的圖表通常為了營造一種氛圍，展示數據信息一般較少，此時可以選用鮮亮的色彩，這樣圖表信息容易從深色中跳出來。

↑圖片來自網路，僅供參考

2、淺色底

如果需要清晰展示大量的數據信息，建議選用淺色底，數據信息在淺色底上的識別度相對較高。但需要注意的是：如果數據信息量太小，淺色底上會顯得頁面太空，這會讓用戶覺得你的平台沒有內容或者熱度。當然，這可以通過圖形質感、顏色等優化。

↑ 左（Google Analytics）中（Clue）右（Spendee）

下面就深色底和淺色底的閱讀效率進行比較：在以數據分析為主、有大量數據的頁面中，淺色底的頁面可讀性更高，閱讀效率也會更高。

↑深色和淺色底比較

3、色彩底

有時，為了讓頁面更加生動，可以將數據信息展示在大面積色塊上。商務類APP可採用用藍色、綠色系作為底色。運動類APP可選用的色彩自由度更高，偏活力的色彩，如橙色、黃色、橘色等都可以。

↑圖片來自網路，僅供參考

4、圖片底

為了讓數據閱讀更加輕鬆，可採用圖片底。在一些天氣類APP中，這種使用方式比較常見，圖片內容與數據信息產生關聯，提升可讀性。

↑圖片來自網路，僅供參考

健康類APP，讓閱讀數據時能有更加輕鬆的心情。

↑Misfit Shine

天氣類APP，首頁呈現會根據當時天氣情況自動拉取背景圖片。

↑ 左（天氣通）中（墨跡天氣）右（Yahoo天氣）

圖表類型

每種圖表都會對應一個適合的數據類型。所以作為設計師我們一定要了解它們之間的對應關係，使得設計有理有據。

1、折線圖

將序列顯示為一組由單個線條連接的點；用於表示在一段連續時間內發生的大量數據。

↑圖片來自網路，僅供參考

2、曲線圖

使用光滑的曲線來連接。如果數據是連貫實時的，且任意兩點間的數據具有分析價值，用曲線圖比用折線圖更合適，如24小時數據。

↑圖片來自網路，僅供參考

3、餅圖&環形圖

環形圖可以理解為空心的餅狀圖。常用於顯示每個組成成分的數值相對總體的百分比。還可用來顯示進度載入等。

↑圖片來自網路，僅供參考

4、條形圖&柱狀圖

條形圖可以理解為橫著的柱狀圖。常用於展示對應的數據、可以對比多維度的數值。

↑圖片來自網路，僅供參考

5、熱度圖

常用在基於地理位置，對一段時間的數據（常常是離散量）累積量進行分布統計的圖表，進而可以分析數據密集區域/稀疏區域。這是一種展示效果較好的表達方式。

↑圖片來自網路，僅供參考

6、雷達圖

在比較多個類別數據序列以及查看整體情況很有用，既可以查看自身整體發展的均衡情況，也可以對比兩個序列整體的優劣勢。這也是一種展示效果不錯的數據表達方式，在展示整體綜合信息上很直觀。

↑圖片來自網路，僅供參考

除了以上列出來的這比較傳統的六種圖表類型，細心的設計師可能還會發現一些比較新穎的圖表，比如和弦圖、字元雲、力導向布局圖等等。在這裡就不一一列舉，感興趣的設計師可以繼續總結歸納它們的使用場景。

圖表組織

了解基本的圖表類型後，接下來的重點是進行圖表的組織。移動設備最大的特點是屏幕小，用戶每次可接收的數據信息量小，所以如何有效組織圖表信息是一個重要的設計點。

1、單個數據

鑒於APP屏幕小，單個頁面中就展示一個重要數據，如何設計？此時選使用圓形，會是一個不錯的選擇，因為它在頁面中形成視覺中心。不管是餅狀圖，還是環形圖，或是擁有視覺中心的雷達圖，都會讓頁面上呈現一個視覺重點。

↑中（Clue）右（支付寶）

比如上圖的案例，為了讓頁面更加豐富，可採用深色、彩色、圖片為背景輔以純色的圖形。或者用重色將圖形撐滿，求得視覺上的飽滿。

2、多組數據

鑒於手機屏幕空間有限，多組數據在展示的時候一定要突出重點數據，弱化次要數據，盡量讓主次數據的圖表類型不一致。曲線圖、餅圖、環形圖、柱狀圖等基礎圖表，交替使用，這樣使得整個頁面層次清晰，內容豐富。

↑圖片來自網路，僅供參考

3、大量數據

當設計師面對幾大模塊展示大量的數據信息時，建議每個模塊單獨採用一種圖表類型，各個模塊的圖表類型均不同，這樣會減輕用戶對數據展示的疲勞度。

↑圖片來自網路，僅供參考

動效

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

1、以時間先後動態呈現數據

↑圖片來自網路，僅供參考

2、導航切換

↑圖片來自網路，僅供參考

3、展示更多功能

↑圖片來自網路，僅供參考

4、屏幕橫縱向切換數據

↑圖片來自網路，僅供參考

字體

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

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

↑CityGuides

隨著信息大爆炸時代的到來，用戶的時間越來越寶貴。如何讓用戶快速的獲取數據想表達的內容，成為設計師們進行數據可視化設計的重點。當然上面總結的只是數據可視化設計的冰山一角，作為設計師的我們還需要不斷總結實踐，才能真正掌握！最後希望本文能對你有所幫助。

- END -

花火圓桌

花火圓桌是由一群熱愛設計的BAT設計師發起的分享交流社群，目前已聚集了近4000來自五湖四海的小夥伴，一起分享、解惑，並常有線上線下活動共同成長進步。

保存下圖掃描二維碼進群或者微信搜索 "花火圓桌" 公眾號，關注獲得大量資源~

關注公眾號：回復以下關鍵詞，會有海量資源哦

| 手繪 | sketch | C4D | 交互 | 字體 |

加群：Fire_Lady9 還能得到更多