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

解決什么問題？

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

什么時(shí)候用？

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

具體解決辦法是什么？

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

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

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

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

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

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

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

為什么使用這個組件？

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

答疑

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

這個組件可以解決相關(guān)聯(lián)的多步欄或者作為逐步顯示用戶控制過程的指示器（譯者注： 這句我真翻譯不好，歡迎高手來指教…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

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

延伸閱讀：

• 手風(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)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。