轉(zhuǎn)帖|行業(yè)資訊|編輯:鄭恭琳|2016-02-05 09:33:46.000|閱讀 2746 次
概述:做APP的數(shù)據(jù)圖表設(shè)計之前,你考慮過移動端屏幕大小與屬性嗎?考慮過可視化數(shù)據(jù)圖表,提升APP氣質(zhì)嗎?考慮過在APP和WEB端,數(shù)據(jù)圖表的展示有何不同嗎?也許你都考慮過,但作為一篇科普文,還是要從最基礎(chǔ)的說起。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
三、圖表組織
了解基本的圖表類型后,接下來的重點是進(jìn)行圖表的組織。
移動設(shè)備最大的特點是屏幕小,用戶每次可接收的數(shù)據(jù)信息量小,所以如何有效組織圖表信息是一個重要的設(shè)計點。
A)如何展示單個數(shù)據(jù)?
鑒于APP屏幕小,單個頁面中就展示一個重要數(shù)據(jù),如何設(shè)計?
此時選用圓形,會是一個不錯的選擇,因為它在頁面中形成視覺中心。不管是餅狀圖,還是環(huán)形圖,或是擁有視覺中心的雷達(dá)圖,都會讓頁面上呈現(xiàn)一個視覺重點。
單個數(shù)據(jù)未免有些單調(diào),為了讓頁面更加豐富,可采用深色、彩色、圖片為背景輔以純色的圖形(如芝麻信用分),或者將像Clue一樣,用重色將圖形撐滿,求得視覺上的飽滿。
△ 中(Clue)右(支付寶)
B)如何展示主次數(shù)據(jù)?
要在頁面中展示兩到三種類型的數(shù)據(jù),如何設(shè)計?
此時要注意以稍大的篇幅突出重點數(shù)據(jù),弱化次要數(shù)據(jù),盡量讓主次數(shù)據(jù)的圖表類型不一致,曲線圖、餅圖、環(huán)形圖、柱狀圖等基礎(chǔ)圖表,交替使用,這樣使得整個頁面層次清晰,內(nèi)容豐富。
△ 上:中右(Dribbble) 下:中(FitPort)右(Spendee)
C)如何展示大量數(shù)據(jù)?
還有一種類型,整個頁面要分幾大模塊展示大量的數(shù)據(jù)信息,如何設(shè)計?
用戶可能要刷幾屏才能把所有的數(shù)據(jù)閱讀完,此時,建議每個模塊單獨采用一種圖表類型,各個模塊的圖表類型均不同,這樣會減輕用戶對數(shù)據(jù)展示的疲勞度。
△ City Guides
動效可以提升產(chǎn)品趣味性,尤其在展示大量數(shù)據(jù)信息時,使用動效能緩解閱讀壓力。數(shù)據(jù)圖表中常見的動效有以下幾種:
A)以時間先后動態(tài)呈現(xiàn)數(shù)據(jù)
△ Spendee
B)導(dǎo)航切換
△ Dribbble
C)展示更多功能
△ Dribbble
D)屏幕橫縱向切換數(shù)據(jù)
△ Dribbble
一款字體使用的好,能彰顯整個APP的氣質(zhì),讓整個APP特立獨行。但鑒于APP字體版權(quán)及字體包大小,多數(shù)APP開發(fā)者都不把字體作為考慮范疇。
CityGuides是一款特別出色的APP,其圖表設(shè)計很棒,字體選用也與整個風(fēng)格設(shè)計相得益彰,非常出彩。有興趣的可以網(wǎng)上下載這個字體(Optigiant),非商業(yè)用途的情況很受用。
△ CityGuides by National Geographic
APP中數(shù)據(jù)圖表設(shè)計遠(yuǎn)不止于此,還是實踐出真知。
最后附上一個在數(shù)據(jù)圖表設(shè)計上有豐富經(jīng)驗的團隊Rally//dribbble.com/rally
代表作:City Guides、Snowbird
轉(zhuǎn)自:
點擊【圖表專題】了解更多圖表相關(guān)資訊
新年新禧新氣象,送禮送福送優(yōu)惠!優(yōu)惠詳情點擊查看>>
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn