超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

贊!APP數(shù)據(jù)圖表設(shè)計(jì)的類型和制作方法全面總結(jié)

2015-12-14    用心設(shè)計(jì)

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


來(lái)源:莫貝網(wǎng)

做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ú)外乎下面這幾類:

天氣類

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

運(yùn)動(dòng)類

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

健康類

健康類的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ù)類

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

專業(yè)數(shù)據(jù)分析類

隨著移動(dòng)辦公的需要,有一些專業(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ù)類APP可采用用藍(lán)色、綠色系作為底色。

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

△ 左(Apple Health)中(支付寶)右(Dribbble)

D)圖片底

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

△ Dribbble

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

△ Misfit Shine

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

△  左(天氣通)中(墨跡天氣)右(Yahoo天氣)

二、圖表類型

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

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)條形圖&柱狀圖

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

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

△ Dribbble

F)熱度圖

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

△ Dribbble

G)雷達(dá)圖

[雷達(dá)圖] 在比較多個(gè)類別數(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)的重點(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è)面中展示兩到三種類型的數(shù)據(jù),如何設(shè)計(jì)?

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

△ 上:中右(Dribbble)  下:中(FitPort)右(Spendee)

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

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

用戶可能要刷幾屏才能把所有的數(shù)據(jù)閱讀完,此時(shí),建議每個(gè)模塊單獨(dú)采用一種圖表類型,各個(gè)模塊的圖表類型均不同,這樣會(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開發(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

作者微信公眾號(hào):yoyofootprint,歡迎關(guān)注喲。

原文地址:yoyozhou
作者:周莜視界

藍(lán)藍(lán)設(shè)計(jì)m.miumiuwan.com )是一家專注而深入的界面設(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ù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