別看翻頁(yè)就占那么點(diǎn)兒地方，它體現(xiàn)的是市場(chǎng)的策略、程序的算法和交互設(shè)計(jì)。我選擇了 Amazon、Google、Flickr、新浪和淘寶這五個(gè)網(wǎng)站，體驗(yàn)他們的翻頁(yè)設(shè)計(jì)。這幾個(gè)站點(diǎn)應(yīng)該還算有代表性，Amazon 是國(guó)外購(gòu)物網(wǎng)站，Google 是搜索引擎，F(xiàn)lickr 是 Web 2.0 和 Yahoo 的代表，新浪是中國(guó)門戶，淘寶是國(guó)內(nèi)購(gòu)物站點(diǎn)（同時(shí)還擁有優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)）。

Amazon 商品列表頁(yè)的翻頁(yè)

• 是五個(gè)網(wǎng)站中唯一一個(gè)區(qū)分訪問(wèn)過(guò)、沒(méi)訪問(wèn)過(guò)的鏈接的顏色；
• 不需要“上一頁(yè)”、“下一頁(yè)”的時(shí)候就不顯示；
• 第一頁(yè)的鏈接永遠(yuǎn)存在；
• 告知用戶列表總數(shù)量和當(dāng)前顯示的數(shù)量（Amazon有些頁(yè)面將數(shù)量顯示在列表頂部）；
• 不提供所有的頁(yè)，上圖中 400 頁(yè)是極限，400 頁(yè)之后的內(nèi)容可以通過(guò)分類選擇來(lái)縮小范圍（同時(shí)給出提示）。

Google 搜索結(jié)果的翻頁(yè)

• 富有創(chuàng)意的設(shè)計(jì)；
• 不需要“上一頁(yè)”、“下一頁(yè)”的時(shí)候就不顯示；
• “上一頁(yè)”“下一頁(yè)”的鏈接區(qū)域很大，容易點(diǎn)；
• 不提供所有的頁(yè)，上圖中 100 頁(yè)是極限，100 頁(yè)之后的內(nèi)容或許可以更換關(guān)鍵詞重新搜索，但是沒(méi)有提示。

Flickr 照片列表的翻頁(yè)

• “上一頁(yè)”“下一頁(yè)”永遠(yuǎn)顯示，但不同情況顯示不同樣式；
• 按了“上一頁(yè)”或“下一頁(yè)”之后則邊框加粗（成為重點(diǎn)），引導(dǎo)你繼續(xù)往下點(diǎn)；
• 告知用戶列表的總數(shù)量；
• 數(shù)量少得情況下，提供了“最后一頁(yè)”的鏈接（圖上沒(méi)有）；
• 可以訪問(wèn)到所有的頁(yè)，可惜如上圖所示超過(guò)一定的頁(yè)碼，顯示上有問(wèn)題（IE 和 FF 都這樣）。

新浪文章留言部分的翻頁(yè)

• 新浪評(píng)論部分的翻頁(yè)，Ajax 可以拖動(dòng)翻頁(yè)（顯擺用的）；
• 永遠(yuǎn)提供“第一頁(yè)”“最后一頁(yè)”“上一頁(yè)”“下一頁(yè)”的鏈接，但是樣式基本一致沒(méi)有差別；
• 告知用戶列表的總數(shù)量；
• 提供批量翻頁(yè)（“上 10 頁(yè)”）。

但是在新浪博客（新浪比較有代表性的新產(chǎn)品）中，我們也可以看到以下相對(duì)比較粗糙的翻頁(yè)：

新浪博客的翻頁(yè)

• 給出了“最后一頁(yè)”的鏈接，直接顯示為“第 n 頁(yè)”，如上圖中的“第 7 頁(yè)”；
• 在單個(gè)博客頁(yè)面上的翻頁(yè)，以“>>”作為下一頁(yè)，而不是常見(jiàn)的“>”；
• 提供了批量翻頁(yè)（“上 5 頁(yè)”）。

淘寶商品列表的翻頁(yè)

