單屏的網(wǎng)站頁面已經(jīng)不流行了，長條滾動和無限滾動的網(wǎng)站最近變得越來越流行，這種技術(shù)在移動設(shè)備上更是能很很好地呈現(xiàn)。移動屏幕的使用越來越多，在廣泛接受長卷技術(shù)的過程中無疑起到了關(guān)鍵作用：屏幕越小，滾動的時(shí)間越長。

長長的滾動條為設(shè)計(jì)師打開了許多新的大門。然而，這種模式也有其缺點(diǎn)。它要求設(shè)計(jì)師對內(nèi)容、導(dǎo)航和動畫給予高度關(guān)注。

這里有5個(gè)提示，以確保你的長滾動頁面能符合用戶的期望。

1、從一開始就提供有趣的內(nèi)容

盡管人們通常會在頁面加載時(shí)就開始滾動，但屏幕頂部的內(nèi)容是非常重要的。在頁面頂部出現(xiàn)的內(nèi)容會給用戶帶來最初的印象，并為用戶設(shè)置質(zhì)量期望。用戶可以滾動，但只有當(dāng)他們進(jìn)入頁面時(shí)看到的內(nèi)容是有希望的。

為了確保人們會滾動，你需要提供讓訪問者感興趣的內(nèi)容。因此，把你最引人注目的內(nèi)容放在頁面的頂部區(qū)域，使用有趣的故事或好看的圖像吸引用戶。

2、給用戶一個(gè)視覺提示

有時(shí)候，讓用戶滾動的最好方法就是直接讓他們?nèi)プ觥：唵蔚馗嬖V用戶，大部分內(nèi)容都可以在下面找到。一個(gè)微妙的視覺提示，如指向屏幕外的箭頭或文本“向下滾動”，可以告知用戶大部分內(nèi)容都在下面。

指向屏幕外的箭頭提示用戶，大部分內(nèi)容將在下面列出。

3、保持導(dǎo)航選項(xiàng)始終可見

導(dǎo)航是網(wǎng)站用戶體驗(yàn)的一個(gè)組成部分。在你的設(shè)計(jì)中使用長時(shí)間滾動的大風(fēng)險(xiǎn)之一是用戶迷失方向。如果導(dǎo)航條在用戶向下滾動時(shí)失去了可見性，那么當(dāng)它們在頁面深處時(shí)，它們將不得不滾動回去。通常，這種行為會讓用戶感到困惑和沮喪。

這個(gè)問題的最明顯的解決方案是使用一個(gè)具有粘性的導(dǎo)航菜單，它顯示當(dāng)前位置，并且始終保持在同一位置的屏幕上。

一個(gè)持續(xù)可見的粘性導(dǎo)航的例子

移動設(shè)備：由于移動屏幕比桌面屏幕小得多，可見的導(dǎo)航條可以占據(jù)屏幕相對重要的部分。解決小屏幕問題的一種方法是在用戶滾動新內(nèi)容時(shí)隱藏導(dǎo)航條，并在用戶向下拉時(shí)讓它可見，以便返回到頂部。

4、使用功能動畫來吸引訪客

像視差滾動和滾動激活動畫等創(chuàng)造性的效果可以吸引用戶更多的滾動。他們把滾動變成更有趣的事情，讓用戶想知道“接下來會發(fā)生什么？”

考慮將你的頁面拆分為可滾動的“塊”。在每一組中，你可以通過創(chuàng)造性的動畫來介紹內(nèi)容。當(dāng)用戶滾動時(shí)，動畫將它們轉(zhuǎn)換到下一個(gè)屏幕，同時(shí)創(chuàng)建一個(gè)內(nèi)容路徑。

視差是另一種受歡迎的動畫效果，可以改善滾動體驗(yàn)。視差效應(yīng)使背景圖像的移動速度低于前景中的內(nèi)容，從而產(chǎn)生深度和沉浸感。當(dāng)你的網(wǎng)站想要以流暢、線性的方式講述一個(gè)故事時(shí)，長滾動與視差效應(yīng)的結(jié)合可以創(chuàng)造一個(gè)完全沉浸式的瀏覽體驗(yàn)。

5、避免滾動劫持

實(shí)現(xiàn)卷軸劫持的網(wǎng)站控制了卷軸并覆蓋了web瀏覽器的基本功能。滾動劫持是不好的，因?yàn)橛脩舨辉偻耆刂祈撁鏉L動，無法預(yù)測其行為。用戶對網(wǎng)站滾動互動的期望不應(yīng)該因?yàn)閿⑹龅捏w驗(yàn)而被破壞。

蘋果在他們的Mac Pro頁面上使用了滾動劫持。

結(jié)論

長時(shí)間滾動可以創(chuàng)建完全沉浸式瀏覽體驗(yàn)，完全有可能讓旅行像目的地一樣愉快。當(dāng)用戶喜歡你的網(wǎng)站上的內(nèi)容，發(fā)現(xiàn)用戶界面是直觀的，他們就不會真正在意頁面的長度。

分享題目：滾動型長頁面網(wǎng)頁怎么設(shè)計(jì)才更好用-用戶引導(dǎo)設(shè)計(jì)
新聞來源：http://jinyejixie.com/news/48682.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站營銷、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、虛擬主機(jī)、App設(shè)計(jì)

廣告

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