APP數據圖表設計的類型和製作方法全方位總結

2020-12-09 人人都是產品經理

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

問：以數據圖表為主的APP有哪些？

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

MobilePattern ：

http://www.mobile-patterns.com/stats

http://inspired-ui.com/tagged/visualization

Dribbble：

https://dribbble.com/search?q=data

https://dribbble.com/search?q=statistics  

通常，我們見到有數據圖表的APP無外乎下面這幾類：

天氣類

到App Store隨手一搜「天氣」，搜索列表中展示的APP無一不是在風景圖上添加了天氣溫度等。以下推薦了一個名為「Fresh Air」的APP，從設計上區別於常規天氣APP,可以根據時間和溫度背景色有調整。

運動類

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

健康類

健康類的APP除了關注身心健康外，還有一些智能硬體能檢測環境的安全、舒適性，比如下面的NEST，是一款家庭恆溫器，它可以通過記錄用戶的室內溫度數據，智能識別用戶習慣，並將室溫調整到最舒適的狀態。

Clue

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


財務類

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


專業數據分析類

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



問：如何製作數據圖表？

看了以上這些APP，基本對數據圖表有了直觀的感受。如果你的APP也需要呈現數據圖表，那yoyo接下來的分享希望對你有所幫助。

1. 配色

A）深色底

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

Dribbble

B）淺色底

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


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

下面就深色底和淺色底的閱讀效率進行比較：

在以數據分析為主、有大量數據的頁面中，淺色底的頁面可讀性更高，閱讀效率也會更高。



Dribbble

C）色彩底

有時，為了讓頁面更加生動，可以將數據信息展示在大面積色塊上。

商務類APP可採用用藍色、綠色系作為底色。

運動類APP可選用的色彩自由度更高，偏活力的色彩，如橙色、黃色、橘色等都可以。


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

D）圖片底

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


Dribbble

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


Misfit Shine

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


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

2. 圖表類型

接下來會簡單介紹我們通常在APP中見到的圖表類型。

A）折線圖

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


左（Dribbble）右（Apple Health）

B）曲線圖

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


Dribbble

C）餅圖

[餅圖] 常用於顯示每個組成成分的數值相對總體的百分比。


Dribbble

D）環形圖，表現進度

[環形圖] 即中心為空的餅圖。除了顯示佔比，還可用來顯示進度加載，擬鐘錶/ 計時器設計。



Dribbble

E）條形圖&柱狀圖    

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

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

Dribbble

F）熱度圖

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


Dribbble

G）雷達圖

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


左中（Dribbble）右（支付寶）

H）列表

列表是一種常見的表達方式，通常我們見到的列表往往是如下最右的Spendee的界面，但也有一些APP做了可視化嘗試，在列表中通過對數據可視化做一些分區，詳見如下左和中Elevate的界面。

左中（Elevate）右（Spendee）

3. 圖表組織

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

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

A）如何展示單個數據？

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

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

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


中（Clue）右（支付寶）

B）如何展示主次數據?

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

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


上：中右（Dribbble）

下：中（FitPort）右（Spendee）

C）如何展示大量數據？

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

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


City Guides

4. 動效

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

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

Spendee

B）導航切換

Dribbble

C）展示更多功能

Dribbble

D）屏幕橫縱向切換數據

Dribbble

5. 字體

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

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


CityGuides by National Geographic

附

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

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

代表作：City Guides、Snowbird

 

文章來源@yoyofootprint（微信公眾號）

版權聲明：若該文章涉及版權問題，請聯繫我們主編，QQ：419297645

