@TerryFan?：最近正在和團(tuán)隊(duì)的小伙伴一起處理一個(gè)復(fù)雜的表單設(shè)計(jì)，正好看到這篇文章，小有啟發(fā)，就決定譯出來(lái)和大家分享一下，是篇可以快速閱讀的案例文。

在設(shè)計(jì)大型電商網(wǎng)站或是復(fù)雜在線(xiàn)服務(wù)系統(tǒng)的時(shí)候，遇到最核心的問(wèn)題就是設(shè)計(jì)一個(gè)在線(xiàn)下單或是配置的流程。如果能把用戶(hù)流程設(shè)計(jì)得簡(jiǎn)單并且符合用戶(hù)直覺(jué)，這絕對(duì)是提高轉(zhuǎn)化率的關(guān)鍵。過(guò)程中任何一個(gè)對(duì)用戶(hù)造成的挫折感都有可能讓他們離開(kāi)去嘗試其他選擇。

易用的分步流程可以有效的避免用戶(hù)受挫，并且?guī)椭麄兂晒Φ耐瓿芍饕蝿?wù)。本文我將帶大家來(lái)看一下各式流程進(jìn)度的設(shè)計(jì)。

什么是進(jìn)度跟蹤器？

進(jìn)度跟蹤器（進(jìn)度指示）通過(guò)將流程切分成多個(gè)邏輯步驟，從而顯示了線(xiàn)性的進(jìn)度流程。他們可以引導(dǎo)用戶(hù)按照一系列的步驟進(jìn)行操作從而完成任務(wù)。好的進(jìn)度跟蹤器設(shè)計(jì)需要告知用戶(hù)如下信息：

哪些步驟（或是任務(wù)）用戶(hù)已經(jīng)完成了（最好使用合適的視覺(jué)表現(xiàn)）

當(dāng)前在哪個(gè)步驟（用戶(hù)在全流程中的當(dāng)前位置）

還有哪些步驟需要去完成（最好有明確的指引）

△ 進(jìn)度追蹤器將流程用步驟的方式展現(xiàn)出來(lái)

這是使用步驟化流程的三個(gè)最主要原因：

可以把用戶(hù)需要輸入的信息更有邏輯的組合起來(lái)

給用戶(hù)設(shè)定一個(gè)清晰的預(yù)期

為用戶(hù)在一個(gè)復(fù)雜的長(zhǎng)流程中跟蹤狀態(tài)

為何進(jìn)度跟蹤器有效？

進(jìn)度跟蹤器給用戶(hù)創(chuàng)造了清晰的路徑。研究表明，當(dāng)用戶(hù)對(duì)完成最終目標(biāo)需要多少步驟有了清晰的概念之后，中途放棄的情況得到顯著的減少。從心理學(xué)的角度來(lái)說(shuō)，也十分站得住腳。

△?用分步操作來(lái)完成建立賬戶(hù)

而且，將內(nèi)容展現(xiàn)在區(qū)塊中更有利于用戶(hù)進(jìn)行信息的掃描，從而可以提高用戶(hù)對(duì)流程的理解。事實(shí)上，區(qū)塊設(shè)計(jì)能提供符合邏輯且具有視覺(jué)差異的內(nèi)容模塊，這對(duì)于復(fù)雜的全局來(lái)說(shuō)很有幫助。

進(jìn)度跟蹤器的使用

進(jìn)度跟蹤器在許多場(chǎng)景下都能使用，下面三種是最為常見(jiàn)的，

在線(xiàn)下單

至今為止，進(jìn)度跟蹤器最常用在在線(xiàn)購(gòu)買(mǎi)中，因?yàn)橘?gòu)買(mǎi)的任務(wù)天生就是分為多個(gè)步驟。

多步表單

如果一個(gè)表單需要用戶(hù)提供許多的信息，最好將這個(gè)表單拆分成多個(gè)步驟

引導(dǎo)

進(jìn)度跟蹤器也常于App引導(dǎo)。如果步驟不多的情況下可以使用屏幕下方的小點(diǎn)來(lái)進(jìn)行標(biāo)注（像如下Dropbx的案例）

△?Dropbox引導(dǎo)

進(jìn)度跟蹤器設(shè)計(jì)案例

如何設(shè)計(jì)一個(gè)卓越的進(jìn)度跟蹤器，這個(gè)問(wèn)題并沒(méi)有一個(gè)通用的答案。但是你始終需要確認(rèn)的是——用戶(hù)是如何和你的系統(tǒng)進(jìn)行交互的。通常來(lái)說(shuō)，步驟的設(shè)計(jì)應(yīng)當(dāng)盡可能簡(jiǎn)單清晰，以免讓用戶(hù)感到困惑。

設(shè)定用戶(hù)預(yù)期

