分頁(Paging)

問題

用戶需要瀏覽大量的項目列表才能找到最感興趣的項目

解決方案

分頁呈現項目結果,每頁都有固定數量的項目。同時允許用戶在當前頁輕松地跳轉到其他頁面。

From www.digg.com

何時使用

用戶經常需要瀏覽一個數量龐大的項目列表。 這個模式非常適用于項目太多而不能在一頁里面承載的情況。 這些項目通常是排好序的,用戶很可能在列表的前幾條就能找到他們想要的項目。例如 “搜索結果”(Search Results)就需要經常用到“翻頁”(Paging)模式。這個模式也經常和 “列表建造器”(List Builder)用在一起,例如一個基于網頁的郵件系統。項目的數量一般是10條到200條不等。這些項目可以是諸如“郵件標題、姓名、照片、電話號碼等”的任何信息。

如何使用

在項目列表的下面顯示頁面的導航。提供直接跳轉到特定頁面的鏈接,和允許在頁面中“行進”(Stepping) 的上一頁/下一頁 的鏈接。每頁大約呈現5到10條項目,同時也顯示項目總數和一個描述項目類型的標題。

導航條的基本結構是:“項目數量”、“上一頁”、“1 2 3 4 5… ”、“下一頁”。 “上一頁”和“下一頁”鏈接只在當前頁存在上一頁/下一頁的情況下顯示。 此外,還可能會添加跳轉到首頁或最后一頁的鏈接。

取決于頁碼字體大小的頁碼尺寸會因為太小而不便于點擊。這時候,通過合并熱區(像用“11-20 21-30 ...” 代替“1 2 ...”)來創建一個擴大的 “點擊區域”(Enlarged Clickarea) 。這個模式有個不好的地方是當項目非常多的時候,你可能會發現頁碼很快就把頁面空間擠滿了。在這種情況下,可以讓這個模式只顯示當前頁和更多的兩頁,然后使用省略號“...”,最后加上最后一頁。

為什么使用

導航條可以把列表最重要的信息傳達給用戶:總共有多少項目,現在看了多少以及怎樣看到其余的項目。 把導航條放到列表的下面——一個用戶最需要它的位置——在瀏覽完當前頁的所有項目之后。(譯者注:這個位置上用戶的場景是瀏覽完當前頁的所有項目之后,最需要用到導航條來跳轉到其他頁面。)

盡管分頁是一種很常見也已經被接受的交互方式,但是 Ajax技術的到來帶來了新的可能性:我們可能不再需要分頁(paging)了。 所有的結果簡單的呈現,但是僅僅隨著用戶滾動頁面加載數據。 看網站例子如: Dzone?

更多例子

這個例子來自 www.google.com .用多個字母O來表明導航條的數字和上一頁/下一頁按鈕的可點擊區域被放大了。

From www.google.com

在 www.uxmag.com中,放在小框里面的頁碼可以讓用戶很容易選中目標。

From www.uxmag.com

www.flickr.com, Squidfingers和其他許多網站也使用這種方式擴大點擊區域。

在 www.alltheweb.com中,頁碼數字被另外一種方式擴大了點擊區域。

www.alltheweb.com

參考文獻

無窮無盡滾動的內容:

http://www.codeandcoffee.com/2007/04/17/ajax-and-the-endless-scrolling-feature-of-pages/ http://looksgoodworkswell.blogspot.com/2005/06/death-to-paging-rico-livegrid-released.html http://way.nu/archives/2006/08/humanized-very-nice-ajax-eternal-scrolling-ui/

原文鏈接:
http://www.welie.com/patterns/showPattern.php?patternID=paging

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,242評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,229評論 4 61
  • 今天是第二學期開學的第一天。放了太久的假期,上課的時候根本進入不了狀態。剛到教室大家就熱火朝天地聊起來,讓我想起小...
    EveleenZhou閱讀 134評論 0 0
  • 深圳,晴。昨天晚上我的情緒,在一瞬間徹底崩潰了。有那么一瞬間,真的是想死的心都有了。 昨天故事經過很簡單。親密關系...
    Echo可可閱讀 300評論 0 0