優秀網頁彈框的誕生:高級交互設計師深度總結的18條設計準則

+ 查看更多

彈框是網頁中十分常見的一個元素，不少設計師經常用它來傳遞關鍵信息、吸引用戶視線。當然這也有一些人對彈框設計持負面態度，認為它的使用會對用戶產生干擾，打斷用戶在網頁上的正常瀏覽，不利于用戶體驗的提升。其實，彈框究竟能否成為有效的界面元素主要還是取決于其設計的優劣。話說回來，怎樣才能設計出一個優秀的彈框呢？快來和小飛一起看看吧！

簡單來說，彈框是網頁/app與用戶進行交互的一個浮層。它主要有兩個功能：信息傳遞和用戶反饋。根據交互模式的不同，彈框主要可以分為兩種：模態彈框和非模態彈框。

模態彈框是指當該彈框出現在用戶操作視野內時，用戶必須對其作出回應，否則無法繼續其他操作行為。這類彈框的優缺點很明顯：它可以快速獲取用戶的視覺焦點，但它會打斷用戶的正常操作。模態彈框是重量性反饋機制的一種，經常被放在頁面的正中間，所以建議將模態彈框用在重要操作提示上（用戶比較容易接受）。常見的模態彈框有對話框、警示框、動作欄等。

與模態彈框相比，非模態彈框的特點在于它不強制用戶與其進行交互，這類彈框在頁面停留一段時間后會自動消失或一直停留在頁面的側邊。非模態彈框屬于是輕量級的反饋機制，不會對用戶造成干擾。當然，由于它并不顯眼，在吸引用戶注意上沒有那么有效。一些不那么重要的消息提醒與通知等建議使用非模態彈框。常見的非模態彈窗有提示欄、snackbar等。

越來越多的用戶難以集中注意力閱讀網頁，而彈框這種特殊的方式可以快速吸引用戶的注意，幫助傳遞網站的核心信息；

極簡主義時的網站設計最是賞心悅目。如果你在保證網站界面的簡潔的同時多給用戶提供一些相關信息，彈框設計就是一個不錯的選擇；

（一家企業營銷公司）對彈窗設計能否幫助提高網站轉化率進行了相關調查研究。研究結果發現，使用彈框設計平均可以帶來3%的轉化率，而如果彈框設計得非常優秀，網站的轉化率甚至可以達到9%。

1.不要為了使用彈框而使用彈框，如果你用一個毫無意義的彈框打斷了用戶的正常瀏覽，他們可能會直接退出離開；

2. 彈框的設計應與當前頁面上的其他元素保持一致（比如風格、配色等）；

3. 確保彈框是可交互、有響應的；

4. 彈框的文本應簡明扼要；

5. 不要在彈框的CTA按鈕中使用"是/否"式的生硬文案，除非你的品牌特質本就如此。還有，如果彈框包含兩個CTA按鈕，最好以正面積極的方式呈現出來，且應有所偏向（你希望用戶點擊哪一個按鈕）；

6. 如果你想通過彈框收集用戶聯絡信息，最好只讓用戶填寫"郵件地址"；

7. 確保彈框的內容與當前頁面內容是相關的；

8. 盡量避免在首頁上就使用彈框，給用戶一些緩沖適應的時間。當然，這也有例外，諸如隱私政策這樣的彈框出現在首頁是被允許的；

9. 如果你準備在移動端設計彈框，記住：不要尺寸超大的模態彈框，不要在首頁設置彈框；

10. PC端和移動端的彈框并一定要完全一樣，你可以進行針對性地調整；

11. 讓彈框退出更加簡單，比如用戶點擊彈框外區域即可退出，或是在彈框的右上方放置一個醒目的"×"按鈕；

12. 正確把握彈框出現的時機，比如在用戶準備退出之前彈出；

13. 設置彈框出現的頻率，避免用戶在每次瀏覽、每個頁面都重復看見彈框；

14. 將彈框放在正確的位置；

15. 如果你想要讓彈框足夠顯眼（首先考慮用戶的接受程度），可以將它放在屏幕的正中間；

16. 如果你想要通過彈框傳遞促銷優惠活動的相關信息，不妨將它設置成固定的；

17. 如果你想要吸引在網站上隨意瀏覽的用戶采取行動，可以將彈框放在側邊；

18. 注意受眾細分，提供定制化的彈框消息。