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

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

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

滾動為設計師打開了許多新的大門。但這種模式也不是沒有缺點的。它需要設計師對內(nèi)容和導航的高度關注。在這篇文章中，我將討論一些長滾動的優(yōu)勢和需要考慮的快速提示。

何時使用長滾動？

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

講故事（它創(chuàng)造了一個線性結(jié)構(gòu)，講故事者可以利用）;對于連續(xù)和冗長的內(nèi)容，例如長篇文章或多步驟教程（它提供了很好的用戶體驗，而不是將其分成幾個單獨的頁面）；

Dropbox'“用戶指南”是長時間滾動操作的示例。

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

突出產(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)容上下文的介紹設置，會幫助回答用戶的問題，“這是什么？”）使用引人入勝的圖像。 （用戶密切關注包含相關信息的圖像。）

2.保持導航選項持續(xù)

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

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

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

通過根據(jù)滾動方向隱藏導航欄，F(xiàn)acebook可以節(jié)省一些垂直空間。 （圖像：lmjabreu）

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

　?。▓D像：WebDesignCrowd）

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

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

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

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

4. 根據(jù)滾動位置更改網(wǎng)址

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

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

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

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

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

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

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

因為加載內(nèi)容是很快的（它不應該花費長達2到10秒），你可以使用循環(huán)的動畫來表明系統(tǒng)正在工作。

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

7.不要劫持滾動

劫持滾動的網(wǎng)站控制滾動并覆蓋網(wǎng)絡瀏覽器的基本功能。滾動劫持是壞的，因為用戶不再具有對該頁面的完全控制，并且無法預測其行為。

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

無論你滾動多快，布局都會以預定的速度移動。

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

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

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

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

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

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

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

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

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

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

將導航和過濾器粘貼

過濾后，過濾器使用戶可以將網(wǎng)站上的數(shù)千種產(chǎn)品的選擇范圍縮小到僅滿足需求的幾個產(chǎn)品。與導航菜單一樣，因為用戶希望感覺到控制，保持過濾器選項持續(xù)可見是很重要的。

　?。▓D像：id90travel）

啟用個別項目為書簽

一個簡單的書簽（或“稍后保存”功能）的喜愛項目，作為今后用戶參考的一個強大的工具。

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

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

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

項目總數(shù)顯示在分類標題下方。

使頁腳可訪問

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

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

視差效應的長滾動

交互設計是長滾動網(wǎng)站的基礎，動畫是這個設計的重要組成部分?？紤]到用戶對網(wǎng)絡的關注度大約在8秒，令人愉快的滾動體驗肯定會延長用戶的興趣。一個有趣的動畫可以讓用戶感到視差效果。

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

什么時候視差滾動有效果？

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

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

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

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

什么時候視差滾動是錯誤的方法？

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

視差和頁面的性能

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

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

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

一次刪除很多東西。

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

視差和輔助功能

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

結(jié)論

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

本文題目：長滾動頁面的最佳實踐
新聞來源：http://m.rwnh.cn/news26/103926.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、動態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、關鍵詞優(yōu)化、網(wǎng)站收錄、云服務器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)