無限下拉滾動還是分頁滑動?一篇文章讀懂二者優缺點

2020-12-15 雷鋒網

雷鋒網(公眾號:雷鋒網)按:本文由譯者@三達不留點gpj 譯自《UX: Infinite Scrolling vs. Pagination》。

應該是使用無限下拉滾動還是分頁的形式來展現內容?究竟那一個更好?相信這是一些設計師經常需要去思考的問題。其實任何事物都有優缺點,無限下拉滾動和分頁也不例外。本文將兩種方法的適用場景並分析哪類項目適合用哪種方式,相信對你有一定的幫助。

一、無限下拉滾動

無限下拉加載技術使用戶在大量成塊的內容面前一直滾動查看。這種方法是在你向下滾動的時候不斷加載新內容。雖然聽起來比較誘人,但該技術並不是一個面向任何網站或應用程式的通用方案。

優點1:用戶參與和內容發現

當你使用滾動作為發現數據的主要方法時,它可能使你的用戶在網頁上停留更長時間並提升用戶參與度。隨著社交媒體的流行,大量的數據被用戶消費。無線滾動提供了一個高效的方法讓用戶瀏覽海量信息,而不必等待頁面的預加載。

無限滾動幾乎是一個發現界面的必備功能。當用戶並不特意尋找特定的內容時,他們需要通過查看大量內容找到自己中意的信息。

你可以通過Facebook信息流的例子來評估無線滾動的好處。用戶知道他們不可能看到信息流裡面的所有內容,因為內容更新太頻繁了。通過無線滾動技術,Facebook正竭盡所能促使更多的信息能呈獻給用戶面前,用戶則產生對信息的瀏覽和消費行為。

優點2:滾動要比點擊好

用戶使用滾動能獲得比點擊/輕點更好的體驗。滑鼠滾輪和觸控屏使滾動行為要比點擊更快更容易。對於那些連續且冗長的內容,比如一本說明書,滾動要比把這些信息分成幾個獨立的屏幕或頁面有更好的易用性。

優點3:滾動對行動裝置很友好

屏幕越小,滾動就越長。移動瀏覽的普及也促使了長滾動。行動裝置的手勢控制使滾動更直觀和易用。其結果就是,用戶享受響應式的體驗不論他們使用何種設備。

缺點1:頁面性能和設備資源

頁面加載速度是良好用戶體驗的一切。多項研究已經表明緩慢的加載速度會造成用戶離開你的網站或者刪除你的應用程式從而降低轉換率。這對那些應用了無線滾動方案的開發者自然是壞消息。用戶在一個頁面越向下滾動,就會加載更多的內容。結果就是頁面性能越來越低。

另一個問題是用戶設備資源的限制性。在很多應用無線滾動方案的網站上,尤其那些包含很多圖片的站點,那些受資源限制的設備,比如iPad會越來越慢因為其加載了大量外部資源。

缺點2:搜索和位置標記

無線滾動的另一個問題是當用戶到了當前信息流中的一個特定點,他們沒法標記當前位置且不能再隨後再回到這裡。他們一旦離開,就會丟失當前的瀏覽記錄,以至於如果要回到上次的位置,他們必須得重新滾動去發現。這種做法的結果就是用戶產生困擾厭煩更影響了其全程的體驗。

在2012年,Esty花時間使用了無線滾動方案,最後發現該方案並沒有分頁方案表現的好。雖然兩種方案下的購買轉化率差不多,但是用戶的參與度降低了—用戶沒再過多的使用搜索功能。

就像Dmitry Fadeev 指出:「人們會想要回到他們的搜索結果列表中檢查他們剛剛找到的東西,並跟列表之外他們發現的東西做對比。無線滾動不光打破了這種動態,它也使得上下移動列表變得困難,尤其當你返回到列表頁卻發現自己又回到頂部,不得不重新滾動等待結果的加載。從這個角度來看,無線滾動確實要比分頁方案效率低。」

缺點3:無關緊要的滾動條

另一個討厭的問題是滾動條並沒有反映出實際的數據量。假設你快要接近底部了,你會很容易受滾動條的引誘再滾動一點點,但結果卻發現當你到那裡的時候數據量又翻倍了。從一個可用性的角度來說,打破滾動條的正常使用規則對用戶來講是非常糟糕的。

