偷窥国产综合,99国产精品永久免费视频

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

無限滾動：徹底了解它

漓江

2015-01-23

1 評論 20771 瀏覽 35 收藏

20 分鐘

無限滾動 (Infinite scrolling) 承諾給用戶更好的體驗。可是，這個好處通常又伴隨一些壞處。一旦我們了解無限滾動的好處和弱點，我們就可以用它來提升界面質量。

人類的天性是想要用層級關系、架構來更好地導航。但無限滾動有時會讓用戶迷失方向，因為頁面沒有盡頭。

好處

長列表已經不是新鮮事物，但是由于手機界面的到來，怎么去滾動這些列表已經從根本上發生改變。由于手機屏幕很窄，列表里面的元素都成豎直排列，這需要經常去滾動它。

無限滾動在頁面、列表的交互中是十分流行的?；竟δ芫褪?，當用戶劃過內容時，更多的內容自動加載進來。隨著社交媒體的流行，大量的數據等著被消化；無限滾動提供了一個高效的方式去流量海量信息，而不需要等待頁面加載。當然啦，用戶更喜歡一個真實地響應體驗，不管他們在使用什么設備。

分頁VS無限滾動

充斥很多用戶生成的內容的網站，現在都使用無限滾動來處理每時每刻產生的內容。有個不成文的共識，用戶已經意識到他們根本看不完所有的內容，因為內容更新的太快了。有無限滾動的話，社交網站盡可能地展現更多的信息給用戶。

Twitter?有效地整合無限滾動。它的饋送 (feed) 符合這樣的條件：大量的數據和一個實時平臺。從用戶的角度看，所有的 tweets 都同等重要，這就意味著它們都有可能被喜歡或不被喜歡；所以，用戶瀏覽所有的 tweets。作為一個事實平臺，Twitter經常更新，即使用戶不注意他們的饋送。無限滾動是為 Twiter 這類網站而生。

無限滾動似乎是找到在網站上的合理用途。然而，在評估它的價值之前，也有一些缺點需要考慮。

壞處

有那么多數據要去瀏覽，用戶要專注于他們需要的信息。（還記得目標導向 (goal-oriented) 么？）用戶總是想要永不停止的數據流嗎？有分析表明，當用戶使用 Google 搜索時，只有6％的看到第二頁。那么，94％的用戶只要需要10個結果，這就是說 Google 結果的排序很重要。

點擊或不點擊

Google 在圖片搜索上使用了無限滾動，但是尚未在搜索結果上使用。這樣做會消除點擊第二頁的需求。Google 可能繼續使用分頁，因為它的圖案很符合它的商標。如果它換成無限滾動，那用戶又會在什么時候停止滾動？20的結果的時候？50個？什么時候一個方便的瀏覽體驗變得這么復雜?

查看最佳的搜索結果需要1秒，還是1小時，這都取決于你調查。但在 Google 現在的版本中，當你決定停止搜索的時候，你知道搜索結果的確切頁數。你可以對“在哪里停止或要仔細閱讀多少個結果”做出明知決定，因為你知道盡頭在哪？根據這個研究在人機交互方面的分析，觸及盡頭提供一種控制感；你知道你已經收到所有的相關結果，和你知道某個結果是不是你想要的。知道結果的數量能提供控制感，幫助用戶做出更明智的覺得，而不是讓用戶去瀏覽一個無限滾動的列表。

分頁是點擊的障礙

當元素分布在網頁的頁面里面，他們被結構化、放入索引中，有開頭、有結尾。信息被清晰、有序地呈現。如果我們從分頁列表中選取元素，然后就會被帶到那個頁面，我們知道點擊「后退」就會返回到之前的頁面（甚至回到之前的滾動條位置）。我們的搜索頁面會回到剛剛離開的地方。

如果你滾動同樣結果的無限滾動列表，你對離開沒有控制感，因為你所滾動的列表是無限的。如果你是那94％只讀 Google 搜索中第一頁的人（也就是，10個結果）。當列表變成無限滾動時，第一頁從本質上來說就會變成沒有盡頭?？吹巾撁娼Y尾就是不復存在，你決定在10個結果的地方停止。這就是無限滾動的一個問題，因為第11個結果也出現在視線之中。用分頁列表的話，你就看不見第11個結果，很容易就能停止瀏覽。然而，當下一個結果已經出現了，你可能會繼續滾動，滾動，滾動……

Dmitry Fadeyev指出：

“人們想要回到搜索結果的列表去查看已經已點擊的項目，和他們在列表下面看到的東西作比較?！狈猪摻缑孀層脩魧椖康奈恢糜杏洃?。他們可能不需要知道具體的頁碼，但他們會大致記得是什么內容，分頁鏈接可以讓他們更容易回到那。

