設計師的抉擇:無限滾動和分頁

對于很多相似條目需要展示的頁面唧龄,可以用無限下拉也可以使用分頁形式展示內容兼砖。但很多設計師分不清什么時候用無限滾動,什么時候使用分頁既棺,二者有什么異同讽挟,優(yōu)劣勢分別是什么,本文將給大家一一說明丸冕。

無限滾動(Infinite Scrolling)

無限滾動是指用戶可以不斷耽梅,有不間斷的內容展現(xiàn),看不到終點線胖烛。當你向下滾動頁面時眼姐,就會一刷新下面的內容。雖然聽起來有點誘人佩番,但這種不是對所有網(wǎng)站或應用都是一個萬能的解決方

優(yōu)勢#1:用戶參與和內容發(fā)現(xiàn)

當使用滾動作為內容展示的主要交互形式众旗,可能會使用戶在你對網(wǎng)頁上停留更長時間,從而提高參與度趟畏。隨著UGC和社交媒體的普及贡歧,大量的數(shù)據(jù)和內容正在產(chǎn)生,無限滾動提供了一種有效瀏覽信息海洋的方式赋秀,而無需等待頁面預加載利朵。

無限滾動是發(fā)現(xiàn)頁面的必備功能。當用戶沒有搜索特定的東西時猎莲,他們需要看到大量的項目才能找到他們喜歡的東西绍弟。

配圖2 pinterest的網(wǎng)頁

我們以Facebook新聞為例來說明無限滾動的好處。約定俗成的著洼,用戶意識到他們不會看到Feed上的所有內容樟遣,因為內容更新太頻繁姥份。通過無限滾動,F(xiàn)acebook正在盡最大努力向用戶公開盡可能多的信息年碘,用戶瀏覽并消化這些信息澈歉。

實際上,F(xiàn)acebook將好友或者關注對象作為信息源(news feed)屿衅,以提供用戶源源不斷的內容埃难。而這個“news feed” 模塊如今已經(jīng)能給Facebook每天帶來上千萬美元的收入。

隨著內容爆發(fā)和用戶時間的擠壓涤久,為了滿足用戶高效獲取特定內容需求涡尘,feed流應運而生。Feed流顧名思義响迂,feed譯為喂養(yǎng)考抄,就是給用戶不斷“喂”他想要的內容,抖音在這個方面做得最好蔗彤,基于大數(shù)據(jù)和頭條系的算法川梅,總能抓住用戶的眼球,這就是為什么抖音一刷一天就過去了然遏,真的不怪你贫途,誰刷誰知道。


與之相對的是瀑布流待侵,它不像Feed流那樣精準丢早,一般就只是不斷的給用戶提供內容,這一點跟傳統(tǒng)網(wǎng)頁的無限滾動很相似秧倾≡乖停花瓣和pinterest應用就是采用的瀑布流展現(xiàn)內容。

優(yōu)點#2:滾動比點擊更好

用戶使用滾動比點擊的交互體驗更好那先。滾動或觸摸屏使?jié)L動比單擊更快捷更容易农猬。對于連續(xù)且冗長的內容,如教程胃榕,連續(xù)滾動比分屏或分段的文本瀏覽使用體驗更好盛险。

缺點#1:頁面和設備性能降低

頁面加載速度決定了用戶體驗的良好與否。多項研究表明勋又,加載時間過長會導致用戶離開網(wǎng)站或刪除應用苦掘,從而導致轉化率較低。對于那些使用無限滾動的人來說楔壤,這是個壞消息鹤啡。越多的用戶在同一個頁面上滾動越多,必須在同一頁面上加載更多內容蹲嚣。因此递瑰,頁面性能將越來越慢祟牲。

另一個問題是用戶設備的資源有限。很多多圖的網(wǎng)站或者產(chǎn)品抖部,由于內容加載產(chǎn)生占內存空間較多的緩存说贝,會導致機器性能整體下降。

缺點#2:物品搜索和位置

