這篇放到草稿里好久了… 最近在忙著來(lái)杭州,杭州之后的安頓,今天終于可以完成了…

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

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

解決什么問(wèn)題?
用戶(hù)需要意識(shí)到他們正在進(jìn)行一個(gè)多頁(yè)面(multi-screen)的流程(比如付款或注冊(cè))

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

具體解決辦法是什么?
由一個(gè)持續(xù)的,顯示一系列步驟 ,高亮當(dāng)前的步驟,并可以顯示目前的完成度或百分比的導(dǎo)航條,來(lái)作為進(jìn)度條(或進(jìn)度表).

當(dāng)用戶(hù)決定開(kāi)始流程時(shí)進(jìn)度條就該顯示
進(jìn)度條上的最后一步應(yīng)該反映出會(huì)進(jìn)行必要操作的最后一頁(yè)(比如:完成注冊(cè),提交訂單).在進(jìn)度條上不要使用冷冰冰的”確認(rèn)”或者”收據(jù)頁(yè)(receipt page)”
將流程按照用戶(hù)的心智模型分解成步驟.很顯然,每個(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è)用例都是精確和可信的.用戶(hù)不該跳過(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)度條可以讓用戶(hù)預(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)畫(huà)條”(就像YUI2中的進(jìn)度條組件)

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

原文：http://pd4.me/blog/methodology/progress_bar_yahoo_pattern_/