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

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

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

以下10條規(guī)則將幫助你為長(zhǎng)滾動(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. 保持導(dǎo)航選項(xiàng)持續(xù)

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

滾動(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）

通過根據(jù)滾動(dòng)方向隱藏導(dǎo)航欄，F(xiàn)acebook可以節(jié)省一些垂直空間。

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

（圖像：WebDesignCrowd）

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

長(zhǎng)滾動(dòng)通常會(huì)導(dǎo)致用戶丟失在頁面上位置。當(dāng)他們?cè)陂L(zhǎng)滾動(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. 根據(jù)滾動(dòng)位置更改網(wǎng)址

長(zhǎng)滾動(dòng)最常見的問題之一是不可能在網(wǎng)頁上與特定地點(diǎn)共享網(wǎng)址：用戶的滾動(dòng)位置不會(huì)反映在網(wǎng)址中，網(wǎng)址會(huì)導(dǎo)致頁面頂部。當(dāng)用戶不能輕易地在設(shè)備之間切換時(shí)，用戶將變得輕而易舉地從當(dāng)前位置繼續(xù)瀏覽，因?yàn)榫W(wǎng)址不能捕獲該位置。從HTML5開始，可以更改瀏覽器中顯示的網(wǎng)址，而無需重新加載頁面。history.pushState()函數(shù)使我們能夠在不重新加載頁面的情況下更改網(wǎng)址，從而允許我們將滾動(dòng)行為與用戶的期望相匹配。

5. 考慮跳轉(zhuǎn)選項(xiàng)

長(zhǎng)滾動(dòng)的另一個(gè)常見問題是定向障礙：用戶可能難以找到以前在頁面上看到的內(nèi)容。當(dāng)內(nèi)容分解成多個(gè)同樣重要的部分或版塊（例如長(zhǎng)教程）時(shí)，這可能是一個(gè)嚴(yán)重的問題?！疤讲糠帧边x項(xiàng)將解決這個(gè)問題。例如，在Tumblr上，用戶可以跳下頁面，或者如果丟失，可以跳回到開始。頁面上的內(nèi)容被分解成幾個(gè)明確區(qū)分的版塊，大的指示符點(diǎn)固定在屏幕的左側(cè)。

在一次點(diǎn)擊中，用戶可以轉(zhuǎn)到主頁的所需部分。

提示：如果要使用“跳轉(zhuǎn)到部分”功能，請(qǐng)確保該系列的點(diǎn)容易使用。如果它們很小或難以用鼠標(biāo)點(diǎn)擊或者在觸摸設(shè)備上準(zhǔn)確地按下，那么它們將阻礙用戶。因此，確保點(diǎn)的大小適當(dāng)。

?6. 加載新內(nèi)容時(shí)提供視覺反饋

根據(jù)Jakob Nielsen的?10 heuristics for usability，系統(tǒng)狀態(tài)的可視性仍然是用戶界面設(shè)計(jì)中最重要的原則之一。用戶希望在系統(tǒng)給定的任何時(shí)間內(nèi)知道他們當(dāng)前的上下文，且網(wǎng)站不應(yīng)該讓他們猜測(cè)——它應(yīng)該通過適當(dāng)?shù)囊曈X反饋告訴用戶發(fā)生了什么。如果你的網(wǎng)站有動(dòng)態(tài)加載內(nèi)容，那么用戶需要一個(gè)明確的跡象表明網(wǎng)站正在做這個(gè)。通知他們使用進(jìn)度指示器顯示新內(nèi)容正在加載，并將很快出現(xiàn)在頁面上。

因?yàn)榧虞d內(nèi)容是很快的（它不應(yīng)該花費(fèi)長(zhǎng)達(dá)2到10秒），你可以使用循環(huán)的動(dòng)畫來表明系統(tǒng)正在工作。

細(xì)微的動(dòng)畫（如Tumblr的加載指示器）告訴用戶“我正在為您加載更多內(nèi)容”。

7. 不要劫持滾動(dòng)

劫持滾動(dòng)的網(wǎng)站控制滾動(dòng)并覆蓋網(wǎng)絡(luò)瀏覽器的基本功能。滾動(dòng)劫持是壞的，因?yàn)橛脩舨辉倬哂袑?duì)該頁面的完全控制，并且無法預(yù)測(cè)其行為。

在蘋果Mac Pro頁面上可以看到這個(gè)問題。無論你滾動(dòng)多快，布局以預(yù)定速度移動(dòng)。由于此頁面上的所有內(nèi)容都與滾動(dòng)相關(guān)聯(lián)，因此訪問者被迫以緩慢的速度瀏覽該頁面。

無論你滾動(dòng)多快，布局都以預(yù)定的速度移動(dòng)。

8. 優(yōu)化頁面的加載時(shí)間

