首頁>建站動態>老司機告訴你,設計網站的彈出框也有門道

動態詳情

老司機告訴你,設計網站的彈出框也有門道

新聞作者:北京建站     2019-05-19 12:53:03      新聞來源:建站人      訪問量:498

在這個浮躁的時代,很多人瀏覽網站是沒有耐心的,如果信息不能很快的被檢索到,大多會選擇關閉頁面。為了幫助用戶更快的了解產品信息,幫助潛在需求的用戶快速與商家溝通,彈出框應運而生。不過因為有些網站運用不當,遭受廣大設計師和用戶的吐槽,谷歌甚至認為彈窗對用戶體驗會造成明顯的干擾。那么是否意味著彈出框沒有價值呢?并非如此,只要掌握了設計網站的彈出框門道,就可以很好的提升網站轉化率。

彈出框的類型

 

老司機告訴你,設計網站的彈出框也有門道1


彈出框分為多種類型,用于滿足不同網站設計的需求。

1、插頁式和覆蓋式彈出框,一打開網頁就會覆蓋住整個屏幕。

2、通知欄式的彈出框,一般位于網頁頂部或底部,以常駐式的形式存在于網頁當中。

3、滑入式,當打開頁面的時候,會自動滑入頁面,或者在網頁加載的過程中,直接加載進網頁。一般位于網頁的正中間。但有的網頁設計師也會將它放置于頁面的底部或者頁面角落。

彈出框的作用

 

老司機告訴你,設計網站的彈出框也有門道2


雖然經常彈出的彈出框讓用戶吐槽,但它仍然在很多網頁中存在,是因為它具有很重要的原因,在我們網站建設時離不開它。

1、提升轉化率

企業搭建網站,無非兩個目的,一是品牌宣傳,二是營銷轉化。而彈出框的出現,可以幫助網站更好的實現轉化。據數據顯示,帶有彈出框的網站,平均轉化速度比未帶有彈出框的網站高3%,而設計體驗良好的彈出框,可以將這個轉化率提升至9%。

2、讓用戶集中注意力

在這個浮躁的時代,越來越多的用戶無法將注意力集中到閱讀上,通常是大概掃視一遍網站,沒有吸引到他們的地方,就關閉網站。但是借助彈出框這種打斷式的信息,可以快速抓住用戶的眼球,吸引讓們的注意力,直接的將信息呈現到用戶眼前。

3、展示重要信息

當彈出框出現在用戶眼前,其展示的信息絕對遠超其他信息。我們可以將重要的信息內容盡可能縮減,放置到彈出框內,方便用戶第一時間獲取信息。

4、增加用戶體驗

雖然不斷彈出的彈出框令人煩不勝煩,影響到用戶體驗。但是設計良好的彈出框,卻可以更好的幫助網站帶給用戶極致的用戶體驗。現在流行極簡主義的設計網站,但是過于簡單的網站,內容也不會呈現過多。可以將彈出框作為信息的載體,又不會占用頁面過多的位置,影響整體的設計風格,還可以增加用戶體驗。

移動端的彈出框

 

老司機告訴你,設計網站的彈出框也有門道3


雖然谷歌指出彈出框的出現,會影響到用戶體驗。但是在移動端,谷歌并不反感網站UI設計帶有彈出框,反而建議網站建設人員盡可能巧妙地設計移動端的彈出框,用于提高用戶體驗。

當然,對于“過分”的彈出框,谷歌也是有相應的處罰:

1、彈出框廣告

2、彈出框覆蓋了幾乎所有的頁面

3、用戶一打開首頁就有彈出框

彈出框的設計

 

老司機告訴你,設計網站的彈出框也有門道4


既然我們了解了彈出框對網站的重要性,接下來,建站人老司機告訴你,設計網站的彈出框有哪些門道:

1、盡量避免在首頁使用彈出框

2、設計的彈出框與網站整體風格保持一致

3、確保設計的彈出框內容與對應頁面一致

4、不要隨意擺放彈出框,最好根據網站情況,再結合用戶體驗來設計

5、想要彈出框夠醒目,那就把它放在屏幕正中心位置吧

6、彈出框的內容必須簡短,有突出重點

7、確保彈出框可交互,有響應

8、盡量減少“是”或“否”式的召喚文案,這會顯得彈出框過于生硬

9、如果希望借助彈出框搜集用戶信息,最好只讓他們填寫郵件地址

10、移動端和PC端的彈出框,設計的不要一樣

11、彈出框要有一個醒目的“X”關閉按鈕

12、減少彈出框的出現頻次,不要用戶每打開一個新頁面都會有彈出框出現

13、彈出框不要隨意彈出,最好在恰當的時候,例如用戶要關閉頁面的時候彈出

14、想要展示優惠信息,建議使用頂部懸浮式的彈出框

15、在用戶瀏覽推送信息時,彈出框盡量出現在屏幕的一側而非正中央

16、可根據用戶類型的細分,自定義設計彈出框信息

為了幫助我們的用戶盡快獲取重要的關鍵信息,在設計網站的時候不要吝嗇的使用彈出框。盡量將設計體驗做得更好,更加有價值,就可以設計出更為優秀的彈出框,幫助網站提高轉化率。

發布評論:

昵稱:

暫無評論

友情鏈接:
京ICP備16060213號-2  北京雙立人網絡科技有限公司  版權所有 Copyright©2018 www.lszsrz.live All Rights Reserved
聯系電話:400-002-0761(7d×24h)       
 
 

立即定制  

  • 項目名稱:
  • 聯系人:
  • 聯系QQ:
  • 所屬行業:
  • 聯系電話:
  • 聯系Email:
  • 需求概要:
腾讯分分彩官网下载app