免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

利用長滾動式進行網站建設的技巧分析

2016-12-14    分類: 網站建設

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

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

1、更多的吸引潛在用戶。(滾動最小化實現(xiàn)各種用戶目標所需的交互成本。不需要點擊“下一步”就可以讓用戶參與內容,而不是專注于導航到下一頁的機制。)

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

3、滾動為設計師打開了許多新的大門。但這種模式也不是沒有缺點的。它需要設計師對內容和導航的高度關注。

那么,利用長滾動式進行網站建設有哪些技巧呢?

1. 鼓勵用戶滾動

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

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

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

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

3. 確保“后退”按鈕正常工作

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

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

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

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

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

5. 考慮跳轉選項

長滾動的另一個常見問題是定向障礙:用戶可能難以找到以前在頁面上看到的內容。當內容分解成多個同樣重要的部分或版塊(例如長教程)時,這可能是一個嚴重的問題。“跳到部分”選項將解決這個問題。例如,在Tumblr上,用戶可以跳下頁面,或者如果丟失,可以跳回到開始。頁面上的內容被分解成幾個明確區(qū)分的版塊,大的指示符點固定在屏幕的左側。

在一次點擊中,用戶可以轉到主頁的所需部分。

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

6. 加載新內容時提供視覺反饋

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

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

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

7. 不要劫持滾動

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

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

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

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

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

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

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

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

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

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

長滾動式網站建設并不單單講究一種模式,歸根結底,網站還是要圍繞用戶體驗來實現(xiàn)建站效果,才是其根本目的!

新聞標題:利用長滾動式進行網站建設的技巧分析
當前鏈接:http://m.newbst.com/news/71084.html

網站建設、網絡推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有網站建設

廣告

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

成都網站建設公司