導航:首頁 > 網站知識 > 網站里每多少條翻頁

網站里每多少條翻頁

發布時間:2022-12-26 19:42:40

❶ 網頁常見的幾種翻頁方式

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

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

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

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

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

以下是豆瓣的翻頁設計,我覺得做得很出色。尤其是頁碼陳列部分,展現的是前2頁、後2頁和當前頁碼附近的9頁。

1.檢索需求較強的功能,比如「我的收藏」「音樂庫」等,方便快速定位查找。

2.內容固定的功能,比如資訊網站中,編輯寫的長達多頁的多圖長文,或者網路文學網站里的電子書。

頁碼翻頁最大的缺陷在於每次翻頁都需要點擊,而且要求點擊的精準度高,比如必須點擊「下一頁」或者某個數字才能翻到想去的頁面。對於檢索需求弱,且內容不斷更新的功能,比如微博,不建議使用頁碼翻頁。

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

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

用戶的主要需求是瀏覽最新內容,比如資訊訂閱類、社交類網站。

由於瀑布流缺乏檢索功能,如果用戶需要頻繁查找老內容,那麼瀑布式載入會帶來嚴重阻礙。

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

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

2.向後翻頁的瀑布流,適用於功能適合瀑布流,然而底部有內容的網站。比如下圖。

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

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

模塊大小固定並且內容較少,通常是展示型模塊,比如編輯推薦、今日特價。之所以運用箭頭翻頁,有三點原因,一是因為模塊大小固定不適合會擴大模塊長度的瀑布流;二是內容較少沒有幾頁,顯示數字頁碼顯得累贅。三是因為展示模塊需要稍微華麗的交互效果,而箭頭翻頁容易做出比較炫的動畫效果。

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

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

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

錨點滾輪翻頁指的是滾動滑鼠滑輪後,頁面定位到下一個錨點。例子請見 tumblr的產品介紹頁 。這種翻頁方式的優點有兩個,第一是可以交互動畫效果酷炫;第二點是無須點擊,輕輕滾動滑輪就直接定位到下一頁,非常方便。缺點是開發程序繁瑣,不適合網站里大量使用。

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

閱讀全文

與網站里每多少條翻頁相關的資料

熱點內容
網路共享中心沒有網卡 瀏覽:567
電腦無法檢測到網路代理 瀏覽:1433
筆記本電腦一天會用多少流量 瀏覽:745
蘋果電腦整機轉移新機 瀏覽:1409
突然無法連接工作網路 瀏覽:1169
聯通網路怎麼設置才好 瀏覽:1270
小區網路電腦怎麼連接路由器 瀏覽:1160
p1108列印機網路共享 瀏覽:1247
怎麼調節台式電腦護眼 瀏覽:804
深圳天虹蘋果電腦 瀏覽:1040
網路總是異常斷開 瀏覽:649
中級配置台式電腦 瀏覽:1104
中國網路安全的戰士 瀏覽:667
同志網站在哪裡 瀏覽:1476
版觀看完整完結免費手機在線 瀏覽:1492
怎樣切換默認數據網路設置 瀏覽:1160
肯德基無線網無法訪問網路 瀏覽:1383
光纖貓怎麼連接不上網路 瀏覽:1601
神武3手游網路連接 瀏覽:1005
局網列印機網路共享 瀏覽:1031