無限滾動不僅打破這種動態，還讓上下翻閱列表變得更困難，特別是你再次返回頁面，發現自己在頁面頂端，再一次專注于滾動列表，等待結果加載。在這種情況下，無限滾動界面就比分頁慢。

——Dmitry Fadeyev,?無限滾動不起作用

無限滾動的衰弱

最好的公司會和他們的用戶持續測試、研究新的交互。越來越多的研究表明，土國不能達到用戶的目的，無限滾動不能與之產生共鳴。

誘惑

當你尋找最佳搜索結果、被誘惑去繼續去看不相關的結果，時間就會被浪費。最佳結果有機會出現在前10的項目中。因此，無限滾動僅僅是誘惑你繼續閱讀、浪費時間、降低生產率。

樂觀

更煩人的是滾動條不能反映真實的數據位置。你可以很開心地往下滾動，以為自己接近底部，這只會誘惑你多滾動一點，然后當你到達那的時候就會結果又多了兩倍。

精疲力竭

無限滾動刺激著用戶。就像在玩游戲那樣，你永遠不能贏，不管你滾得多快，你都不會到達盡頭。誘惑和樂觀的結合體是使用戶精疲力竭的主要原因。

Pogosticking（中文真得譯不出來。就是點擊瀏覽器上面的「前進」「后退」按鈕。）

譯者注釋：

舉個例子，如果從 Google 搜索結果點擊條目進到某個網站，然后又后退返回Google查看其他搜索結果。如果很多用戶這樣做的話，這個網站評級就會降分。因為很明顯大家都不滿意這個搜索結果，才返回去看其他。（這個算是對 SEO 的影響吧。應該有很多人設定成新頁面打開搜索結果吧，不知道這些又怎么算？）

其實下面要說的跟 SEO 沒關系

如果有說錯的地方，懇請指正。

無限滾動會導致丟失你在頁面中的位置?！癙ogosticking”·發生在當你離開一個無線滾動的列表是，當你點擊「后退」來返回頁面，會被帶到上一頁面的頂部，而不是你離開的地方。這是因為在無限滾動頁面上做導航，滾動位置丟失，強迫你每次都要向下滾動。

失去控制

無限滾動讓你感到迷失在信息之中。你繼續滾動，因為結果就在那。你會感到不堪重負，因為你失去對大量信息涌現的控制。頁碼就會有好處，內容的數量都是固定的，你可以很舒服地選擇是否點擊查看更多，或停止操作。無限滾動，你不能控制大量的數據，這會變成很大負擔。

分心

Etsy，一個電商網站，使用無限滾動，但只會導致更少的用戶點擊。無限滾動不成功，因為用戶會迷失在數據中，很難去分類相關和不相關的信息。無限滾動提供更快、更多的結果，用戶不愿意去點擊它們，目的失敗。

不可到達

你最近試過到達 Facebook 的頁腳 (footer) 沒？頁腳就在 news feed 下面，但由于饋送 (feed) 無限下滾了，數據在你到達底部時及時跟新了，頁腳就又在視線外了。頁腳存在的理由：他們包含用戶有時需要到的內容。在 Facebook 中，用戶達到不了。到達其他地方的鏈接就很難發現了，無限滾動把重要信息變得難以接近，以至于妨礙用戶。

Facebook 自動載入 news feed 使頁腳不可到達

頁腳其實就是最后的求助手段。如果用戶有什么找不到、他們有問題想要解決、需要更多的資訊、解釋，他們就會去那。如果用戶發現去不了頁腳，他們可能會直接離開整個網站。使用無限滾動的公司應該使用固定頁腳、或者把他們放在側欄，讓頁腳變得可以訪問。

非專屬性

Pinterest?就沒有頁腳，所以也會遇到 Facebook 那種問題（指頁腳的功能缺失）。通過無限滾動，Pinterest 強調從網絡中獲取海量的數據、無止境的靈感。

Pinterest 的海量 pin

圖片比文字更快、更容易滾動，所以 Pinterest 和 Gooogle 圖片在一定程度上使用無限滾動。然而網絡上有上億張圖片用戶更希望看到最好的一部分。關于「專屬性」，Pinterest 貌似就缺乏專屬性。

通過「編輯精選」「最熱門」來限制 Pinterest 首頁的圖片數量，讓網站更吸引人。當相似的pin都放在一起的時候，某個 pin 又怎么彰顯專屬性？

Pinterest 使用無限滾動的策略是為了應對過載的、淹沒用戶的數據?？此朴邢薜?，但卻是令人絕望的巨大，瀏覽它都覺得浪費時間?；旧希琍interest 嘗試給用戶無限的靈感，但卻破壞了人們對控制的需求。大量的數據變得嚇人，用戶會帶著各種情緒離開。

