步驟條是一種常見的導(dǎo)航形式，在流程中隨處可見步驟的影子。那么不同情景的步驟條是如何設(shè)計(jì)的呢？筆者向我們介紹了一下常見的步驟條以及步驟條使用案例。

步驟條是一種常見的導(dǎo)航形式。最近做的一個(gè)項(xiàng)目中，需要用到步驟條，于是做了點(diǎn)研究：

一、何時(shí)需要步驟條

既然步驟條的作用是導(dǎo)航，那么它就具有導(dǎo)航通用的屬性：告知用戶“我在哪”/“我能去哪”。步驟數(shù)目就相當(dāng)于告知用戶——能去哪或者說流程中將要經(jīng)歷什么。所以，步驟條出現(xiàn)在比較長的流程中較為合適，如果只有2個(gè)步驟，沒有使用步驟條的必要；3步及以上時(shí)，使用步驟條是合適的。

二、常見步驟條種類

1. 形式

常見的步驟條形式上分為兩類：長條型和點(diǎn)線型。其中，點(diǎn)線型的又可以分為：圓點(diǎn)型、數(shù)字型和圖標(biāo)型。

長條型

?圓點(diǎn)型

數(shù)字型

圖標(biāo)型

2. 當(dāng)前步驟的樣式

我找到的例子中，有些案例當(dāng)前正在進(jìn)行的步驟與已完成的步驟的樣式是相同的，有些是不同的：

已完成的和正在進(jìn)行樣式相同，均高亮

已完成的用對勾，正在進(jìn)行的用數(shù)字并高亮

還有一種比較特殊的——像淘寶訂單里，只有正在進(jìn)行中的步驟是高亮的，已完成和未來的步驟都是弱化的：

只有進(jìn)行中的高亮

個(gè)人認(rèn)為：進(jìn)行中的步驟采用什么樣式，取決于整個(gè)流程持續(xù)的時(shí)間。

持續(xù)時(shí)間較短，能一次性完成的流程，進(jìn)行中的和已完成的步驟樣式相同沒有問題。如果持續(xù)時(shí)間較長，比如完成第一步之后，第二步會(huì)隔幾天才進(jìn)行，就需要更加突出正在進(jìn)行的步驟，弱化已完成的步驟。這樣能更明確地告知用戶正在進(jìn)行的是哪一步，也更有效地發(fā)揮了導(dǎo)航的作用。

填寫注冊表單類的這種只要用戶錄入信息就能走完所有步驟的，通常持續(xù)時(shí)間比較短。

購物類的，要靠多方（消費(fèi)者/商家/平臺）協(xié)作才能完成的，各角色之間必然會(huì)出現(xiàn)時(shí)間差。所以，用戶可能會(huì)在不同時(shí)間多次進(jìn)入訂單頁面查看訂單狀態(tài)。那么，訂單中把正在進(jìn)行的步驟更加強(qiáng)化會(huì)比較好。讓用戶即使隔了一段時(shí)間，進(jìn)入訂單頁面，也能一眼就看明白訂單進(jìn)行到哪一步了。所以上述的淘寶的方案也是符合用戶需求的。

3. 步驟名稱標(biāo)注位置

這里主要討論的是點(diǎn)線型的步驟條的步驟名稱位置。步驟的名稱（可能包含描述），可以出現(xiàn)在“點(diǎn)”的上側(cè)/下側(cè)/右側(cè)：

上側(cè)

下側(cè)

上側(cè)名稱，下側(cè)描述

右側(cè)

個(gè)人認(rèn)為，這幾種位置都是可以的，沒有孰優(yōu)孰劣之分。

三、當(dāng)前處于哪一步？

這個(gè)問題看似不是問題，實(shí)則在我做項(xiàng)目時(shí)，是一個(gè)非常大的問題。我的項(xiàng)目案例在后續(xù)闡述。這個(gè)問題的起因，其實(shí)和上一個(gè)問題相關(guān)：流程完成時(shí)間的長短。

能在短時(shí)間內(nèi)完成的流程，當(dāng)前所處的步驟是非常明確的。比如重置密碼的這個(gè)例子里，當(dāng)前處于設(shè)置新密碼階段。

但是像購物的流程，每一個(gè)節(jié)點(diǎn)到下一個(gè)節(jié)點(diǎn)通常是有時(shí)間差的，而節(jié)點(diǎn)本身所經(jīng)歷的時(shí)間實(shí)際非常短，但是節(jié)點(diǎn)與節(jié)點(diǎn)之間會(huì)經(jīng)歷一段等待的時(shí)間。像發(fā)貨，這個(gè)動(dòng)作完成后，就是物流的過程，會(huì)有比較長的時(shí)間處于“賣家發(fā)貨”和“確認(rèn)收貨”這兩個(gè)節(jié)點(diǎn)之間的過程。在賣家已發(fā)貨后，當(dāng)前步驟仍處于“賣家發(fā)貨”似乎就不太合適了：

