-好多以前沒見過的術(shù)語。果然還是翻譯渣
-看到出錯的地方，請簡信我。這個應(yīng)該可以使用吧……（猜想

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

人類的天性是想要用層級關(guān)系爷肝、架構(gòu)來更好地導(dǎo)航。但無限滾動有時會讓用戶迷失方向陆错，因為頁面沒有盡頭灯抛。

好處

長列表已經(jīng)不是新鮮事物，但是由于手機界面的到來音瓷，怎么去滾動這些列表已經(jīng)從根本上發(fā)生改變对嚼。由于手機屏幕很窄，列表里面的元素都成豎直排列绳慎，這需要經(jīng)常去滾動它纵竖。

無限滾動在頁面、列表的交互中是十分流行的杏愤∶移觯基本功能就是，當(dāng)用戶劃過內(nèi)容時珊楼，更多的內(nèi)容自動加載進來通殃。隨著社交媒體的流行，大量的數(shù)據(jù)等著被消化厕宗；無限滾動提供了一個高效的方式去流量海量信息画舌，而不需要等待頁面加載。當(dāng)然啦已慢，用戶更喜歡一個真實地響應(yīng)體驗曲聂，不管他們在使用什么設(shè)備。

充斥很多用戶生成的內(nèi)容的網(wǎng)站蛇受，現(xiàn)在都使用無限滾動來處理每時每刻產(chǎn)生的內(nèi)容句葵。有個不成文的共識，用戶已經(jīng)意識到他們根本看不完所有的內(nèi)容兢仰，因為內(nèi)容更新的太快了乍丈。有無限滾動的話，社交網(wǎng)站盡可能地展現(xiàn)更多的信息給用戶把将。

Twitter 有效地整合無限滾動轻专。它的饋送 (feed) 符合這樣的條件：大量的數(shù)據(jù)和一個實時平臺。從用戶的角度看察蹲，所有的 tweets 都同等重要请垛，這就意味著它們都有可能被喜歡或不被喜歡催训；所以，用戶瀏覽所有的 tweets宗收。作為一個事實平臺漫拭，Twitter經(jīng)常更新，即使用戶不注意他們的饋送混稽。無限滾動是為 Twiter 這類網(wǎng)站而生采驻。

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

壞處

有那么多數(shù)據(jù)要去瀏覽洽洁，用戶要專注于他們需要的信息痘系。（還記得目標(biāo)導(dǎo)向 (goal-oriented) 么？）用戶總是想要永不停止的數(shù)據(jù)流嗎饿自？有分析表明汰翠，當(dāng)用戶使用 Google 搜索時，只有6％的看到第二頁璃俗。那么奴璃，94％的用戶只要需要10個結(jié)果，這就是說 Google 結(jié)果的排序很重要城豁。

點擊或不點擊

Google 在圖片搜索上使用了無限滾動苟穆，但是尚未在搜索結(jié)果上使用。這樣做會消除點擊第二頁的需求唱星。Google 可能繼續(xù)使用分頁雳旅，因為它的圖案很符合它的商標(biāo)。如果它換成無限滾動间聊，那用戶又會在什么時候停止?jié)L動攒盈？20的結(jié)果的時候？50個哎榴？什么時候一個方便的瀏覽體驗變得這么復(fù)雜?

查看最佳的搜索結(jié)果需要1秒型豁，還是1小時，這都取決于你調(diào)查尚蝌。但在 Google 現(xiàn)在的版本中迎变，當(dāng)你決定停止搜索的時候，你知道搜索結(jié)果的確切頁數(shù)飘言。你可以對“在哪里停止或要仔細(xì)閱讀多少個結(jié)果”做出明知決定衣形，因為你知道盡頭在哪？根據(jù)這個研究在人機交互方面的分析姿鸿，觸及盡頭提供一種控制感谆吴；你知道你已經(jīng)收到所有的相關(guān)結(jié)果倒源，和你知道某個結(jié)果是不是你想要的。知道結(jié)果的數(shù)量能提供控制感句狼，幫助用戶做出更明智的覺得笋熬，而不是讓用戶去瀏覽一個無限滾動的列表。

