如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

做APP的數(shù)據(jù)圖表設(shè)計(jì)之前，你考慮過(guò)移動(dòng)端屏幕大小與屬性嗎？考慮過(guò)可視化數(shù)據(jù)圖表，提升APP氣質(zhì)嗎？考慮過(guò)在APP和WEB端，數(shù)據(jù)圖表的展示有何不同嗎？也許你都考慮過(guò)，但作為一篇科普文，還是要從最基礎(chǔ)的說(shuō)起。

以數(shù)據(jù)圖表為主的APP有哪些？

前期，yoyo通過(guò)App Store、MobilePattern、Dribbble瘋狂搜圖，積累了以下豐富的案例。

MobilePattern ：

1. http://www.mobile-patterns.com/stats
2. http://inspired-ui.com/tagged/visualization

Dribbble：

1. https://dribbble.com/search?q=data
2. https://dribbble.com/search?q=statistics  

通常，我們見(jiàn)到有數(shù)據(jù)圖表的APP無(wú)外乎下面這幾類(lèi)：

天氣類(lèi)

到App Store隨手一搜“天氣”，搜索列表中展示的APP無(wú)一不是在風(fēng)景圖上添加了天氣溫度等。以下推薦了一個(gè)名為“Fresh Air”的APP，從設(shè)計(jì)上區(qū)別于常規(guī)天氣APP,可以根據(jù)時(shí)間和溫度背景色有調(diào)整。

運(yùn)動(dòng)類(lèi)

隨著各種手環(huán)的流行，大家對(duì)步數(shù)、睡眠質(zhì)量等數(shù)據(jù)也更加看重。國(guó)外除了Fitbit、Jawbone、MisfitShine手環(huán)外，國(guó)內(nèi)的科技公司也相繼推出各種價(jià)格上更占優(yōu)勢(shì)的手環(huán)，比如小米手環(huán)。鑒于這類(lèi)APP大家都比較熟悉，以下就列舉了一個(gè)大家可能不太了解的APP，界面以深色底為主：FitPort，它的數(shù)據(jù)比較豐富，除了記錄步數(shù)外，還對(duì)體重和能量消耗有記錄。

健康類(lèi)

健康類(lèi)的APP除了關(guān)注身心健康外，還有一些智能硬件能檢測(cè)環(huán)境的安全、舒適性，比如下面的NEST，是一款家庭恒溫器，它可以通過(guò)記錄用戶的室內(nèi)溫度數(shù)據(jù)，智能識(shí)別用戶習(xí)慣，并將室溫調(diào)整到最舒適的狀態(tài)。

Clue是一款姨媽助手，在數(shù)據(jù)展示上比美柚等做得更輕松，它會(huì)根據(jù)不同階段的心情做可視化，比如臨近姨媽期用一些爆炸云朵表達(dá)煩躁的心情。

財(cái)務(wù)類(lèi)

各種記賬類(lèi)APP和理財(cái)類(lèi)APP幾乎囊括了所有圖表樣式，趨勢(shì)圖、餅狀圖、柱狀圖應(yīng)有盡有。以下列舉的Spendee在圖表設(shè)計(jì)上算是行業(yè)翹楚。

專(zhuān)業(yè)數(shù)據(jù)分析類(lèi)

隨著移動(dòng)辦公的需要，有一些專(zhuān)業(yè)的數(shù)據(jù)分析平臺(tái)精煉了產(chǎn)品功能，需要在移動(dòng)端展現(xiàn)。以下列舉的Google Quicklytics 便是Google Analytics在移動(dòng)端的產(chǎn)品體現(xiàn)。

如何制作數(shù)據(jù)圖表？

看了以上這些APP，基本對(duì)數(shù)據(jù)圖表有了直觀的感受。如果你的APP也需要呈現(xiàn)數(shù)據(jù)圖表，那yoyo接下來(lái)的分享希望對(duì)你有所幫助。

一、配色

A）深色底

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

△ Dribbble

B）淺色底

如果需要清晰展示大量的數(shù)據(jù)信息，建議選用淺色底，數(shù)據(jù)信息在淺色底上的識(shí)別度相對(duì)較高。但需要注意的是：如果數(shù)據(jù)信息量太小，淺色底上會(huì)顯得頁(yè)面太空，這會(huì)讓用戶覺(jué)得你的平臺(tái)沒(méi)有內(nèi)容或者熱度。當(dāng)然，這可以通過(guò)圖形質(zhì)感、顏色等優(yōu)化。

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

下面就深色底和淺色底的閱讀效率進(jìn)行比較：

在以數(shù)據(jù)分析為主、有大量數(shù)據(jù)的頁(yè)面中，淺色底的頁(yè)面可讀性更高，閱讀效率也會(huì)更高。

△ Dribbble

C）色彩底