可用性為王

像之前說的，Twitter 有效地整合無限滾動。用戶瀏覽一個無限增長的 tweets 列表時，可以點擊某條 tweet，讓它原地擴展，防止頁面刷新。結果就是，保持用戶的位置。

Twitter 中分割 feed

在手機版本中，Twitter 甚至添加「分割頁面」的標記，指引用戶從哪里繼續閱讀。這個微妙而又簡單的方案讓用戶上下滑動列表的同時也能返回到一個可辨認的位置。心理上，該標記通過分割已讀和未讀的內容來消除讀者疑慮。這樣的標記給用戶控制感、更好的內容深度感知、快速地投入內容中。

Twitter 不是唯一一個這樣做的。Discourse，一個新興的討論平臺，也使用無限滾動。這間公司考慮到無限滾動對他們用戶體驗的重要性，使用一個既吸引人又獨特的進度指示器。這個指示器只在有需要的時候和停止滾動的時候出現。指示器的數字代表當前閱讀的條目數。這是個讓用戶有控制感的好方法，即使是面對大量數據時。

Discourse 中智能的進度指示器

雜交

在很多案例中，無限滾動和分頁的雜交也是一個好選擇。在這個方案中，你會在分頁的最后看到一個「加載更多」的按鈕，點擊它就會加載更多。就像無限滾動中的自動加載，這個按鈕也可以不點擊的。這樣的界面既有無限滾動的部分好處，而沒有其壞處。

由于無限滾動需要網站有很多內容，這樣的雜交方案可用于控制數據加載。在 Facebook 的 news feed 和 Google 的圖片搜索中，先是自動地無限滾動，但是一次性請求確定數量的條目。這在保持界面的同時限制從服務器的加載內容。（就是有限次數地使用自動滾動加載）

Google 圖片中，無限滾動與分頁的雜交

無限的頁面

無限的頁面把無限滾動的概念帶到一個新高度。網站在「一頁」中使用這一概念。完全不需要點擊下一頁，把整個網站長長的一頁。例子：Unfold?和?Lost World’s Fairs。

在這些一頁的網站中，所有的場景都是垂直展開，一個接一個。這讓網站難以理解，也更難使用。盡管這可以提供創造性的交互，但它使用戶迷失，不知道哪里才是下一條信息。很多網頁隱藏滾動條，讓用戶感到失落，因為他們想要通過滾動條的位置來追蹤自己的進度。隱藏滾動條剝奪用戶的救命稻草。用戶不應該被丟到無助的境地；界面應該清晰地導航。

沒有滾動條讓人迷失位置

UX設計師設計無限的頁面時需要特別小心。要考慮它的可訪問性要；通過頁面長度和閱讀比例，告訴用戶他們的位置。有以下一些方案：固定菜單、頁面地圖、進度滾動條。

還有一招是視差滾動，憑借不同的圖層以不同的速度在頁面上滾動，創造出景深（如：Andrew McCarthy’s website）。這有助于創造漂亮、革新的體驗。有時它會被過度使用，用戶會困惑于究竟要滾動多久，還是它會自動滾動。明知的做法是用它來提升內容，而不是用它作為內容.

徹底了解它

無限滾動是一個革新的功能，通過高效地展示內容來改善界面。但是它需要被正確使用。

要避免以下的坑以達到極致的無限滾動體驗

用戶想要立刻查閱專屬的數據
用戶不想自己探索所以的網絡數據。使用無限滾動時，要區分哪些是你的網站獨家內容，把它們置頂，過濾無關信息。
用戶想要控制感
無限滾動妨礙控制體驗。添加一個智能進度指示器、固定菜單或地圖。
在滾動的時候，用戶通常都在尋找標記
當滾動一個長列表是，用戶希望可以輕易分辨新的、已讀的數據。在界面上添加一個標記作為導向。
不要用含糊的界面來提供好的內容
只有當用戶覺得值得的時候，使用永無盡頭的列表才符合邏輯。
用戶希望看到頁腳
如果頁腳信息是功能性的，他就應該出現在頁面底部。固定的頁腳通常和無限滾動在一起。
無限列表依然是一個列表
無限滾動也需要符合界面標準。不管用戶是不看屏幕了，或是點擊某個鏈接再按「后退」，他們希望能回到他們之前的那個地方。無論是什么界面，確保它符合用戶期望。
特效很好，但不是必須的
很多無限滾動界面都有很多不同的特效來展示數據（不管是側滑，還是其他什么）。要記住，不要過分追求特效。