加載時(shí)間慢是長(zhǎng)滾動(dòng)頁面的常見問題。但對(duì)于網(wǎng)站來說，加載慢是一個(gè)致命的打擊。事實(shí)上，47％的用戶期望網(wǎng)頁在2秒內(nèi)加載完成。如果頁面在3秒內(nèi)沒有加載，則57％的用戶將會(huì)離開。

雖然加載時(shí)間是長(zhǎng)滾動(dòng)頁面的一個(gè)問題，但這是可以解決的。頁面加載時(shí)間可以使用順序加載技術(shù)進(jìn)行優(yōu)化，例如：延遲加載，使用戶能夠真正快速訪問基本內(nèi)容。了解基于The Guardian重新設(shè)計(jì)的performance improvement that the team at Smashing Magazine achieved。

9. 考慮你的頁面使用多少資源

如果你使用長(zhǎng)滾動(dòng)（特別是對(duì)于具有大量圖像和動(dòng)畫的頁面），請(qǐng)始終考慮你的頁面消耗的資源（CPU和內(nèi)存）數(shù)量。滾動(dòng)多張照片，動(dòng)畫GIF和視頻沒有頁面重新加載可能會(huì)對(duì)系統(tǒng)資源造成重大損失，而有限資源的設(shè)備（如iPhone，可能會(huì)由于正在加載的資產(chǎn)數(shù)量而開始放緩）。因此，使用不同的設(shè)備測(cè)試你的網(wǎng)站，并在用戶滾動(dòng)過去時(shí)使用暫停動(dòng)畫和視頻等技巧。

10. 考慮頁面上的用戶行為

要確定長(zhǎng)滾動(dòng)的有效性，請(qǐng)查看用戶如何與之進(jìn)行交互。分析數(shù)據(jù)能夠回答這個(gè)問題。例如，在谷歌分析中，你可以打開頁面分析，查看有多少人點(diǎn)擊下方。根據(jù)數(shù)據(jù)，你可以在必要時(shí)調(diào)整設(shè)計(jì)。

電商網(wǎng)站的長(zhǎng)滾動(dòng)

電商網(wǎng)站經(jīng)常使用長(zhǎng)滾動(dòng)。對(duì)于產(chǎn)品列表和搜索結(jié)果，此模式具有一個(gè)主要優(yōu)勢(shì)：用戶可以滾動(dòng)產(chǎn)品或結(jié)果列表而不會(huì)中斷。這里不需要交互，產(chǎn)品只是在用戶向下滾動(dòng)頁面時(shí)顯示。

但，要?jiǎng)?chuàng)建良好的用戶體驗(yàn)，需要解決一些常見問題。

將導(dǎo)航和過濾器粘貼

過濾后，過濾器使用戶可以將網(wǎng)站上的數(shù)千種產(chǎn)品的選擇范圍縮小到僅滿足需求的幾個(gè)產(chǎn)品。與導(dǎo)航菜單一樣，因?yàn)橛脩粝Ｍ杏X到控制，保持過濾器選項(xiàng)持續(xù)可見是很重要的。

（圖像：id90travel）

啟用個(gè)別項(xiàng)目為書簽

一個(gè)簡(jiǎn)單的書簽（或“稍后保存”功能）的喜愛項(xiàng)目，作為今后用戶參考的一個(gè)強(qiáng)大的工具。

書簽可以幫助用戶在作出決定之前回到某些項(xiàng)目。

顯示匹配結(jié)果的數(shù)量

顯示可用的項(xiàng)目數(shù)量，以便用戶決定要花多長(zhǎng)時(shí)間滾動(dòng)瀏覽結(jié)果。

項(xiàng)目總數(shù)顯示在分類標(biāo)題下方

使頁腳可訪問

人們理解一個(gè)頁腳的概念，他們希望找到鏈接到那里的重要網(wǎng)站信息（例如聯(lián)系信息），但漫長(zhǎng)的滾動(dòng)往往會(huì)阻礙用戶訪問頁腳：新的項(xiàng)目在用戶接近底部時(shí)繼續(xù)加載列表，推頁腳出來。雖然這聽起來像是一個(gè)嚴(yán)重的問題，可以通過“加載更多”按鈕來解決。使用此解決方案，內(nèi)容按需求加載：新的內(nèi)容將不會(huì)自動(dòng)加載，直到用戶單擊“更多”按鈕。這樣用戶可以輕松地到達(dá)頁腳，且無需追逐它。你可以在文章《Infinite Scrolling, Pagination or ‘Load More’ Buttons? Usability Findings in eCommerce》中找到有關(guān)如何實(shí)現(xiàn)此解決方案的實(shí)用技巧。

使用“加載更多”按鈕來按需求加載內(nèi)容。 （圖像：Skechers）

