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

在網站設計中，我們不可(kě)避免地遇到了(le)翻頁設計的(de)問題。網頁翻頁功能的(de)雛形是從書(shū)籍借鑒過來(lái)的(de)，之所以需要翻頁，原因是内容超出了(le)承載框。對(duì)于書(shū)本來(lái)說，承載框是一頁紙張，通(tōng)常是A8大(dà)小，捧在手心閱讀剛好合适，而内容則是全部文本。對(duì)于網頁、APP來(lái)說，承載框是模塊，通(tōng)常是根據浏覽器尺寸和(hé)手機屏幕自适應的(de)。在這(zhè)裏，【樂(yuè)信科技】小編總結了(le)一下(xià)網頁常見的(de)翻頁方式。

 

一、頁碼翻頁

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

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

頁碼數字陳列：頁碼數字陳列的(de)作用(yòng)是方便快(kuài)速定位，通(tōng)常會列出首頁和(hé)目前頁碼附近的(de)頁碼。

逐頁翻頁：逐頁翻頁就是上一頁、下(xià)一頁了(le)，必備的(de)功能。用(yòng)戶鼠标可(kě)以定在同一個(gè)位置不停點擊，無須每次翻頁都看一眼頁碼到哪了(le)。

跳進翻頁：跳進可(kě)以是跳到最後一頁、首頁、後十頁、任意一頁等，現在很少有網站會設計跳到任意一頁了(le)，畢竟很少有人(rén)記得(de)想要查找的(de)内容具體在哪一頁。

 

二、自動瀑布流

自動瀑布流，指的(de)分(fēn)段式加載，當用(yòng)戶浏覽到已加載的(de)内容底部時(shí)，網頁會自動加載後續内容。

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

适宜使用(yòng)的(de)場(chǎng)景：用(yòng)戶的(de)主要需求是浏覽最新内容，比如資訊訂閱類、社交類網站。

不适宜的(de)場(chǎng)景：由于瀑布流缺乏檢索功能，如果用(yòng)戶需要頻(pín)繁查找老内容，那麽瀑布式加載會帶來(lái)嚴重阻礙。

 

三、手動瀑布流

手動瀑布流是需要用(yòng)戶手動點擊加載按鈕，才能獲得(de)更多(duō)内容的(de)方式。手動瀑布流分(fēn)爲兩種情況：向前翻頁和(hé)向後翻頁。向前翻頁通(tōng)常是有時(shí)間線有新消息時(shí)的(de)pop提醒，向後翻頁的(de)結果和(hé)自動瀑布流一樣，隻是會出現一個(gè)按鈕，需要點擊才加載後續内容。

适宜的(de)使用(yòng)場(chǎng)景：向前翻頁的(de)瀑布流：适用(yòng)于被動更新的(de)頁面。被動更新指的(de)是當我停留在頁面時(shí)，接收到了(le)别人(rén)更新内容，比如知乎、微博都會提醒你有xx條新内容。

向後翻頁的(de)瀑布流：适用(yòng)于功能适合瀑布流，然而底部有内容的(de)網站。

 

四、箭頭翻頁

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

适宜使用(yòng)的(de)場(chǎng)景：模塊大(dà)小固定并且内容較少，通(tōng)常是展示型模塊，比如編輯推薦、今日特價。之所以運用(yòng)箭頭翻頁，有三點原因：

一是因爲模塊大(dà)小固定不适合會擴大(dà)模塊長(cháng)度的(de)瀑布流;

二是内容較少沒有幾頁，顯示數字頁碼顯得(de)累贅。

三是因爲展示模塊需要稍微華麗的(de)交互效果，而箭頭翻頁容易做(zuò)出比較炫的(de)動畫(huà)效果。

 

五、圓點頁碼

圓點頁碼是數字頁碼的(de)簡化(huà)，即把頁碼數字變成圓點，當前頁碼用(yòng)特殊顔色凸顯出來(lái)。

适宜使用(yòng)的(de)場(chǎng)景：演示型模塊，比如輪播banner。自動輪換的(de)banner之所以大(dà)部分(fēn)使用(yòng)圓點頁碼而非箭頭翻頁，是爲了(le)讓用(yòng)戶知曉一共有幾張圖片，目前是第幾張。實際上，圓點頁碼的(de)提示功能要多(duō)于操作功能。

不适宜的(de)場(chǎng)景：用(yòng)戶主動翻頁需求較強的(de)模塊。圓點頁碼就是爲了(le)簡潔美(měi)觀而誕生的(de)，通(tōng)常比數字頁碼點擊範圍小，不适合頻(pín)繁操作。