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