視差效應(yīng)的長(zhǎng)滾動(dòng)

交互設(shè)計(jì)是長(zhǎng)滾動(dòng)網(wǎng)站的基礎(chǔ)，動(dòng)畫是這個(gè)設(shè)計(jì)的重要組成部分?？紤]到用戶對(duì)網(wǎng)絡(luò)的關(guān)注度大約在8秒，令人愉快的滾動(dòng)體驗(yàn)肯定會(huì)延長(zhǎng)用戶的興趣。一個(gè)有趣的動(dòng)畫可以讓用戶感到視差效果。

使用視差滾動(dòng)，背景圖像比前景中的內(nèi)容移動(dòng)得更慢，給用戶造成深度沉浸的錯(cuò)覺。這種效果使圖像感覺不那么平面且更立體。

什么時(shí)候視差滾動(dòng)有效果？

在網(wǎng)頁設(shè)計(jì)中，旅程可以像目的地一樣愉快。視差是一種有趣的視覺效果，可以帶來很好的第一印象，并鼓勵(lì)用戶滾動(dòng)的更多。當(dāng)你想驚嘆你的觀眾時(shí)，這非常有用。

視差效應(yīng)產(chǎn)生令人著迷的三維感覺。 （圖像：firewatchgame）

視差滾動(dòng)在指導(dǎo)講故事中也非常有效。當(dāng)你想要以平滑，線性的方式講故事時(shí)，將長(zhǎng)滾動(dòng)與視差效果配對(duì)可以創(chuàng)建完全身臨其境的瀏覽體驗(yàn)。在?The Boat，如下所示，隨著用戶的滾動(dòng)，動(dòng)畫將他們帶到下一個(gè)屏幕，同時(shí)創(chuàng)建一個(gè)跟隨內(nèi)容的路徑。這會(huì)使?jié)L動(dòng)更有趣，讓用戶知道“接下來會(huì)發(fā)生什么？

The Boat

以平滑，線性的方式講故事。

什么時(shí)候視差滾動(dòng)是錯(cuò)誤的方法？

如果大多數(shù)用戶希望完成清除任務(wù)（例如購(gòu)買產(chǎn)品），請(qǐng)避免使用此技術(shù)。想像一下，例如，如果你每次想購(gòu)買產(chǎn)品時(shí)必須看到視差效應(yīng)，亞馬遜在這方面就令人非常沮喪。

視差和頁面的性能

絕大多數(shù)使用視差效應(yīng)的網(wǎng)站都會(huì)受到可怕的滾動(dòng)性能的影響。對(duì)于具有高像素密度的設(shè)備，像iPhone一樣特別糟糕。雖然所有潛在的性能問題都無法完全解決，你仍然可以通過以下簡(jiǎn)單技術(shù)來提高滾動(dòng)性能：

僅使用瀏覽器便宜的屬性進(jìn)行動(dòng)畫制作。這些是轉(zhuǎn)化3D，縮放，旋轉(zhuǎn)和不透明度。

不要有大量圖像或大幅調(diào)整大小。強(qiáng)制瀏覽器調(diào)整圖像大?。ㄓ绕涫蔷薮蟮膱D像）可能是昂貴的。

一次刪除很多東西。

你可以在Dave Gamache的文章《Parallax Done Right》中找到更多關(guān)于視差效果的實(shí)用技巧。

視差和輔助功能

考慮如何讓視覺上觸發(fā)前庭障礙的用戶使用你的網(wǎng)站。動(dòng)畫能夠使這組用戶感到頭暈。Val Head對(duì)于設(shè)計(jì)者如何設(shè)計(jì)更安全的動(dòng)作有一些實(shí)用的建議，對(duì)視差有一個(gè)完美的建議：如果你的網(wǎng)站有很多移動(dòng)，涵蓋了很多視覺效果，提供查看該內(nèi)容的替代方法——考慮關(guān)閉動(dòng)作的選項(xiàng)。這可以通過按鈕或切換開關(guān)來實(shí)現(xiàn)，以減少或關(guān)閉你網(wǎng)站上的全局動(dòng)畫。為了探索這個(gè)想法，Nat Tarnoff開發(fā)了一個(gè)可以在任何網(wǎng)站上使用的切換開關(guān)的原型。

結(jié)論

長(zhǎng)滾動(dòng)可以創(chuàng)建一個(gè)完全沉浸式的瀏覽體驗(yàn)。如果用戶憑直覺喜歡一個(gè)界面，那他并不會(huì)了解滾動(dòng)的長(zhǎng)度。因此，專注于他們的目標(biāo)，讓你的用戶更方便。

原文地址：https://blogs.adobe.com/creativecloud/best-practices-for-long-scrolling/

原文作者：?Nick Babich

譯者：SKYUI

本文由 @SKYUI 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。