<dl id="trbtn"><p id="trbtn"><dfn id="trbtn"></dfn></p></dl><span id="trbtn"></span>

      滾動型長頁面網頁怎么設計才更好用-用戶引導設計

      發布時間:2019-10-18 11:42:36訪問人數:作者:小邱

      單屏的網站頁面已經不流行了,長條滾動和無限滾動的網站最近變得越來越流行,這種技術在移動設備上更是能很很好地呈現。移動屏幕的使用越來越多,在廣泛接受長卷技術的過程中無疑起到了關鍵作用:屏幕越小,滾動的時間越長。


      長長的滾動條為設計師打開了許多新的大門。然而,這種模式也有其缺點。它要求設計師對內容、導航和動畫給予高度關注。


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



      1、從一開始就提供有趣的內容


      盡管人們通常會在頁面加載時就開始滾動,但屏幕頂部的內容是非常重要的。在頁面頂部出現的內容會給用戶帶來最初的印象,并為用戶設置質量期望。用戶可以滾動,但只有當他們進入頁面時看到的內容是有希望的。


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



      2、給用戶一個視覺提示


      有時候,讓用戶滾動的最好方法就是直接讓他們去做。簡單地告訴用戶,大部分內容都可以在下面找到。一個微妙的視覺提示,如指向屏幕外的箭頭或文本“向下滾動”,可以告知用戶大部分內容都在下面。



      指向屏幕外的箭頭提示用戶,大部分內容將在下面列出。



      3、保持導航選項始終可見


      導航是網站用戶體驗的一個組成部分。在你的設計中使用長時間滾動的最大風險之一是用戶迷失方向。如果導航條在用戶向下滾動時失去了可見性,那么當它們在頁面深處時,它們將不得不滾動回去。通常,這種行為會讓用戶感到困惑和沮喪。


      這個問題的最明顯的解決方案是使用一個具有粘性的導航菜單,它顯示當前位置,并且始終保持在同一位置的屏幕上。



      一個持續可見的粘性導航的例子


      移動設備:由于移動屏幕比桌面屏幕小得多,可見的導航條可以占據屏幕相對重要的部分。解決小屏幕問題的一種方法是在用戶滾動新內容時隱藏導航條,并在用戶向下拉時讓它可見,以便返回到頂部。



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


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


      考慮將你的頁面拆分為可滾動的“塊”。在每一組中,你可以通過創造性的動畫來介紹內容。當用戶滾動時,動畫將它們轉換到下一個屏幕,同時創建一個內容路徑。




      視差是另一種受歡迎的動畫效果,可以改善滾動體驗。視差效應使背景圖像的移動速度低于前景中的內容,從而產生深度和沉浸感。當你的網站想要以流暢、線性的方式講述一個故事時,長滾動與視差效應的結合可以創造一個完全沉浸式的瀏覽體驗。



      5、避免滾動劫持


      實現卷軸劫持的網站控制了卷軸并覆蓋了web瀏覽器的基本功能。滾動劫持是不好的,因為用戶不再完全控制頁面滾動,無法預測其行為。用戶對網站滾動互動的期望不應該因為敘述的體驗而被破壞。



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


      結論


      長時間滾動可以創建完全沉浸式瀏覽體驗,完全有可能讓旅行像目的地一樣愉快。當用戶喜歡你的網站上的內容,發現用戶界面是直觀的,他們就不會真正在意頁面的長度。


      贊+1
      分享:

      版權:【注明為本站原創的文章,轉載請注明出處與原文地址!本站部分轉載文章能找到原作者的我們都會注明,若文章涉及版權請發至郵箱:[email protected],我們以便及時處理,可支付稿費。向本站投稿或需要本站向貴司網站定期免費投稿請加QQ:1175062249】

      本文標簽:單頁面設計、界面設計、單頁網站設計
      上一篇
      下一篇
      SEO按天計費
      域名注冊
      網站建設
      欄目熱文
      相關文章

      君創網絡 Copyright ? 2012-2020. 未經許可,不可拷貝或鏡像 

      友情鏈接:
    1. 微信
    2. 電話
    3. 首頁
    4. 留言
    5. 返回頂部
    6. X

      截屏,微信識別二維碼

      微信號:1175062249

      (點擊微信號復制,添加好友)

      打開微信

      久久午夜福利无码电影

          <dl id="trbtn"><p id="trbtn"><dfn id="trbtn"></dfn></p></dl><span id="trbtn"></span>