“無限滾動”與“分頁”設計的使用

2

天津11选5走势图分析 www.lixcgb.com.cn “我應該選擇“無限滾動”還是“分頁”的形式來展示我的內容呢?”這是不少設計師存在的困擾。其實,兩種方法展現形式都有各自的優點和缺點,在本專題內容中我們將概述這兩種方法并決定我們的項目應該使用哪一種。

無限滾動

無限滾動是一種允許用戶通過滾動瀏覽大量內容而不刷到頁面最底層的技術。當你向下滾動頁面時,這種技術將會持續地刷新頁面。這雖然聽起來很誘人,這種技術并不是一種適用于各種網站和app的萬能解決方式。

無限滾動方案

優點:

1.用戶參與和內容發現

當你使用滾動作為探索數據的主要方法時,它極有可能會讓用戶在你的網頁上停留更長時間,從而增加參與度。隨著社交媒體的普及,大量的數據正在被消費。而無限滾動提供了一種有效的方式來讓用戶瀏覽信息的海洋,而無需等待頁面的預加載。

無限滾動幾乎是所有探索界面的必備功能。當用戶沒有定向搜索某一特定的內容時,他們就需要通過查看大量的條目才能夠找到他們感興趣的東西。

Pinterest內容的海洋

以Facebook新聞feed流為例,你可以以此來衡量無限滾動的益處。通過非口頭協議,用戶意識到他們無法查看Feed流上的所有內容,因為內容更新地過于頻繁。而Facebook正在盡最大努力通過無限滾動向用戶展示盡可能多的信息,并確保他們正在查閱和消費這些信息流。

用戶通過滾動Facebook新聞feed流獲得更多內容更新

2.“滾動”比“單擊”效果更佳

用戶能夠通過滾動獲得比“單擊”或“點擊”更好的體驗。鼠標滾輪或觸摸屏的形式使滾動速度比點擊來的更簡單、快捷。對于連續且冗長的內容,比如說教程,滾動提供的可用性,比將文本分割成幾個單獨的屏幕或頁面的體驗更棒。

對于單擊或點擊:每個內容更新都需要額外的點擊操作和等待頁面加載時長。滾動:單一操作滾動時,使內容更新。

3.“滾動”對移動設備更友好

屏幕越小,滾動時間越長。移動端瀏覽的普及是另一種持續性滾動的重要因素。移動端的手勢控件使滾動直觀且易于使用。因此,用戶無論使用哪種設備,都可以享受到真正的快速響應體驗。

缺點:

1.頁面性能和設備資源

頁面加載速度是影響用戶體驗的重要因素。多項研究表明,緩慢的加載時間會導致人們離開你的網站或刪除你的應用程序,致使形成低轉化率。對于那些習慣使用無限滾動的用戶來說,這無疑是個壞消息。因為用戶向下滾動頁面越多,頁面上承載的內容就越多,最終會導致頁面性能越來越慢。

另一個問題是用戶設備的資源有限。在許多無限滾動網站上,尤其是那些有大量圖片的網站中,資源有限的設備(如iPad)可能由于其已加載的內容信息過多而開始降速。

2.項目搜索和位置

無限滾動的另一個缺點是,當用戶瀏覽到某個節點時,他們無法標記該位置,也就意味著用戶無法在離開后回到該位置。如果他們離開了該網站,他們將丟失所有的加載數據,并且只能通過再次向下滾動才能返回相同的位置。滾動的形式使位置無法確定,這不僅會給用戶帶來煩惱和困惑,而且還會不利于整體用戶體驗。

在2012年,Etsy花了很多時間來實現一個無限的滾動界面,卻發現新的界面表現并不如分頁的表現形式出色。盡管購買量大致保持不變,但用戶參與度卻大大下降——現在人們不再那么頻繁地使用搜索了。

Etsy的無限滾動搜索界面(當前版本有分頁)

正如Dmitry Fadeyev所指出的那樣:“人們會希望回到搜索結果列表中,查看他們剛才看到的項目,并將其與他們在列表中其他位置發現的其它項目進行比較。

無限滾動不僅會打破這種動態,還會使列表上下移動變得十分困難,特別是當你又一次返回頁面時,發現自己回到頂部,然后被迫再次向下滾動列表并等待加載結果。通過這種方式,無限滾動界面實際上比分頁界面更低效。

3.滾動條無法展示真實數據量

