長滾動(dòng)頁面的最佳實(shí)踐

　

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

長滾動(dòng)具有以下好處：

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

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

何時(shí)使用長滾動(dòng)？

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

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

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

Dropbox’“用戶指南”是長時(shí)間滾動(dòng)操作的示例。 （來源：?Dribbble）

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

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

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

在這些情況下，長的滾動(dòng)和長的閱讀是相同的。

如何實(shí)現(xiàn)長滾動(dòng)？

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

1. 鼓勵(lì)用戶滾動(dòng)

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

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

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

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

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

?（圖像：lmjabreu）

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

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

（圖像：WebDesignCrowd）

3. 確保“后退”按鈕正常工作

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

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

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

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

標(biāo)簽：林芝 九江 東營 烏魯木齊 鹽城