缺點4:頁腳的缺失

頁腳的存在是有原因的:它們包含一些用戶可能會需要的信息—如果用戶找不到它們想找的東西或它們需要一些額外的信息的話,他們通常會到頁腳看看。但是因為這種信息流的無線滾動,用戶經常一到底部就會有更多的數據加載出來從而將頁腳永遠的置於了視野之外。

那些應用無線滾動方案的站點應該讓頁腳或者固定或者將其遷移至頂部或側邊欄顯示。

另一個解決方案是出發加載更多的按鈕的時候再去加載信息。新的內容不會自動加載直到用戶點擊了加載按鈕。通過這種方法,用戶能很容易地到達頁腳而不要一直追趕它。

二、分頁

分頁技術是指將內容信息劃分成獨立的頁面來顯示。如果你滾到一個頁面的底部看到一行數字,這些數字就是當前站點或者應用程式裡面的分頁。

優點1:良好的轉換

當用戶是在結果列表查找特定的信息而不是僅僅瀏覽信息流時,分頁就是好的選擇。

你可以用谷歌搜索的例子來評估分頁的好處。查找最好的搜索結果可能需要花費1分鐘或者1個小時,這取決於你的搜索。但是放你在谷歌現有的搜索格式下停止搜尋時,你會知道搜索結果的準確數量。你能夠決定在哪裡停下或者精讀哪些結果。

優點2:掌控感

無限滾動就像個無止境的遊戲——無論你滾動多久,你會感覺永遠結束不了。當用戶知道可用結果的數量時,他們能夠做出更知情的決定而不是被動的無限滾動列表。按照David Kieras 在他的研究Psychology in Human-Computer Interaction中提出:「能夠到達結束點提供了一種掌控感」。該研究同時揭示了當用戶有有限且相關的結果時,他們更容易決定他們在尋找的究竟在不在裡面。

同樣的,當用戶能夠看到結果的數量時,他們將能夠預估他們找到想找的東西大概要花費多長時間。

優點3:位置標記

分頁方案讓我們能夠大概定向搜索的目標位置。用戶可能難以記錄頁面的精確數字,但至少能夠記錄大概位置,而且頁碼連結能讓他們更容易到達那裡。

分頁方案對電子商務網站或應用程式來說很好。用戶在線購物的時候,他們希望能夠回到他們之前離開的地方繼續購物。

缺點1:額外的動作

在分頁方案中,用戶要到達下一張頁面,就必須找到頁碼連結,移動滑鼠置於其上,點擊然後等待新頁面的加載。

這種方案的主要的問題是大多數網站中,每一頁只向用戶戰象相當有限的信息。在不影響加載速度的情況下,加長你的頁面,用戶就能在每一頁獲取到更多的內容,他們就不必太頻繁的點擊那些頁碼連結。

三、什麼時候使用無限滾動/分頁方案?

實際上,應用無限滾動方案的實例只有很少部分。它最適合於那些靠用戶生產內容(Twitter,Facebook)或表現視覺內容(Printerest,Instagram)的站點/應用程式。而分頁方案對那些希望滿足用戶目標導向的站點/應用程式來說則是一個安全、友好的解決方案。

谷歌的經驗就很好的說明了這一點。谷歌圖片使用無限滾動是為了保證用戶能夠比文本更快的瀏覽處理圖片。閱讀一個搜索結果列表往往花費一些時間。

這就是為什麼谷歌索索仍舊使用傳統的分頁方案。

四、結論

設計者在選擇解決方案前應該權衡無限滾動/分頁方案的優缺點。這個選擇取決於你設計中的上下午和內容的呈現方式。一般來說,無限滾動適用於向Twitter等那些用戶重在消費無限的信息流而並不常搜尋特定的信息的應用。分頁則適用於那些用戶在尋找特定信息的搜索結果列表頁以及那些用戶的瀏覽記錄比較重要的場合。

本文由人人都是產品經理授權雷鋒網發布,未經允許,禁止轉載!


雷鋒網原創文章,未經授權禁止轉載。詳情見轉載須知。