有時(shí)，為了讓頁(yè)面更加生動(dòng)，可以將數(shù)據(jù)信息展示在大面積色塊上。

商務(wù)類(lèi)APP可采用用藍(lán)色、綠色系作為底色。

運(yùn)動(dòng)類(lèi)APP可選用的色彩自由度更高，偏活力的色彩，如橙色、黃色、橘色等都可以。

△ 左（Apple Health）中（支付寶）右（Dribbble）

D）圖片底

為了讓數(shù)據(jù)閱讀更加輕松，可采用圖片底。在一些天氣類(lèi)APP中，這種使用方式比較常見(jiàn)，圖片內(nèi)容與數(shù)據(jù)信息產(chǎn)生關(guān)聯(lián)，提升可讀性。

△ Dribbble

健康類(lèi)APP，讓閱讀數(shù)據(jù)時(shí)能有更加輕松的心情。

△ Misfit Shine

天氣類(lèi)APP，首頁(yè)呈現(xiàn)會(huì)根據(jù)當(dāng)時(shí)天氣情況自動(dòng)拉取背景圖片。

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

二、圖表類(lèi)型

接下來(lái)會(huì)簡(jiǎn)單介紹我們通常在APP中見(jiàn)到的圖表類(lèi)型。

A）折線圖

[折線圖] 將序列顯示為一組由單個(gè)線條連接的點(diǎn)；用于表示在一段連續(xù)時(shí)間內(nèi)發(fā)生的大量數(shù)據(jù)。

△ 左（Dribbble）右（Apple Health）

B）曲線圖

[曲線圖] 使用光滑的曲線來(lái)連接。如果數(shù)據(jù)是連貫實(shí)時(shí)的，且任意兩點(diǎn)間的數(shù)據(jù)具有分析價(jià)值，用[曲線圖] 比用[折線圖] 更合適，如24小時(shí)數(shù)據(jù)。

△ Dribbble

C）餅圖

[餅圖] 常用于顯示每個(gè)組成成分的數(shù)值相對(duì)總體的百分比。

△ Dribbble

D）環(huán)形圖，表現(xiàn)進(jìn)度

[環(huán)形圖] 即中心為空的餅圖。除了顯示占比，還可用來(lái)顯示進(jìn)度加載，擬鐘表/ 計(jì)時(shí)器設(shè)計(jì)。

△ Dribbble

E）條形圖&柱狀圖

[條形圖] 將序列顯示為若干組水平圖條。

[柱形圖] 將序列顯示為按類(lèi)別分組的垂直圖條。

△ Dribbble

F）熱度圖

[熱度圖] 常用在基于地理位置，對(duì)一段時(shí)間的數(shù)據(jù)（常常是離散量）累積量進(jìn)行分布統(tǒng)計(jì)的圖表，進(jìn)而可以分析數(shù)據(jù)密集區(qū)域/稀疏區(qū)域。這是一種展示效果較好的表達(dá)方式。

△ Dribbble

G）雷達(dá)圖

[雷達(dá)圖] 在比較多個(gè)類(lèi)別數(shù)據(jù)序列以及查看整體情況很有用，既可以查看自身整體發(fā)展的均衡情況，也可以對(duì)比兩個(gè)序列整體的優(yōu)劣勢(shì)。這也是一種展示效果不錯(cuò)的數(shù)據(jù)表達(dá)方式，在展示整體綜合信息上很直觀。

△ 左中（Dribbble）右（支付寶）

H）列表

列表是一種常見(jiàn)的表達(dá)方式，通常我們見(jiàn)到的列表往往是如下最右的Spendee的界面，但也有一些APP做了可視化嘗試，在列表中通過(guò)對(duì)數(shù)據(jù)可視化做一些分區(qū)，詳見(jiàn)如下左和中Elevate的界面。

△ 左中（Elevate）右（Spendee）

三、圖表組織

了解基本的圖表類(lèi)型后，接下來(lái)的重點(diǎn)是進(jìn)行圖表的組織。

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

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

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

此時(shí)選用圓形，會(huì)是一個(gè)不錯(cuò)的選擇，因?yàn)樗陧?yè)面中形成視覺(jué)中心。不管是餅狀圖，還是環(huán)形圖，或是擁有視覺(jué)中心的雷達(dá)圖，都會(huì)讓頁(yè)面上呈現(xiàn)一個(gè)視覺(jué)重點(diǎn)。

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

△ 中（Clue）右（支付寶）

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

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

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

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

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

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

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

△  City Guides

四、動(dòng)效

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

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

△  Spendee

B）導(dǎo)航切換

△  Dribbble

C）展示更多功能

△ Dribbble

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

△  Dribbble

五、字體

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

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

△ CityGuides by National Geographic

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

最后附上一個(gè)在數(shù)據(jù)圖表設(shè)計(jì)上有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)Rallyhttps://dribbble.com/rally

代表作：City Guides、Snowbird

藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)