網頁設計進度列指示器協助使用者預測步驟

來源:互聯網
上載者:User

網頁製作Webjx文章簡介:網頁進度條解決什麼問題?什麼時候用?

進度條(或進度表)可以協助使用者對過程的長度和步驟有個預期,並且知道自己當前在哪個步驟.也被稱作“進度列指示器(Progress Indicator)”,”多步驟進度條(Multi-step Progress Bar)”,”嚮導(Wizard Steps)”,”進度表(Progress Train)”,”剩餘步驟(Steps Left)”

解決什麼問題?

使用者需要意識到他們進行中一個多頁面(multi-screen)的流程(比如付款或註冊)

什麼時候用?

在嚮導中應該使用;在那些預先設計好的,使用者可能只需完成一次或頂多在個別情況下需要完成的多步驟流程中需要使用.在常規的任務中就不要用了,因為那種笨重的,一步一步的手把手式(handholding)的方式最終會變得討人厭

具體解決辦法是什麼?

由一個持續的,顯示一系列步驟 ,高亮當前的步驟,並可以顯示目前的完成度或百分比的導航條,來作為進度條(或進度表).

  • 當使用者決定開始流程時進度條就該顯示
  • 進度條上的最後一步應該反映出會進行必要操作的最後一頁(比如:完成註冊,提交訂單).在進度條上不要使用冷冰冰的”確認”或者”收據頁(receipt page)”
  • 將流程按照使用者的心智模型分解成步驟.很顯然,每個步驟指的是操作而不是單獨的頁面,所以沒有必要非要將步驟與頁面1:1的對應上.比如:”登入”會涉及到一個登入頁和註冊頁.
  • 步驟名字要短,並且是排比結構的.”以行動導向”(Action-oriented)的動詞比較好,但是只有在每一個步驟都能很恰當的通過這種方式描述的時候再用.
  • 確保進度條對每一個用例都是精確和可信的.使用者不該跳過步驟或忽然碰到進度條沒顯示出來的步驟.確保只有在必要的情況下才包含”登入”(的步驟).如果有必要,需要為不同的用例設計不同的進度條.
  • 要確保進度條的視覺設計不會被誤認為是可點擊的導航條

為什麼使用這個組件?

進度條可以讓使用者預估整個流程的長度,對於全部流程有個預覽,並時刻告訴他們在整個流程中已經完成多少了.

答疑

“進度條”也可以用來表示”動態顯示系統更新進度的動畫條”(就像YUI2中的進度條組件)

這個組件可以解決相關聯的多步欄或者作為逐步顯示使用者控制過程的指標(譯者注: 這句我真翻譯不好,歡迎高手來指教…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



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。