筆者從產(chǎn)品設(shè)計、視覺設(shè)計、體驗設(shè)計角度入手，分析彈窗中的交互體驗設(shè)計。

移動互聯(lián)網(wǎng)的高速發(fā)展，使得我們手機的應(yīng)用越來越豐富。這種情況下，我們在設(shè)計app的時候不僅要考慮到功能，還需要傾注更多的心思到用戶操作體驗上。只有人性化的交互體驗設(shè)計，用戶才會長期保持使用并且喜歡上你設(shè)計產(chǎn)品。

我們今天來聊一聊產(chǎn)品交互設(shè)計之一：彈窗。

彈窗是產(chǎn)品設(shè)計中經(jīng)常會用到的一控件，彈窗的作用就是告知用戶信息，提醒用戶操作，加強用戶互動。

彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種 。

它們的區(qū)別是：模擬彈窗需要用戶回應(yīng)，否則不能繼續(xù)操作；非模擬彈窗則會自動消失，不需用戶回應(yīng)。

但我們今天從另一個角度：產(chǎn)品設(shè)計、視覺設(shè)計、體驗設(shè)計來分析該如何更好的選擇和設(shè)計彈窗。

一、產(chǎn)品設(shè)計

1. 提醒-信息確認(rèn)

有一些重要編輯的時候，需要讓用戶自行確認(rèn)，要用戶確認(rèn)過后才算生效。

例如：刪除，付款，卸載等等。

就好比我們?nèi)ャy行和機構(gòu)辦理業(yè)務(wù)，都是需要本人簽字確認(rèn)。APP產(chǎn)品的設(shè)計也是一樣，需要用戶確認(rèn)，避免用戶沒來及反應(yīng)，操作就已經(jīng)完成。

2. 提醒-信息補充

一款A(yù)PP隨著產(chǎn)品的升級和功能的完善，在運營和設(shè)計上需要通過更多的用戶信息和數(shù)據(jù)來判斷新增需求?？赡芤婚_始沒在意，但后面升級的每個設(shè)計和需求都需要精準(zhǔn)，需要更準(zhǔn)確的用戶信息。

對于這類用戶的信息不完善，產(chǎn)品也會通過彈窗的方式來對用戶的信息在進行手機和補充。

3. 提醒-信息選擇

我們生活中大部分事情都不是唯一的：有多種可能性和多種選擇。我們做產(chǎn)品設(shè)計也是，不能按開發(fā)設(shè)計者的喜好來讓用戶使用產(chǎn)品。

4. 提醒-信息告知，主動推送

用戶使用產(chǎn)品，產(chǎn)品也需要和用戶進行溝通。顯然，溝通是需要主動性的。產(chǎn)品功能更新升級，優(yōu)惠活動我們都要做好信息推送，與用戶做好互動。

二、視覺設(shè)計

1. 原生設(shè)計

這類彈窗是應(yīng)用自帶的效果，沒有經(jīng)過視覺設(shè)計師后期加工，表現(xiàn)較為簡單和簡潔；也沒有過多的情感色彩，中規(guī)中矩。

2. 氛圍設(shè)計

氛圍設(shè)計也叫情感化設(shè)計。氛圍設(shè)計的好處是代入感強，可以讓用戶深深的感受到主題氛圍。多一份用心，用戶也就多一份親近和喜愛。

例如：節(jié)日設(shè)計，氛圍對了，感覺就對了。

3. 呼應(yīng)UI主題設(shè)計

我們原生設(shè)計是自帶設(shè)計效果，比較平淡，沒有情感。但是，有些彈窗又不適合做氛圍設(shè)計，那怎么辦呢？

設(shè)計師們會和產(chǎn)品最初的UI設(shè)計做呼應(yīng)，提取產(chǎn)品的元素做統(tǒng)一。

如：提取UI設(shè)計的主色調(diào)來修飾，這樣的處理方式既不會使得太單調(diào)又能和主題相呼應(yīng)，細節(jié)和整體都能做到統(tǒng)一。

三、體驗設(shè)計

1. 干擾程度：五星

主要出現(xiàn)在屏幕中間位置和底部，一般背景會有遮罩，彈窗內(nèi)容占比屏幕區(qū)域較大。

有突發(fā)感，可分為：

1. 無連續(xù)性層級操作：回應(yīng)當(dāng)前即消失。

2. 有多層級連續(xù)性操作：需校對當(dāng)前信息是否合適，如有誤，可進行編輯更改。

優(yōu)點：提示程度高，醒目

缺點：強干擾，打斷用戶

2. 干擾程度：三星

有聯(lián)系的提醒、善意的提醒，用戶的反感較小。

就好比說我們走路，路上碰到好心人提醒。其中一位告訴我們說到達目的地還有xx公里；而另一位則告訴我們，你走錯路了。顯然要第一位的提醒對我們產(chǎn)生的干擾比較小。

1. 局部提醒

提醒面積小。能讓知道當(dāng)前操作的情況，屬于順著用戶的提醒。用戶接受度較好。

2. 氣泡彈窗

適用于首頁常規(guī)操作的多功能快捷入口。

能夠很好歸納和整理常規(guī)操作功能：有時候用戶高頻使用的快捷功能比較多，但是全部設(shè)計的核心區(qū)域又擁擠。這時候氣泡彈窗就合適了，就像一個文件夾很好起到重要的收納作用。

優(yōu)點：無需占領(lǐng)太多屏幕，平衡提醒和打擾之間的矛盾

缺點：中度干擾

3. 干擾程度：一星

完成一個任務(wù)，提交一個信息，用戶關(guān)心的操作，我們需要給用戶反饋，讓用戶獲得安全感。

優(yōu)點：提醒輕，打斷小，無需操作，自動消失

缺點：一閃而過，易忽略

四、關(guān)于關(guān)閉按鈕的設(shè)計

1. 右上角關(guān)閉

適用場景：解除強制性的操作，滿足用戶有關(guān)閉彈窗的權(quán)利。

突出彈窗內(nèi)容和引導(dǎo)按鈕操作，弱化關(guān)閉。

從體驗設(shè)計來說，我們要給用戶關(guān)閉的權(quán)利。

2. 底部關(guān)閉

適用場景：優(yōu)化，大屏單手操作，觸碰不準(zhǔn)確的痛點。

隨著手機越來越大，單手操作靈活性下降。

底部的關(guān)閉按鈕會比右上角手指的操作更輕松：底部關(guān)閉設(shè)計能很好解決右上角觸碰區(qū)域小，需要多次觸碰的麻煩。

3. 內(nèi)容區(qū)關(guān)閉

適用場景：彈窗內(nèi)容本身引導(dǎo)傾向不強，可直接設(shè)計按鈕。

用戶在接收到操作完畢反應(yīng)需要經(jīng)過四個步驟：

當(dāng)用戶做出判斷是關(guān)閉時，將關(guān)閉設(shè)計在內(nèi)容區(qū)域，可以減少尋找關(guān)閉按鈕的行為成本，快速做出反應(yīng)，將彈窗關(guān)閉。

五、小結(jié)

設(shè)計的方法和形式多種多樣，很多我們覺得不需要過多講究的產(chǎn)品，其實包含著設(shè)計者的良苦用心和精心安排。

好的設(shè)計有時候不需要很華麗，只要將人性化的操作恰到好處的安排到合適的地方就很好。

本文由 @我是廣告班 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議