網頁設計幾種常見的翻頁方式

在網站設計中，我們不可避免地遇到了翻頁設計的問題。網頁翻頁功能的雛形是從書籍借鑒過來的，之所以需要翻頁，原因是內容超出了承載框。對于書本來說，承載框是一頁紙張，通常是A8大小，捧在手心閱讀剛好合適，而內容則是全部文本。對于網頁、APP來說，承載框是模塊，通常是根據瀏覽器尺寸和手機屏幕自適應的。在這里，【樂信科技】小編總結了一下網頁常見的翻頁方式。

 

一、頁碼翻頁

跟書籍一樣的頁碼翻頁是最經典的一種翻頁方式。在瀑布流等交互形式還沒有流行起來的時候，網站運用的基本上都是頁碼翻頁。

頁碼設計三個要素

頁碼數字陳列：頁碼數字陳列的作用是方便快速定位，通常會列出首頁和目前頁碼附近的頁碼。

逐頁翻頁：逐頁翻頁就是上一頁、下一頁了，必備的功能。用戶鼠標可以定在同一個位置不停點擊，無須每次翻頁都看一眼頁碼到哪了。

跳進翻頁：跳進可以是跳到最后一頁、首頁、后十頁、任意一頁等，現在很少有網站會設計跳到任意一頁了，畢竟很少有人記得想要查找的內容具體在哪一頁。

 

二、自動瀑布流

自動瀑布流，指的分段式加載，當用戶瀏覽到已加載的內容底部時，網頁會自動加載后續內容。

瀑布流是移動互聯網爆發后興起的交互方式。那個時候，社交網絡、碎片化時間的概念如火如荼，很多網站將首頁以時間線+訂閱的方式呈現，facebook、twitter均使用這種方式。用戶上網的目的不再是搜索有用資料，而是隨便看看、消磨無聊時間。上網習慣的改變自然帶來了瀑布式加載的流行。

適宜使用的場景：用戶的主要需求是瀏覽最新內容，比如資訊訂閱類、社交類網站。

不適宜的場景：由于瀑布流缺乏檢索功能，如果用戶需要頻繁查找老內容，那么瀑布式加載會帶來嚴重阻礙。

 

三、手動瀑布流

手動瀑布流是需要用戶手動點擊加載按鈕，才能獲得更多內容的方式。手動瀑布流分為兩種情況：向前翻頁和向后翻頁。向前翻頁通常是有時間線有新消息時的pop提醒，向后翻頁的結果和自動瀑布流一樣，只是會出現一個按鈕，需要點擊才加載后續內容。

適宜的使用場景：向前翻頁的瀑布流：適用于被動更新的頁面。被動更新指的是當我停留在頁面時，接收到了別人更新內容，比如知乎、微博都會提醒你有xx條新內容。

向后翻頁的瀑布流：適用于功能適合瀑布流，然而底部有內容的網站。

 

四、箭頭翻頁

箭頭翻頁是頁碼翻頁的簡化形式，去掉頁碼數字，同時把“上一頁”“下一頁”簡化成箭頭，如下圖。

適宜使用的場景：模塊大小固定并且內容較少，通常是展示型模塊，比如編輯推薦、今日特價。之所以運用箭頭翻頁，有三點原因：

一是因為模塊大小固定不適合會擴大模塊長度的瀑布流;

二是內容較少沒有幾頁，顯示數字頁碼顯得累贅。

三是因為展示模塊需要稍微華麗的交互效果，而箭頭翻頁容易做出比較炫的動畫效果。

 

五、圓點頁碼

圓點頁碼是數字頁碼的簡化，即把頁碼數字變成圓點，當前頁碼用特殊顏色凸顯出來。

適宜使用的場景：演示型模塊，比如輪播banner。自動輪換的banner之所以大部分使用圓點頁碼而非箭頭翻頁，是為了讓用戶知曉一共有幾張圖片，目前是第幾張。實際上，圓點頁碼的提示功能要多于操作功能。

不適宜的場景：用戶主動翻頁需求較強的模塊。圓點頁碼就是為了簡潔美觀而誕生的，通常比數字頁碼點擊范圍小，不適合頻繁操作。