筆者(?Д?)結合眾多案例，何場(chǎng)對UI 界面中的景設計場(chǎng)景設計“進(jìn)度”進(jìn)行具體的分析與思考。
進(jìn)度是大流幫助用戶(hù)消除恐懼心的結果表現，用戶(hù)的何場(chǎng)希望與恐懼是基于對結果的預期而產(chǎn)生的，希望是景設計場(chǎng)景設計來(lái)自??對積極結果的┐(′?｀)┌預期，會(huì )使用戶(hù)產(chǎn)生傾向性，大流恐懼來(lái)源于對行為消極結果的何場(chǎng)預期，會(huì )促使用戶(hù)在行為和意識上產(chǎn)生規避。景設計場(chǎng)景設計對于我們的大流目標用戶(hù)來(lái)說(shuō)，希望也許是何場(chǎng)最具鼓舞人心能力的動(dòng)機。
關(guān)于進(jìn)度的(de)景設計場(chǎng)景設計概念其實(shí)有??很多種，最主要的??大流是流程是：找到任務(wù)-開(kāi)始任(╯‵□′)╯務(wù)-任務(wù)進(jìn)行中-任務(wù)結束-反饋，這套流程是何場(chǎng)范圍最大，定義最??廣的景設計場(chǎng)景設計“進(jìn)度”闡述，用簡(jiǎn)單的大流話(huà)術(shù)表示則是“開(kāi)始-進(jìn)行-??結束ヽ(′?｀)ノ”三步驟。根據任務(wù)??的使用場(chǎng)景不同，展現方式也都就有所不同。
接下來(lái)，我開(kāi)始用不同場(chǎng)景下的展現形式來(lái)具體說(shuō)明，并分別敘述不同“進(jìn)度”場(chǎng)景的不同重點(diǎn)、難點(diǎn)以及當前的主要狀態(tài)表現。
一、“進(jìn)度”的使用場(chǎng)景1. 簽到/完成任務(wù)這是我們最常見(jiàn)的進(jìn)度類(lèi)型：
設計重點(diǎn)：每個(gè)任務(wù)節點(diǎn)上的獎勵或成就的展示；設計難點(diǎn)：用戶(hù)的堅持度與完成度；主要狀態(tài)：未完成-正在完成-已完成。在一般的任務(wù)流程中，用戶(hù)都很難堅持一直簽到或是不斷的完成任務(wù)，這是因為用(yong)戶(hù)在投入機制后，很難得到即時(shí)反饋，所以上癮的程度也就較小。
在這里需要設計足夠多的“獎勵機制”來(lái)不斷的刺激用戶(hù)堅持完成任務(wù)的行為。例如KEEP中的跑步等級獎勵徽章（從眾和虛榮心），虎克網(wǎng)中的任務(wù)賺虎克幣（獎勵誘惑）等等。
2. 操作(zuo)流程一般常見(jiàn)的信息采集流程展示。
設計重點(diǎn)：清晰的步驟展示與引導流程；設計難點(diǎn)：用戶(hù)的耐心與持久度；主要狀態(tài)：開(kāi)始填寫(xiě)-填寫(xiě)中-完成填寫(xiě)-提交。這種類(lèi)型的進(jìn)度多數是為了讓用戶(hù)了解(jie)自己所處的位置，好讓用戶(hù)有掌控感和心理預期，多是用于填寫(xiě)資料這種大ヾ(′?｀)?(da)量的信息收集界面使用。
需要注意的是，web端場(chǎng)景下用戶(hù)耐心一般比較平和，而手(shou)機端就算有步驟展示，太多信息也會(huì )讓用戶(hù)ヾ(′?｀)?失去耐心，從而增加流失率，(?????)所以應該盡量避免在手機端進(jìn)行大量的信息(′▽?zhuān)?)采集，必要時(shí)可以采用一些簡(jiǎn)短的選擇器來(lái)代替，也不為是一種良策。
當前案例全部引導界面的一種，一般都是三個(gè)步驟可完成操作。用戶(hù)在選擇了目標、體重等大致信息后則可進(jìn)入產(chǎn)品主界面。
3. 訂單/(╯°□°）╯︵ ┻━┻排隊/進(jìn)程跟蹤一般多用于非即???時(shí)??反饋的內容，緩解長(cháng)時(shí)間等待的焦慮心(xin)情等使用。
設計重點(diǎn)：現在等待進(jìn)度的實(shí)時(shí)狀態(tài)；設計難點(diǎn)：用戶(hù)對當前狀態(tài)的了解程度以及可視化認知(zhi)；主要狀態(tài)：未開(kāi)始-等待中-進(jìn)行中-等待結束。物流和等車(chē)都是讓人等待的過(guò)程，都屬于非即時(shí)反饋的形式，稍有差錯或是進(jìn)度跟不上就會(huì )造成用戶(hù)的心態(tài)爆???炸，從而會(huì )有投訴等負面情緒的(????)爆發(fā)。
所以除了清(╯°□°）╯︵ ┻━┻晰的展(zhan)示用戶(hù)的等待狀態(tài)外，技術(shù)上的信息實(shí)時(shí)更新也是很重要的一環(huán)，能有預計(ji)到達時(shí)間??是最好的，能給足用戶(hù)預期(qi)，類(lèi)似菜鳥(niǎo)裹裹的猜包裹到達日期的活動(dòng)等。
一般多用于了解儲存情況的信息，有可控的整體范圍使用。
設計重點(diǎn)：在已有內容在整體范圍占比，或剩余內容的占比展示；設計難點(diǎn)：需使用戶(hù)區分清楚重點(diǎn)是已有內容還是剩余內容；主要狀態(tài)：已有內容、剩余內容、整體內容。該類(lèi)進(jìn)度??多是有??整體范圍的，也就是最大值是有限制的。在搶購、完成任務(wù)數量等類(lèi)似的設計上用的較多，區分好“已有”ヽ(′ー｀)ノ 、“未有” 的區別，就能滿(mǎn)足大多數情況。有時(shí)候會(huì )遇到需要提高用戶(hù)警惕性或焦慮感的設計，例如儲存空間已滿(mǎn)需要清理、搶購庫存僅剩幾件等等，用警惕色系的設計，可以幫助提升產(chǎn)品目的，或是幫助用戶(hù)解決優(yōu)先級較高的內容。
5. 下載/安裝/loading一般多用于了解當前進(jìn)行的任務(wù)進(jìn)度狀態(tài)。
設計重點(diǎn)：可緩解用戶(hù)“等待中焦慮情ヽ(′ー｀)ノ緒”的進(jìn)度條設計；設計難點(diǎn)：緩解等待焦慮的方式，不能讓用戶(hù)有進(jìn)度條不再前進(jìn)的感覺(jué)；主要狀態(tài)：未開(kāi)始、進(jìn)行中、進(jìn)行完畢。loading的進(jìn)度條很容易找到參考，設計方式也是所有進(jìn)度中最能體現創(chuàng )意的一種，常規方式的進(jìn)度條多是”靜止“狀態(tài)的，有些進(jìn)度條會(huì )設?計很多其他的動(dòng)態(tài)效果來(lái)轉移用(yong)戶(hù)的注意力，??在不知不覺(jué)中將任務(wù)進(jìn)行完畢。
6. 播放/收看進(jìn)度一般多用于播放(fang)器的播放進(jìn)度展示。
設計重點(diǎn)：界面播放進(jìn)度的拖拽交互性；設計難點(diǎn)：設計需符合手指(zhi)的點(diǎn)擊區域??，拖動(dòng)時(shí)的交互反饋；主要狀態(tài)：播放中ヾ(′ω｀)?，暫停中，拖拽調整。播放界面進(jìn)度條主要(yao)設計點(diǎn)是在拖┐(′?｀)┌拽過(guò)程給人的體驗，很多音樂(lè )播放器做了創(chuàng )新式時(shí)間與拖拽點(diǎn)結合的設計，不僅增大了點(diǎn)擊區域，???也使信息更加集中，減??少了占用(′▽?zhuān)?)空間。但會(huì )有當前錨點(diǎn)位置所在具體時(shí)間的疑惑，但結論上是個(gè)進(jìn)步的交??(jiao)互方式。
以上都是“進(jìn)度”設計的使用場(chǎng)景與案例展示，接下來(lái)，則說(shuō)明一下(′-ι_-｀)“進(jìn)度”在設計中的表現方式，同樣手法，以“優(yōu)”“裂”的方式展示重要節點(diǎn)。
“進(jìn)度”的表現方式1. 數字優(yōu)勢：不需要控制進(jìn)度的??總長(cháng)度；劣勢：數字越大??，用戶(hù)的預估時(shí)間越不穩定，越容易引起焦慮情緒。例如：
當前左邊的案例已連續打卡，就是運用了數字形式展示，雖然它下方同步展示了金幣icon的展示，但對于進(jìn)度條給用戶(hù)心理的展示，卻相差較多。而右邊的案例在競選奪寶板塊里，包含有時(shí)間截止展示和已有N人參??(can)加，雖然都有明確數字展示，但對于大額度的數字展示，用戶(hù)多少會(huì )產(chǎn)生未知的心理，并不會(huì )有多少急切參加心態(tài)。2. 進(jìn)度條優(yōu)勢：進(jìn)度展現清晰，用戶(hù)把控情況穩定，創(chuàng )意方式最多；劣勢??：不適用于未知長(cháng)度的情況。市(′?ω?`)場(chǎng)上最常見(jiàn)(′_｀)的進(jìn)度方式，既能提升用戶(hù)對當前情況的了解使之做出對應的行為，又能在部分情況下促使用戶(hù)做出更多的消費行為，（例如：進(jìn)度條在??尾部，展示“你已經(jīng)達到100%的多少，或在做多少就可以達到什么結果等等）。在(zai)花瓣上搜索進(jìn)ヽ(′ー｀)ノ度條，有大批??量(liang)各種創(chuàng )意的?設計，也是最保底的一種展現方式。
當前左邊案例通過(guò)進(jìn)度展示，直觀(guān)清晰的告訴用戶(hù)你已經(jīng)健身幾個(gè)，完成幾個(gè)，不光提升了用戶(hù)的認知度，同時(shí)還促使用戶(hù)急切完成任務(wù)的心理動(dòng)態(tài)。第二個(gè)案例京東秒殺，在已搶購的圓角矩形下方展示了進(jìn)度條，清晰的告訴用戶(hù)已經(jīng)??售賣(mài)了多少，同時(shí)直觀(guān)的展示了還有多少沒(méi)有賣(mài)出。3. 步驟顯示器優(yōu)勢：進(jìn)度展現清晰，分布操作能減少用戶(hù)輸入信息的疲憊感，快速保存用戶(hù)已輸入的信息；劣┐(′д｀)┌勢：步驟過(guò)多的情況下會(huì )造成用戶(hù)流失。這是市場(chǎng)上最常見(jiàn)的采集信息的方式。一般的步驟多為3步，多余3步的時(shí)候，在(zai)用戶(hù)進(jìn)入頁(yè)面時(shí)就能預估到要花(hua)費的時(shí)間，雖有把控性，但也會(huì )造成用戶(hù)嫌麻煩然后流失??的情況。所以在設計步驟器時(shí)，但也不要展示過(guò)多??的步驟，也最好把每個(gè)步驟的關(guān)ヽ(′▽?zhuān)?ノ鍵行為寫(xiě)出來(lái)，提升用戶(hù)的把控感，降低用戶(hù)的“嫌麻煩”情緒??。這里其實(shí)提到的就是?？?′?ω?`)定律。
4. 泳道圖優(yōu)勢：一般用于團隊協(xié)作使用，任務(wù)狀態(tài)流程清晰明了；劣勢：不適用于輕量級進(jìn)度的展示。泳道圖是一種比較重的進(jìn)度展示方式，多針對大型(xing)任務(wù)的進(jìn)程情況使用，輔助團隊進(jìn)行任務(wù)核對等。在輕量的進(jìn)度上，在多數操作上“小題大做”。
5. 地圖??跟蹤優(yōu)勢：用戶(hù)對自己的物流所在位置有絕對的把控感，可以做出對應的行為調整；劣勢：只適用于物流和需要地圖的情況。地圖也是(shi)一種比較特殊的進(jìn)度方式，多適用于物流的場(chǎng)景。用戶(hù)??可以對地圖上的位置來(lái)決定自己要干的事情，減少失控的焦慮情緒。該情況也可以適用于虛擬地圖在游戲中的應用。
總結“進(jìn)度”的設計方式多種多樣，不同種類(lèi)的運用需要根據具體場(chǎng)景來(lái)規劃具體的進(jìn)度方式，一般都要在清楚了解了每個(gè)方式的設計優(yōu)勢時(shí)，根據自身的產(chǎn)品定位，再去設計體驗方式，這才是正確(╯°□°)╯的設計方式與流程，然后再通過(guò)這些細節來(lái)提升產(chǎn)品的轉化率，增加產(chǎn)品的趣味度方為良策。
Copyright ? 2012-2018 天津九安特機電工程有限公司 版權所有 備案號：
