數(shù)據(jù)可視化在移動(dòng)端的應(yīng)用

2022-12-5    seo達(dá)人

1.應(yīng)用場(chǎng)景

數(shù)據(jù)可視化在移動(dòng)端的主要體現(xiàn)是“數(shù)據(jù)圖表”,我們最常用的數(shù)據(jù)設(shè)計(jì)組件就是:柱狀圖、折線圖、環(huán)形圖等,它們簡(jiǎn)單易懂,容易被用戶接受。它們常常出現(xiàn)在與我們生活息息相關(guān)的產(chǎn)品當(dāng)中,例如健身 app 中使用圖表記錄我們體重的變化;效率工具型的 app 記錄分析你在某一件事情的花費(fèi)的時(shí)間;金融理財(cái)展示股市中某一支股票的價(jià)格走勢(shì)等等。

 

2.數(shù)據(jù)可視化的特點(diǎn)

數(shù)據(jù)可視化屬于一種理性思維,產(chǎn)品通過(guò)圖表可以向用戶清晰的反應(yīng)用戶在每一個(gè)項(xiàng)目中所花費(fèi)的時(shí)間和精力,用戶可以通過(guò)數(shù)據(jù)可視化的圖表形式快速了解到其中的信息?,F(xiàn)在iOS 和 Android 平臺(tái)暫時(shí)沒(méi)有推出在數(shù)據(jù)可視化的設(shè)計(jì)規(guī)范,但是大家只要按照平臺(tái)的基本規(guī)范設(shè)計(jì),相信都能設(shè)計(jì)出美觀、大方數(shù)據(jù)圖表。如果大家對(duì)數(shù)據(jù)可視化有興趣,這里向大家推薦 ANtv(https://antv.alipay.com/zh-cn/index.html)螞蟻數(shù)據(jù)可視化團(tuán)隊(duì),ANtv 是國(guó)內(nèi)在數(shù)據(jù)可視化發(fā)展最完善的團(tuán)隊(duì)之一。 

 

3.使用原則

在數(shù)據(jù)可視化設(shè)計(jì)的時(shí)候我們首先要注意的是盡量避免使用“復(fù)雜”的數(shù)據(jù)表現(xiàn)形式,針對(duì)于普通用戶我們要始終堅(jiān)持 – 簡(jiǎn)單易懂的原則。其次在選擇數(shù)據(jù)表現(xiàn)形式的時(shí)候一定要考慮到是否適用于目標(biāo)數(shù)據(jù),如果不能清晰的向用戶清晰的傳遞出數(shù)據(jù)背后的信息,那么建議你重新進(jìn)行分析,更換數(shù)據(jù)表現(xiàn)形式。在我們經(jīng)常使用的數(shù)據(jù)圖表中,柱狀圖擅長(zhǎng)數(shù)值比較;折線圖擅長(zhǎng)做數(shù)據(jù)趨勢(shì)展示;餅圖和環(huán)形圖適用于各類數(shù)據(jù)比例比較。這里我們需要注意的是折線適用于具有連貫關(guān)系數(shù)據(jù)緯度進(jìn)行比較,而柱狀圖則不需要。我們以不同蔬菜的價(jià)格比較和單個(gè)蔬菜價(jià)格趨勢(shì)為例,例如當(dāng)我們?cè)诒容^各種蔬菜的價(jià)格的時(shí)候,由于各品類蔬菜沒(méi)有任何連貫性的邏輯關(guān)系,所以折線圖不合適,而柱狀圖則能清晰的表達(dá)蔬菜之間價(jià)格比對(duì)。
蔬菜品種之間沒(méi)有任何連續(xù)性,所以不適合用折線圖來(lái)表示;而單個(gè)蔬菜的價(jià)格走勢(shì)是通過(guò)具有連續(xù)性的“時(shí)間”緯度進(jìn)行比較的,所以趨勢(shì)圖選擇折線圖更加合適。
餅圖不適用于分類過(guò)多的數(shù)據(jù)展示,隨著數(shù)據(jù)種類的增加切片的數(shù)量也隨之增加,每個(gè)切片的大小過(guò)于相似,無(wú)法達(dá)到數(shù)據(jù)對(duì)比的目的。
相對(duì)PC,手機(jī)屏幕展示的區(qū)域有限,不適宜展現(xiàn)數(shù)據(jù)緯度過(guò)多的數(shù)據(jù)。假設(shè)我們遇到數(shù)據(jù)緯度眾多的數(shù)據(jù),我們可以通過(guò)橫軸交互來(lái)增加數(shù)據(jù)展示區(qū)域。
我們還可以對(duì)數(shù)據(jù)進(jìn)行梳理清洗,通過(guò)增加交互步驟減少用戶的記憶負(fù)擔(dān),分段查看數(shù)據(jù)。例如燈塔專業(yè)版中的行業(yè)數(shù)據(jù)將電影行業(yè)中涵蓋的信息分成票房、影片數(shù)、影院數(shù)、銀幕數(shù)等維度進(jìn)行分析。

 

4.場(chǎng)景分析

柱狀圖

