您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

網(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è)

  • 輸入框+按鈕

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1084.html
色彩心理學(xué)(理論)
10個(gè)網(wǎng)站提高你的創(chuàng)意理念
圖趣網(wǎng)微信
建議反饋
×