【譯】無限滾動加載最佳實踐

本文轉載自：衆成翻譯
譯者：文藺
連接：http://www.zcfy.cc/article/673
原文：https://uxplanet.org/infinite-scrolling-best-practices-c7f24c9af1d#.1xzr65wil

無限滾動（Infinite scrolling），有時候被稱爲無盡滾動（endless scrolling），這種技術容許用戶在大量內容上滾動，眼中看不到結束的地方。這種技術很簡單，就是頁面往下滾動的時候保持刷新。

這項技術使用戶在沒有打斷和額外交互的狀況下滾動列表 —— 隨着用戶滾動，一條條的內容就出現了。Facebook 的新聞推送頁，Google 的圖片搜索，Twitter 的時間線，這些頁面都用到了這項技術。雖然聽起來還挺有誘惑力的，但並非對全部網站或應用都通用的。

優秀無限滾動的五項原則

將無限滾動作好，並非不可能完成的任務。爲了完成它，記住並遵照如下方針。

1. 導航條保持可見

使用無限滾動時候，最好保持導航條持續可見，這樣能夠很快導航到頁面或應用的不一樣區域，對用戶來講也更簡單。若是找不到導航條，用戶將不得不一路向上將頁面滾回去。

僅適用移動設備：由於移動端屏幕要小得多，導航條所佔比例能夠相對大一些。若是屏幕上是滾動的內容，用戶滾動獲取新內容的時候，導航條能夠隱藏起來；當用戶開始往回滾動試圖回到頂部的時候再顯示出來。

2. 若是有頁腳，加上「加載更多」按鈕

無限滾動阻礙用戶的訪問頁腳。實際上，這也是無限滾動設計的主要挑戰之一：用戶到達列表底部的時候，內容在不斷地加載進來，用戶會有一兩秒時間看到頁腳，直到下一組結果加載成功並將頁腳擠出視圖以外。這阻止用戶接觸到頁腳。

拿 Bing 圖片舉例子。頁腳包含「瞭解更多」、「幫助」等連接，但用戶沒辦法真正點到任何一個，直到過一下子，頁面中止無限滾動。

若是你的網站或應用有頁腳，且它對你（或者，更要緊的，對你的用戶）很重要，那就應該用「加載更多」的方法。新內容不會自動加載，直到用戶點擊了「加載更多」的按鈕。這構成了一個很簡單的交互界面，也使得按需加載額外內容的認知負荷多是最小。

Instagram 使用「加載」更多按鈕以便頁腳簡單可及，而且不會強制用戶再三點擊「加載更多」。

3. 返回按鈕將用戶待回至以前的位置

有時候，無限滾動的實現帶來一個主要的可用性缺陷：滾動位置並未被記錄爲「狀態」。若是用戶從列表中的連接跳轉了，而後點返回按鈕，他們但願能回到頁面原來相同的位置。可是列表的位置再也不存在了，這意味着使用瀏覽器的返回按鈕通常都致使滾動位置重置到頁面頂部。無怪乎用戶很快就以爲沮喪，都沒有一個合適的「回到列表」的功能。

別讓你的用戶就由於使用返回按鈕，找不到列表的位置。很重要的是，用戶經過列表訪問了某一個項目的詳情頁，他們點擊瀏覽器返回按鈕返回列表的時候，也應該在相同的位置。

Flickr 監聽用戶點擊瀏覽器後退按鈕的行爲，知足用戶的指望。APP 記住用戶的滾動位置，因此當用戶按後退按鈕的時候，返回到原始位置。

4. 提供爲特定項添加書籤的可能

無限滾動最多見的缺點之一就是，內容出現的時候，無法添加書籤。喜好內容的簡單的書籤（或者
「保存稍後再看」），做爲將來的參照，對用戶來講是頗有用的工具。當網站或應用提供書籤功能的時候，用戶會使用的。比方說，Pinterest，使用書籤工具幫助用戶保存創意。

5. 加載新內容時提供視覺反饋

當內容在加載的時候，用戶須要明確的指示，說明正在進行中。使用進度指示（process indicator）讓用戶知道，新內容正在加載，很快就會在頁面上顯示。

由於加載新內容是一個很快的動做（不會超過 2-10 秒鐘），你可使用循環動畫來提供反饋，代表系統正在工做。

也能夠有助於爲用戶添加額外的清晰,包括文本解釋了爲何用戶等待(例如「加載評論…」)。
爲用戶添加額外聲明，提供說明爲什麼用戶在等待的文本（如「正在加載評論」），也是頗有用的。

結論

無限滾動實現得好的話，能夠達到使人難以置信的光滑無縫體驗。很好的是，關於好的無限滾動，你已經得到一些線索了，這會幫你創建完美的用戶體驗。

謝謝！