將其發揮到極致——長滾動網站概述

長滾動，或無限滾動，網站就是這樣：頁面比“平均”網站頁面長得多，因此滾動“無限”。 這些類型的網站已經在社交媒體網站和 Pinterest 等包含大量用戶生成內容的網站以及一些新聞和博客網站中流行起來——個人網站和投資組合也開始採用長滾動技術來增加用戶參與度和人們在網站上花費的時間長度。

無限滾動已成為一種流行且常見的設計模式，然而，UI 設計師在設計使用長滾動的網站時應該注意一些潛在的陷阱。 還有一些類型的網站不適合採用長滾動設計模式。

長捲軸的目的和好處

長滾動網站的最大好處之一是它們可以讓訪問者在網站上停留更長時間。 當人們不必有意識地決定消費更多內容時，他們就不太可能點擊離開。

可以將其視為類似於 Facebook、YouTube、Netflix 和類似網站在用戶觀看完視頻時自動播放視頻的方式。 他們知道，如果訪問者必須努力點擊新視頻，他們很可能會完全點擊不同的網站。 但如果視頻繼續播放，他們更有可能繼續觀看。

當長滾動站點被正確編碼時，它們會為每個新內容加載一個新 URL。 這等於網站的更多頁面瀏覽量，這可以增加廣告收入和網站的整體價值。

與任何 UX 決策一樣，在決定格式之前權衡實際使用網站的人的優點和缺點是很重要的。 對於某些類型的網站，長滾動可能是一個不錯的選擇，而在其他情況下，它只會讓用戶感到沮喪。 了解兩者之間的區別很重要。

何時使用長滾動（何時不使用）

考慮長滾動時要記住的關鍵是無論設計什麼樣的網站，內容都應該規定格式。 長滾動網站非常適合某些類型的內容，但可能會導致其他類型的用戶體驗失敗。

總體而言，面向任務和目標的網站不會從無限滾動設計中受益（例如，電子商務網站和教程或其他用戶希望看到明確進展的教育網站）。 這些類型的網站需要給用戶一種完成感和成就感，而這對於長滾動網站來說更難實現。

例如，Etsy 在 2012 年嘗試了無限滾動設計，最終切換回分頁。 他們發現，雖然客戶仍然以大致相同的速度購買，但用戶參與度卻大幅下降。 甚至像執行的搜索次數這樣的事情也下降了。

一些電子商務網站為訪問者提供的一個選項是查看產品頁面時的“查看全部”選項。 如果用戶選擇這樣做，這使用戶可以選擇以無限滾動格式查看站點，同時為喜歡該格式的用戶保留較短的結果頁面。

當人們按時間順序查看信息很重要時，分頁也很有幫助。 一頁滾動網站可能會鼓勵人們瀏覽和跳過，分頁會減慢訪問者的速度並增加他們以正確順序消費信息的可能性。

單頁滾動網站真正能夠大放異彩的地方是閱讀額外內容或文章是自然流程的網站。 這適用於新聞網站或主題博客等內容。 這些網站上的用戶通常希望一次獲取大量信息，而無限滾動使其變得更容易。

無限滾動是流行的 UX 選擇的另一個明顯領域是社交媒體網站或具有大量用戶生成內容的網站。 Facebook、Pinterest 和 Twitter 都使用無限滾動。 這些網站希望盡可能長時間地讓用戶留在網站上，無限滾動就可以做到這一點。

長卷的心理成本

任何設計決策的心理影響都應該仔細考慮。 對於單頁滾動網站，無論是對它還是對它都有心理影響。

首先要考慮的是用戶不介意有目的的點擊。 從一開始，點擊就幾乎成為了計算、圖形用戶界面和互聯網的一部分。 人們已經習慣了這種特定類型的交互，並且如果他們必須單擊幾個鏈接才能獲得更多內容，他們也不會被關閉。

默認情況下，許多用戶不喜歡無限滾動。 面對要滾動的極長頁面可能會感覺有點像淹沒在永無止境的信息海洋中。 當用戶查找特定信息時，滾動很少是最有效的查找方式。

