常見(jiàn)的幾種網(wǎng)頁(yè)翻頁(yè)方式小結(jié)

網(wǎng)頁(yè)翻滾時(shí)會(huì)像波浪一樣翻頁(yè),會(huì)讓人不舒服，在剛開(kāi)始接觸原型設(shè)計(jì)時(shí)，就不可避免地遇到了翻頁(yè)設(shè)計(jì)的問(wèn)題。網(wǎng)頁(yè)翻頁(yè)功能的雛形是從書(shū)籍借鑒過(guò)來(lái)的，之所以需要翻頁(yè)，原因是內(nèi)容超出了承載框。對(duì)于書(shū)本來(lái)說(shuō)，承載框是一頁(yè)紙張，通常是A8大小，捧在手心閱讀剛好合適，而內(nèi)容則是全部文本。對(duì)于網(wǎng)頁(yè)、APP來(lái)說(shuō)，承載框是模塊，通常是根據(jù)瀏覽器尺寸和手機(jī)屏幕自適應(yīng)的。在這里，我總結(jié)了一下常見(jiàn)的幾種網(wǎng)頁(yè)翻頁(yè)方式。

一、頁(yè)碼翻頁(yè)

跟書(shū)籍一樣的頁(yè)碼翻頁(yè)是最經(jīng)典的一種翻頁(yè)方式。在瀑布流等交互形式還沒(méi)有流行起來(lái)的時(shí)候，網(wǎng)站運(yùn)用的基本上都是頁(yè)碼翻頁(yè)。

頁(yè)碼設(shè)計(jì)三個(gè)要素

頁(yè)碼數(shù)字陳列：頁(yè)碼數(shù)字陳列的作用是方便快速定位，通常會(huì)列出首頁(yè)和目前頁(yè)碼附近的頁(yè)碼。

逐頁(yè)翻頁(yè)：逐頁(yè)翻頁(yè)就是上一頁(yè)、下一頁(yè)了，必備的功能。用戶(hù)鼠標(biāo)可以定在同一個(gè)位置不停點(diǎn)擊，無(wú)須每次翻頁(yè)都看一眼頁(yè)碼到哪了。

跳進(jìn)翻頁(yè)：跳進(jìn)可以是跳到最后一頁(yè)、首頁(yè)、后十頁(yè)、任意一頁(yè)等，現(xiàn)在很少有網(wǎng)站會(huì)設(shè)計(jì)跳到任意一頁(yè)了，畢竟很少有人記得想要查找的內(nèi)容具體在哪一頁(yè)。

以下是豆瓣的翻頁(yè)設(shè)計(jì)，我覺(jué)得做得很出色。尤其是頁(yè)碼陳列部分，展現(xiàn)的是前2頁(yè)、后2頁(yè)和當(dāng)前頁(yè)碼附近的9頁(yè)。

豆瓣的翻頁(yè)設(shè)計(jì)

適宜的使用場(chǎng)景

檢索需求較強(qiáng)的功能，比如“我的收藏”“音樂(lè)庫(kù)”等，方便快速定位查找。

內(nèi)容固定的功能，比如資訊網(wǎng)站中，編輯寫(xiě)的長(zhǎng)達(dá)多頁(yè)的多圖長(zhǎng)文，或者網(wǎng)絡(luò)文學(xué)網(wǎng)站里的電子書(shū)。

不適宜的場(chǎng)景

頁(yè)碼翻頁(yè)大的缺陷在于每次翻頁(yè)都需要點(diǎn)擊，而且要求點(diǎn)擊的精準(zhǔn)度高，比如必須點(diǎn)擊“下一頁(yè)”或者某個(gè)數(shù)字才能翻到想去的頁(yè)面。對(duì)于檢索需求弱，且內(nèi)容不斷更新的功能，比如微博，不建議使用頁(yè)碼翻頁(yè)。

二、自動(dòng)瀑布流

自動(dòng)瀑布流，指的分段式加載，當(dāng)用戶(hù)瀏覽到已加載的內(nèi)容底部時(shí)，網(wǎng)頁(yè)會(huì)自動(dòng)加載后續(xù)內(nèi)容。

瀑布流是移動(dòng)互聯(lián)網(wǎng)爆發(fā)后興起的交互方式。那個(gè)時(shí)候，社交網(wǎng)絡(luò)、碎片化時(shí)間的概念如火如荼，很多網(wǎng)站將首頁(yè)以時(shí)間線+訂閱的方式呈現(xiàn)，facebook、twitter均使用這種方式。用戶(hù)上網(wǎng)的目的不再是搜索有用資料，而是隨便看看、消磨無(wú)聊時(shí)間。上網(wǎng)習(xí)慣的改變自然帶來(lái)了瀑布式加載的流行。

適宜使用的場(chǎng)景

用戶(hù)的主要需求是瀏覽最新內(nèi)容，比如資訊訂閱類(lèi)、社交類(lèi)網(wǎng)站。

不適宜的場(chǎng)景

由于瀑布流缺乏檢索功能，如果用戶(hù)需要頻繁查找老內(nèi)容，那么瀑布式加載會(huì)帶來(lái)嚴(yán)重阻礙。