無限滾動的另一個問題是慎颗,當用戶到達信息流中的某個點時乡恕,他們無法為標記其當前的位置以便稍后返回再看。如果他們離開網(wǎng)站俯萎,他們再回來時需要從頭看起傲宜,如果想找到上次的位置,需要再次滾動夫啊。無法確定用戶的滾動位置不僅會引起用戶的煩惱或混淆函卒,而且還會損害整體用戶體驗。

正如德米特里·法德耶夫(Dmitry Fadeyev)所指出的那樣:“人們會想回到搜索結果列表中查看他們剛才看到的項目撇眯,將它們與他們在列表中其他地方發(fā)現(xiàn)的其他內容進行比較报嵌。無限滾動不僅打破了這種動態(tài),它還使得難以在列表中上下移動叛本,特別是當你在另一時間返回頁面并發(fā)現(xiàn)自己回到頂部時沪蓬,被迫再次向下滾動列表并等待結果加載。通過這種方式来候,無限滾動界面實際上比分頁界面使用效率更低∫荼ⅲ“

為了解決這個問題营搅,很多網(wǎng)站會自動給用戶標記“上次看到的地方”

缺點#3:不相關的滾動條

另一個令人討厭的事情是雖然網(wǎng)站兩側有滾動條但卻不能反映可用的實際數(shù)據(jù)量。當你看到滾動條靠近底部梆砸,以為沒有信息了转质,可一滾動,進度條又回到中間或上部帖世。從易用性角度來看休蟹,這些逆天的滾動條,是非常糟糕的存在日矫。


缺點#4:缺少頁腳

頁腳存在的原因有:它們包含用戶有時需要的內容 - 如果用戶無法找到某些內容或者他們想要其他信息赂弓,他們通常會去那里。但由于Feed無限滾動哪轿,一旦用戶到達底部就會加載更多數(shù)據(jù)盈魁,只能在加載停留的那幾秒鐘看到頁腳。

有些無限滾動的網(wǎng)站意識到了這一點通過使頁腳粘貼或將鏈接重新定位到頂部或側邊欄來使頁腳可訪問窃诉。

另一種解決方案是使用“加載更多”按鈕來控制需加載內容杨耙。在用戶單擊“更多”按鈕之前赤套,新內容不會自動加載。這樣珊膜,用戶可以輕松地訪問頁腳容握,而無需追著頁腳跑。

分頁(Pagination)

分頁將內容劃分為單獨的頁面顯示车柠。滾動到頁面底部會看到數(shù)字指示 - 該行數(shù)字是網(wǎng)站或應用程序的分頁唯沮。



優(yōu)點#1:良好的轉換

當用戶在結果列表中特別搜索某些內容時,分頁是好的堪遂,而不僅僅是掃描和消費信息流介蛉。

我們用Google搜索示例來說明分頁的好處。根據(jù)研究溶褪,尋找最佳搜索結果可能需要一秒鐘或一小時币旧。當Google停止搜索時,我們就能知道搜索結果的確切數(shù)量猿妈。你也可以決定停止的位置或細讀的結果數(shù)量吹菱。

優(yōu)點#2:控制感

無限滾動就像一場無盡的游戲 - 無論你滾動多遠,你都覺得你永遠不會走到盡頭彭则。分頁可以讓戶知道可用結果的數(shù)量鳍刷,他們能夠做出更明智的決定,而不是留下無限滾動列表俯抖。根據(jù)David Kieras研究人機交互心理學:“達到終點為用戶提供了一種控制感”输瓜。該研究側面例證了,當用戶明確相關結果的數(shù)量時芬萍,他們能夠輕易地確定他們所尋求的是否真實的存在尤揣。

此外,當用戶看到結果總數(shù)時(當數(shù)總量不是無限時)柬祠,他們將能夠估算找到所需內容的時間北戏。

優(yōu)點#3:項目位置

