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