進(jìn)度條（或進(jìn)度表）可以幫助用戶對(duì)過(guò)程的長(zhǎng)度和步驟有個(gè)預(yù)期，并且知道自己當(dāng)前在哪個(gè)步驟。也被稱作”進(jìn)度指示器（Progress Indicator）”，”多步驟進(jìn)度條（Multi-step Progress Bar）”，”向?qū)В╓izard Steps）”，”進(jìn)度表（Progress Train）”，”剩余步驟（Steps Left）”

解決什么問(wèn)題？

用戶需要意識(shí)到他們正在進(jìn)行一個(gè)多頁(yè)面（multi-screen）的流程（比如付款或注冊(cè)）

什么時(shí)候用？

在向?qū)е袘?yīng)該使用;在那些預(yù)先設(shè)計(jì)好的，用戶可能只需完成一次或頂多在個(gè)別情況下需要完成的多步驟流程中需要使用。在常規(guī)的任務(wù)中就不要用了，因?yàn)槟欠N笨重的，一步一步的手把手式（handholding）的方式最終會(huì)變得討人厭

具體解決辦法是什么？

由一個(gè)持續(xù)的，顯示一系列步驟 ，高亮當(dāng)前的步驟，并可以顯示目前的完成度或百分比的導(dǎo)航條，來(lái)作為進(jìn)度條（或進(jìn)度表）。

當(dāng)用戶決定開始流程時(shí)進(jìn)度條就該顯示

進(jìn)度條上的最后一步應(yīng)該反映出會(huì)進(jìn)行必要操作的最后一頁(yè)（比如：完成注冊(cè)，提交訂單）。在進(jìn)度條上不要使用冷冰冰的”確認(rèn)”或者”收據(jù)頁(yè)（receipt page）”

將流程按照用戶的心智模型分解成步驟。很顯然，每個(gè)步驟指的是操作而不是單獨(dú)的頁(yè)面，所以沒(méi)有必要非要將步驟與頁(yè)面1:1的對(duì)應(yīng)上。比如：”登錄”會(huì)涉及到一個(gè)登錄頁(yè)和注冊(cè)頁(yè)。

步驟名字要短，并且是排比結(jié)構(gòu)的。”以行動(dòng)導(dǎo)向”（Action-oriented）的動(dòng)詞比較好，但是只有在每一個(gè)步驟都能很恰當(dāng)?shù)耐ㄟ^(guò)這種方式描述的時(shí)候再用。

確保進(jìn)度條對(duì)每一個(gè)用例都是精確和可信的。用戶不該跳過(guò)步驟或忽然碰到進(jìn)度條沒(méi)顯示出來(lái)的步驟。確保只有在必要的情況下才包含”登錄”（的步驟）。如果有必要，需要為不同的用例設(shè)計(jì)不同的進(jìn)度條。

要確保進(jìn)度條的視覺(jué)設(shè)計(jì)不會(huì)被誤認(rèn)為是可點(diǎn)擊的導(dǎo)航條

為什么使用這個(gè)組件？

進(jìn)度條可以讓用戶預(yù)估整個(gè)流程的長(zhǎng)度，對(duì)于全部流程有個(gè)預(yù)覽，并時(shí)刻告訴他們?cè)谡麄�(gè)流程中已經(jīng)完成多少了。

答疑

“進(jìn)度條”也可以用來(lái)表示”動(dòng)態(tài)顯示系統(tǒng)更新進(jìn)度的動(dòng)畫條”（就像YUI2中的進(jìn)度條組件）

這個(gè)組件可以解決相關(guān)聯(lián)的多步欄或者作為逐步顯示用戶控制過(guò)程的指示器（譯者注： 這句我真翻譯不好，歡迎高手來(lái)指教…This pattern deals with an articulated， multi-step bar or indicator showing stepwise user-controlled progress.）

原文地址：http://developer.yahoo.com/ypatterns/navigation/bar/progress.html

文章來(lái)源：pd4.me/blog/ 轉(zhuǎn)載請(qǐng)注明出處鏈接。

延伸閱讀：

• 手風(fēng)琴導(dǎo)航(Accordion)_Yahoo_Pattern(翻譯)
• 頂部導(dǎo)航條(Top Navigation Bar)_Yahoo_Pattern(翻譯)
• 左側(cè)導(dǎo)航條(Left Navigation Bar)_Yahoo_Pattern(翻譯)

標(biāo)簽： 進(jìn)度條 雅虎組件 進(jìn)度表 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。