2017-3-21 周周
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里
不管是在APP還是PC,不管是Loading頁,還是在音樂播放器中,進(jìn)度條的運(yùn)用都非常廣泛,形式也多種多樣,讓人眼花繚亂。做為一個交互設(shè)計(jì)新手,項(xiàng)目中也經(jīng)常碰到進(jìn)度條設(shè)計(jì),總有很多疑惑在心中揮之不去:
目標(biāo): 為什么會有進(jìn)度條的存在?引入進(jìn)度條的目的是什么?
類型: 結(jié)合使用場景,進(jìn)度條類型有哪些呢?它們的目標(biāo)是什么?需要展示哪些信息?
形式: 進(jìn)度條形式多種多樣,怎樣從本質(zhì)上區(qū)分呢?
運(yùn)用: 實(shí)際項(xiàng)目中如何選用合適的進(jìn)度條呢?
下面列出了3種常見的進(jìn)度條樣式,我們將結(jié)合這3種進(jìn)度條,一步一步梳理,希望可以幫助大家獲得更加清晰的認(rèn)知。
進(jìn)度條是較為通俗的叫法,代表的是與進(jìn)度展示相關(guān)的內(nèi)容,但并不局限于“條形”。它廣泛的存在于各種設(shè)計(jì)中。
從“進(jìn)度”一詞不難看出,“進(jìn)度條”這一視覺元素其實(shí)是為了讓用戶清晰的了解當(dāng)前狀態(tài)。狀態(tài)表現(xiàn)一般都有一定的參照,同時存在限定值,如果單純的通過數(shù)字/文字表達(dá),不便于用戶理解,所以引入了圖形化的元素,也就是我們常見的進(jìn)度條。
進(jìn)度條本身比較單一,但是當(dāng)和場景結(jié)合起來,就會衍生出不同的類型。不同類型的進(jìn)度條設(shè)計(jì)目標(biāo),相關(guān)信息元素均不相同。
進(jìn)度條的實(shí)際運(yùn)用情況多種多樣。有些進(jìn)度條是實(shí)時變化的,有些則是靜止不動的。當(dāng)放到實(shí)際的場景中,進(jìn)度條在場景中的含義就有了進(jìn)一步的擴(kuò)展。結(jié)合使用場景,我將它們分別分成3種類型,分別是“進(jìn)程型”進(jìn)度條,“進(jìn)程型+狀態(tài)型”進(jìn)度條和“狀態(tài)型”進(jìn)度條。下面將按照如下思路細(xì)致介紹這3種進(jìn)度條。
1. “進(jìn)程型”進(jìn)度條
一般為動態(tài),表明程序正忙于某些功能
“進(jìn)程型”進(jìn)度條十分常見,也經(jīng)常被人們提及,像常見的Loading進(jìn)度條、下載進(jìn)度條等均屬于此種。在引言的例子中,最左邊的進(jìn)度條就是典型的例子。
在此種使用場景下,進(jìn)度條的設(shè)計(jì)目標(biāo)可以歸納為以下兩點(diǎn):
1、幫助用戶明確程序正在做什么,是否正常;
2、如果一定要讓用戶等待,那就緩解他們等待時的焦慮感;
這類使用場景具有3個顯著特征:
1、“進(jìn)程”概念十分明顯,只有將進(jìn)程走完,才能達(dá)到較為穩(wěn)定的狀態(tài);
(例如只有Loading完,才能看到完整的頁面;只有掃描完,才能獲知完整的掃描結(jié)果 )
2、一般都需要用戶等待;
3、需要讓后臺進(jìn)程在前臺可見,幫助用戶明晰當(dāng)前進(jìn)度;
Alan Cooper在《About Face 交互設(shè)計(jì)精髓》一書中列舉了進(jìn)度對話框需要完成的任務(wù):
1、向用戶清楚地表明正在運(yùn)行一個耗時的進(jìn)程;
2、向用戶清楚地表明一切正常;
3、向用戶清楚地表明進(jìn)程還需要多長時間;
4、向用戶提供一種取消操作和恢復(fù)程序控制的方式;
結(jié)合上面的設(shè)計(jì)目標(biāo)、場景特征和進(jìn)度條任務(wù),就能夠?qū)Υ祟愡M(jìn)度條應(yīng)當(dāng)包含哪些信息元素,有了更為清楚的了解。一個完整的“進(jìn)程型”進(jìn)度條包含以下信息:
1、說明當(dāng)前正在進(jìn)行的進(jìn)程,并展示相關(guān)信息(e.g.下載中,動態(tài)效果)
2、說明當(dāng)前進(jìn)程處于正常狀態(tài),并展示相關(guān)信息(e.g.下載速度)
3、說明進(jìn)程進(jìn)行到的程度,并展示剩余時間(e.g.當(dāng)前已下載比例,距完成還有多久)
4、提供強(qiáng)相關(guān)的操作(e.g.取消,開通會員提升速度)
在實(shí)際情況下,并不是所有的“進(jìn)程型”進(jìn)度條都具有上述4個方面的信息。進(jìn)度條的信息元素會受到很多因素的影響,比如進(jìn)程的時間長短,使用情境的上下文,項(xiàng)目實(shí)現(xiàn)成本等。這些不僅會影響信息元素的有無,同時還會影響各信息的優(yōu)先級。
2. “狀態(tài)型”進(jìn)度條
一般為靜態(tài),表明當(dāng)前所處狀態(tài)
在大部分講進(jìn)度條的文章中,“狀態(tài)型”進(jìn)度條較少有人提及,但不管是在實(shí)際生活中,還是互聯(lián)網(wǎng)產(chǎn)品中都十分常見。下圖中的汽車時速表,就是典型的“狀態(tài)型”進(jìn)度條,形式上也脫離了條形。
在此種使用場景下,進(jìn)度條的設(shè)計(jì)目標(biāo)主要為兩點(diǎn):
1、幫助用戶明確當(dāng)前狀態(tài);
2、為用戶的后續(xù)決策提供充足的支持;
這類使用場景具有3個顯著特征:
1、“進(jìn)程”概念被削弱,有些甚至完全沒有進(jìn)程概念;
2、不需要用戶等待;
3、充分展示較為穩(wěn)定的“當(dāng)前狀態(tài)”,需要讓用戶了解基本狀況,并基于此作出相關(guān)決策。
在引言的例子中,最右邊的進(jìn)度條則為“狀態(tài)型”進(jìn)度條。
此種場景下的進(jìn)度條及相關(guān)信息需要完成以下任務(wù):
1、向用戶清楚地表明當(dāng)前狀態(tài);
2、向用戶清楚地表明重要的進(jìn)度節(jié)點(diǎn);
3、向用戶清晰地展示他可能需要的操作;
結(jié)合上面的設(shè)計(jì)目標(biāo)、場景特征和進(jìn)度條任務(wù),就能夠更清晰的得出此類進(jìn)度條應(yīng)當(dāng)包含哪些信息元素。一個完整的“進(jìn)程型”進(jìn)度條包含以下信息:
1、說明當(dāng)前的展示項(xiàng)及對應(yīng)的狀態(tài),并展示相關(guān)信息;(e.g.電腦管家中的“容量”title)
2、若狀態(tài)分階段,即這一階段和下一階段的狀態(tài)有較大差別,則需要說明重要的變化節(jié)點(diǎn);(e.g.“汽車轉(zhuǎn)速表”中的正常階段和標(biāo)紅階段)
3、提供強(qiáng)相關(guān)的操作(e.g.電腦管家中的“清理”)
在實(shí)際情況情況下,并不是所有的“狀態(tài)型”進(jìn)度條都有這3類信息,都需要結(jié)合實(shí)際的場景和上下文進(jìn)行梳理。例如,汽車時速表中就沒有狀態(tài)的“重要節(jié)點(diǎn)”,也無需“汽車時速表”的title,相關(guān)的加速、減速操作也是和進(jìn)度條及相關(guān)信息區(qū)分開來的。上述3條信息的有無,信息的優(yōu)先級高低,都是需要結(jié)合實(shí)際項(xiàng)目具體判斷的。
3. “進(jìn)程型+狀態(tài)型”進(jìn)度條
部分結(jié)合“進(jìn)程型”+“狀態(tài)型”的特點(diǎn)
此類進(jìn)度條較為特殊,是介于“進(jìn)程型+狀態(tài)型”之間的進(jìn)度條類型,較為常見的例子就是音頻&視頻播放器中的進(jìn)度條,引言例子中,中間的進(jìn)度條則為此種。
它為什么有“進(jìn)程型”的概念?
-使用場景中有明顯的“進(jìn)程”概念(e.g.音樂播放器正在播放音樂,進(jìn)程結(jié)束則歌曲結(jié)束)
它為什么有“狀態(tài)型”的概念?
-無需用戶等待,進(jìn)度條展示當(dāng)前狀態(tài),這就是聆聽音樂的過程,過程的意義更大;
-幫助用戶明確當(dāng)前狀態(tài),為后續(xù)操作提供進(jìn)一步的支持;(e.g.快進(jìn)、上/下一曲)
在此種使用場景下,進(jìn)度條的設(shè)計(jì)目標(biāo)綜合了“進(jìn)程型”和“狀態(tài)型”兩種,主要為3點(diǎn):
1、幫助用戶明確程序正在做什么,是否正常;
2、幫助用戶明確當(dāng)前狀態(tài);
3、為用戶的后續(xù)決策提供充足的支持;
這類進(jìn)度條的使用場景具有3個顯著的特征:
1、有明確的進(jìn)程概念,和時間關(guān)聯(lián)緊密;
2、進(jìn)度條不是為了緩解等待的焦慮感,而是為了展示當(dāng)前狀態(tài),讓用戶做出相關(guān)決策;
3、對比完成狀態(tài),當(dāng)前狀態(tài)轉(zhuǎn)瞬即逝,但意義更大,用戶是在進(jìn)程中&當(dāng)前狀態(tài)下實(shí)現(xiàn)自己的目標(biāo);
此類進(jìn)度條需要完成的任務(wù)如下:
1、向用戶清楚地表明當(dāng)前正在運(yùn)行進(jìn)程,進(jìn)程是否正常;
2、向用戶清楚地表明當(dāng)前狀態(tài)、重要的進(jìn)度節(jié)點(diǎn);
3、向用戶清晰地展示可能需要的操作
“進(jìn)程型+狀態(tài)型”進(jìn)度條的信息也是同上述任務(wù)密切相關(guān)。主要包括
1、狀態(tài)類信息(e.g.當(dāng)前播放歌詞)
2、重要信息節(jié)點(diǎn)(e.g.進(jìn)度條中的白點(diǎn)代表了歌曲的高潮部分起始點(diǎn))
3、相關(guān)操作(e.g.上一曲、下一曲)
同樣,在實(shí)際場景中并不是這3種信息都存在?!斑M(jìn)程型”和“狀態(tài)型”信息兩者之間維持著微妙的平衡關(guān)系,兩者的優(yōu)先級高低也是隨著使用場景的變化而變化。
有很多文章都會進(jìn)度條的形式進(jìn)行過細(xì)致的分析,這次就不做過多的描述,主要總結(jié)一下常見進(jìn)度條形式的種類:
從變化方式來看,主要分為2類:
1、偏靜態(tài)進(jìn)度條
此種進(jìn)度條多用于“狀態(tài)型”進(jìn)度條。但現(xiàn)在也有很多做法在狀態(tài)型進(jìn)度條出現(xiàn)時,在很短的時間內(nèi)從0變到當(dāng)前值,同時插入一些動效。但這都是在極短的時間內(nèi)完成,之后進(jìn)度條趨于穩(wěn)定。
2、偏動態(tài)進(jìn)度條
此種進(jìn)度條多用于“進(jìn)程型”進(jìn)度條和“進(jìn)程型+狀態(tài)型”進(jìn)度條。大多數(shù)的做法是伴隨著整個進(jìn)程,進(jìn)度條均會伴隨動態(tài)效果。
從基礎(chǔ)形態(tài)來看,主要分為3類:
1、條形
2、圓形
3、不規(guī)則型
通過基礎(chǔ)形態(tài)+動態(tài)效果的集合,進(jìn)度條的形式可以千變?nèi)f化,有無限的發(fā)揮空間,也為進(jìn)度條的設(shè)計(jì)增添了不少趣味性。
通過上面的分析,相信大家對這3種進(jìn)度條都有了一定的了解,雖然3者都會涉及到進(jìn)度的展示,但是從本質(zhì)上看,是屬于完全不同的3種類型。只有依據(jù)真實(shí)的項(xiàng)目場景,選擇合適的進(jìn)度條類型,才能幫助自己實(shí)現(xiàn)設(shè)計(jì)意圖。
這個過程主要有4個步驟:
1、明確自己的設(shè)計(jì)意圖
場景中如果需要使用進(jìn)度條,想清楚自己的設(shè)計(jì)意圖是什么,是為了幫助用戶更明確當(dāng)前狀態(tài),并基于此作出決策呢?還是為了幫助在當(dāng)前進(jìn)程中減緩等待的焦慮感?
2、依據(jù)設(shè)計(jì)意圖選用合適的進(jìn)度條類型
結(jié)合自己的設(shè)計(jì)意圖,確定3類進(jìn)度條中哪種更適合當(dāng)前場景。同時,結(jié)合前文分析,帶入當(dāng)前項(xiàng)目進(jìn)行深挖,明確進(jìn)度條需要完成哪些任務(wù),展示哪些信息。
3、確定信息元素的優(yōu)先級
在明確展示信息之后,進(jìn)一步考慮信息優(yōu)先級,哪些最重要,哪些不重要,對當(dāng)前場景下的進(jìn)度條有更深層次的理解與思考。
4、采用合適的表現(xiàn)形式
進(jìn)度條的表現(xiàn)形式多種多樣,但無論何種形式都應(yīng)當(dāng)以前面的思考為前提,在此基礎(chǔ)之上,結(jié)合實(shí)際項(xiàng)目特點(diǎn),考慮適宜的基礎(chǔ)形態(tài)+動態(tài)效果,這樣的進(jìn)度條設(shè)計(jì)才是一個優(yōu)秀的設(shè)計(jì)。
以上都是個人關(guān)于進(jìn)度條的思考,希望可以沉淀些有用的信息幫助大家,也歡迎大家一起探討,互相學(xué)習(xí),不斷進(jìn)步。
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com