網(wǎng)頁(yè)設(shè)計(jì)糾結(jié)的翻頁(yè)設(shè)計(jì)

1.什么時(shí)候需要進(jìn)行翻頁(yè)設(shè)計(jì)

當(dāng)網(wǎng)頁(yè)內(nèi)容較多、不能在限定區(qū)域內(nèi)顯示完全時(shí)，需要進(jìn)行分頁(yè)呈現(xiàn)。為了方便用戶在多個(gè)頁(yè)面間跳轉(zhuǎn)和快速定位（尤其是按順序翻頁(yè)），通過(guò)翻頁(yè)設(shè)計(jì)提供多個(gè)頁(yè)面間的導(dǎo)航。

2.設(shè)計(jì)翻頁(yè)要考慮的問(wèn)題

• 分頁(yè)的內(nèi)容是什么類型？
• 頁(yè)面數(shù)量有多少？
• 查看最多的是哪些頁(yè)面？
• 手動(dòng)全部翻一遍的可能性有多大？
• 是否會(huì)不按順序翻頁(yè)？為什么？
• 是否會(huì)查看已翻過(guò)的頁(yè)面？
• 翻頁(yè)是否需要在列表頂部和底部都出現(xiàn)？
• ……

3.好的翻頁(yè)設(shè)計(jì)要點(diǎn)

• 擴(kuò)大可點(diǎn)區(qū)域
• 不要使用下劃線
• 清晰標(biāo)識(shí)當(dāng)前頁(yè)面
• 給頁(yè)面鏈接之間留出足夠間距
• 提供上一頁(yè)/下一頁(yè)鏈接
• 如果需要，使用首頁(yè)和末頁(yè)鏈接
• 將首頁(yè)和末頁(yè)鏈接放在翻頁(yè)區(qū)域之外
• 提供上一頁(yè)/下一頁(yè)鏈接位置保持固定
• 頁(yè)碼數(shù)量不宜過(guò)長(zhǎng)（用戶視線游離）或過(guò)短（頁(yè)面數(shù)量顯示太少）

4.設(shè)計(jì)元素討論

1)第一頁(yè)

Q：是否應(yīng)一直顯示第一頁(yè)鏈接？
A：大部分的翻頁(yè)都保持第一頁(yè)鏈接可見(jiàn)。如果返回第一頁(yè)的可能性很小，或者希望將用戶注意力保持在當(dāng)前頁(yè)面以及周邊頁(yè)面，則不保留第一頁(yè)鏈接，如google搜索結(jié)果頁(yè)面。

Q：如果一直顯示第一頁(yè)鏈接，如何返回第一頁(yè)？
A：一種是固定第一頁(yè)的數(shù)字鏈接，一種是提供“<<第一頁(yè)”/”<<首頁(yè)”/”<<First”的鏈接或按鈕

2)最后一頁(yè)

Q：是否應(yīng)一直顯示最后一頁(yè)鏈接？
A：顯示最后一頁(yè)鏈接的好處是，告訴用戶頁(yè)面數(shù)量，使其能夠評(píng)估網(wǎng)站內(nèi)容豐富程度，并且提供從后往前翻頁(yè)的捷徑（適用于用戶熟悉的內(nèi)容）。如果靠后的內(nèi)容質(zhì)量較差，或者不鼓勵(lì)逆向翻頁(yè)的操作，可以不提供最后一頁(yè)的鏈接。

如果不顯示最后一頁(yè)鏈接，應(yīng)提供其他的線索提示頁(yè)面數(shù)量，否則可能造成僅有當(dāng)前顯示頁(yè)數(shù)的誤解。

Q：如果一直顯示最后一頁(yè)鏈接，如何跳轉(zhuǎn)？
A：一種是固定最后一頁(yè)的數(shù)字鏈接，一種是提供“最后一頁(yè)>>”/”末頁(yè)>>”/”Last>>”鏈接或按鈕

3)上一頁(yè)/下一頁(yè)（翻頁(yè)）

