網(wǎng)站建設中如何利用彈窗設計提高網(wǎng)站的轉化發(fā)布者：本站     時(shí)間：2021-02-28 10:02:14

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

為什么說(shuō)彈窗設計是「史上最糟糕的用戶(hù)體驗」？

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

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

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

· 非模態(tài)彈窗：常見(jiàn)的種類(lèi)有Hud/Toast，提示欄和Snackbar等。非模態(tài)彈窗屬于一種輕量級的反饋機制，從出現到停留，再到消失的時(shí)間都非常短暫，甚至短到用戶(hù)幾乎不需要對它做出反映，因此從特征上，非模態(tài)彈窗與模特彈窗可以說(shuō)是截然不同的。

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

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

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

由于突然出現的彈窗會(huì )強迫用戶(hù)停止目前的操作，轉而專(zhuān)注彈窗的內容，因此如果正常情況下，盡量減少使用彈窗，以免引起用戶(hù)的反感。

彈窗設計基本原則二：使用用戶(hù)熟悉的語(yǔ)言

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

彈窗設計原則三：講究極簡(jiǎn)

別嘗試將太多內容擠在彈窗內，彈窗的界面應保持干凈和簡(jiǎn)約，同時(shí)彈窗所提供的所有信息應對用戶(hù)有價(jià)值并與之相關(guān)。

彈窗設計原則四：選擇合適的彈窗種類(lèi)

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

另一類(lèi)是非模態(tài)彈窗，通常用戶(hù)點(diǎn)擊或輕觸周?chē)憧申P(guān)閉。這類(lèi)彈窗對用戶(hù)體驗的影響相對較少，因此也是最常使用的彈窗類(lèi)型。

彈窗設計原則五：視覺(jué)一致性

為了避免影響用戶(hù)的正常操作，彈窗出現時(shí)頁(yè)面背景通常會(huì )稍微變暗，一來(lái)可以讓用戶(hù)的注意力轉移到彈窗上，二來(lái)讓用戶(hù)知道后面的內容是不可用的。但調節背景明暗度是需要注意，太暗會(huì )讓用戶(hù)沒(méi)法看清背景內容，太淺則會(huì )讓用戶(hù)誤以為頁(yè)面仍可繼續操作，甚至無(wú)法將視線(xiàn)聚焦在彈窗上。

另外彈窗應提供關(guān)閉按鈕，同時(shí)避免在彈窗內啟動(dòng)小彈窗，避免增加網(wǎng)站操作的復雜性。

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

● 利益引誘：通過(guò)福利發(fā)放、商品優(yōu)惠等利益刺激手段，吸引用戶(hù)繼續完成對內容/商品的消費，從而降低用戶(hù)流失。

○ 操作警告：提醒用戶(hù)退出頁(yè)面可能帶來(lái)的影響和后果，讓用戶(hù)判斷當前的退出是否正確，同時(shí)運用一些「挑釁」得手段，盡可能降低用戶(hù)流失的風(fēng)險。

● 增加說(shuō)服力：圍繞商品和內容的性?xún)r(jià)比、口碑、受歡迎程度等進(jìn)行展示說(shuō)明，以此證明商品的質(zhì)量與真實(shí)性，吸引用戶(hù)的了解。

○ 巧妙的頁(yè)面設計：主要通過(guò)視覺(jué)上的設計手段、掩眼法阻止用戶(hù)流失。

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