相關焦點

  • 【第570期】無限滾動與分頁設計的優缺點及應用場景分析
    不知道在哪個時候開始流行無限加載?不知道是不是潛意識中在移動版頁面如果要加載更多數據都採用無限加載。那麼我們平時在開發的時候,有沒意識到這個交互問題呢,今天我們來看看由@uxplanet翻譯的這篇文章。正文從這開始~「應該使用無限滾動還是分頁的方式來展現內容?」,這是一些設計師在做具體的項目時經常需要去抉擇的問題。
  • UX設計細節:無限滾動VS分頁
    本文共 2566 個字,預計閱讀 7 分鐘,記得點擊上面的 藍字 關注我哦~在頁面內容過多時,很多設計師不清楚應該選擇無限滾動還是分頁設計?
  • 「直線導軌」滑動導軌和滾動導軌的特性與優缺點
    導軌按軌面摩擦性質可將導軌分為滑動導軌、滾動導軌、液體靜壓導軌、氣浮導軌、磁浮導軌。滑動導軌結構簡單,剛性好,摩擦阻力大,連續運行磨損快,製造中軌面刮研工序的要求很高。滑動導軌的靜摩擦因數與動摩擦因數差別大,因此低速運動時可能產生爬行現象。
  • 無限滾屏、分頁亦或加載更多,到底怎麼選?
    是分頁、「加載更多」按鈕還是無限滾屏?我們在Baymard機構開展了幾項持續整年的大規模可用性測試,研究了50多家主流電商網站。我們測試了這3個設計形式在PC端和移動端的效果(以及一些其他問題)。 由於分頁功能在幾乎所有電商平臺上都可以默認設置,它仍然是加載新商品最普遍的方法。
  • UX辭典精譯 | 巧用這3種分頁模式,頁面加載不再生硬
    當頁面內容很多需要分頁時,可以通過3種模式來呈現——分頁、無限滾動、加載更多按鈕。那麼哪個最好?用戶會喜歡哪種?大多數平臺都用了什麼?今天就來和大家一同探討下。你可以簡單將它們理解為:-分頁,即多個頁面組合(想想那些在線商店程序);-無限滾動,讓用戶產生所有內容都加載好的感覺,但實際上,信息是在上下滑動時才加載出來的(想想Instagram);-加載更多按鈕,常出現在頁面底部,通過用戶點擊操作,出現更多信息(想想Google圖片)。
  • 截圖不難,可下拉菜單、滾動的截圖你會嗎?答案在這!
    上述的這些小問題,小編都會在每次的文章將解決方法分享給大家,讓大家辦公時無後顧之憂。今天小編就先從簡單的截圖小技巧來為大家分享,我相信大家在日常不管工作還是娛樂,在使用電腦時都用過截圖。因為截圖為的是減少文字的敘述。提升我們的效率。而簡單的截圖大家都會,可這樣的截圖(下拉菜單的截圖、不管是文檔還是網頁超過屏幕滾動的截圖、)你會嗎?
  • mint-ui 分頁上拉加載和瀏覽器的兼容問題
    很早很早以前,使用餓了嗎 的 mint-ui 移動框架時,就發現分頁上拉加載 loadmore組件在部分瀏覽器中不能正常工作(上拉無法加載下一頁)。說來慚愧,以前原以為是部分老機器的低版本瀏覽器問題,全當忽略了,只是簡單寫了一篇 vue minuti 分頁實現,粗略帶過了瀏覽器兼容性的一些問題。
  • iOS新浪新聞首頁卡片滾動特效實現淺談
    2、1個是左右滑動中間的滾動視圖,滾動視圖會快速滑動。3、1個是左右晃動手機,根據角度不同,滾動視圖跟著一起動。4、中間的滾動視圖在滑動的時候發現滑動的距離和卡片移動的距離並不是成正比,而是按照不斷變化的加速度移動的。5、中間的滾動視圖滑到左右邊緣時視圖透明度改變。
  • 一篇文章,幫你搞定「查看更多」的全場景攻略
    金剛區通過橫向滑動展示更多的業務品類,為了讓用戶產生可以橫向滑動的認知,一般會使用類似輪播指示器的進度條表示當前所在位置。它完全避免了跳轉新頁面帶來的各種負擔,幫助用戶在當前頁面通過滑動手勢即可查看到所有內容。而缺點則是無法承載更多的業務。
  • 微信小程序實戰篇-下拉刷新與加載更多
    忘記請自行回顧上一篇 微信小程序實戰篇-電商(二)當滾動到頂部/左邊,會觸發 scrolltoupper 事件,所以我們可以利用這個屬性,來實現下拉刷新功能。兩種方法都可以,第一種比較簡單,易上手,畢竟一些邏輯系統已經給你處理好了,第二種適合那種想要自定義下拉刷新樣式的小程序,我們講解電商,就用第一種,系統提供的就好,主要是教會大家怎麼用。
  • 【推薦一篇文章】老照片帶你讀懂「集體經濟」
    【推薦一篇文章】老照片帶你讀懂「集體經濟」 2019-08-11 11:17 來源:澎湃新聞·澎湃號·媒體
  • 一個超詳細vue無限滾動vue-infinite-scroll插件的配置及使用詳解
    開發中總會遇到這種下拉加載的設計方案,Vue實現下拉加載最佳方案自然是使用vue-infinite-scroll來實現。接下來我們一起看下它的配置及使用方式。infinite-scroll-distance="10"這裡10決定了頁面滾動到離頁尾多少像素的時候觸發回調函數,10是像素值。一般情況下會在頁尾做一個幾十像素高的「正在加載中...」,這樣的話,可以把這個div的高度設為infinite-scroll-distance的值即可。
  • 10 個支持列表無限滾動的 jQuery 插件
    很多社交網站都使用了一些新技術來提高用戶體驗,而無限滾動的翻頁技術就是其中一項,當你頁面滑到列表底部時候無需點擊就自動加載更多的內容。
  • 一篇文章讀懂太陽軌跡圖
    在閱讀本篇文章前,建議可先閱讀公眾號歷史文章《不要以為組件朝南太陽就得在南邊》。
  • 「ThinkPHP5開發連載76」tp5連載雜項之分頁-分頁實現
    上一篇文章講解「模型-內置標籤之定義標籤」,本篇文章講解「雜項-分頁之分頁實現」。默認情況下,生成的分頁輸出是完整分頁功能,帶總分頁數據和上下頁碼,分頁樣式只需要通過樣式修改即可,完整分頁默認生成的分頁輸出代碼為:<ul><li><span></span></li><li>
  • 滾動的天空無限球獲取攻略 無限球怎麼得
    滾動的天空無限球獲取攻略 無限球怎麼得 來源:www.18183.com作者:nannan時間:2017-06-06 第一步:進入遊戲,點擊左下角設置按鈕
  • 前端高性能滾動 scroll 及頁面渲染優化
    我覺得搞技術一定要追本溯源,不要看到別人一篇文章說滾動事件會導致卡頓並說了一堆解決方案優化技巧就如獲至寶奉為圭臬,我們需要的不是拿來主義而是批判主義,多去源頭看看。從問題出發,一步一步尋找到最後,就很容易找到問題的癥結所在,只有這樣得出的解決方法才容易記住。
  • Word分頁,分節分不清?頁碼設置不對?
    想要解決頁碼頁眉頁腳,首先要了解什麼是分節和分頁啦,如果想讓當前文字到下一頁不知道小夥伴們會怎麼做呢,是不是一直敲enter直到下一頁 ,不要在這樣操作啦。將光標置於要另起一頁文字左邊—單擊插入—分頁。
  • 優化MySQL中的分頁
    很多應用往往只展示最新或最熱門的幾條記錄,但為了舊記錄仍然可訪問,所以就需要個分頁的導航欄。然而,如何通過MySQL更好的實現分頁,始終是比較令人頭疼的問題。雖然沒有拿來就能用的解決辦法,但了解資料庫的底層或多或少有助於優化分頁查詢。  我們先從一個常用但性能很差的查詢來看一看。
  • 在下拉通知欄也可快速啟動APP
    下拉通知欄除了可以幫助Android用戶來快速查看信息和進行各種的便捷開關操作外,通過一些第三方程序還可以讓它擁有更多的實用功能,例如今天為大家推薦的這款《Bar Launcher》就可以為下拉通知欄加入快速啟動APP的功能。