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

2012/3/1 14:57:19來源：互聯(lián)網(wǎng)

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

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

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

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

3.好的翻頁設(shè)計要點

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

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

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ì)量較差，或者不鼓勵逆向翻頁的操作，可以不提供最后一頁的鏈接。

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

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

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

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

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

4)當(dāng)前頁

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

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

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

5)非當(dāng)前頁

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

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