由於無法準確顯示頁面長度，無限滾動會破壞頁面側面的滾動條。 雖然不是每個用戶都使用滾動條，但在這方面，那些使用滾動條的用戶可能會發現無限滾動令人沮喪。

無限滾動還消除了用戶從完成任務或在一個頁面上達到目標然後單擊下一頁獲得的完成感。 失去這種完成感會阻礙用戶並導致他們為相同的信息或任務尋找其他來源。

長滾動網站可能產生的另一個負面心理影響是，用戶傾向於查看頁面下方的內容不如頂部的內容重要。 使用標題可以幫助解決這個問題，因為它有點“重置”訪問者的大腦“頂部”在哪裡。

長滾動網站最佳實踐

如果確定網站項目適合長滾動設計，則需要牢記一些最佳實踐，以確保它提供最佳的用戶體驗。

首先，放棄頁腳！ 當內容不斷加載時，頁腳將不斷被推離頁面底部。 這意味著頁腳中包含的任何內容或信息都將保持在視線之外。 更糟糕的是當用戶瞥見頁腳但在他們有機會點擊任何東西之前就看不到它。 使用粘性頁腳是解決此問題的一種方法，儘管完全擺脫頁腳通常是更好的選擇。

使用視覺提示很重要，尤其是當主屏幕加載時頁面上的內容更多時並沒有立即明顯。 具有較大標題圖像或在頁面加載時填滿屏幕的視覺內容的網站通常包含箭頭（有時是動畫）或類似圖像，以指示下面有更多內容。

通過使用粘性標題或帶有導航鏈接的固定側邊欄，導航應該始終可見。 移動設備上的例外情況是，粘性標題會佔用寶貴的屏幕空間。 Facebook 很好地處理了這一點，當用戶向下滾動時標題會消失，但當他們開始向上滾動時會重新出現。

Chrome 網絡瀏覽器在屏幕底部的控件執行類似的操作； 當用戶向下滾動時它們會消失，並在用戶開始向上滾動時重新出現。 這是創建最大化可用屏幕空間的界面的一種非常直觀的方式。

值得慶幸的是，在無限滾動網站中變得越來越普遍的一項重要 UX 功能是在滾動到每個部分時更改 URL。 有些人使用頁面內的內部書籤來做到這一點。 其他網站，尤其是新聞網站和博客，會在用戶滾動時更新整個 URL。 這很重要，因為它允許用戶準確鏈接到他們想要鏈接的內容，而不管頁面本身的更改。

一些網頁設計師選擇創建一個可以被認為是“混合”長滾動網站，帶有一個“加載更多”按鈕，可以將內容直接加載到同一頁面上。 一些 UI 設計師在頁面上重複使用它，而另一些則選擇只包含一次，然後將網站變成更傳統的長滾動格式。

除了這些長滾動網站特定的設計注意事項之外，其他用於創建良好設計的 UI 和 UX 最佳實踐仍然適用於使用無限滾動的網站。

正確完成長滾動的示例

然後是這個網站，來自 Andrew McCarthy。 雖然設計是獨一無二的，但它會一遍又一遍地無限滾動相同的信息。 由於 McCarthy 是一名設計師，為了在人群中脫穎而出，這很可能是經過深思熟慮的選擇。

還有另一個來自 Sam Rosen 的例子，他也不斷重複相同的內容，儘管這個站點循環回到頂部而不是重新加載所有內容。

結論

雖然長滾動網站並不是什麼新鮮事，但它們正在達到一個新的成熟水平。 設計師不再將它們用作下一個“大”事物，而是關注模式如何影響用戶體驗。

在創建無限滾動網站時遵循最佳實踐允許設計師創建一個讓用戶滿意而不是讓他們失望的用戶體驗。 同時，正確實施的長滾動網站也可以幫助品牌實現其網站目標。

• • •

進一步閱讀 Toptal 設計博客：

• 有說服力的設計：有效地使用高級心理學
• 設計心理學和真棒用戶體驗的神經科學
• 體驗就是一切——終極用戶體驗指南
• 終極用戶體驗鉤子——用戶體驗中的預期性、說服性和情感設計
• UX 久經考驗的真實法則（附信息圖）