相關焦點

  • excel圖表製作技巧:多系列數據,如何製作組合圖表?
    本篇教程是做懂領導心思圖表的第三篇，分享多系列數據圖表的製作經驗。多系列數據圖表的製作，在工作中，一直是個難題。由於數據系列較多，做出來的圖表看著總顯得混亂，各數據之間的對比性也不強，基本違背了我們作圖的初衷。那有沒有什麼好的思路或者方法來製作多系列的圖表呢？下面我們就來看看excel高手是如何進行製作的。學習更多技巧，請收藏關注部落窩教育excel圖文教程。
  • excel圖表應用技巧:不同類型圖表對數據表現的意義和作用
    Excel圖表類型非常多，並且各類型有相似之處。譬如折線圖和面積圖，都可以用來表達趨勢。那什麼時候更適合用面積圖，什麼時候更適合用折線圖呢？我來看看下面這篇文章吧！學習更多技巧，請收藏關注部落窩教育excel圖文教程。 今天不講技巧，講講每位Excel使用者都無法迴避的問題。
  • 數據可視化圖表工具有哪些圖表類型?
    每到月度、季度、年度總結的時候，用到最多的、最有說服力的就是數據了。讓數據說話，擺事實、講道理才能贏得上級的肯定。 大家都聽過「數據可視化」，也知道要用直觀的圖表讓受眾理解複雜多變的數據。
  • 數據信息圖表參數化設計技巧
    圖（1） 列表式的圖表說明馬裡奧遇到不同對象後發生的相應變化，實際上是簡單的線性結構其次，信息圖表的分類方法有很多，從圖形、文字、數據系統組織模式的角度，信息圖表設計可以分為：1 時序性圖表一個表意清晰明確的圖表往往離不開參數之間的比較，拋開花樣繁多的表現形式和視覺效果，我們進入信息圖表設計的基礎——參數設計。參數可以被理解為在一定範圍內變化的數，任何現象中的某一種變量數，目前國內對於圖表中的參數設計沒有一個確定的解釋。參照Revit Building的思想，我將它暫時解釋為採用經過設定的單位、視圖和注釋符號，使每一個構件都通過一個變更傳播引擎互相聯繫。
  • B端互動設計——數據可視化圖表
    在B端設計中，數據可視化是必不可少而且非常重要，越來越多的設計師需要和數據打交道，但是很多設計師不懂可視化當中不同用途的圖表規範，只是單純設計出好看的數據圖表，卻不能給用戶帶來更多的信息和價值。　　因此掌握數據可視化能力是設計師必不可少的一個技能，然而目前國內網際網路對於數據的教學不夠全面，這讓很多B端的設計師很苦惱；所以今天我結合自己的工作經驗和大家分享一下——「數據可視化之圖表設計」，為大家梳理一套完整的數據可視化的框架，以及關於可視化設計的基本準則和規範。　　幫助大家理解什麼樣的數據對應什麼樣的圖標，了解顏色的意義，知道數據排版的要點。
  • 高中信息技術說課稿:《Excel數據的圖表呈現》
    圖表的製作是本節課的基礎，製作好圖表才能對數據進行有效分析，分析和應用是檢驗學習效果的依據，也是教學的目標，所以確定為重點。難點：1）、數據源、圖表類型、圖表選項的選擇與修改。2）、運用有效的圖表來表示數據，並對圖表數據進行分析，形成報告。學生通常會在數據源選擇、圖表修改上遇到問題，以及不會用合適的圖表來表示數據，所以確定他們為難點。
  • 高質量論文圖表製作及美化專題研討會
    沒有按照科研應遵循的「三表理念」來整理實驗數據導致數據凌亂、圖表沒有用論文應該使用的軟體製作、製作的圖表美觀性不佳、不符合學術規範、沒有使用正確的圖表類型，且不知道如何美化圖表。莫速乎教育的萬方軍老師近幾年仔細對比研究了200本國外頂級期刊中的8000餘篇論文中的數萬張插圖中的圖表，並查閱了大量英文書籍，總結一些規律、技巧、思維方法和理念，並以學習會議的形式來教導科研人員如何精通圖表。此課程自2015年推出以來，參加人數爆滿，好評無數。
  • 變色龍app製作:怎樣製作一款自己的app,app製作流程全解
    隨著科技時代的到來，只需打開手機，大家就會看到各式各樣的手機app應用軟體，各種APP應用軟體讓人們的生活變得方便快捷且非富有趣，那麼，怎樣製作一款自己的app呢？app製作的具體流程是什麼呢？接下來就為大家介紹一下怎樣製作app?
  • 不知道用什麼圖表展示數據?看這份圖表選擇指南就夠了
    但是圖表的種類繁多，應用場景不一，所以很多新手在進行數據可視化時，經常不知道什麼樣的圖表來展示自己的數據才是最合適的，今天就給大家分享圖表選擇的正確流程和方法，幫助大家選擇正確圖表圖表設計痛點什麼才是好的圖表？
  • 數據分析,用對圖表很重要
    在這種行業背景下，數據分析成為了一手利器，可以推動產品設計與運營環節，列舉幾個典型的場景：產品經理在規劃新版本時，如何制定相關的數據指標來驗證? 功能上線後，如何就採集到的數據，進行數據復盤，判斷新功能是否達到團隊預期? 如何通過數據了解產品目前的問題以及分析背後的原因? 運營人員在完成一個活動後，如何通過數據來評估本次活動的效果?
  • 數據分析常規分析思路及圖表類型解讀
    大數據是一種從各種類型的數據中快速獲取有效且有價值的信息的技術。 在大數據領域，當今已經出現了大量新的且易於操作的技術。 有效的工具。 毋庸置疑，大數據市場是一座待挖掘的金礦。隨著數據使用量的增長，將有更多的人通過數據來尋求專業問題的答案。
  • 精心整理4大類12個圖表類型,輕鬆搞定數據可視化
    今天，我會為大家分享4大類型共12種圖表，並解釋它們適合使用的場景以供大家參考。本篇適合收藏起來，需要的時候找出來看一遍。數據報表中常用圖表：柱形圖和條形圖；折線圖統計與分析常用圖表：直方圖；散點圖產品經理常用圖表：桑基圖；熱力圖；同期群圖經常被濫用的圖表：餅圖；雷達圖；面積圖；氣泡圖數據報表中常用圖表1、柱形圖和條形圖在呈現非連續性數據指標時，常常使用柱形圖和條形圖。
  • 在PPT中製作SWOT分析圖表,重要的幾個方法與技巧
    SWOT分析（也稱之為SWOT矩陣）就是將與研究對象密切相關的各種因素如內部的優勢、劣勢和外部的機會、威脅等，通過調查列舉出來，並依照矩陣形式排列，然後用系統分析的思想，把各種因素相互匹配起來加以分析，從而產生一系列未來行動的決策。
  • 用DataFocus將Excel數據繪製圖表後的編輯與美化
    用DataFocus將Excel數據繪製圖表後的編輯與美化 前面的內容我們了解到，專業的圖表需要有 圖表類型簡單、觀點表達明確、細節處理到位、設計美觀等特點，以及了解了圖表的繪製方式和圖表的選擇。
  • 不會高效挑選圖表,做什麼數據分析?
    ： ·數據的類型：定性和定量 ·數據之間的關係 ·數據之間的對比 ·數據的邏輯 數據的類型 如何對定性數據進行總結？
  • Excel中如何製作組合圖表?——以柱狀圖折線圖組合為例
    在Excel中，有時候單一的圖表類型無法滿足數據的多元化展示，這時就要考慮多種圖表的組合，所以本文就以柱狀圖和折線圖的組合為例，介紹一下組合圖表的製作方法。在下圖中，以年份為橫坐標，營業收入用柱狀圖表示，利潤用折線圖表示。
  • excel圖表製作技巧:如何將多個銷售項目,做成九宮格
    B.九宮格圖表的製作需要依賴函數和輔助數據區域搭配完成，所以下圖3的輔助數據區域就出場了：單元格公式：=MOD(COLUMN(A1)-1,5)*200MOD函數：MOD(被除數,除數)，用於返回兩數相除的餘數。
  • Excel圖表應用:現代簡約風格的纖細圓環圖製作方法
    前面和教大家製作過溫度計圖表的方法，展示工作完成率今天再教大家一個纖細圓環圖表製作方法，如下圖，非常符合責現代簡約具體操作步驟：1、表格添加輔助數據，輸入公式：=1-F4，再下拉填充公式，也就是計算出未完成率2、點擊【插入】選項卡的中【插入餅圖或圓環圖】按鈕，選擇【圓環圖】3、點擊【格式】選項卡中【選擇數據】按鈕調出選擇數據源窗口，在圖例項中點擊【添加】按鈕，系列值選擇第一行數據，最後點擊【確定】按鈕返回選擇數據源窗口4、製作纖細圓環圖的關鍵一步
  • 數據可視化配色指南:三大配色方法,做出諮詢報告一樣的圖表
    作者 Michael Yi伊瓢 編譯量子位 出品 | 公眾號 QbitAI做數據圖表的時候，只會用Excel裡的系統默認顏色？別別別，大家都用默認配色，千篇一律，毫無特點。可是學習色彩設計，又是十分費工夫的一件事，不僅要搞明白RGB、CMYK等各種顏色體系，搞懂各種配色方法，重點是還要看大量的案例，培養良好的審美觀，防止自己做出來的東西辣眼睛……不如我們來「一文學會」系列吧，這篇Michael Yi發在Medium上的文章，就簡單清晰的介紹了三種數據可視化中的配色方法，讓你的圖表看起來清晰
  • excel的形狀與圖表——讓數據展示更加有趣
    雖然excel的主要功能是數據的統計與分析，但是也具有word、PPT中的某些圖表形狀功能。使用這些功能，可以使數據與圖形結合，從而更形象化、多樣化地呈現內容。比如形狀圖片的格式變換、smartart圖形、組合圖表以及動態圖表等。現在就一起來看看這些形狀與圖表功能的常用操作吧。