@TerryFan?：最近正在和團隊的小伙伴一起處理一個復雜的表單設計，正好看到這篇文章，小有啟發，就決定譯出來和大家分享一下，是篇可以快速閱讀的案例文。

在設計大型電商網站或是復雜在線服務系統的時候，遇到最核心的問題就是設計一個在線下單或是配置的流程。如果能把用戶流程設計得簡單并且符合用戶直覺，這絕對是提高轉化率的關鍵。過程中任何一個對用戶造成的挫折感都有可能讓他們離開去嘗試其他選擇。

易用的分步流程可以有效的避免用戶受挫，并且幫助他們成功的完成主要任務。本文我將帶大家來看一下各式流程進度的設計。

什么是進度跟蹤器？

進度跟蹤器（進度指示）通過將流程切分成多個邏輯步驟，從而顯示了線性的進度流程。他們可以引導用戶按照一系列的步驟進行操作從而完成任務。好的進度跟蹤器設計需要告知用戶如下信息：

哪些步驟（或是任務）用戶已經完成了（最好使用合適的視覺表現）

當前在哪個步驟（用戶在全流程中的當前位置）

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

△ 進度追蹤器將流程用步驟的方式展現出來

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

可以把用戶需要輸入的信息更有邏輯的組合起來

給用戶設定一個清晰的預期

為用戶在一個復雜的長流程中跟蹤狀態

為何進度跟蹤器有效？

進度跟蹤器給用戶創造了清晰的路徑。研究表明，當用戶對完成最終目標需要多少步驟有了清晰的概念之后，中途放棄的情況得到顯著的減少。從心理學的角度來說，也十分站得住腳。

△?用分步操作來完成建立賬戶

而且，將內容展現在區塊中更有利于用戶進行信息的掃描，從而可以提高用戶對流程的理解。事實上，區塊設計能提供符合邏輯且具有視覺差異的內容模塊，這對于復雜的全局來說很有幫助。

進度跟蹤器的使用

進度跟蹤器在許多場景下都能使用，下面三種是最為常見的，

在線下單

至今為止，進度跟蹤器最常用在在線購買中，因為購買的任務天生就是分為多個步驟。

多步表單

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

引導

進度跟蹤器也常于App引導。如果步驟不多的情況下可以使用屏幕下方的小點來進行標注（像如下Dropbx的案例）

△?Dropbox引導

進度跟蹤器設計案例

如何設計一個卓越的進度跟蹤器，這個問題并沒有一個通用的答案。但是你始終需要確認的是——用戶是如何和你的系統進行交互的。通常來說，步驟的設計應當盡可能簡單清晰，以免讓用戶感到困惑。

設定用戶預期

當用戶需要完成一個復雜的流程操作時，進行用戶的預期管理就顯得尤為重要，我們需要在用戶開始操作前就告訴他們大致需要多少工作和時間能完成這個流程。如果用戶僅認為他們只需要兩分鐘就能完成，但卻花了十分鐘，這體驗一定很糟糕。

給用戶提供合適的流程說明能幫助用戶做好進行復雜操作的心里準備。當然如果能夠給用戶一個完成任務的時間預估就最好了，尤其當這些步驟的復雜程度并不等同的時候。（例如，某些步驟可能需要比其他的花去更多的時間。）

建立符合邏輯的流程

展現出流程的進展方向。最好可以使用箭頭來強調流程的流向，因為單純使用線進行連接無法提現出流程的概念。

使用圖標配合文字來描述流程中這些步驟，這樣可以讓用戶更清晰地了解步驟。

不要把流程拆得過長，3-5步為宜。

使用數字來體現步驟和當前位置（例如，五步中的第三步）

時刻讓用戶知道自己的處境

“我在哪兒？”這是一個用戶在界面中進行導航時常常會問自己的問題。這也是為什么一個好的進度跟蹤器需要隨時保持讓用戶清楚地知道自己在流程中的哪個步驟的原因。這樣用戶就能清楚地知道自己都做了些什么以及接下來需要做些什么，有助于流程的推進。

同時為進度跟蹤器提供一個良好的視覺展示也是十分必要。用戶往往依賴于導航上的一些視覺線索進行判斷。

△?來自Dribble的案例

可以使用一些清晰的狀態變化來表明當前步驟，而不僅僅是改變簡單的顏色。合適的圖標和文字有助于用戶理解。

文字隨著狀態而改變

避免多個進度跟蹤器同時存在

不要在同一個頁面中多次使用進度跟蹤器，也不要使用嵌套。這很有可能會給你的界面帶來混亂。

△?反面案例

使用進度反饋

進度跟蹤器可以在用戶保存了某個步驟后顯示短暫的反饋。而這個反饋僅應該存在于當步驟間有一些潛在的等待的情況下。

進度跟蹤器在移動端的應用

由于水平空間在手機上非常局限，垂直方向上的進度跟蹤器對于移動應用或是站點來說也許是個更好的選擇。需要稍稍注意一下每一步的內容都是響應式的即可。

△?垂直向的進度跟蹤器很適合小屏

小結

設計進度跟蹤器的時候需要謹記簡單、易理解，而且別忘了使用視覺表現對用戶進行合適的引導。始終把用戶放在首位，不要為自己而設計。最后，好的進度跟蹤器能夠保證用戶順利完成流程的同時，對你的產品有一個更好的印象。

譯者微信號：開卷有譯，歡迎關注喲

【如何用最快的速度提升實力】

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

給入行多年的設計師的進階建議：
《視覺設計如何“一稿就過”—— 談談最近踩過的坑》

給所有設計師的自信心提升劑：
《優設訪談！騰訊高級交互設計師C7210的十年設計路》

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

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量112萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com