數據可視化在移動端的主要體現是“數據圖表”，我們最常用的數據設計組件就是：柱狀圖、折線圖、環形圖等，它們簡單易懂，容易被用戶接受。它們常常出現在與我們生活息息相關的產品當中，例如健身 app 中使用圖表記錄我們體重的變化；效率工具型的 app 記錄分析你在某一件事情的花費的時間；金融理財展示股市中某一支股票的價格走勢等等。數據可視化屬于一種理性思維，產品通過圖表可以向用戶清晰的反應用戶在每一個項目中所花費的時間和精力，用戶可以通過數據可視化的圖表形式快速了解到其中的信息。現在iOS 和 Android 平臺暫時沒有推出在數據可視化的設計規范，但是大家只要按照平臺的基本規范設計，相信都能設計出美觀、大方數據圖表。如果大家對數據可視化有興趣，這里向大家推薦 ANtv（https://antv.alipay.com/zh-cn/index.html）螞蟻數據可視化團隊，ANtv 是國內在數據可視化發展最完善的團隊之一。
3.使用原則
在數據可視化設計的時候我們首先要注意的是盡量避免使用“復雜”的數據表現形式，針對于普通用戶我們要始終堅持 – 簡單易懂的原則。其次在選擇數據表現形式的時候一定要考慮到是否適用于目標數據，如果不能清晰的向用戶清晰的傳遞出數據背后的信息，那么建議你重新進行分析，更換數據表現形式。在我們經常使用的數據圖表中，柱狀圖擅長數值比較；折線圖擅長做數據趨勢展示；餅圖和環形圖適用于各類數據比例比較。這里我們需要注意的是折線適用于具有連貫關系數據緯度進行比較，而柱狀圖則不需要。我們以不同蔬菜的價格比較和單個蔬菜價格趨勢為例，例如當我們在比較各種蔬菜的價格的時候，由于各品類蔬菜沒有任何連貫性的邏輯關系，所以折線圖不合適，而柱狀圖則能清晰的表達蔬菜之間價格比對。蔬菜品種之間沒有任何連續性，所以不適合用折線圖來表示；而單個蔬菜的價格走勢是通過具有連續性的“時間”緯度進行比較的，所以趨勢圖選擇折線圖更加合適。餅圖不適用于分類過多的數據展示，隨著數據種類的增加切片的數量也隨之增加，每個切片的大小過于相似，無法達到數據對比的目的。相對PC，手機屏幕展示的區域有限，不適宜展現數據緯度過多的數據。假設我們遇到數據緯度眾多的數據，我們可以通過橫軸交互來增加數據展示區域。我們還可以對數據進行梳理清洗，通過增加交互步驟減少用戶的記憶負擔，分段查看數據。例如燈塔專業版中的行業數據將電影行業中涵蓋的信息分成票房、影片數、影院數、銀幕數等維度進行分析。
柱狀圖
柱狀圖擅長對不同類型的數據進行數值比較，柱狀圖之間的條目相對獨立，數據之間不需要有邏輯的關聯性。我們常用的柱狀圖分為橫向柱狀圖和縱向柱狀圖，如下圖：兩者的區別在于縱向柱狀圖帶有一定的邏輯關系，可用于 TOP 排名，數值越大的位置越靠上。例如 iOS 系統中會記錄你最常使用的 App 形成縱向柱狀圖，并按照使用 App 的時長大小進行一次排列。
橫向柱狀圖
橫向柱狀圖只需在以 X 軸為基線通過對比柱形圖的長短就可以進行數據比較，因其簡潔、直白的設計形式深受用戶們的喜愛，應用領域極廣，是我們最常見到的圖表形式之一。例如在支付寶中會顯示用戶每月的消費，并能通過橫軸交互查看更多數據。
縱向柱狀圖
縱向柱狀圖以 Y 軸為基線通過對比柱形圖的長短就可以進行數據比較，縱向柱狀圖區別于橫向柱狀圖的地方在于：在具有一定關聯性的數據種類進行比較的時候，可以通過數值的大小依次排列顯示明確數據等級關系。例如網易有錢中會按照你消費的品類數值的大小進行排布，讓用戶明確知道自己在那一方面消費最多，并且依靠 Y 軸交互我們可以向下滑動查看更多數據信息。
折線圖
折線圖通過線鏈接橫向相鄰數據的數據表現形式，通常相鄰數據之間都有一定的邏輯關系，一般以時間屬性為主，表達一定周期之內的趨勢走向。折線圖在金融領域的產品應用極其廣泛，“折線圖+漲幅數據”無疑是吸引用戶理財的利器。這時折線圖不單單代表數據，在用戶心中已經成為一種標志。當然折線圖最重要還是記錄段時間之內的趨勢變化，例如微信運動中記錄用戶每天的運動量，用戶可以根據折線圖反饋的信息來調整自己的運動計劃。
餅狀圖
餅狀圖是通過將一個圓餅按照分類的占比劃分成多個區塊，整個圓餅代表數據的總量，每個區塊（圓弧）表示該分類占總體的比例大小，所有區塊（圓弧）的加和等于 100%。現在 App 較少用到餅狀圖而更多的采用環形圖，因為餅狀圖和環形圖兩者有異曲同工之妙，都是應用于表示不同分類的占比情況，通過弧度（角度）大小來對比各種分類。但相對于餅狀圖，環形圖的空間利用率更高。
環形圖
由兩個及兩個以上大小不一的餅圖疊在一起，挖去中間的部分所構成的圖形。通過弧長來比較各類數據的占比大小。在燈塔專業版中通過環形圖能夠準確的表達出各個電影所占總場次的比例。1.在數據可視化的設計當中我們要是始終堅持“簡單易懂”的原則，選擇最合適的數據表達形式2.柱狀圖擅長數值比較；折線圖擅長做數據趨勢展示；餅圖和環形圖適用于各類數據比例比較。3.在有限的移動端的顯示區域，我們可以借助于 XY 軸交互手段和對數據進行梳理增加交互步驟分段查看更多數據。
作者：姜正
轉載請注明：學UI網》數據可視化在移動端的應用
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
