利用長(cháng)滾動(dòng)式進(jìn)行網(wǎng)站建設的技巧分析

發(fā)布日期：[2017/6/1] 編輯：奇億廣州網(wǎng)站建設

　　長(cháng)滾動(dòng)或者無(wú)限滾動(dòng)式的網(wǎng)站建設越來(lái)越流行，這也許又是用戶(hù)體驗下的又一產(chǎn)物，利用長(cháng)滾動(dòng)式建站可以解決網(wǎng)站因大量?jì)热荻绊懹脩?hù)體驗的問(wèn)題，這種技術(shù)允許用戶(hù)來(lái)回移動(dòng)大量?jì)热�，并只在用�?hù)向下滾動(dòng)時(shí)出現更多信息。怎樣利用好長(cháng)滾動(dòng)模式建站呢？

　　首先，奇億網(wǎng)絡(luò )先來(lái)說(shuō)說(shuō)長(cháng)滾動(dòng)式網(wǎng)站有哪些好處。

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

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

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

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

　　1. 鼓勵用戶(hù)滾動(dòng)

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

　　2. 保持導航選項持續

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

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

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

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

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

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

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

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

　　5. 考慮跳轉選項

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

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

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

　　6. 加載新內容時(shí)提供視覺(jué)反饋

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

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

　　細微的動(dòng)畫(huà)（如Tumblr的加載指示器）告訴用戶(hù)“我正在為您加載更多內容”。

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

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

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

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

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

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

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

　　9. 考慮你的頁(yè)面使用多少資源

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

　　10. 考慮頁(yè)面上的用戶(hù)行為

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

　　長(cháng)滾動(dòng)式網(wǎng)站建設并不單單講究一種模式，歸根結底，網(wǎng)站還是要圍繞用戶(hù)體驗來(lái)實(shí)現建站效果，才是其根本目的！

　　本文由奇億網(wǎng)站建設原創(chuàng )，原文地址：http://www.lzsyr.com/news/1806.html 轉摘請保留版權，謝謝！