起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識彈出框已經被淘汰了？這是你不了解的真實情況
本文將會詳細為你分析彈出框在如今UI/UX設計當中的真實情況，并且提供一些可供參考的最佳實踐。enjoy~
網站對于每個企業而言是展現品牌的重要渠道。
當你在為你的用戶設計網站的時候，一定要控制好網站的內容量。用戶并沒有必要在塞滿屏幕的大量信息當中，費勁巴拉地去找自己想要的那一條。極簡主義風格的流行并不是沒有道理的。
有針對性地呈現內容，為品牌進行合理的適配，提供清晰且扣人心弦的視覺設計，這樣的網站是令人印象深刻的。
極簡的設計并不意味著你無法和用戶進行更多的溝通，也許你覺得當前的設計還不足以滿足你的品牌和用戶進行溝通的需求，好在還有許多方法和技巧幫你做到這一點。
彈出框就是為此而出現的。在幾年前，這種設計被作為一種不影響當前網站內容的信息呈現方式而廣泛應用，隨后又因為大量的、無節制且毫無美感的濫用，被設計師和用戶廣泛吐槽。Google 認為彈出框對于用戶體驗造成了明顯的干擾，同時，需要借助彈出框提升信息交互的設計師和開發者因此也困擾不已。
那么，這是不是意味著彈出框已經被淘汰了？并非如此。今天我們將會詳細為你分析彈出框在如今UI/UX設計當中的真實情況，并且提供一些可供參考的最佳實踐。
彈出框的設計現狀
首先我們應該聊聊彈出框的類型，正確用法。
彈出框的類型
彈出框遵循著一系列模式而存在。它會在打開網頁的時候彈出，滑入網頁，或者干脆就在網頁加載的時候就直接加載進去了。雖然有的網頁會將它置于頁面的正中間，不過也有許多設計師將它置于頁面的底部或者角落。
插頁式和覆蓋式的彈出框會覆蓋住整個屏幕，通常會出現在一打開網頁的時候，
另外一種是通知欄式的彈出框，它會緊貼在頁面的頂部或者底部，甚至是常駐式的存在。
使用彈出框的5個原因
彈出框有的時候確實令人頭疼，作為設計師你總想遠離它。但是，它依然存在于許多網頁當中，并且發揮著巨大的作用。下面的5個理由，讓設計師真正離不開它：
1. 彈出框能夠讓人集中注意力
越來越多的用戶無法集中注意力閱讀，彈出框這種打斷式的信息呈現方式，非常抓人眼球，能夠快速直接地傳遞信息。
2. 讓用戶注意到最重要的信息
彈出框讓其中所呈現的信息擁有了額外的價值，當彈出框出現的時候，其中所展現的信息擁有了超過其他信息的重要性，至少感覺上是這樣。
3. 彈出框是多用途的
如今的彈出框擁有多種多樣的玩法和呈現方式，不會將用戶推開，也不再使用廣告讓用戶頭疼不已。彈出框的觸發機制也非常的多變：
- 在進入時彈出
- 滾動到特定的位置時彈出
- 通過特定操作觸發
- 在離開時候觸發
4. 保持頁面干凈整潔
正如我之前所提到的，極簡主義的設計讓網站足夠美觀，但是想要順暢地傳遞信息，彈出框能夠作為不錯的載體，確保不會占用頁面位置，影響整體風格。
5. 提升轉化率
根據 Sumo 的研究，彈出框和轉化率之間有著清晰的關系。他們發現，彈出框讓轉化率的平均轉化速度提升了大概3%，而設計得好的彈出框能夠將轉化率提升到9%，對于許多網站而言，這個轉化率的意義是非同凡響的。
彈出框提升了網站的參與度。
移動端UI中的彈出框
值得一提的是，Google 在分析報告中并不反感移動端的彈出框，而是建議讓設計師和開發者盡可能巧妙地進行移動端彈出框的設計，降低彈出框對于用戶體驗的損害，而是盡量去提升用戶體驗。
因此，Google 將會對采用下面3種彈出框的網站予以處罰：
- 當用戶一打開首頁就彈出的彈出框
- 彈出框蓋住了幾乎全部頁面
- 彈出框廣告
明白了吧？現在，我們要聊聊彈出框的設計技巧了。
18個彈出框設計的最佳實踐
不要為了跟隨某個趨勢，展現某種設計元素而使用彈出框，它一定要是功能性的，不要浪費用戶的時間，這樣會降低用戶對你的信任。
彈出框的設計應該和網站本身保持一致，無論是風格還是素質上。
確保彈出框是可交互，有響應的。
確保彈出框中的文案是簡短而重點突出的。
不要使用被動的或者過于生硬的「是/否」式的行為召喚文案，除非你的品牌個性本就如此。如果彈出框中包含兩個 CTA，請盡量采用積極的方式來展現。
如果你在搜集用戶的聯系信息，最好只讓他們提供電子郵件地址。
確保彈出框的內容和對應的頁面保持一致。
如果可以，盡量避免在首頁上就使用彈出框。盡量讓用戶先適應所處的頁面環境。這是 Google 所允許的彈出框設計之一。
遵循 Google 對于移動端網頁的設計規則：不要有插頁式的廣告，不要設置首頁彈出框。
不要讓移動端彈出框和桌面端的完全一樣，有針對性地進行設計。
總是使用簡單統一的方式來關閉彈出框，即在右上角設置一個X關閉按鈕。
讓所有的彈出框都在恰當的時候才彈出，比如關閉頁面的時候。
設置頻率規則，確保訪客不會在每個頁面或者每次訪問的時候都會碰到彈出框。
將彈出框設置在正確的位置，根據網站的狀況和體驗的度量來進行判斷。
如果你想讓彈出框醒目，盡量讓它出現在屏幕的正中心。
如果你想推送優惠信息，可以使用頂部懸浮式的彈出框。
如果你想在用戶瀏覽的時候推送信息，彈出框盡量出現在屏幕的一側。
根據用戶類型細分來自定義彈出框信息。
結語
如果你真的希望用戶知悉一些關鍵的、重要的信息，不要吝嗇使用彈出框，你可以盡量讓彈出框體驗更好，提供更加有用的、他們需要的內容。不要害怕 A/B測試，這樣的方法會讓彈出框更加優秀。一個優質的彈出框需要你考慮很多因素，包括整體的設計，文案、位置、CTA等等。
原文作者 :?SUZANNE SCACCA?
編輯 :?陳子木
譯文地址：https://www.uisdc.com/website-pop-ups-18-rules
本文由 @陳子木 授權發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
- 目前還沒評論，等你發揮！