分頁數(shù)字還能幫用戶明確所在位置。他們可能不一定知道頁面的確切頁面編號漫蛔,但他們會大致記住它的內容嗜愈,而分頁鏈接會讓他們更容易找到之前瀏覽的內容。

分頁特別適合電子商務網(wǎng)站和應用莽龟。當用戶在線購物時蠕嫁,他們希望能夠回到他們離開時的地方并繼續(xù)購物。


缺點:附加的活動

要進入分頁中的下一頁轧房,用戶必須找到對應的頁數(shù)(例如“下一步”)拌阴,將鼠標懸停在其上,單擊它并等待加載新頁面奶镶。


這里的主要問題是大多數(shù)網(wǎng)站使用單個頁面顯示非常有限的內容迟赃。通過在不影響加載速度的情況下延長頁面使用時間陪拘,用戶每頁將獲得更多內容,而無需點擊或點擊分頁按鈕纤壁。

什么時間使用無限滾動/分頁左刽?

只有少數(shù)情況下才推薦使用無限滾動。它最適合UGC(Twitter酌媒,F(xiàn)acebook欠痴,Pinterest,Instagram)的網(wǎng)站和應用秒咨。另一方面喇辽,分頁非常適合目標導向的網(wǎng)站和應用程序。

對于這一點雨席,Google就是很好的例證菩咨。Google圖片使用無限滾動,因為用戶能夠比文本更快地掃描和處理圖像陡厘。閱讀搜索結果需要更長的時間抽米。而Google搜索結果仍然使用更傳統(tǒng)的分頁技術。

結論

設計師在做選擇之前應該權衡無限滾動和分頁的優(yōu)缺點糙置。怎么選擇取決于你的設計環(huán)境以及如何提供內容云茸。一般來說,無限滾動適用于類似Twitter的用戶谤饭,其中用戶實時生成出無窮無盡的數(shù)據(jù)流标捺,而無需特別查找任何內容,而分頁界面適用于人們正在尋找特定項目的搜索結果頁面以及用戶查看的所有項目的位置信息很重要的情景网持。



?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末宜岛,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子功舀,更是在濱河造成了極大的恐慌,老刑警劉巖身弊,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辟汰,死亡現(xiàn)場離奇詭異,居然都是意外死亡阱佛,警方通過查閱死者的電腦和手機帖汞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凑术,“玉大人翩蘸,你說我怎么就攤上這事』囱罚” “怎么了催首?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵扶踊,是天一觀的道長。 經(jīng)常有香客問我郎任,道長秧耗,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任舶治,我火速辦了婚禮分井,結果婚禮上,老公的妹妹穿的比我還像新娘霉猛。我一直安慰自己尺锚,他們只是感情好,可當我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布惜浅。 她就那樣靜靜地躺著瘫辩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪赡矢。 梳的紋絲不亂的頭發(fā)上杭朱,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天,我揣著相機與錄音吹散,去河邊找鬼弧械。 笑死,一個胖子當著我的面吹牛空民,可吹牛的內容都是我干的刃唐。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼界轩,長吁一口氣:“原來是場噩夢啊……” “哼画饥!你這毒婦竟也來了?” 一聲冷哼從身側響起浊猾,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤抖甘,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后葫慎,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體衔彻,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年偷办,在試婚紗的時候發(fā)現(xiàn)自己被綠了艰额。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡椒涯,死狀恐怖柄沮,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤祖搓,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布狱意,位于F島的核電站,受9級特大地震影響棕硫,放射性物質發(fā)生泄漏髓涯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一哈扮、第九天 我趴在偏房一處隱蔽的房頂上張望纬纪。 院中可真熱鬧,春花似錦滑肉、人聲如沸包各。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽问畅。三九已至,卻和暖如春六荒,著一層夾襖步出監(jiān)牢的瞬間护姆,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工掏击, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留卵皂,地道東北人。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓砚亭,卻偏偏與公主長得像灯变,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子捅膘,可洞房花燭夜當晚...
    茶點故事閱讀 42,925評論 2 344

推薦閱讀更多精彩內容