怎樣通過更友好的方式來呈現一系列的資料內容，包括文章、鏈接、圖片、搜索結果等等——對於設計師來説，這不是一件很輕鬆的事。在這方面，頁碼導航 (pagination) 是一種經過時間驗證的、還算值得信賴的解決方案。
不過最近幾年，我們可以發現越來越多的網站開始使用無限滾動 (infinite scrolling) 的方式來呈現內容了——當多用户瀏覽到頁面底部時，傳統意義上的 “下一頁” 資料會自動載入，並輸出到當前頁面中。
對於某些類型的網站或移動應用來説，無限滾動確實是一種不錯的模式；但在在某些情況下，它也會造成災難性的後果。
我們先來看一下無限滾動載入的優缺點。
優點
1. 有效的降低了界面複雜度，節省了空間：我們不再需要臃腫複雜的頁碼導航鏈接或按鈕了。
2. 對觸屏裝置來説，互動方式更符合直覺：在移動應用的互動環境當中，通過向上滑動進行滾屏的操作已經成為最基本的多用户習慣，而且所需要的操作精準程度遠遠低於點選鏈接或按鈕。
3. 更高的參與度：以上兩點所帶來的互動便捷性可以使多用户將注意力更多的集中在內容而不是操作上，從而讓他們更樂於沉浸在探索與瀏覽當中。
缺點
1. 有限的用例：無限滾動的方式只適用於某些特定類型產品當中一部分特定類型的內容。例如，在 WooCommerce 跨境電商網站當中，多用户時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助多用户更穩妥和準確的回到某個特定的列表頁面當中。
2. 額外的複雜度：那些用來打造無限滾動的 JS 庫雖然都自稱很容易使用，但您總會需要在自己的產品中進行不同程度的定製化處理，以滿足您們自己的需求；另外這些 JS 庫在瀏覽器和裝置相容性等方面的表現也參差不齊，您必須做好充分的測試與調整工作。
3. 再見了，頁尾：如果使用了比較典型的無限滾動載入模式，這就意味著您可以和頁尾説拜拜了。最好考慮一下頁尾對於您的網站，特別是多用户的重要性；如果其中確實有比較重要的內容或鏈接，那麼最好換一種更傳統和穩妥的方式。千萬不要耍弄您的多用户，當他們一次次的瀏覽到頁面底部，看到頁尾，卻因為自動載入的內容突然出現而無論如何都無法點選頁尾中的鏈接時，他們會變的越發憤怒。
4.SEO 站羣：集中在一頁當中動態載入資料，與一頁一頁的輸出相比，究竟那種方式更利於 SEO 站羣，這是您必須考慮的問題。對於某些以類型網站來説，在這方面進行冒險是很不划算的。
5. 關於頁面數量的印象：其實站在多用户的角度來看，這一點並非負面；不過，如果對於您的網站來説，通過更多的內容頁面展示更多的相關信息 (包括廣告) 是很重要的策略，那麼單頁無限滾動的方式對您並不適用。
瞭解了相關的優缺點，接下來我們看一看我個人認為在無限滾動的運用方面比較到位的兩個網站。
Twitter
Twitter 適合採用無限滾動載入的一個重要原因，就是每個內容單元都很短小精煉，其本身就是內容整體，多用户不需要在 “列表索引” 與 “內容詳情” 之間切換就可以獲取全部信息，而且當滑鼠懸停在某個內容條目範圍內的時候，對應的操作 (回覆、刪除、收藏等) 就會呈現；所有內容與功能全部集中在當前的上下文環境中。
Tumblr
預設情況下，Tumblr 是通過無限滾動的方式載入內容的，但他們在設置當中為多用户提供了禁用無限滾動的選項，這種做法非常體貼。 Tumblr 的產品特色決定了其內容類型的廣泛性，不同類型的多用户所關注的內容在形式方面可能有很大的區別；允許多用户自主設置內容載入方式的做法可以照顧到不同的多用户羣體。
預設的無限滾動方式
多用户可以選擇是否啓用無限滾動
禁用後，回到頁碼導航的傳統方式
下面是我個人認為不大適合採用無限滾動的例子。
Bing 的圖片搜索
與 Google 相仿，Bing 在圖片與視頻的搜索結果頁面當中採用了無限滾動載入的做法。不過當多用户點選某張縮圖從而進入圖片詳情頁面後，再回到搜索結果列表時會失去之前的定位，這使得多用户必須重新滾動頁面，尋找點選之前的位置。如果您的 SEO 站羣關鍵詞會產生大量的搜索結果，這種方式將給您帶來極大的不便。 (現在 Bing 已經改變了這一做法，當多用户點選了搜索結果中的縮圖時，會直接在當前頁面輸出包含大圖及相關信息在內的彈出層；新的流程使多用户不會再脱離當前環境 – 譯者 C7210 小注)
YouTube
我愛 YouTube 的整體設計，同時也理解他們不斷修改和調整設計方案的初衷，不過他們最近將首頁的頁碼導航改為無限滾動的做法還是讓我有些不爽。和 Bing 的問題類似，YouTube 的實際內容 (視頻) 是在一個獨立的頁面中的，多用户顯然不希望在看過一個視頻後回到列表頁面卻發現列表重新載入了。
另外有些尷尬的是，YouTube 的無限滾動載入不是那麼的 “自動”，多用户需要點選一個按鈕來使列表載入更多的視頻內容；從某種角度上講這不算壞，因為它確實是將控制權交給了多用户，實現了類似前面提到的 Tumblr 的做法，但直接將無限滾動與手動觸發結合在一起的形式多少有些不倫不類。
最佳實踐
希望您能通過以上這些內容瞭解到自己的產品是否適合採用無限滾動載入的方式。如果答案是肯定的，那麼下面這些要點也許可以幫助您避免掉實踐當中的一些關鍵問題：
1. 提供降級方案：前端開發人員要考慮到在特殊環境下 Scrit 無法正常執行的狀況，提供平穩降級的解決方案。
2. 可設置：如果可能的話，考慮向多用户提供設置選項，方便他們選擇最適合自己的瀏覽方式。這會讓多用户感到貼心，從而提升對您的產品的滿意度與忠誠度。
3. 視覺反饋提示：在自動載入新內容的時候，要向多用户提供必要的視覺反饋，例如各種能夠表達 “載入中” 的動畫效果，否則多用户將無法瞭解當前的狀況；在沒有視覺提示的情況下，如果載入時間過長，會讓多用户誤以為接下來不再有內容了。
4. 幫多用户定位：不要因為多用户訪問內容詳情並點選了瀏覽器上的回退按鈕就失去掉之前的列表位置。如果確實沒有辦法做到，而這一點對您的產品又很重要，那麼還是考慮傳統方式為好。
5. 測試：使用目標多用户羣有可能用到的各種裝置進行測試，檢驗無限滾動載入方案的實際表現。