當(dāng)用戶(hù)需要完成一個(gè)復(fù)雜的流程操作時(shí)，進(jìn)行用戶(hù)的預(yù)期管理就顯得尤為重要，我們需要在用戶(hù)開(kāi)始操作前就告訴他們大致需要多少工作和時(shí)間能完成這個(gè)流程。如果用戶(hù)僅認(rèn)為他們只需要兩分鐘就能完成，但卻花了十分鐘，這體驗(yàn)一定很糟糕。

給用戶(hù)提供合適的流程說(shuō)明能幫助用戶(hù)做好進(jìn)行復(fù)雜操作的心里準(zhǔn)備。當(dāng)然如果能夠給用戶(hù)一個(gè)完成任務(wù)的時(shí)間預(yù)估就最好了，尤其當(dāng)這些步驟的復(fù)雜程度并不等同的時(shí)候。（例如，某些步驟可能需要比其他的花去更多的時(shí)間。）

建立符合邏輯的流程

展現(xiàn)出流程的進(jìn)展方向。最好可以使用箭頭來(lái)強(qiáng)調(diào)流程的流向，因?yàn)閱渭兪褂镁€(xiàn)進(jìn)行連接無(wú)法提現(xiàn)出流程的概念。

使用圖標(biāo)配合文字來(lái)描述流程中這些步驟，這樣可以讓用戶(hù)更清晰地了解步驟。

不要把流程拆得過(guò)長(zhǎng)，3-5步為宜。

使用數(shù)字來(lái)體現(xiàn)步驟和當(dāng)前位置（例如，五步中的第三步）

時(shí)刻讓用戶(hù)知道自己的處境

“我在哪兒？”這是一個(gè)用戶(hù)在界面中進(jìn)行導(dǎo)航時(shí)常常會(huì)問(wèn)自己的問(wèn)題。這也是為什么一個(gè)好的進(jìn)度跟蹤器需要隨時(shí)保持讓用戶(hù)清楚地知道自己在流程中的哪個(gè)步驟的原因。這樣用戶(hù)就能清楚地知道自己都做了些什么以及接下來(lái)需要做些什么，有助于流程的推進(jìn)。

同時(shí)為進(jìn)度跟蹤器提供一個(gè)良好的視覺(jué)展示也是十分必要。用戶(hù)往往依賴(lài)于導(dǎo)航上的一些視覺(jué)線(xiàn)索進(jìn)行判斷。

△?來(lái)自Dribble的案例

可以使用一些清晰的狀態(tài)變化來(lái)表明當(dāng)前步驟，而不僅僅是改變簡(jiǎn)單的顏色。合適的圖標(biāo)和文字有助于用戶(hù)理解。

文字隨著狀態(tài)而改變

避免多個(gè)進(jìn)度跟蹤器同時(shí)存在

不要在同一個(gè)頁(yè)面中多次使用進(jìn)度跟蹤器，也不要使用嵌套。這很有可能會(huì)給你的界面帶來(lái)混亂。

△?反面案例

使用進(jìn)度反饋

進(jìn)度跟蹤器可以在用戶(hù)保存了某個(gè)步驟后顯示短暫的反饋。而這個(gè)反饋僅應(yīng)該存在于當(dāng)步驟間有一些潛在的等待的情況下。

進(jìn)度跟蹤器在移動(dòng)端的應(yīng)用

由于水平空間在手機(jī)上非常局限，垂直方向上的進(jìn)度跟蹤器對(duì)于移動(dòng)應(yīng)用或是站點(diǎn)來(lái)說(shuō)也許是個(gè)更好的選擇。需要稍稍注意一下每一步的內(nèi)容都是響應(yīng)式的即可。

△?垂直向的進(jìn)度跟蹤器很適合小屏

小結(jié)

設(shè)計(jì)進(jìn)度跟蹤器的時(shí)候需要謹(jǐn)記簡(jiǎn)單、易理解，而且別忘了使用視覺(jué)表現(xiàn)對(duì)用戶(hù)進(jìn)行合適的引導(dǎo)。始終把用戶(hù)放在首位，不要為自己而設(shè)計(jì)。最后，好的進(jìn)度跟蹤器能夠保證用戶(hù)順利完成流程的同時(shí)，對(duì)你的產(chǎn)品有一個(gè)更好的印象。

譯者微信號(hào)：開(kāi)卷有譯，歡迎關(guān)注喲

【如何用最快的速度提升實(shí)力】

給新人設(shè)計(jì)師的高效秘籍！
《又快又好！手把手教你從3方面提升設(shè)計(jì)效率》

給入行多年的設(shè)計(jì)師的進(jìn)階建議：
《視覺(jué)設(shè)計(jì)如何“一稿就過(guò)”—— 談?wù)勛罱冗^(guò)的坑》

給所有設(shè)計(jì)師的自信心提升劑：
《優(yōu)設(shè)訪(fǎng)談！騰訊高級(jí)交互設(shè)計(jì)師C7210的十年設(shè)計(jì)路》

原文地址：nngroup
譯文地址：jianshu
譯者：@TerryFan

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量112萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com