當(dāng)元素分布在網(wǎng)頁的頁面里面腻菇，他們被結(jié)構(gòu)化突诬、放入索引中，有開頭芜繁、有結(jié)尾。信息被清晰绒极、有序地呈現(xiàn)骏令。如果我們從分頁列表中選取元素，然后就會被帶到那個頁面垄提，我們知道點擊「后退」就會返回到之前的頁面（甚至回到之前的滾動條位置）榔袋。我們的搜索頁面會回到剛剛離開的地方。

如果你滾動同樣結(jié)果的無限滾動列表铡俐，你對離開沒有控制感凰兑，因為你所滾動的列表是無限的。如果你是那94％只讀 Google 搜索中第一頁的人（也就是审丘，10個結(jié)果）吏够。當(dāng)列表變成無限滾動時，第一頁從本質(zhì)上來說就會變成沒有盡頭滩报」看到頁面結(jié)尾就是不復(fù)存在，你決定在10個結(jié)果的地方停止脓钾。這就是無限滾動的一個問題售睹，因為第11個結(jié)果也出現(xiàn)在視線之中。用分頁列表的話可训，你就看不見第11個結(jié)果昌妹，很容易就能停止瀏覽。然而握截，當(dāng)下一個結(jié)果已經(jīng)出現(xiàn)了飞崖，你可能會繼續(xù)滾動，滾動川蒙，滾動……

Dmitry Fadeyev指出：

“人們想要回到搜索結(jié)果的列表去查看已經(jīng)已點擊的項目蚜厉，和他們在列表下面看到的東西作比較⌒笳＃”分頁界面讓用戶對項目的位置有記憶昼牛。他們可能不需要知道具體的頁碼术瓮，但他們會大致記得是什么內(nèi)容，分頁鏈接可以讓他們更容易回到那贰健。

無限滾動不僅打破這種動態(tài)胞四，還讓上下翻閱列表變得更困難，特別是你再次返回頁面伶椿，發(fā)現(xiàn)自己在頁面頂端辜伟，再一次專注于滾動列表，等待結(jié)果加載脊另。在這種情況下导狡，無限滾動界面就比分頁慢。

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

無限滾動的衰弱

最好的公司會和他們的用戶持續(xù)測試偎痛、研究新的交互旱捧。越來越多的研究表明，土國不能達(dá)到用戶的目的踩麦，無限滾動不能與之產(chǎn)生共鳴枚赡。

誘惑

當(dāng)你尋找最佳搜索結(jié)果、被誘惑去繼續(xù)去看不相關(guān)的結(jié)果谓谦，時間就會被浪費贫橙。最佳結(jié)果有機會出現(xiàn)在前10的項目中。因此反粥，無限滾動僅僅是誘惑你繼續(xù)閱讀卢肃、浪費時間、降低生產(chǎn)率才顿。

樂觀

更煩人的是滾動條不能反映真實的數(shù)據(jù)位置践剂。你可以很開心地往下滾動，以為自己接近底部娜膘，這只會誘惑你多滾動一點逊脯，然后當(dāng)你到達(dá)那的時候就會結(jié)果又多了兩倍。

精疲力竭

無限滾動刺激著用戶竣贪。就像在玩游戲那樣军洼，你永遠(yuǎn)不能贏，不管你滾得多快演怎，你都不會到達(dá)盡頭匕争。誘惑和樂觀的結(jié)合體是使用戶精疲力竭的主要原因。

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

譯者注釋：

• 舉個例子，如果從 Google 搜索結(jié)果點擊條目進到某個網(wǎng)站，然后又后退返回Google查看其他搜索結(jié)果跑杭。如果很多用戶這樣做的話铆帽，這個網(wǎng)站評級就會降分。因為很明顯大家都不滿意這個搜索結(jié)果德谅，才返回去看其他爹橱。（這個算是對 SEO 的影響吧。應(yīng)該有很多人設(shè)定成新頁面打開搜索結(jié)果吧窄做，不知道這些又怎么算愧驱？）

• 其實下面要說的跟 SEO 沒關(guān)系
• 如果有說錯的地方，懇請指正椭盏。簡信我

無限滾動會導(dǎo)致丟失你在頁面中的位置组砚。“Pogosticking”·發(fā)生在當(dāng)你離開一個無線滾動的列表是掏颊，當(dāng)你點擊「后退」來返回頁面惫确，會被帶到上一頁面的頂部，而不是你離開的地方蚯舱。這是因為在無限滾動頁面上做導(dǎo)航，滾動位置丟失掩蛤，強迫你每次都要向下滾動枉昏。

