彈窗/彈出框是APP或者網站與使用者互動常見的方式之一。不同的網頁彈窗和App彈框適用於不用的場景，彈窗的設計直接影響使用者體驗。不知道如何提高彈出框的使用者體驗設計？
小編從優質網站精心挑選了20例彈窗/彈出框例子，供大家尋找設計靈感。
1. 郵件訂閱彈窗/彈出框
在平時我們瀏覽網站時，通常會遇到附於頁面底部的網頁彈框設計。Weebly的彈出框設計與主題色相呼應，內容僅有文字、輸入框及CTA按鈕；簡單大方。
2. 耐克優惠折扣彈窗/彈出框
平時在移動端購物我們會看到App彈窗，在購物網站上也不例外。這些網站會通過網頁彈框設計告知訪客他們之前參觀過的產品的折扣，以促成商品的購買。
3. 閱讀推薦彈窗/彈出框
一般部落格及內容型平臺適用，通過彈窗/彈出框推薦使用者閱讀相關的文章。可以在APP彈窗/網頁彈框上提供文章標題及簡介，吸引使用者繼續閱讀，提高使用者在網站的停留時間。
4. 電子書下載彈窗/彈出框
這是一個名叫Crobook的電子書下載彈窗/彈出框設計。介面左側是簡單的手機預覽樣式，右側是下載引導及CTA按鈕。欄位較少的表單更容易完成，需要提高註冊和下載轉化率的設計師請記住這一點！
5. 購買倒數計時彈窗/彈出框
這個是一個Airpods購買倒數計時的彈窗/彈出框設計。左側的動態時間倒數計時設計，給購買者形成一種壓迫心理以促成購買。右側是產品的圖片，CTA也是藍色。這個網頁彈框設計整體簡潔大方。
6. 衝浪報名彈窗/彈出框
衝浪者的形象與目標使用者產生了強烈的共鳴，具有強烈的情感色彩。黑白照片在很多方面影響著使用者，創造了一種永恆的戲劇感。衝浪者不喜歡錯過海浪，所以CTA按鈕是Catch the wave，用衝浪者的行話設計文案，更能促成使用者的轉化。
7. 旅行文章推送彈窗/彈出框
這個彈窗除了營造一種令人驚歎的氛圍，鳥瞰圖還能讓事物看起來平易近人。在給讀者植入這樣的印象後，網頁彈框設計提示讀者有10個絕佳的旅行建議給他們。讀者潛意識可能會將這些建議與一次完美的旅行聯絡起來，相關內容在暗示讀者去旅行消費。
8. 新選單彈窗/彈出框
彈窗左側的圖片是南瓜拉麵，展示了良好的就餐環境，右側的選單字型和設計堪稱經典。目標受眾可以很好地與這個網頁彈窗設計產生共鳴，因為它包含了一個好餐館的所有元素。順便說一下，外部矩形和有限的時間是為了增加新選單的獨特性。
9. 作品重設計內容彈窗/彈出框
偏列表風的下載網頁彈窗設計，提供使用者最新APP下載版本。選擇部分設為淺灰色，使用者也能輕鬆看清選項。彈窗整體是白色，與淺灰色搭配顯得介面乾淨。
10. 使用邀請彈窗/彈出框
有點搞怪的卡通畫，非但沒有打破基本的彈窗/彈出框設計規則，還額外增加了一些趣味。如果增加一個小的擺動動畫來配合那個外星人可愛的表情，使用者一定不忍心拒絕使用。
11. 動態電商彈窗/彈出框設計
這個彈窗設計小編錄了一個GIF動畫，這樣大家就可以看到動態效果了。外觀看似簡單的網頁彈框設計，卻巧妙地利用了動效吸引使用者眼球。
12. 報價彈窗/彈出框
當然，這是所有彈窗/彈出框最簡單的一個，我把它羅列進來是因為它非常簡潔。有時候報價只是一種提供資訊的陳述，這種網頁彈框設計越簡單效果越好。
13. 右下角彈窗/彈出框
前面分享的彈窗/彈出框大多出現在螢幕正中間，這個彈窗位於網站右下角。這也是我們常見的彈窗樣式，設計特色是與網站整體色調保持一致。
14. 中文線上商城App彈窗/彈出框
這裡小編挑選了一組線上商城的會員/代金券/升級的APP彈窗設計。除了關閉按鈕，上面只有與主題相關的圖示及文字設計。
15. 優惠券彈窗/彈出框
這個App彈窗設計色彩豐富，介面非常乾淨。使用彩色背景和白底黑字作為優惠券詳情；CTA按鈕為西瓜紅。配色大膽，卻不跳躍。
16. 郵件收發彈窗/彈出框
這是一個關於郵件收信和未讀提示的彈窗/彈出框設計。整體以白色為主，郵箱的圖示色彩以經典的紅色為主，CTA也是紅色。
17. 酒店地圖彈窗/彈出框
在酒店地圖/列表結果頁面上設計社群內容。當滑鼠移到多邊形上時，該框將彈出並顯示周圍描述和關鍵字。
18. 錯誤資訊彈窗/彈出框
錯誤資訊提示框一般使用比較搶眼的色彩，例如紅色，橘紅，西瓜紅等。小編挑選的這個彈窗/彈出框就是橘紅色的，CTA按鈕也是橘紅色，更能起到提醒作用！
19. 資訊編輯彈窗/彈出框
這是一個以編輯為主的APP彈窗示例，這種彈窗在很多網站/app註冊或者資訊設定中都會遇到。整體採用冷色調，不同層次的綠色既不單調，又顯得穩重可靠。
20. 產品好評彈窗/彈出框
這是唯一一個關於產品評論的app彈窗案例。在平時我們使用APP時，也會經常遇到好評彈窗。這個例子除了提供五星進行打分之外，還有可愛的企鵝設計，讓使用者不忍拒絕。
看完這麼多精美的彈窗/彈出框設計，是不是躍躍欲試呢？如何設計一個APP/網頁彈框？下面小編以常用的Mockplus原型工具，為大家提供一個簡單快速的設計教程。
方案一：
直接開啟Mockplus軟體，在元件庫中搜尋“提示框”。提示框已有現成樣式，只需編輯文字即可完成類似錯誤/推出提示框。
方案二：
Step 1：開啟元件庫，搜尋“彈出皮膚”，並點選。
Step 2：雙擊彈出皮膚進行內容編輯，例如放入圖片和按鈕。
Step 3：樣式編輯完成後，使用觸發元件做互動即可。
PS：具體樣式可以根據自己的需要去做，小編就不再一一製作了。
教程地址：https://help.mockplus.cn/p/172
怎麼樣，看完這20個彈窗/彈出框案例是不是已經有靈感了呢？結合小編提供的教程，趕快去設計一個適合自己產品的APP彈窗或者網頁彈框吧！