• 永遠(yuǎn)顯示“上一頁(yè)”“下一頁(yè)”，并且狀態(tài)和形狀有區(qū)分；上一頁(yè)使用率較低，所以設(shè)計(jì)的較小；
• 永遠(yuǎn)提供“第一頁(yè)”“最后一頁(yè)”的鏈接；
• 提供頁(yè)面的跳轉(zhuǎn)，但是默認(rèn)值為當(dāng)前頁(yè)；
• 在列表的頂部右側(cè)提供了一個(gè)簡(jiǎn)化的翻頁(yè)，并且與底部的翻頁(yè)設(shè)計(jì)一致。

小結(jié)

1. 必須提供“上一頁(yè)”和“下一頁(yè)”的鏈接，并根據(jù)狀態(tài)和使用率區(qū)分設(shè)計(jì)；
2. 數(shù)據(jù)量大且更新快的情況下，并且當(dāng)列表按照特定排序時(shí)，一定要提供返回“第一頁(yè)”的鏈接；“最后一頁(yè)”的鏈接根據(jù)訪問(wèn)情況而定；
3. 突出當(dāng)前頁(yè)的數(shù)字，并且盡量使頁(yè)碼容易點(diǎn)擊（不要緊緊地靠在一起），也不要一下子把所有頁(yè)碼都顯示出來(lái)；
4. 一般不需要在列表的上下都提供翻頁(yè)，增加程序負(fù)擔(dān)并且干擾視覺(jué)；淘寶列表頂部提供的簡(jiǎn)化的翻頁(yè)想法不錯(cuò)，但不知道使用率如何；
5. 批量翻頁(yè)是無(wú)意義的（但是可以增加 PageView），可以通過(guò)優(yōu)化頁(yè)碼排列來(lái)替代；比如在當(dāng)前頁(yè)的左右兩側(cè)各提供一定數(shù)量的頁(yè)碼；
6. 對(duì)于“第一頁(yè)”和“最后一頁(yè)”的鏈接，如果是在頁(yè)碼序列中顯示，一般會(huì)附帶顯示第二頁(yè)和最后第二頁(yè)的鏈接，比如本文中的淘寶翻頁(yè)的截圖，顯示為“1 2 ... 96 97”。如果單獨(dú)提供，可能視覺(jué)上會(huì)以為這不是頁(yè)碼序列的一部分，特別是最后一頁(yè)的數(shù)字，用戶可能沒(méi)有概念；
7. 對(duì)于用戶比較熟悉的內(nèi)容，或者用戶自己的內(nèi)容，盡量提供“最后一頁(yè)”的鏈接，比如 Flickr 對(duì)于個(gè)人照片就是這樣處理的（文中的翻頁(yè)取自某個(gè) tag 的照片）。

如果可以通過(guò)數(shù)據(jù)確定用戶的行為是較為隨意和沒(méi)有目的性的瀏覽，那么提供多種方式的翻頁(yè)很有必要，比如提供跳轉(zhuǎn)到固定頁(yè)碼。比較理性的行為，不會(huì)使用直接跳轉(zhuǎn)到某頁(yè)，因?yàn)闊o(wú)法知道那里是什么。

Shark 在白鴉的那篇淘寶的體驗(yàn)文章中回復(fù)到“有些東西出現(xiàn)在頁(yè)面上是有很長(zhǎng)的故事的，不便多說(shuō)了?！蔽蚁雭?lái)想去，寫本文并且截圖只是看看這些公司在細(xì)節(jié)上面是怎么處理的、是否用心設(shè)計(jì)，不存在絕對(duì)的對(duì)錯(cuò)。

數(shù)據(jù)很重要，我曾經(jīng)做過(guò)一個(gè)活動(dòng)廣告，點(diǎn)擊率大約是 1%，后來(lái)在廣告上增加了“點(diǎn)擊查看詳情”，并且采用默認(rèn)的藍(lán)色加下劃線的鏈接形式，點(diǎn)擊率提高到了 10% 左右。