分頁加載VS無限加載

0 評論 2746 瀏覽 15 收藏 8 分鐘

究竟應該選擇分頁加載,還是無限滾動呢?關于這個問題,或許不少設計者在業(yè)務中都會碰到。這篇文章里,作者就總結了分頁加載和無限滾動加載的利弊,一起來看看吧。

上一篇文章解構了分頁,本文分析一下分頁加載和無限滾動加載的利弊。

在設計時難免會碰到,是使用分頁還是使用無限滾動的問題。分頁可以分擔性能壓力,減小卡頓,但并不是所有的業(yè)務場景都能適配分頁。像Pinterest就采用了無限滾動的方式,利用不斷刷新的信息流給用戶打造一個沉浸式的體驗。

你真的會用分頁嗎?(下)

那么使用分頁和無限滾動有什么區(qū)別呢?

一、分頁加載

1. 分頁的優(yōu)點

1)給用戶信息數(shù)量的預期

分頁可以讓用戶清楚的知道自己需要瀏覽的信息數(shù)量和所瀏覽的位置,讓用戶建立一個心理預期,并給予用戶掌控感。

2)方便回溯定位

分頁可以方便用戶快速回溯定位,在大量的數(shù)據(jù)頁中,當你回過頭想要找到之前看到的某一個信息時,也能快速的定位到首頁或者尾頁。

3)分擔性能壓力

龐大的數(shù)據(jù)量可以通過分頁減輕前端頁面壓力,無需一次把所有數(shù)據(jù)加載完成,用戶點擊頁碼之后加載該頁面便可,也避免了低價值的請求。

2. 分頁的缺點

在我們點擊頁碼之后信息需要一定的加載時間才會呈現(xiàn),一定程度上,這樣的做法會打斷用戶的思路從而破壞了用戶體驗。在遇到分頁時,用戶會去思考,我是要繼續(xù)點擊瀏覽呢還是離開頁面。

二、無限滾動

1. 無限滾動的優(yōu)點

1)減少干擾用戶

無限滾動在移動端和社交媒體、娛樂類屬性的平臺較為常見,這類平臺需要給用戶打造流暢的體驗、讓用戶維持沉浸的狀態(tài)。這種做法相較于分頁最大的優(yōu)勢是減少了對用戶的干擾、打斷。

你真的會用分頁嗎?(下)

2)降低交互成本

如果用戶持續(xù)快速的加載內容,無需用戶點擊按鈕,直接通過上下滑動操控,極大的降低了交互成本。

3)適配移動端設備

因無限滾動較為美觀的特性,加上移動設備視角比較小,用戶已經習慣了滾屏,他們的手指總是靠近屏幕,隨時準備進行滑動。

2. 無限滾動的缺點

1)難以再次找到特定內容

在有分頁的情況下,用戶可以記住某個信息所在的頁碼來定位大致的位置,但是在無限滾動中定位剛剛所閱讀過的內容是一件比較困難的事情。

2)無法觸達頁腳

無限滾動會讓用戶無法觸碰到網站頁腳。頁腳通常會放置類似于聯(lián)系電話,規(guī)則政策等重要信息,信息流的持續(xù)加載阻礙了用戶觸碰到頁腳。其次,如果用戶在一個頁面翻了十幾屏之后,滾動條還停留在瀏覽器靠上方的位置,那么用戶該多絕望。

3)搜索引擎優(yōu)化(SEO)表現(xiàn)更差

這種模式有一個缺點,每次我們加載或追加新數(shù)據(jù)時,列表都會繼續(xù)增長。滾動得越多,數(shù)據(jù)就越大。當瀏覽器無法渲染如此大量的數(shù)據(jù)后,性能將會降低。

針對分頁和無限滾動的缺點,衍生出來了兩個折中的方法,一個是「加載更多」,另一個是「分頁+無限滾動」的模式。

三、加載更多

「加載更多」指的是當用戶下滑到底部時,需要額外點擊“加載更多”或“查看更多”的按鈕來在尾頁顯示更多內容。設置“加載更多”的按鈕可以讓用戶自主選擇是否要加載更多條目。該方式有益于只想查看少量信息的用戶輕松觸達網站頁腳。

你真的會用分頁嗎?(下)

并且點擊“加載更多”后產生的信息大概在7屏左右,這對用戶來說不是一個很長的頁面,并不會造成心理負擔。如果在這7屏內依然找不到想要的結果,可能是搜索詞不對,這樣用戶就不需要繼續(xù)點擊“加載更多”,減少了無效的加載請求。

跟傳統(tǒng)的無限滾動模式相比,這對用戶來說無疑是提升交互體驗的。但是“加載更多”按鈕的一個弊端就是交互成本的上升,用戶需要點擊“加載更多”按鈕來查看更多內容,即使這種干擾很小,也可能會使用戶瀏覽更少的內容或者退出。

四、分頁+無限滾動

分頁雖可以比無限滾動更輕松的找到特定內容,但加載速度也要比無限滾動慢很多。如果既想保留分頁的優(yōu)點,又不想頁面加載緩慢,可以通過分頁+無限滾動的方式在不同頁面間來回跳轉,高效地跳過無關內容。

五、回歸需求

分頁雖會給人一種切割感,在查看上也會更耗時,但因為前端開發(fā)的性能壓力而不得不采用分頁時,那么也沒有什么辦法了。

在設計中,設計師需要回歸需求,與開發(fā)隨時保持交流。尤其是跟前端開發(fā)工程師,他們在編寫代碼時都要考慮性能問題,如果不和他們進行充分的溝通,那么做出來的交互體驗可想而知。

本文由 @CUPTEA 原創(chuàng)發(fā)布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協(xié)議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!