無限滾動，有時候也叫做無盡頭的滾動，是一種讓使用者滾動瀏覽大量內容，一直看不到內容盡頭的技術。當你向下滾動時，頁面一直在重新整理。
無限滾動
這個技術，讓使用者在滾動瀏覽內容時，沒有任何的干擾或多餘的互動。當使用者向下滾動頁面時，內容就呈現出來了。很明顯地，它被使用在Facebook的訊息頁面，Google的圖片搜尋結果頁面和Twitter的時間表頁面。儘管這個技術聽起來很吸引人，但對每一個網站或app來說，這個技術並不是一個一刀切的辦法。
優秀無限滾動案例的五個原則
做出一個優秀的無限滾動案例，並非是不可完成的任務。要想做出來，你應該記住並且遵循以下的設計原則。
1. 保持導航欄可見
當你使用無限滾動的時候，最好一直保持導航欄是可見的，這樣使用者能夠比較快速便捷地通過導航進入網站或者app的其他部分。如果觸及不到導航欄，使用者就不得不返回滾動頁面。
Facebook’s 的頂部導航始終可見
僅移動裝置：因為移動裝置的螢幕小得多，導航欄佔據了螢幕相當大的一部分。如果這個頁面是通過滾動來獲取內容的話，當使用者滾動獲取新內容時導航欄隱藏，當使用者向下拉動想要回到頂部時導航欄出現。
Facebook 通過隱藏導航欄節約垂直方向的空間. 圖片來源: lmjabreu
2. 如果有頁尾的話，使用“載入更多”按鈕
無限滾動阻礙了使用者訪問頁尾，這個實際上是設計無限滾動時遇到的主要挑戰。當使用者向下滾動到接近頁面底部的時候，內容還在不停載入，這樣使用者短暫地瞥見頁尾就會立馬被新載入的內容推遠，這阻止了使用者接近頁尾。
拿bing的圖片網頁為例，頁尾包含了“瞭解更多”、“幫助”之類的連結。但是使用者並不能真正點選到這些連結，除非網頁停止了無限滾動，而通常來說，停止無限滾動要好一會兒。
圖片來源: Bing Images
如果你的網頁或者app有頁尾，並且你覺得這個頁尾很重要（或者對你的使用者來說非常重要）的話，你應該使用“載入更多”入口。對於一個簡單的網頁來說，這可能是載入額外內容花費最小的認知負荷的方法。例如，Instagram使用“載入更多”按鈕來提供頁尾的快捷入口。
Instagram 上的“載入更多”按鈕，既有無限滾動的優勢又保證網頁頁尾方便可用
3. 返回按鈕回到先前的頁面
有時候，無限滾動會引起一個可用性的缺陷：滾動的位置並沒有作為一個狀態被記錄下來。如果使用者進入列表中的連結之後按返回按鈕，他們期望的是回到原來頁面同樣的位置，但使用者在原來頁面的位置資訊並沒有被儲存，這意味著當使用者按返回按鈕的時候，他會回到初始的頁面頂部。這就並不奇怪：使用者會因為沒有合適的“返回列表”功能，很快就感到沮喪了。
Safari上的返回按鈕
不要讓你的使用者失去在內容列表中的位置，只是因為他們使用了返回按鈕。這點是至關重要的，當使用者訪問了列表中的特定網頁之後，他們能夠通過點選瀏覽器的返回按鈕回到列表中的原位置。比如，Flickr就符合了使用者對於瀏覽器返回按鈕的期望。Flickr能夠記住使用者的滾動位置，所以當使用者按返回按鈕時，他們會回到原來的位置。
圖片來源: Flickr
4. 讓收藏特定內容成為可能
無限滾動經常被詬病的一個缺點，就是不可能收藏特定的內容。對你的使用者來說，為喜歡的內容加書籤（或儲存）是一個非常強大的工具，只要網站或者app提供了書籤功能，使用者就會去使用。以Pinterest為例，使用書籤功能幫助使用者儲存創意。
Pinterest的使用者可用收藏或者分享網頁列表中的內容
5. 當新內容載入時提供視覺反饋
當新內容正在載入時，使用者需要一個明顯的訊號。可以使用進度條來告知使用者，新內容正在載入並且很快就載入完成。因為載入新內容是一個很迅速的動作（時長不應該超過2-10s），你可以使用迴圈動畫來反饋。
巧妙的動畫（比如Tumblr載入指示動畫）告訴使用者“我正在為你載入更多內容。”
增加額外的資訊，包括解釋使用者等待原因的文字（例如：正在載入評論……）也是有用的。
旋轉動畫
結論
優秀的無限滾動案例，可以創造出順滑無縫的體驗。希望你從中得到一些做出優秀無限滾動案例的啟發，這將會幫助你建立優秀的使用者體驗。謝謝！