1、步驟條簡(jiǎn)介

????????引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條，可表示任務(wù)進(jìn)度或步驟。

2、使用場(chǎng)景?

兩種使用場(chǎng)景：表示任務(wù)進(jìn)度或者步驟，并起到導(dǎo)航的作用。

2.1、進(jìn)度條：表示某事務(wù)的進(jìn)度，側(cè)重于表現(xiàn)當(dāng)前進(jìn)度，如訂單進(jìn)度；

2.2、步驟條：將某個(gè)任務(wù)分解成由若干步驟組成的流程，表示該任務(wù)所處的步驟，側(cè)重于表明操作步驟，通常帶有“上一步”、“下一步”操作按鈕，如資質(zhì)認(rèn)證等復(fù)雜任務(wù)；

3、理解與思考

????????步驟條可表現(xiàn)當(dāng)前任務(wù)的整體步驟，以及進(jìn)度情況的組件，常用于比較復(fù)雜繁瑣的任務(wù)，把任務(wù)分步進(jìn)行，簡(jiǎn)化任務(wù)，也降低用戶的畏難心理，反映任務(wù)進(jìn)度，給足用戶更多的心理預(yù)期。

????????一個(gè)清晰完整的步驟條，應(yīng)該可以使用不同的視覺(jué)元素，使得更清晰地表示過(guò)去、現(xiàn)在、將來(lái)，過(guò)去是指已經(jīng)完成的動(dòng)作，通常使用“對(duì)勾”表示；現(xiàn)在是指當(dāng)前進(jìn)行中的動(dòng)作，通常高亮即可；未來(lái)是指即將要執(zhí)行的動(dòng)作，通常置灰即可，一個(gè)清晰完整的步驟條，如第2小節(jié)的圖示。

????????不清晰不完整的步驟條舉例如下：

不完整的步驟條

4、小結(jié)

4.1 任務(wù)導(dǎo)航：清晰地體現(xiàn)任務(wù)的所有步驟，并清晰描述每個(gè)步驟，需要描述的內(nèi)容如：動(dòng)作描述、狀態(tài)描述、時(shí)間描述、人物描述等；

4.2 視覺(jué)元素：需清晰地表示過(guò)去、現(xiàn)在、將來(lái)；

4.3 信息結(jié)構(gòu)化：任務(wù)分步驟完成時(shí)，合理設(shè)計(jì)每個(gè)步驟的內(nèi)容及界限。