設計大型電商網(wǎng)站或者復雜的在線服務時，你很可能需要設計一套系統(tǒng)，來梳理順序與結(jié)構(gòu)。把它設計得簡單直觀，讓用戶順利通過，是提升轉(zhuǎn)化率的關(guān)鍵。沿途所有的挫敗都可能導致他們離開，去選擇其他的產(chǎn)品。

易用的分步流程有助于用戶避免挫敗，成功地完成主要任務。本文中，我們來了解分步導航的各種形式，看如何使用它們。

分步導航是什么？

分步導航（或者說分步指示器）將一系列的過程分解成多個合理的步驟。它引導用戶通過一些步驟最終完成一項復雜的任務。好的分步導航應當告知用戶以下信息：

• 他們已經(jīng)完成了哪些步驟（或任務），最好要有適當?shù)囊曈X反饋
• 現(xiàn)在處在哪一步（用戶當前在整個流程中的位置）
• 還有哪些步驟，多少步（最好都要有清晰的名稱）

分步導航通過步驟編號表達出整個過程

有3大理由應該使用分步流程：

• 合理地將數(shù)據(jù)輸入分組
• 為用戶建立明確的期望
• 在復雜的過程中追蹤整個流程

為什么有效？

分步導航清晰地指明了完成任務的路徑。研究表明，它給用戶以明確的概念，完成最終目標需要多少步，能夠顯著降低放棄的概率。從心理學角度來看，這頗具意義。如果你知道完成這個過程需要多少步，你就更容易完成它。

分步注冊賬號

分塊展現(xiàn)內(nèi)容，便于用戶瀏覽，有助于他們理解。實際上，分塊其實就是在有意創(chuàng)造視覺分隔的內(nèi)容單元，在整體環(huán)境中有它的意義。
分步導航的使用。

分步導航可以用在許多種情景中。下面3個領域最常見。

在線下單

目前為止，分步導航最廣泛的使用案例，就是與在線購買相結(jié)合，因為這個任務可以很自然地分割成多個步驟。

多步表單

如果表單需要用戶填寫許多信息，最好將它分成多步。

引導頁

分步導航也可以用來引導用戶了解一個應用或服務的功能。如果步驟不多，也可以使用小圓點來表示（就像下圖Dropbox的例子）。

Dropbox的引導頁

分步導航設計最佳實踐

創(chuàng)建優(yōu)秀的分步導航，并沒有通用的方案。但有一點是肯定的——你時刻要考慮用戶如何與該系統(tǒng)交互。簡單說，就是要把流程步驟設計得盡可能簡單清晰，不要讓用戶困惑。

設定用戶的期望

當用戶要進行一項復雜的任務時，重要的是事先營造他們的期望，告訴他們需要多少時間和精力。如果用戶認為這個任務只要2分鐘，但實際上花了10分鐘，這個體驗就很糟糕。

提供簡單的描述，能夠幫助用戶為復雜的任務做好準備。這也很有助于估計完成任務所需的時間，尤其當這些步驟并不均等時（例如有些步驟比其他的更長）。

建立合理的流程

顯示流動的方向。最好使用箭頭來強調(diào)方向，因為線條本身并沒有提供“流程”的含義。

結(jié)合圖形與文字描述其中步驟。要讓用戶清楚步驟的順序。

過程不要太長。3-5步就足夠了。

使用數(shù)字序號描述步驟，指示用戶當前所處的步驟（例如第3步、第5步）。

讓用戶清楚自己當前位置

“我進行到哪兒了？”這是導航需要用戶回答的基本問題之一。所以優(yōu)秀的分步導航設計，最關(guān)鍵的就是保持用戶了解當前所處位置。這能夠提升連續(xù)性，因為用戶知道當前位置與之前步驟和后續(xù)步驟之間的關(guān)系。

要為流程設計一套良好的視覺展現(xiàn)。用戶依賴導航元素中的這些視覺線索來回答這個至關(guān)重要的問題。

圖片來源：Dribbble

狀態(tài)的變化要清晰，告訴用戶當前的步驟不只是改個顏色。適合的圖形和文字標簽，能幫助用戶理解菜單項。

異常標簽的錯誤狀態(tài)

避免多層分步導航

避免在一個頁面上多次使用，或者嵌套使用分步導航。這會導致界面的混亂。

顯示出流程反饋

分步導航可以在每步保存后，短暫顯示反饋信息。只應該在步驟間有較長延遲時使用這種反饋。

這個分步指示器在步驟保存后，短暫顯示了反饋信息。

移動應用中的分步導航

因為橫向空間有限，在移動應用和網(wǎng)頁上，縱向分步導航也許是不錯的方案。不過要確保每步內(nèi)容是響應式的。

小屏幕上使用縱向分步設計。

結(jié)論

把分步導航設計得簡單易懂、低調(diào)含蓄，也別忽視它們的視覺表現(xiàn)，應當在視覺上吸引和引導用戶。“用戶至上”。記住我們不是在為設計師而設計，我們?yōu)槠胀ㄓ脩粼O計。最終，優(yōu)秀的分步導航能讓用戶停留，完成任務，并且讓你的網(wǎng)站和應用留下正面的印象。

感謝閱讀！

#專欄作家#

可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專欄作家，UI/UX設計師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技?，F(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中?；蛟S不是一名優(yōu)秀的設計師，至少是個快樂的設計師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。