常使用數(shù)據(jù)可視化的APP大致分為這幾類:「天氣類」「生理健康類」「財務(wù)記賬類」「數(shù)據(jù)分析類」「運動健身類」等。下面為大家介紹一些代表性的APP。
「天氣類」
「墨跡天氣」和「天氣通」根據(jù)城市實景和當下天氣對實時景觀圖進行模糊處理,增強產(chǎn)品的關(guān)聯(lián)性和代入感。
「生理健康類」
Clue會根據(jù)不同階段的心情做可視化,比如易孕期會用一些生理圖形提醒用戶你的狀態(tài)。這或許會給我們做自己的產(chǎn)品帶來一些思考。
你今天真好看是一款人工智能測膚美妝的應(yīng)用,會使用各圖表闡明你的膚質(zhì)水平。
「財務(wù)記賬類」
記賬類APP和理財類APP幾乎囊括了所有圖表樣式,折線圖、餅狀圖、條形圖都不在話下。
「專業(yè)數(shù)據(jù)分析類」
移動端設(shè)備的高速發(fā)展,使專業(yè)的數(shù)據(jù)分析平臺不再局限于PC端展示,于是移動端的數(shù)據(jù)分析軟件也應(yīng)運而生。以下為友盟和神策商店圖。
「運動健身類」
移動設(shè)備在消費市場得到很大的變化——從手機到可穿戴設(shè)備。移動設(shè)備越來越實惠,實現(xiàn)了前所未有的大面積普及。
大家對步數(shù)、飲食、體重等數(shù)據(jù)也更加看重。市面上做的比較好的APP有:keep、薄荷健康、小米運動等。
同事給我推薦了一個應(yīng)用—garmin connect(佳明),它的界面繽紛、數(shù)據(jù)豐富、但是卻不會讓人感受到焦躁,這里面包含了一些設(shè)計原理。
介紹這么多數(shù)據(jù)可視化為主的APP,相信大家對數(shù)據(jù)可視化已經(jīng)有了初步的感受。想要做好數(shù)據(jù)可視化應(yīng)該怎么著手呢?以下結(jié)合實際案例進行說明。
2.可視化數(shù)據(jù)圖的配色
在上篇文章我們了解到,顏色是有溫度和進退性的,不同的配色帶來不同的體驗。因此,可視化設(shè)計也需要考慮到配色對數(shù)據(jù)的影響。
「深色底」
深色底圖表通常為了營造一種氛圍和感覺,展示出的數(shù)據(jù)信息一般不會特別繁雜,數(shù)據(jù)選用亮度較高的色彩,這樣數(shù)據(jù)信息容易從深色中跳出來。
「淺色底」
如果需要清晰展示大量的數(shù)據(jù),建議選用淺色底,淺色底上識別度相對較高。但需要注意的是:如果數(shù)據(jù)信息量太小,淺色底上會顯得頁面太空,這會讓用戶覺得你的平臺沒有內(nèi)容或者熱度。當然,有經(jīng)驗的設(shè)計師可以通過圖形質(zhì)感、顏色等優(yōu)化。
下面就以小米運動為例:我們對2個頁面的閱讀效率進行比較。在以數(shù)據(jù)分析為主、有大量數(shù)據(jù)的頁面中,淺色底的頁面可讀性更高,閱讀效率也更高。
「彩色底」
有時為了讓頁面更加生動,我們將數(shù)據(jù)信息展示在大面積色塊上。商務(wù)金融類APP可采用用藍色、綠色系作為底色。運動類APP可選用的色彩自由度更高,偏活力的色彩,如橙色、黃色、橘色等都可以。
「圖片底」
圖片底:為了讓數(shù)據(jù)更有可信度和關(guān)聯(lián)度,在一些天氣類APP中經(jīng)常會使用這種方式,圖片內(nèi)容與數(shù)據(jù)信息產(chǎn)生關(guān)聯(lián),提升可讀性。
3.各類圖表的使用場景
每種圖表都會對應(yīng)它適合的數(shù)據(jù)類型。作為設(shè)計師一定要了解它們之間的對應(yīng)關(guān)系,使得設(shè)計有理有據(jù)。
「折線圖」
顯示為一組由單個線條連接的點;用于表示在一段連續(xù)時間內(nèi)發(fā)生的大量數(shù)據(jù)波動,有單折線圖和多折線圖之分。
「曲線圖」
顯示為光滑的曲線;如果數(shù)據(jù)是連貫的,且點與點之間的數(shù)據(jù)具有分析價值,用曲線圖比用折線圖合適。
「餅圖&環(huán)形圖」
環(huán)形圖可以理解為空心的餅狀圖。常用于顯示部分相對總體的百分比。還可用來顯示進度加載等。
「條形圖&柱狀圖」
條形圖可以理解為橫著的柱狀圖。常用于展示同屬性的數(shù)據(jù)、可以對比其數(shù)值。
「熱度圖 / 熱力圖」
常用于地理位置分布統(tǒng)計,進而可以分析景區(qū)、站點、高速等的人流分布狀況。另外APP界面的點擊熱力圖可以清晰展示哪個功能被點擊的次數(shù)最多,給我們帶來體驗優(yōu)化的依據(jù)。
「雷達圖」
在比較多個類別程度和查看整體情況很適合,既可以查看自身整體情況,也可以對比多個方面的數(shù)據(jù)。這是一種展示效果不錯的數(shù)據(jù)表達方式,在展示整體綜合信息上很直觀。
「儀表盤」
儀表盤設(shè)計最初來源于工業(yè)設(shè)計的車輛控制臺,由于其專業(yè)、科技感的內(nèi)核,現(xiàn)在多被一些強調(diào)科技、專業(yè)的產(chǎn)品所借鑒、例如網(wǎng)絡(luò)監(jiān)控、金融信用等。
4.圖表運用到界面中去
了解基本的圖表類型后,接下來的重點是圖表的界面設(shè)計。移動設(shè)備的屏幕較之PC端小,用戶每次可接收的數(shù)據(jù)信息量小,所以如何有效運用圖表的設(shè)計是我們需要掌握的一項很重要的部分。
「單個數(shù)據(jù)」
頁面中就展示一個比較重要的數(shù)據(jù),如何設(shè)計?圓形是一個不錯的選擇,因為它可以在頁面中形成視覺中心。不管是餅狀圖,還是環(huán)形圖,或是擁有視覺中心的雷達圖,都會讓頁面上呈現(xiàn)一個視覺重點。
上圖的案例,為了讓頁面更加豐富,采用重色將界面撐滿,求得視覺上的飽滿。
「多組數(shù)據(jù)」
手機屏幕空間有限,多組數(shù)據(jù)在展示的時候一定要盡量讓主次數(shù)據(jù)的圖表類型不一致。曲線圖、餅圖、環(huán)形圖、柱狀圖等基礎(chǔ)圖表,交替使用,這樣使得整個頁面層次清晰,內(nèi)容豐富。最常見的錯誤就是設(shè)計師沒有對信息區(qū)分層級,所有的內(nèi)容看起來都一樣重要。
當設(shè)計師面對幾大模塊展示大量的數(shù)據(jù)信息時,建議每個模塊單獨采用一種圖表類型,各個模塊的圖表類型均不同,這樣會減輕用戶對數(shù)據(jù)展示的疲勞度。
5.可視化數(shù)據(jù)的動效
動效可以提升產(chǎn)品趣味性,尤其在展示大量數(shù)據(jù)信息時,使用動效能緩解閱讀壓力。數(shù)據(jù)圖表中常見的動效有以下幾種:
「動態(tài)呈現(xiàn)數(shù)據(jù)」
「導航切換」
「功能動態(tài)切換(點擊按鈕切換形態(tài))」
「屏幕橫縱向切換數(shù)據(jù)」
寫在最后:希望我們都能好好把握數(shù)據(jù)可視化,把握數(shù)據(jù)時代,真正讓數(shù)據(jù)驅(qū)動業(yè)務(wù),驅(qū)動發(fā)展。不過我們也不要為了使自己的設(shè)計看起來炫酷而加上各種發(fā)光漸變,過分的動效導致加載無能,因為完美的方案不是沒什么可以加,而是沒什么可以減。
作者:一個辛普森
轉(zhuǎn)載請注明:學UI網(wǎng)》用戶體驗大小事—數(shù)據(jù)可視化設(shè)計五點論
藍藍設(shè)計( ssll180.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司