長滾動或者無限滾動式的網(wǎng)站建設(shè)越來越流行，這也許又是用戶體驗(yàn)下的又一產(chǎn)物，利用長滾動式建站可以解決網(wǎng)站因大量內(nèi)容而影響用戶體驗(yàn)的問題，這種技術(shù)允許用戶來回移動大量內(nèi)容，并只在用戶向下滾動時出現(xiàn)更多信息。怎樣利用好長滾動模式建站呢？

首先，創(chuàng)新互聯(lián)先來說說長滾動式網(wǎng)站有哪些好處。

1、更多的吸引潛在用戶。（滾動最小化實(shí)現(xiàn)各種用戶目標(biāo)所需的交互成本。不需要點(diǎn)擊“下一步”就可以讓用戶參與內(nèi)容，而不是專注于導(dǎo)航到下一頁的機(jī)制。）

2、很好地轉(zhuǎn)化為移動設(shè)備。移動屏幕使用的增加在廣泛接受這種技術(shù)方面發(fā)揮了關(guān)鍵作用：屏幕越小滾動的時間越長。移動設(shè)備的手勢控制使?jié)L動更直觀和有趣。

3、滾動為設(shè)計師打開了許多新的大門。但這種模式也不是沒有缺點(diǎn)的。它需要設(shè)計師對內(nèi)容和導(dǎo)航的高度關(guān)注。

那么，利用長滾動式進(jìn)行網(wǎng)站建設(shè)有哪些技巧呢？

1. 鼓勵用戶滾動

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

2. 保持導(dǎo)航選項(xiàng)持續(xù)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. 不要劫持滾動

劫持滾動的網(wǎng)站控制滾動并覆蓋網(wǎng)絡(luò)瀏覽器的基本功能。滾動劫持是壞的，因?yàn)橛脩舨辉倬哂袑υ擁撁娴耐耆刂疲⑶覠o法預(yù)測其行為。

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

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

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

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

雖然加載時間是長滾動頁面的一個問題，但這是可以解決的。頁面加載時間可以使用順序加載技術(shù)進(jìn)行優(yōu)化，例如：延遲加載，使用戶能夠真正快速訪問基本內(nèi)容。

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

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

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

要確定長滾動的有效性，請查看用戶如何與之進(jìn)行交互。分析數(shù)據(jù)能夠回答這個問題。例如，在站長統(tǒng)計中，你可以打開頁面分析，查看有多少人點(diǎn)擊及瀏覽時間多長，根據(jù)數(shù)據(jù)，你可以在必要時調(diào)整設(shè)計。

長滾動式網(wǎng)站建設(shè)并不單單講究一種模式，歸根結(jié)底，網(wǎng)站還是要圍繞用戶體驗(yàn)來實(shí)現(xiàn)建站效果，才是其根本目的！

網(wǎng)站名稱：利用長滾動式進(jìn)行網(wǎng)站建設(shè)的技巧分析
網(wǎng)址分享：http://jinyejixie.com/news34/71084.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

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