<progress id="vtrbb"><i id="vtrbb"></i></progress>
<track id="vtrbb"></track><sub id="vtrbb"><p id="vtrbb"><span id="vtrbb"></span></p></sub>

      <output id="vtrbb"></output>
        <b id="vtrbb"><b id="vtrbb"><progress id="vtrbb"></progress></b></b>

          <track id="vtrbb"></track>

          首頁 - 互聯網課堂 - 網頁設計

          網站彈窗的設計技巧

          發布時間:2018-07-01 18:54:37訪問人數:作者:素馬設計
          本文標簽:

          網站是一個企業可以讓受眾了解其品牌的地方,它做什么、它的企業口碑。他們能從那里得到什么,這本身就是很多信息。在為客戶設計網站時,你最不想做的就是做得太過火。網絡不是一個多余的地方,它的用戶通常沒有耐心去篩選塞滿信息的頁面和頁面,只是為了獲取相關的信息。


          這就是為什么極簡主義作為一種設計趨勢將持續下去,它可以讓網頁設計師傳達很多關于一個品牌和它的信息,而不必在頁面上詳細說明。它給品牌一個更干凈、更保守的形象,同時也為游客開辟了一條轉變的道路。


          但是僅僅因為你的設計思想簡單和極簡主義,并不意味著你不能與訪問者分享更多的信息。你只需要找到不那么麻煩和打擾的方法。


          幾年前,彈出窗口作為一種方式被引入。它在網站中保存相關的信息,而不必侵入設計良好的頁面。不過,谷歌自那以來一直在打擊它認為會破壞用戶體驗的彈出窗口的使用,這讓一些設計師和開發人員對他們現在應該做什么感到困惑。


          那么,這是什么意思呢?彈出窗口是否不再是推廣特價商品、分享增值內容、訂閱新關注者、或恢復幾近虧損的銷售的可行方式?在本文中,我將介紹網站彈出窗口的當前狀態,并給出一些使用它們時要遵循的最佳實踐。


          網站彈出窗口的當前狀態

          首先,讓我們討論一下彈出窗口現在是什么樣子,它們是如何使用的,以及為什么您甚至希望將它們包括在您的web設計計劃中。


          類型的彈出窗口

          模態是用戶在web上遇到的最常見的類型



          它可以直接在網頁上打開,滑動到頁面上,或者從入口點就在那里。雖然這些通??梢栽陧撁娴乃乐行恼业?,但一些網站現在把它們放在頁面的底部,甚至把它們貼在角落里。


          通常在進入一個網站時,會出現一個覆蓋整個屏幕的間隙或彈出窗口。



          通知條可以永久地粘在網站的頂部或底部



          使用彈出窗口的5個很好的理由

          你可能會認為,由于谷歌在手機彈出窗口(我很快就會講到……)上的強烈反對,最好完全遠離彈出窗口。然而,我將給你5個很好的理由,為什么你設計的大多數網站都應該包含它們:


          1、他們引人注目

          沒有人有耐心去閱讀,這就是為什么在彈出窗口中發送引人注目的微信息是如此的偉大。


          2、他們把目光投向最重要的東西

          彈出窗口給在線訪問者帶來額外的價值——他們知道這一點。所以,當彈出窗口出現時,他們會立即被吸引到這個提供或增值的機會。


          3、他們是通用的

          彈出窗口不再將訪問者移出瀏覽器窗口,或者用他們沒有意識到的廣告阻塞他們的桌面。你現在有很多不同的類型可以使用,它們可以在不同的網站體驗點被觸發:


          在入口

          經過一定的滾動點

          觸發一個動作

          在退出之前


          4、他們保持現場清潔

          正如我之前提到的,極簡主義對于使網站美觀是很重要的。但如果你有一個特別的信息,你真的想要在訪客面前,而不想占用寶貴的有限的房地產,你可以用彈出窗口來傳遞。


          5、他們提高轉化率

          Sumo研究了用戶的彈出窗口和與之相關的轉化率。他們發現,彈出窗口有可能以平均3%的速度轉換。然而,設計好的彈出窗口有可能使9%的訪問者轉換成瀏覽器。


          你也可以使用它們來增加網站的參與度。讓他們填寫一份調查,在社交媒體上分享一些東西,或者在登錄頁面上觀看一段視頻。


          但是手機彈出窗口有什么問題呢?

          谷歌并不討厭手機彈出窗口。它只是想讓web開發人員更聰明地使用它們,因為彈出式窗口通常會對用戶造成破壞,盡管在較小的移動屏幕上肯定會更嚴重。


          因此,谷歌已經開始對使用這三種彈出窗口的移動網站進行處罰:



          總之,遠離:

          在移動用戶訪問的第一頁彈出窗口

          隱藏了大部分網頁的彈出窗口

          插頁式廣告


          明白了嗎?現在,讓我們談談當你使用網站彈出窗口時應該做什么。


          使用網站彈出窗口的18個最佳實踐:

          1.不要把彈出窗口僅僅用于有一個時尚的設計元素。如果你用毫無意義的破壞浪費訪問者的時間,你將失去他們的信任。

          2.設計彈出窗口,讓它看起來和網站的其他部分一樣好。



          3.確保他們的反應

          4.保持抄寫簡短,切中要點

          5.不要使用被動的積極的“是/否”,除非這是你的品牌的個性。如果你包括兩個CTAs,那就用積極的方式鼓勵他們采取行動。

          6.如果你想收集聯系方式,只需要問一件事:他們的電子郵件地址。

          7.確保彈出框的內容與它所顯示的頁面相關



          8.如果可以,避免在第一頁顯示彈出窗口。給游客一個先適應的機會。不過,對于記錄來說,這是谷歌允許的一個條目彈出式(因為隱私非常重要)




          9.遵循谷歌的移動規則:沒有插入,沒有超大的模式,第一頁沒有彈出窗口

          10.不要覺得桌面和手機彈出窗口需要完全相同。為每個設備類型設計彈出窗口

          11.總是要包含一個簡單的方法來退出彈出窗口:要么在彈出窗口外點擊,要么在右上角放置一個“X”按鈕

          12.當你的彈出窗口出現在現場體驗的正確時刻(比如在訪客即將離開之前)



          13.設置頻率規則,這樣訪問者就不會在每一頁或每一次訪問中看到彈出窗口

          14.在正確的位置放置彈出窗口

          15.如果您想要入侵(并且認為訪問者會接受它),請將它們放在屏幕的中心



          16.如果你想分享一個特別的提議,使用一個粘性的酒吧



          17.如果你想在他們在網站上移動的時候給他們一些思考的東西,把彈出框放到一邊



          18.使用受眾細分和目標來創建定制的彈出消息



          最后

          如果你有一些非常有價值的東西要和訪問者分享,或者你知道你有一個方法可以吸引他們回到你的網站,給網站彈出窗口一次機會。不要害怕A/B測試它們,就像你在網站上測試其他元素一樣。這里有很多東西可以玩,包括設計、復制、放置、CTA、觸發器等等。


        1. 項目經理.png

          掃描添加

          項目經理微信

          享受專業顧問服務

        2. 十二君QQ群.png

          掃描二維碼加QQ群

          與十二君一起征戰天下

        3. 贊+1
          分享:

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

          上一篇
          下一篇
          大神 大神
          桔子seo

          原本新聞詳情廣告.jpg

          欄目熱文
          相關文章

          助君網絡 Copyright ? 2012-2020. 未經許可,不可拷貝或鏡像 滬ICP備17004436號  法律顧問:張素素

        4. QQ
        5. 電話
        6. 首頁
        7. 留言
        8. 返回頂部
        9. 恭喜您~
          留言提交成功o(∩_∩)o
          我們將快馬加鞭與您取得聯系。
          A片免费一级无码
          <progress id="vtrbb"><i id="vtrbb"></i></progress>
          <track id="vtrbb"></track><sub id="vtrbb"><p id="vtrbb"><span id="vtrbb"></span></p></sub>

              <output id="vtrbb"></output>
                <b id="vtrbb"><b id="vtrbb"><progress id="vtrbb"></progress></b></b>

                  <track id="vtrbb"></track>