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

長滾動具有以下好處：

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

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

何時使用長滾動？

長滾動不適用于每個網(wǎng)站。在以下情況下是適當?shù)模?/p>

1. 講故事（它創(chuàng)造了一個線性結(jié)構(gòu)，講故事者可以利用）;

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

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

3. 當內(nèi)容不能分為單獨的部分，應(yīng)該作為一個整體呈現(xiàn)（例如，一個信息圖）;

4. 突出產(chǎn)品在故事中的特征，品質(zhì)或?qū)傩浴?/p>

在Hans Brinker的網(wǎng)站上長篇大論，突出了故事中辦事的品質(zhì)和屬性。

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

如何實現(xiàn)長滾動？

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

1. 鼓勵用戶滾動

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

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

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

滾動式粘帖性導(dǎo)航（圖像：Zenman）

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

?（圖像：lmjabreu）

通過按照滾動標的目的隱藏導(dǎo)航欄，F(xiàn)acebook可以節(jié)省一些垂直空間。

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

（圖像：WebDesignCrowd）

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

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

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

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

4. 按照滾動位置更改網(wǎng)址

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