長滾動頁面的最佳實踐

　

長或無限滾動的網站比來越來越遍及，這不但僅是趨勢或巧合。長滾動的技術允許用戶來回移動大量的內容，且不會中斷或額外的交互，信息只是在用戶向下滾動頁面時出現。無限滾動是各種長滾動，允許用戶滾動大量的內容，沒有終點線（這是你在Facebook，Twitter和Tumblr Feed上看到的無限滾動）。

長滾動具有以下好處：

更多的吸引潛在用戶。（滾動最小化實現各種用戶目標所需的交互成本。不需要點擊“下一步”就可以讓用戶參與內容，而不是專注于導航到下一頁的機制。）很好地轉化為移動設備。移動屏幕使用的增加在廣泛接受這種技術方面發揮了關鍵作用：屏幕越小滾動的時間越長。移動設備的手勢控制使滾動更直不雅觀和有趣。滾動為設計師打開了許多新的大門。但這種模式也不是沒有缺點的。它需要設計師對內容和導航的高度關注。

在這篇文章中，我將討論一些長滾動的優勢和需要考慮的快速提示。

何時使用長滾動？

長滾動不適用于每個網站。在以下情況下是適當的：

1. 講故事（它創造了一個線性結構，講故事者可以利用）;

2. 對于連續和冗長的內容，例如長篇文章或多步驟教程（它提供了很好的用戶體驗，而不是將其分成幾個單獨的頁面）;

Dropbox’“用戶指南”是長時間滾動操作的示例。 （來源：?Dribbble）

3. 當內容不能分為單獨的部分，應該作為一個整體呈現（例如，一個信息圖）;

4. 突出產品在故事中的特征，品質或屬性。

在Hans Brinker的網站上長篇大論，突出了故事中辦事的品質和屬性。

在這些情況下，長的滾動和長的閱讀是相同的。

如何實現長滾動？

以下10條規則將幫手你為長滾動提供良好的用戶體驗。

1. 鼓勵用戶滾動

盡管人們通常會在頁面加載時就開始滾動，但是內容上方的內容仍然非常重要。頁面頂部顯示了訪客的初始印象和質量期望。人們會滾動，但只有當人們對上面的內容是感到希望的時，才會滾動頁面。因此，將最令人信服的內容放在首要位置：

提供一個好的介紹。（一個好內容上下文的介紹設置，會幫手回答用戶的問題，“這是什么？”）使用引人入勝的圖像。 （用戶密切關注包羅相關信息的圖像。）2. 連結導航選項持續

當你創建一個長滾動的網站時，請記住，用戶仍然需要一種標的目的感（即他們當前的位置）和導航感（其他可能的路徑）。長滾動可能會引發用戶導航問題：如果導航欄在用戶向下滾動時失去其可見性，當它們在頁面內部時，將不得不向后滾動。這個問題的解決方案顯然是粘貼菜單顯示當前位置，并始終連結在屏幕上的一致位置。

滾動式粘帖性導航（圖像：Zenman）

僅適用于移動設備：由于移動屏幕比其他大多數設備小得多，因此導航欄可占據相對較大的屏幕部分。如果屏幕顯示滾動進制，則當用戶滾動新內容時，，你可以隱藏導航欄，然后不才拉回到頂部時顯示。

?（圖像：lmjabreu）

通過按照滾動標的目的隱藏導航欄，Facebook可以節省一些垂直空間。

提示：你還可以讓用戶在增補導航的頁面部分之間跳轉。例如，下面的動畫解決方案幫手用戶跟蹤他們的進度，同時也可以作為特定部分的快捷方式。

（圖像：WebDesignCrowd）

3. 確?！昂笸恕卑粹o正常工作

長滾動通常會導致用戶丟失在頁面上位置。當他們在長滾動列表中點擊時，會發生這種情況，當通過點擊“返回”按鈕返回時，它們將被移動到原始頁面的頂部，而不是他們離開的位置。但是當用戶跟隨頁面上的鏈接，然后點擊“返回”按鈕時，他們希望返回到原始頁面上的同一個位置。丟失他們的位置迫使他們必需滾動他們已經看到的內容。令人驚訝的是，用戶因為沒有正確的“回到位置”功能而迅速沮喪。

激活Feed中的元素時，用戶必需能夠返回激活它的原始元素。 Flickr是將瀏覽器的“返回”按鈕行為與用戶期望相匹配的一個很好的例子。網站記住用戶的滾動位置，所以當用戶按下“返回”按鈕時，它們還會返回本來的位置。

Flickr將瀏覽器的“返回”按鈕行為與用戶的期望相匹配。

4. 按照滾動位置更改網址

標簽：林芝 九江 東營 烏魯木齊 鹽城