長(zhǎng)滾動(dòng)和無(wú)限滾動(dòng)站點(diǎn)最近變得越來(lái)越流行

“首屈一指”的日子結(jié)束了。長(zhǎng)滾動(dòng)和無(wú)限滾動(dòng)站點(diǎn)最近變得越來(lái)越流行，并且這種技術(shù)可以很好地轉(zhuǎn)換到移動(dòng)設(shè)備上并非巧合。移動(dòng)屏幕的日益使用無(wú)疑在長(zhǎng)滾動(dòng)技術(shù)的廣泛接受中起了關(guān)鍵作用：屏幕越小，滾動(dòng)時(shí)間越長(zhǎng)。

長(zhǎng)滾動(dòng)為設(shè)計(jì)師打開(kāi)了許多新的大門。但是，這種模式有其自身的缺點(diǎn)。它要求設(shè)計(jì)人員特別注意內(nèi)容，導(dǎo)航和動(dòng)畫。

這里有5條提示，以確保您的長(zhǎng)滾動(dòng)符合用戶期望。

1.從一開(kāi)始就提供有趣的內(nèi)容

盡管人們通常在頁(yè)面加載后立即開(kāi)始滾動(dòng)，但屏幕頂部可見(jiàn)部分的內(nèi)容仍然非常重要。頁(yè)面頂部顯示的內(nèi)容會(huì)給您帶來(lái)初步印象并為您的用戶設(shè)置質(zhì)量期望。用戶可以滾動(dòng)，但前提是他們進(jìn)入頁(yè)面時(shí)所看到的內(nèi)容很有希望。

為了確保人們能夠滾動(dòng)瀏覽，您需要提供可使訪客保持興趣的內(nèi)容。因此，將您最引人注目的內(nèi)容放在頁(yè)面頂部：

• 提供有趣的事實(shí)（吸引游客并引起他們注意的事實(shí)）
• 使用引人入勝的圖像（用戶密切注意包含相關(guān)信息的圖像和圖片）

2.為用戶提供視覺(jué)提示

有時(shí)，使用戶滾動(dòng)的最佳方法是直接要求他們這樣做。只需通知用戶大部分內(nèi)容即可。細(xì)微的視覺(jué)提示（例如，指向屏幕外的箭頭或文本“向下滾動(dòng)”）可以通知用戶以下內(nèi)容大部分可用。

指向屏幕外的箭頭通知用戶大部分內(nèi)容將在下面顯示。

3.始終保持導(dǎo)航選項(xiàng)可見(jiàn)

導(dǎo)航是網(wǎng)站用戶體驗(yàn)的成敗方面。在設(shè)計(jì)中使用長(zhǎng)滾動(dòng)的最大風(fēng)險(xiǎn)之一是可能使用戶迷失方向。如果用戶向下滾動(dòng)時(shí)導(dǎo)航欄失去可見(jiàn)性，那么當(dāng)他們深入頁(yè)面內(nèi)時(shí)，他們將不得不一直向上滾動(dòng)。通常，此行為使用戶感到困惑和沮喪。

解決此問(wèn)題的明顯方法是使用粘性導(dǎo)航菜單，該菜單顯示當(dāng)前位置并始終保持在屏幕上的同一位置。

僅限移動(dòng)設(shè)備：由于移動(dòng)屏幕比臺(tái)式機(jī)屏幕小得多，因此可見(jiàn)的導(dǎo)航欄會(huì)占據(jù)屏幕的相當(dāng)大的一部分。解決小屏幕空間問(wèn)題的一種方法是，當(dāng)用戶滾動(dòng)查找新內(nèi)容時(shí)隱藏導(dǎo)航欄，并在用戶下拉菜單時(shí)使其可見(jiàn)以返回頂部。

4.使用功能動(dòng)畫吸引訪問(wèn)者

視差滾動(dòng)和滾動(dòng)激活動(dòng)畫等創(chuàng)意效果可以吸引用戶進(jìn)行更多滾動(dòng)。他們將滾動(dòng)變成更有趣的內(nèi)容，并讓用戶懷疑“接下來(lái)會(huì)發(fā)生什么？”

考慮將頁(yè)面分成可滾動(dòng)的“塊”。在每個(gè)塊中，您可以通過(guò)創(chuàng)意動(dòng)畫介紹內(nèi)容。當(dāng)用戶滾動(dòng)時(shí)，動(dòng)畫會(huì)在創(chuàng)建內(nèi)容路徑時(shí)將其切換到下一個(gè)屏幕。

視差是另一種流行的動(dòng)畫效果，可以改善滾動(dòng)體驗(yàn)。視差效果通過(guò)使背景圖像移動(dòng)得比前景中的內(nèi)容慢，從而產(chǎn)生了深度和沉浸感的錯(cuò)覺(jué)。當(dāng)您的站點(diǎn)希望以流暢，線性的方式講述故事時(shí)，長(zhǎng)滾動(dòng)和視差效果可以創(chuàng)造出完全身臨其境的瀏覽體驗(yàn)。

5.避免滾動(dòng)劫持

實(shí)現(xiàn)滾動(dòng)劫持的網(wǎng)站可以控制滾動(dòng)并覆蓋Web瀏覽器的基本功能。滾動(dòng)劫持是很糟糕的，因?yàn)橛脩舨辉偻耆刂祈?yè)面滾動(dòng)并且無(wú)法預(yù)測(cè)其行為。出于敘事體驗(yàn)，不應(yīng)破壞用戶對(duì)網(wǎng)站滾動(dòng)交互的期望。

Apple在Mac Pro頁(yè)面上使用滾動(dòng)劫持。

結(jié)論

杭州網(wǎng)站建設(shè)時(shí)間滾動(dòng)可以創(chuàng)建完全身臨其境的瀏覽體驗(yàn)。完全有可能使旅行與目的地一樣愉快。當(dāng)用戶喜歡您網(wǎng)站上的內(nèi)容并發(fā)現(xiàn)直觀的UI時(shí)，他們就不會(huì)真正在意滾動(dòng)的長(zhǎng)度。