Q：上一頁(yè)/下一頁(yè)是否必需？
A：一般而言，如果翻頁(yè)操作較頻繁，應(yīng)提供上一頁(yè)/下一頁(yè)鏈接（注意保持位置固定），方便快速翻頁(yè)。翻頁(yè)鏈接常用尖括號(hào)+文字表示：
<<Previous <上一頁(yè)
Next>> >下一頁(yè)

Q：上一頁(yè)的位置與下一頁(yè)緊鄰還是分離？
A：大部分的翻頁(yè)將上一頁(yè)鏈接放在頁(yè)碼條的左側(cè)。如果前后來(lái)回翻頁(yè)的操作較頻繁，可以將上一頁(yè)放在頁(yè)碼條右側(cè)，緊鄰下一頁(yè)鏈接。

Q：上一頁(yè)下一頁(yè)的樣式是否需要區(qū)別設(shè)計(jì)？
A：根據(jù)使用的頻率，可以對(duì)兩者進(jìn)行區(qū)別設(shè)計(jì)，例如下一頁(yè)使用比較多，可以設(shè)計(jì)得更突出一些。

4)當(dāng)前頁(yè)

當(dāng)前頁(yè)的樣式應(yīng)與其他頁(yè)樣式有明顯區(qū)別，并且hover樣式不改變、不可點(diǎn)擊。

上面的例子是通過(guò)“強(qiáng)調(diào)”進(jìn)行區(qū)分（更強(qiáng)調(diào)當(dāng)前頁(yè)，增強(qiáng)位置感）

上面的例子是通過(guò)“弱化”進(jìn)行區(qū)分（更強(qiáng)調(diào)hover頁(yè)，增強(qiáng)點(diǎn)擊行為引導(dǎo)）

5)非當(dāng)前頁(yè)

Normal：多設(shè)計(jì)為外框+數(shù)字的樣式，能更容易識(shí)別翻頁(yè)區(qū)域

Hover：應(yīng)與當(dāng)前頁(yè)、非當(dāng)前頁(yè)的普通樣式有明顯的區(qū)分
（不易識(shí)別）
（易識(shí)別）
Click：一般不對(duì)點(diǎn)擊樣式另行設(shè)計(jì)
Visited：一般不對(duì)訪問(wèn)過(guò)的樣式另行設(shè)計(jì)

6)總頁(yè)數(shù)

建議提供總頁(yè)數(shù)，可以告知用戶明確的信息量和翻頁(yè)范圍；但如果總頁(yè)數(shù)很多或者總頁(yè)數(shù)變化很頻繁的情況下，系統(tǒng)需要計(jì)算出所有的頁(yè)數(shù)，可能會(huì)導(dǎo)致頁(yè)面性能降低。

7)頁(yè)碼間距

為頁(yè)碼之間留出足夠的間距，減少誤點(diǎn)的可能性。為頁(yè)碼加外框能較好地保證頁(yè)碼之間的區(qū)隔，外框之間最好也留出一定間隔。

8)可點(diǎn)區(qū)域

根據(jù)費(fèi)茨定律 ，擴(kuò)大可點(diǎn)區(qū)域，可以減少鼠標(biāo)移動(dòng)、點(diǎn)擊鏈接的時(shí)間。為頁(yè)碼加外框能有效地?cái)U(kuò)大可點(diǎn)區(qū)域。還可以通過(guò)其他設(shè)計(jì)達(dá)到這一目的，如google搜索結(jié)果的翻頁(yè)：

9)手動(dòng)輸入頁(yè)碼進(jìn)行快速跳轉(zhuǎn)

何時(shí)需要？

• 增加后面頁(yè)面的曝光需求（如淘寶）
• 內(nèi)容與用戶關(guān)系較密切，是用戶所熟悉的（如個(gè)人圖片庫(kù)）
• 用戶可能按照大致的線索(如時(shí)間)，跳轉(zhuǎn)到某些頁(yè)面查看(如郵件列表頁(yè)面)

有哪些跳轉(zhuǎn)方式？

• 下拉列表，適用于頁(yè)數(shù)較少的翻頁(yè)

• 輸入框+按鈕