問題
用戶需要瀏覽大量的項(xiàng)目列表才能找到最感興趣的項(xiàng)目
解決方案
分頁呈現(xiàn)項(xiàng)目結(jié)果，每頁都有固定數(shù)量的項(xiàng)目。同時(shí)允許用戶在當(dāng)前頁輕松地跳轉(zhuǎn)到其他頁面。
何時(shí)使用
用戶經(jīng)常需要瀏覽一個(gè)數(shù)量龐大的項(xiàng)目列表。 這個(gè)模式非常適用于項(xiàng)目太多而不能在一頁里面承載的情況。 這些項(xiàng)目通常是排好序的，用戶很可能在列表的前幾條就能找到他們想要的項(xiàng)目。例如 “搜索結(jié)果”（Search Results）就需要經(jīng)常用到“翻頁”（Paging）模式。這個(gè)模式也經(jīng)常和 “列表建造器”（List Builder）用在一起，例如一個(gè)基于網(wǎng)頁的郵件系統(tǒng)。項(xiàng)目的數(shù)量一般是10條到200條不等。這些項(xiàng)目可以是諸如“郵件標(biāo)題、姓名、照片、電話號(hào)碼等”的任何信息。
如何使用
在項(xiàng)目列表的下面顯示頁面的導(dǎo)航。提供直接跳轉(zhuǎn)到特定頁面的鏈接，和允許在頁面中“行進(jìn)”（Stepping） 的上一頁/下一頁 的鏈接。每頁大約呈現(xiàn)5到10條項(xiàng)目，同時(shí)也顯示項(xiàng)目總數(shù)和一個(gè)描述項(xiàng)目類型的標(biāo)題。
導(dǎo)航條的基本結(jié)構(gòu)是：“項(xiàng)目數(shù)量”、“上一頁”、“1 2 3 4 5… ”、“下一頁”。 “上一頁”和“下一頁”鏈接只在當(dāng)前頁存在上一頁/下一頁的情況下顯示。 此外,還可能會(huì)添加跳轉(zhuǎn)到首頁或最后一頁的鏈接。
取決于頁碼字體大小的頁碼尺寸會(huì)因?yàn)樘《槐阌邳c(diǎn)擊。這時(shí)候，通過合并熱區(qū)（像用“11-20 21-30 ...” 代替“1 2 ...”）來創(chuàng)建一個(gè)擴(kuò)大的 “點(diǎn)擊區(qū)域”（Enlarged Clickarea） 。這個(gè)模式有個(gè)不好的地方是當(dāng)項(xiàng)目非常多的時(shí)候，你可能會(huì)發(fā)現(xiàn)頁碼很快就把頁面空間擠滿了。在這種情況下，可以讓這個(gè)模式只顯示當(dāng)前頁和更多的兩頁，然后使用省略號(hào)“...”，最后加上最后一頁。
為什么使用
導(dǎo)航條可以把列表最重要的信息傳達(dá)給用戶：總共有多少項(xiàng)目,現(xiàn)在看了多少以及怎樣看到其余的項(xiàng)目。 把導(dǎo)航條放到列表的下面——一個(gè)用戶最需要它的位置——在瀏覽完當(dāng)前頁的所有項(xiàng)目之后。（譯者注：這個(gè)位置上用戶的場(chǎng)景是瀏覽完當(dāng)前頁的所有項(xiàng)目之后，最需要用到導(dǎo)航條來跳轉(zhuǎn)到其他頁面。）
盡管分頁是一種很常見也已經(jīng)被接受的交互方式,但是 Ajax技術(shù)的到來帶來了新的可能性：我們可能不再需要分頁（paging）了。 所有的結(jié)果簡單的呈現(xiàn)，但是僅僅隨著用戶滾動(dòng)頁面加載數(shù)據(jù)。 看網(wǎng)站例子如： Dzone?
更多例子
這個(gè)例子來自 www.google.com .用多個(gè)字母O來表明導(dǎo)航條的數(shù)字和上一頁/下一頁按鈕的可點(diǎn)擊區(qū)域被放大了。
在 www.uxmag.com中，放在小框里面的頁碼可以讓用戶很容易選中目標(biāo)。
www.flickr.com, Squidfingers和其他許多網(wǎng)站也使用這種方式擴(kuò)大點(diǎn)擊區(qū)域。
在 www.alltheweb.com中，頁碼數(shù)字被另外一種方式擴(kuò)大了點(diǎn)擊區(qū)域。
參考文獻(xiàn)
無窮無盡滾動(dòng)的內(nèi)容:
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
