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

一、頁碼翻頁

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

頁碼設(shè)計三個要素

1. 頁碼數(shù)字陳列：頁碼數(shù)字陳列的作用是方便快速定位，通常會列出首頁和目前頁碼附近的頁碼。
2. 逐頁翻頁：逐頁翻頁就是上一頁、下一頁了，必備的功能。用戶鼠標(biāo)可以定在同一個位置不停點擊，無須每次翻頁都看一眼頁碼到哪了。
3. 跳進(jìn)翻頁：跳進(jìn)可以是跳到最后一頁、首頁、后十頁、任意一頁等，現(xiàn)在很少有網(wǎng)站會設(shè)計跳到任意一頁了，畢竟很少有人記得想要查找的內(nèi)容具體在哪一頁。

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

豆瓣的翻頁設(shè)計

適宜的使用場景

1. 檢索需求較強(qiáng)的功能，比如“我的收藏”“音樂庫”等，方便快速定位查找。
2. 內(nèi)容固定的功能，比如資訊網(wǎng)站中，編輯寫的長達(dá)多頁的多圖長文，或者網(wǎng)絡(luò)文學(xué)網(wǎng)站里的電子書。

不適宜的場景

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

二、自動瀑布流

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

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

適宜使用的場景

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

不適宜的場景

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

三、手動瀑布流

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

適宜的使用場景

1. 向前翻頁的瀑布流：適用于被動更新的頁面。被動更新指的是當(dāng)我停留在頁面時，接收到了別人更新內(nèi)容，比如知乎、微博都會提醒你有xx條新內(nèi)容。
2. 向后翻頁的瀑布流：適用于功能適合瀑布流，然而底部有內(nèi)容的網(wǎng)站。比如下圖。

人人都是產(chǎn)品經(jīng)理的翻頁設(shè)計

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

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

四、箭頭翻頁

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

豆瓣閱讀的箭頭翻頁

豆瓣音樂的箭頭翻頁

適宜使用的場景

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

• 一是因為模塊大小固定不適合會擴(kuò)大模塊長度的瀑布流；
• 二是內(nèi)容較少沒有幾頁，顯示數(shù)字頁碼顯得累贅。
• 三是因為展示模塊需要稍微華麗的交互效果，而箭頭翻頁容易做出比較炫的動畫效果。

五、圓點頁碼

圓點頁碼是數(shù)字頁碼的簡化，即把頁碼數(shù)字變成圓點，當(dāng)前頁碼用特殊顏色凸顯出來。

適宜使用的場景

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

蝦米演出的banner

不適宜的場景

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

六、錨點滾輪翻頁

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

適宜使用的場景

具有展示功能的單頁，很多個人主頁、公司主頁都使用錨點滾動翻頁。

作者：不眠海

來源：簡書

文章鏈接：http://www.jianshu.com/p/7b58a4755e88

本文由 @不眠海 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。