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

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

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

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

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

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

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

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

1)第一頁

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

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

2)最后一頁

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

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

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

3)上一頁/下一頁（翻頁）

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

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

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

4)當(dāng)前頁

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

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

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

5)非當(dāng)前頁

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

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

6)總頁數(shù)

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

7)頁碼間距

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

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

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

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

何時(shí)需要？

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

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

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

• 輸入框+按鈕