失去控制

無限滾動讓你感到迷失在信息之中。你繼續(xù)滾動揍鸟，因為結(jié)果就在那兄裂。你會感到不堪重負(fù)，因為你失去對大量信息涌現(xiàn)的控制阳藻。頁碼就會有好處晰奖，內(nèi)容的數(shù)量都是固定的，你可以很舒服地選擇是否點擊查看更多腥泥，或停止操作匾南。無限滾動，你不能控制大量的數(shù)據(jù)蛔外，這會變成很大負(fù)擔(dān)蛆楞。

分心

Etsy，一個電商網(wǎng)站夹厌，使用無限滾動豹爹，但只會導(dǎo)致更少的用戶點擊。無限滾動不成功矛纹，因為用戶會迷失在數(shù)據(jù)中臂聋，很難去分類相關(guān)和不相關(guān)的信息。無限滾動提供更快、更多的結(jié)果孩等，用戶不愿意去點擊它們艾君，目的失敗。

不可到達(dá)

你最近試過到達(dá) Facebook 的頁腳 (footer) 沒瞎访？頁腳就在 news feed 下面腻贰，但由于饋送 (feed) 無限下滾了，數(shù)據(jù)在你到達(dá)底部時及時跟新了扒秸，頁腳就又在視線外了播演。頁腳存在的理由：他們包含用戶有時需要到的內(nèi)容。在 Facebook 中伴奥，用戶達(dá)到不了写烤。到達(dá)其他地方的鏈接就很難發(fā)現(xiàn)了，無限滾動把重要信息變得難以接近拾徙，以至于妨礙用戶洲炊。

頁腳其實就是最后的求助手段。如果用戶有什么找不到尼啡、他們有問題想要解決暂衡、需要更多的資訊、解釋崖瞭，他們就會去那狂巢。如果用戶發(fā)現(xiàn)去不了頁腳，他們可能會直接離開整個網(wǎng)站书聚。使用無限滾動的公司應(yīng)該使用固定頁腳唧领、或者把他們放在側(cè)欄，讓頁腳變得可以訪問雌续。

非專屬性

Pinterest 就沒有頁腳斩个，所以也會遇到 Facebook 那種問題（指頁腳的功能缺失）。通過無限滾動驯杜，Pinterest 強調(diào)從網(wǎng)絡(luò)中獲取海量的數(shù)據(jù)受啥、無止境的靈感。

圖片比文字更快鸽心、更容易滾動腔呜，所以 Pinterest 和 Gooogle 圖片在一定程度上使用無限滾動。然而網(wǎng)絡(luò)上有上億張圖片用戶更希望看到最好的一部分再悼。關(guān)于「專屬性」核畴，Pinterest 貌似就缺乏專屬性。

通過「編輯精選」「最熱門」來限制 Pinterest 首頁的圖片數(shù)量冲九，讓網(wǎng)站更吸引人谤草。當(dāng)相似的pin都放在一起的時候跟束，某個 pin 又怎么彰顯專屬性？

Pinterest 使用無限滾動的策略是為了應(yīng)對過載的丑孩、淹沒用戶的數(shù)據(jù)冀宴。看似有限的温学，但卻是令人絕望的巨大略贮，瀏覽它都覺得浪費時間≌提基本上逃延，Pinterest 嘗試給用戶無限的靈感，但卻破壞了人們對控制的需求轧拄。大量的數(shù)據(jù)變得嚇人揽祥，用戶會帶著各種情緒離開。

可用性為王

像之前說的檩电，Twitter 有效地整合無限滾動拄丰。用戶瀏覽一個無限增長的 tweets 列表時，可以點擊某條 tweet俐末，讓它原地擴展料按，防止頁面刷新。結(jié)果就是卓箫，保持用戶的位置载矿。

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

Twitter 不是唯一一個這樣做的果正。Discourse炎码，一個新興的討論平臺，也使用無限滾動秋泳。這間公司考慮到無限滾動對他們用戶體驗的重要性潦闲，使用一個既吸引人又獨特的進度指示器。這個指示器只在有需要的時候和停止?jié)L動的時候出現(xiàn)迫皱。指示器的數(shù)字代表當(dāng)前閱讀的條目數(shù)歉闰。這是個讓用戶有控制感的好方法，即使是面對大量數(shù)據(jù)時。