三、手動(dòng)瀑布流

手動(dòng)瀑布流是需要用戶(hù)手動(dòng)點(diǎn)擊加載按鈕，才能獲得更多內(nèi)容的方式。手動(dòng)瀑布流分為兩種情況：向前翻頁(yè)和向后翻頁(yè)。向前翻頁(yè)通常是有時(shí)間線有新消息時(shí)的pop提醒，向后翻頁(yè)的結(jié)果和自動(dòng)瀑布流一樣，只是會(huì)出現(xiàn)一個(gè)按鈕，需要點(diǎn)擊才加載后續(xù)內(nèi)容。

適宜的使用場(chǎng)景

向前翻頁(yè)的瀑布流：適用于被動(dòng)更新的頁(yè)面。被動(dòng)更新指的是當(dāng)我停留在頁(yè)面時(shí)，接收到了別人更新內(nèi)容，比如知乎、微博都會(huì)提醒你有xx條新內(nèi)容。

向后翻頁(yè)的瀑布流：適用于功能適合瀑布流，然而底部有內(nèi)容的網(wǎng)站。比如下圖。

不過(guò)，我個(gè)人不看好向后翻頁(yè)的瀑布流，雖然不需要像頁(yè)碼那樣精準(zhǔn)定位，但仍然多出了一次點(diǎn)擊的步驟。如果不是有必須放在底部的內(nèi)容，可以考慮把原來(lái)底部的內(nèi)容以低調(diào)的方式放在側(cè)欄。比如像知乎這樣——

底部常見(jiàn)內(nèi)容被知乎放在了側(cè)欄

四、箭頭翻頁(yè)

箭頭翻頁(yè)是頁(yè)碼翻頁(yè)的簡(jiǎn)化形式，去掉頁(yè)碼數(shù)字，同時(shí)把“上一頁(yè)”“下一頁(yè)”簡(jiǎn)化成箭頭，如下圖。

豆瓣閱讀的箭頭翻頁(yè)

豆瓣音樂(lè)的箭頭翻頁(yè)

適宜使用的場(chǎng)景

模塊大小固定并且內(nèi)容較少，通常是展示型模塊，比如編輯推薦、今日特價(jià)。之所以運(yùn)用箭頭翻頁(yè)，有三點(diǎn)原因：

一是因?yàn)槟K大小固定不適合會(huì)擴(kuò)大模塊長(zhǎng)度的瀑布流;

二是內(nèi)容較少?zèng)]有幾頁(yè)，顯示數(shù)字頁(yè)碼顯得累贅。

三是因?yàn)檎故灸K需要稍微華麗的交互效果，而箭頭翻頁(yè)容易做出比較炫的動(dòng)畫(huà)效果。

五、圓點(diǎn)頁(yè)碼

圓點(diǎn)頁(yè)碼是數(shù)字頁(yè)碼的簡(jiǎn)化，即把頁(yè)碼數(shù)字變成圓點(diǎn)，當(dāng)前頁(yè)碼用特殊顏色凸顯出來(lái)。

適宜使用的場(chǎng)景

演示型模塊，比如輪播banner。自動(dòng)輪換的banner之所以大部分使用圓點(diǎn)頁(yè)碼而非箭頭翻頁(yè)，是為了讓用戶(hù)知曉一共有幾張圖片，目前是第幾張。實(shí)際上，圓點(diǎn)頁(yè)碼的提示功能要多于操作功能。也有網(wǎng)頁(yè)同時(shí)使用圓點(diǎn)和箭頭，比如下圖——

蝦米演出的banner

不適宜的場(chǎng)景

用戶(hù)主動(dòng)翻頁(yè)需求較強(qiáng)的模塊。圓點(diǎn)頁(yè)碼就是為了簡(jiǎn)潔美觀而誕生的，通常比數(shù)字頁(yè)碼點(diǎn)擊范圍小，不適合頻繁操作。

六、錨點(diǎn)滾輪翻頁(yè)

錨點(diǎn)滾輪翻頁(yè)指的是滾動(dòng)鼠標(biāo)滑輪后，頁(yè)面定位到下一個(gè)錨點(diǎn)。例子請(qǐng)見(jiàn)tumblr的產(chǎn)品介紹頁(yè)。這種翻頁(yè)方式的優(yōu)點(diǎn)有兩個(gè)，第一是可以交互動(dòng)畫(huà)效果酷炫;第二點(diǎn)是無(wú)須點(diǎn)擊，輕輕滾動(dòng)滑輪就直接定位到下一頁(yè)，非常方便。缺點(diǎn)是開(kāi)發(fā)程序繁瑣，不適合網(wǎng)站里大量使用。

適宜使用的場(chǎng)景

具有展示功能的單頁(yè)，很多個(gè)人主頁(yè)、公司主頁(yè)都使用錨點(diǎn)滾動(dòng)翻頁(yè)。

分享名稱(chēng)：常見(jiàn)的幾種網(wǎng)頁(yè)翻頁(yè)方式小結(jié)
文章分享：http://bm7419.com/news/165852.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、ChatGPT、網(wǎng)站策劃、域名注冊(cè)、網(wǎng)站導(dǎo)航、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)