柱狀圖擅長(zhǎng)對(duì)不同類型的數(shù)據(jù)進(jìn)行數(shù)值比較,柱狀圖之間的條目相對(duì)獨(dú)立,數(shù)據(jù)之間不需要有邏輯的關(guān)聯(lián)性。我們常用的柱狀圖分為橫向柱狀圖和縱向柱狀圖,如下圖:
兩者的區(qū)別在于縱向柱狀圖帶有一定的邏輯關(guān)系,可用于 TOP 排名,數(shù)值越大的位置越靠上。例如 iOS 系統(tǒng)中會(huì)記錄你最常使用的 App 形成縱向柱狀圖,并按照使用 App 的時(shí)長(zhǎng)大小進(jìn)行一次排列。

 

橫向柱狀圖

橫向柱狀圖只需在以 X 軸為基線通過(guò)對(duì)比柱形圖的長(zhǎng)短就可以進(jìn)行數(shù)據(jù)比較,因其簡(jiǎn)潔、直白的設(shè)計(jì)形式深受用戶們的喜愛(ài),應(yīng)用領(lǐng)域極廣,是我們最常見(jiàn)到的圖表形式之一。例如在支付寶中會(huì)顯示用戶每月的消費(fèi),并能通過(guò)橫軸交互查看更多數(shù)據(jù)。

 

縱向柱狀圖

縱向柱狀圖以 Y 軸為基線通過(guò)對(duì)比柱形圖的長(zhǎng)短就可以進(jìn)行數(shù)據(jù)比較,縱向柱狀圖區(qū)別于橫向柱狀圖的地方在于:在具有一定關(guān)聯(lián)性的數(shù)據(jù)種類進(jìn)行比較的時(shí)候,可以通過(guò)數(shù)值的大小依次排列顯示明確數(shù)據(jù)等級(jí)關(guān)系。例如網(wǎng)易有錢(qián)中會(huì)按照你消費(fèi)的品類數(shù)值的大小進(jìn)行排布,讓用戶明確知道自己在那一方面消費(fèi)最多,并且依靠 Y 軸交互我們可以向下滑動(dòng)查看更多數(shù)據(jù)信息。

 

折線圖

折線圖通過(guò)線鏈接橫向相鄰數(shù)據(jù)的數(shù)據(jù)表現(xiàn)形式,通常相鄰數(shù)據(jù)之間都有一定的邏輯關(guān)系,一般以時(shí)間屬性為主,表達(dá)一定周期之內(nèi)的趨勢(shì)走向。
折線圖在金融領(lǐng)域的產(chǎn)品應(yīng)用極其廣泛,“折線圖+漲幅數(shù)據(jù)”無(wú)疑是吸引用戶理財(cái)?shù)睦?。這時(shí)折線圖不單單代表數(shù)據(jù),在用戶心中已經(jīng)成為一種標(biāo)志。
當(dāng)然折線圖最重要還是記錄段時(shí)間之內(nèi)的趨勢(shì)變化,例如微信運(yùn)動(dòng)中記錄用戶每天的運(yùn)動(dòng)量,用戶可以根據(jù)折線圖反饋的信息來(lái)調(diào)整自己的運(yùn)動(dòng)計(jì)劃。

 

餅狀圖

餅狀圖是通過(guò)將一個(gè)圓餅按照分類的占比劃分成多個(gè)區(qū)塊,整個(gè)圓餅代表數(shù)據(jù)的總量,每個(gè)區(qū)塊(圓?。┍硎驹摲诸愓伎傮w的比例大小,所有區(qū)塊(圓弧)的加和等于 100%。
現(xiàn)在 App 較少用到餅狀圖而更多的采用環(huán)形圖,因?yàn)轱灎顖D和環(huán)形圖兩者有異曲同工之妙,都是應(yīng)用于表示不同分類的占比情況,通過(guò)弧度(角度)大小來(lái)對(duì)比各種分類。但相對(duì)于餅狀圖,環(huán)形圖的空間利用率更高。

 

環(huán)形圖

由兩個(gè)及兩個(gè)以上大小不一的餅圖疊在一起,挖去中間的部分所構(gòu)成的圖形。通過(guò)弧長(zhǎng)來(lái)比較各類數(shù)據(jù)的占比大小。
在燈塔專業(yè)版中通過(guò)環(huán)形圖能夠準(zhǔn)確的表達(dá)出各個(gè)電影所占總場(chǎng)次的比例。

 

5.畫(huà)重點(diǎn)

1.在數(shù)據(jù)可視化的設(shè)計(jì)當(dāng)中我們要是始終堅(jiān)持“簡(jiǎn)單易懂”的原則,選擇最合適的數(shù)據(jù)表達(dá)形式
2.柱狀圖擅長(zhǎng)數(shù)值比較;折線圖擅長(zhǎng)做數(shù)據(jù)趨勢(shì)展示;餅圖和環(huán)形圖適用于各類數(shù)據(jù)比例比較。
3.在有限的移動(dòng)端的顯示區(qū)域,我們可以借助于 XY 軸交互手段和對(duì)數(shù)據(jù)進(jìn)行梳理增加交互步驟分段查看更多數(shù)據(jù)。 

 


作者:姜正

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》數(shù)據(jù)可視化在移動(dòng)端的應(yīng)用

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司





分享本文至:

日歷

鏈接

個(gè)人資料

存檔