問題
用戶需要瀏覽大量的項目列表才能找到最感興趣的項目
解決方案
分頁呈現項目結果,每頁都有固定數量的項目。同時允許用戶在當前頁輕松地跳轉到其他頁面。
何時使用
用戶經常需要瀏覽一個數量龐大的項目列表。 這個模式非常適用于項目太多而不能在一頁里面承載的情況。 這些項目通常是排好序的,用戶很可能在列表的前幾條就能找到他們想要的項目。例如 “搜索結果”(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來表明導航條的數字和上一頁/下一頁按鈕的可點擊區域被放大了。
在 www.uxmag.com中,放在小框里面的頁碼可以讓用戶很容易選中目標。
www.flickr.com, Squidfingers和其他許多網站也使用這種方式擴大點擊區域。
在 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