彈窗，對很多人都並不陌生，無論是網頁設計還是APP設計，我們經常都會看到它的身影。雖然彈窗設計一直被評為「史上最糟糕的設計體驗」，但不可否認它對網站傳遞品牌、產品/服務、活動等的貢獻。如何利用彈窗設計提高網站的轉化?這就需要看設計師如何布局彈窗設計，讓它不影響網站用戶體驗的前提下，讓用戶更容易接受並操作。

網頁設計技巧

為什麼說彈窗設計是「史上最糟糕的用戶體驗」?

彈窗設計是網站交互與用戶操作的核心樞紐，也是用戶處理「即使任務」的重要載體，但由於它的出現會中斷用戶當前操作，容易引起用戶對此的不滿，因此彈窗設計也被戲稱為「史上最糟糕的用戶體驗」。

雖然彈窗設計的類型有很多，但從交互形式上的區分大致可分為兩種：模態彈窗和非模態彈窗。

· 模態彈窗：常見種類主要對話框(Dialog)，警示框(Alter)，浮層(Popover/Popup)和操作欄(Actionbar)等。由於它具有需要即時處理的特性，因此層級往往會比較高，也比較容易吸引用戶的注意，同時也會降低用戶的操作體驗。

· 非模態彈窗：常見的種類有Hud/Toast，提示欄和Snackbar等。非模態彈窗屬於一種輕量級的反饋機制，從出現到停留，再到消失的時間都非常短暫，甚至短到用戶幾乎不需要對它做出反映，因此從特徵上，非模態彈窗與模特彈窗可以說是截然不同的。

網頁設計技巧

彈窗設計的基本原則有哪些?

如果你不想你的彈窗影響用戶的操作，但同時又需要彈窗幫你與用戶實現有效通話，那麼你的彈窗設計必須設計得恰到好處，讓它幫用戶快速地實現目標。

彈窗設計基本原則一：減少干擾

由於突然出現的彈窗會強迫用戶停止目前的操作，轉而專註彈窗的內容，因此如果正常情況下，盡量減少使用彈窗，以免引起用戶的反感。

彈窗設計基本原則二：使用用戶熟悉的語言

彈窗應該盡量使用用戶熟悉的語言，而不是系統特有的專有名詞。注意內容細節要清晰，如果彈窗是讓用戶刪除某些條目，應全部列出來。另外，語氣上應使用表述清晰的問題或陳述，盡量避免使用含有歉意、模稜兩可或反問式。

彈窗設計原則三：講究極簡

別嘗試將太多內容擠在彈窗內，彈窗的界面應保持乾淨和簡約，同時彈窗所提供的所有信息應對用戶有價值並與之相關。

彈窗設計原則四：選擇合適的彈窗種類

彈窗大致分為兩大類，一類是吸引用戶關注，強制用戶與之交互後才能繼續的模態彈窗。這類彈窗一般只在特別重要的交互操作中才須使用，如刪除帳戶，同意協議等，其它情況下使用，需要考慮它對用戶體驗的影響。

另一類是非模態彈窗，通常用戶點擊或輕觸周圍便可關閉。這類彈窗對用戶體驗的影響相對較少，因此也是最常使用的彈窗類型。

彈窗設計原則五：視覺一致性

為了避免影響用戶的正常操作，彈窗出現時頁面背景通常會稍微變暗，一來可以讓用戶的注意力轉移到彈窗上，二來讓用戶知道後面的內容是不可用的。但調節背景明暗度是需要注意，太暗會讓用戶沒法看清背景內容，太淺則會讓用戶誤以為頁面仍可繼續操作，甚至無法將視線聚焦在彈窗上。

另外彈窗應提供關閉按鈕，同時避免在彈窗內啟動小彈窗，避免增加網站操作的複雜性。

網頁設計技巧

如何利用彈窗設計提高網站的轉化?

雖然彈窗會影響網站的用戶體驗，但它對防止用戶流失、促進商品與內容轉化等都起到積極作用。當然，要真正留住用戶更多地依靠產品內容本身的質量與吸引力，那具體要怎樣做呢?

● 利益引誘：通過福利發放、商品優惠等利益刺激手段，吸引用戶繼續完成對內容/商品的消費，從而降低用戶流失。

○ 操作警告：提醒用戶退出頁面可能帶來的影響和後果，讓用戶判斷當前的退出是否正確，同時運用一些「挑釁」得手段，儘可能降低用戶流失的風險。

● 增加說服力：圍繞商品和內容的性價比、口碑、受歡迎程度等進行展示說明，以此證明商品的質量與真實性，吸引用戶的了解。

○ 巧妙的頁面設計：主要通過視覺上的設計手段、掩眼法阻止用戶流失。

● 引導至其他頁面：當用戶想退出時，不妨轉移方向將用戶引導到她感興趣的地方，這同樣是阻止用戶流失的好方法。

網頁設計技巧

既然現在還有那麼多網頁設計和APP設計都使用彈窗，那證明彈窗的確有它的一定價值。當然，要想彈窗的價值發揮到最大，就必須以「用戶體驗」為主，考慮怎樣設計彈窗最適合用戶，以及方便他們操作，而這也不是什麼難事，只要多參考其他彈窗設計，找用戶做相關測試便可。