天貓訂單

調(diào)研中發(fā)現(xiàn)，京東的訂單對于兩個(gè)節(jié)點(diǎn)之間的過程有另外一種處理方法：

它在兩個(gè)節(jié)點(diǎn)中間有特別的標(biāo)注，告知用戶這是一個(gè)需要等待的過程。這種處理方法比上方天貓的要好，對于流程當(dāng)前狀況表述得更加明確。

四、我的項(xiàng)目案例

我接到的一個(gè)設(shè)計(jì)項(xiàng)目是視頻作者承接廣告的訂單流程設(shè)計(jì)。這個(gè)項(xiàng)目中，最大的設(shè)計(jì)難點(diǎn)在于：每兩個(gè)流程節(jié)點(diǎn)之間會(huì)有較長的等待期，因?yàn)樯婕白髡?、廣告主和平臺之間的協(xié)作。

例如：作者提交完作品要等平臺審核通過、并且廣告主確認(rèn)后才能發(fā)布，平臺審核及廣告主確認(rèn)不太可能在作者提交完作品后就馬上進(jìn)行，一定有一段時(shí)間差。另外，平臺審核與廣告主確認(rèn)階段，不一定都是順利的，有可能審核不通過或者廣告主拒絕作品，這樣就會(huì)涉及作品反復(fù)修改、反復(fù)提交、反復(fù)審核的流程。因此，如何將這種復(fù)雜的流程處理得簡單明了，是我的工作重點(diǎn)。

這個(gè)項(xiàng)目中涉及6個(gè)關(guān)鍵節(jié)點(diǎn)：腳本提交、腳本確認(rèn)、作品提交、作品審核、作品確認(rèn)、作品發(fā)布。

每兩個(gè)節(jié)點(diǎn)之間都會(huì)有一段等待時(shí)間。我曾經(jīng)考慮過使用京東案例中的方法，在兩個(gè)節(jié)點(diǎn)之間增加一個(gè)“等待XX”的“半節(jié)點(diǎn)”，但感覺這樣會(huì)把流程復(fù)雜化，增加用戶認(rèn)知成本，就放棄了。

另外，6個(gè)節(jié)點(diǎn)中，“腳本確認(rèn)”、“作品審核”以及“作品確認(rèn)”的階段中，都有可能出現(xiàn)不通過，之后反復(fù)修改的情況，也就是會(huì)有狀態(tài)循環(huán)的情況。比如：從“腳本待確認(rèn)”變?yōu)椤澳_本被拒絕”，之后重新提交了腳本，又變成“腳本待確認(rèn)”。

我最終的處理方法是：將每個(gè)節(jié)點(diǎn)當(dāng)做一個(gè)“階段”，與某個(gè)節(jié)點(diǎn)有關(guān)的所有狀態(tài)均定位到這個(gè)節(jié)點(diǎn)。而不是像其他一些案例中，一個(gè)節(jié)點(diǎn)的事務(wù)已完成后才定位到這個(gè)節(jié)點(diǎn)。也就是說我明確地告知用戶當(dāng)前需要關(guān)注的是哪個(gè)節(jié)點(diǎn)，讓用戶形成“處理完這個(gè)節(jié)點(diǎn)的所有事務(wù)，就能進(jìn)入下一個(gè)節(jié)點(diǎn)”的認(rèn)知。

在步驟條中，我是用步驟名稱的變化強(qiáng)化用戶對當(dāng)前狀態(tài)的認(rèn)知的：

第2、4、5步中，均可能出現(xiàn)未通過，重新提交，再等待確認(rèn)/審核的循環(huán)流程。

以第2步為例，在我的方案中，“腳本被拒絕”后提供用戶重新提交腳本的入口。用戶在這個(gè)狀態(tài)下完成腳本的重新提交后，就直接變成“腳本待確認(rèn)”，不再經(jīng)過“腳本提交”這個(gè)節(jié)點(diǎn)，這個(gè)節(jié)點(diǎn)只在初次提交腳本時(shí)經(jīng)歷：

最終的方案就是下圖這個(gè)樣子的：

在狀態(tài)一時(shí)，作者提交完腳本自動(dòng)變?yōu)闋顟B(tài)二。節(jié)點(diǎn)1名稱變?yōu)椤澳_本已提交”，節(jié)點(diǎn)2名稱變?yōu)椤澳_本待確認(rèn)”。

狀態(tài)二完成后的結(jié)果有兩種：腳本確認(rèn)或拒絕。

確認(rèn)時(shí)，直接變?yōu)闋顟B(tài)四，進(jìn)入節(jié)點(diǎn)3。拒絕時(shí)，變?yōu)闋顟B(tài)三，仍然停留在節(jié)點(diǎn)2；之后重新提交完腳本后，再變?yōu)闋顟B(tài)二；狀態(tài)二返回的結(jié)果又有可能是狀態(tài)三或者四，如此循環(huán)。

本文由 @哆啦易夢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議