雜交

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

由于無限滾動需要網(wǎng)站有很多內(nèi)容衰粹，這樣的雜交方案可用于控制數(shù)據(jù)加載锣光。在 Facebook 的 news feed 和 Google 的圖片搜索中，先是自動地?zé)o限滾動铝耻，但是一次性請求確定數(shù)量的條目誊爹。這在保持界面的同時限制從服務(wù)器的加載內(nèi)容。（就是有限次數(shù)地使用自動滾動加載）

無限的頁面

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

在這些一頁的網(wǎng)站中某弦，所有的場景都是垂直展開桐汤，一個接一個。這讓網(wǎng)站難以理解靶壮，也更難使用怔毛。盡管這可以提供創(chuàng)造性的交互，但它使用戶迷失腾降，不知道哪里才是下一條信息拣度。很多網(wǎng)頁隱藏滾動條，讓用戶感到失落螃壤，因為他們想要通過滾動條的位置來追蹤自己的進度抗果。隱藏滾動條剝奪用戶的救命稻草。用戶不應(yīng)該被丟到無助的境地奸晴；界面應(yīng)該清晰地導(dǎo)航冤馏。

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

還有一招是視差滾動，憑借不同的圖層以不同的速度在頁面上滾動副女，創(chuàng)造出景深（如：Andrew McCarthy’s website）蛤高。這有助于創(chuàng)造漂亮、革新的體驗碑幅。有時它會被過度使用戴陡，用戶會困惑于究竟要滾動多久，還是它會自動滾動沟涨。明知的做法是用它來提升內(nèi)容恤批，而不是用它作為內(nèi)容.

徹底了解它

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

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

• 用戶想要立刻查閱專屬的數(shù)據(jù)
  用戶不想自己探索所以的網(wǎng)絡(luò)數(shù)據(jù)。使用無限滾動時棋返，要區(qū)分哪些是你的網(wǎng)站獨家內(nèi)容延都，把它們置頂，過濾無關(guān)信息睛竣。
• 用戶想要控制感
  無限滾動妨礙控制體驗晰房。添加一個智能進度指示器、固定菜單或地圖射沟。
• 在滾動的時候殊者，用戶通常都在尋找標(biāo)記
  當(dāng)滾動一個長列表是，用戶希望可以輕易分辨新的验夯、已讀的數(shù)據(jù)闰围。在界面上添加一個標(biāo)記作為導(dǎo)向仔燕。
• 不要用含糊的界面來提供好的內(nèi)容
  只有當(dāng)用戶覺得值得的時候日熬，使用永無盡頭的列表才符合邏輯灯节。
• 用戶希望看到頁腳
  如果頁腳信息是功能性的拥刻，他就應(yīng)該出現(xiàn)在頁面底部梭依。固定的頁腳通常和無限滾動在一起铣减。
• 無限列表依然是一個列表
  無限滾動也需要符合界面標(biāo)準(zhǔn)者铜。不管用戶是不看屏幕了趁俊，或是點擊某個鏈接再按「后退」域仇，他們希望能回到他們之前的那個地方。無論是什么界面寺擂，確保它符合用戶期望暇务。
• 特效很好泼掠，但不是必須的
  很多無限滾動界面都有很多不同的特效來展示數(shù)據(jù)（不管是側(cè)滑，還是其他什么）垦细。要記住择镇，不要過分追求特效。

正確使用之

用戶是目標(biāo)導(dǎo)向 (goal-oriented)括改，查閱到盡頭會讓他們很滿意腻豌。無限滾動有必要解釋一點；沒什么是真正的無限嘱能，即使是我們見過的無限滾動列表吝梅。用戶應(yīng)該了解他們的位置，哪怕內(nèi)容還沒加載完惹骂。他們有必要知道數(shù)據(jù)的總量苏携，還可以輕易游歷整個列表。無限滾動應(yīng)該以最佳方式被使用对粪，用戶才能找到路右冻。

來源：smashingmagazine / May 3rd, 2013
作者：Yogev Ahuvia
翻譯：lyzhie