另一個讓人惱火的事情是滾動條無法展示真實數據量。當你逐漸接近滾動條底部時,你會興奮地繼續向下滾動,結果是在刷新后,發現滾動條又增加了一倍。對于用戶來說,這無疑是一種非常糟糕的體驗。

滾動條應該反映真實頁面的長度

4.頁腳缺失

頁腳存在的原因是:它們包含用戶有時需要的內容—如果用戶找不到某些內容或他們需要的其它信息,他們通?;崛ヒ辰叛罷?。但是,由于Feed流無限滾動的特性,一旦用戶到達底部,就會加載更多的數據,每次都將頁腳再次推出視圖之外。

當LinkedIn在2012年推出無限滾動功能時,用戶會設法抓取加載新內容之前的屏幕信息

那些使用無限滾動的網站,其實應該使頁腳更具用戶粘性,又或者將鏈接放在頂部或側邊欄來使頁腳更易于訪問。

Facebook將頁腳中的所有鏈接(例如’Legal’,’Careers’)移至右側欄。

另一種解決方案是根據用戶需求使用“?加載更多”的按鈕加載內容。即新內容不會自動加載,直到用戶點擊“更多”的按鈕。這時候用戶就可以輕松到達頁腳,而無需去追蹤它。

Instagram使用“加載更多”按鈕,使用戶達到訪問頁腳的目的。

分頁設計

“分頁”是一種將內容分為不同頁面的用戶界面模式。如果你滾動鼠標到頁面底部并查看數字,這行數字是一個網址或應用程序的分頁。

分頁

優點

1.直觀的數據體現

如果用戶在列表中進行內容搜索,而不僅僅是為了瀏覽和消耗信息流時,這個時候分頁效果很合適。

以 Google 搜索為例子來衡量分頁設計的優點。通過你的實踐,找到理想的搜索結果可能需要一秒也可能是一小時。但當你搜索停止時,你可以知道搜索結果的確切數量。您可以決定在哪里停止或者還有多少結果需要瀏覽。

Google搜索界面

2.讓用戶擁有控制感

無限滾動像一場無止境的游戲——不管你滾動到多遠,都覺得自己永遠無法到達終點。當用戶知道可用結果時,就能做出更明智的決定,而不是繼續瀏覽無限滾動列表。根據David Kieras研究的人機交互心理學:“ 到達終點提供了一種控制感 ”。研究還表明,當用戶獲得有限但相關的結果時,他們能很容易判斷他們正在尋找的內容是否存在。

當用戶看到結果的總數(總數據量不是無限的時候),他們將能夠估計需要多少時間才能找到他們實際需要的內容。

3.快速到達目標位置

分頁界面讓用戶記著該內容的大概位置。他們可能不一定知道頁面的確切頁數,但是會記住大概的內容,分頁的鏈接讓他們更容易到達自己的內容位置。

通過分頁,用戶可以控制導航,因為知道點擊哪個頁面返回到原來的位置

分頁適合ecomerce網站和應用程序。用戶在線購物時,他們希望能夠快速回到他們離開的地方繼續購物。

缺點:

1.額外的點擊

要進入分頁的下一頁,用戶必須找到鏈接目標(例如“下一步”),將鼠標懸停在上面,點擊它并等待新頁面加載。

點擊內容

大多數網站向用戶顯示一個單頁面,內容受限。通過在不影響加載速度的情況下延長頁面的使用時間,用戶將獲得更多的頁面內容,而無需點擊或點按分頁按鈕。

何時使用無限滾動或分頁設計呢?

無限滾動有效的場景比較少,更適合Twitter,Facebook,Pinterest,Instagram這種快速瀏覽內容和發現內容的場景。

例:谷歌就是一個很好的例證。Google圖片使用無限滾動,因為用戶能夠比文本更快速地掃描和處理圖片。

結論

無限滾動:

1.適用于Twitter這一類用戶,可以實時生成無盡的數據流,而無需特別查找任何內容。

2.左面端和移動端來說,無限滾動對移動端更友好。

分頁:

分頁更適合與操作、管理大量條目且更需要專注、嚴謹的場景。所以工具類、檢索類、歸檔頁面、后臺管理更傾向分頁設計。

原文鏈接?Medium

共 2 條評論

  1. 回復

    每次點贊都是403

  2. 回復

    感覺這么還不錯,wordpress建站吧特此來訪。。

發表評論

您的郵箱不會公開,當您的評論有新的回復時,會通過您填寫的郵箱向您發送評論內容。 必填字段 *

為何看不到我發布的評論?

正在提交, 請稍候...