編輯導(dǎo)讀：要進(jìn)行用戶認(rèn)知能力和系統(tǒng)的反饋，彈窗是最經(jīng)常用到的組件之一。而彈窗如何設(shè)計(jì)，既能讓用戶體會到便捷智能，又能方便統(tǒng)計(jì)數(shù)據(jù)？本文作者將以B端產(chǎn)品為例，從操作性和提示性兩方面對彈窗展開分析，希望對你有幫助。

我們常說的用戶的認(rèn)知能力與系統(tǒng)的反饋，這里的反饋很多時(shí)候會用到彈窗組件，包括強(qiáng)提醒和弱提醒。

有時(shí)候一個復(fù)雜的場景需要拆分，我們便會對一個頁面進(jìn)行優(yōu)化，把一些功能通過彈窗形式來展示；例如：個人信息頁面，包含很多分組，主界面是分組的集合，每個分組通過彈窗打開來維護(hù)；這樣可以把復(fù)雜的表單簡化，分段維護(hù)。

交互設(shè)計(jì)可以簡單理解為把復(fù)雜轉(zhuǎn)移給系統(tǒng)，把簡單留給用戶，讓用戶更多的感受便捷化、智能化。

類似的情況還有很多，下面我會從操作性和提示性兩方面來聊聊B端產(chǎn)品中的彈窗。

一、操作性彈窗

操作性彈窗主要是一些表單類、配置類界面，例如新增、導(dǎo)入、設(shè)置等。

有些人可能說新增可以設(shè)計(jì)成標(biāo)簽頁形式，作為獨(dú)立的頁面存在，不過這里是講彈窗，所以暫不考慮這種情況；啰嗦一句，如果是頁簽形式，新增提交后，頁面要消失，并且要把值傳給父級頁面。

比較常見的是彈窗形式，新增提交后，彈窗消失，值傳給父級并自動刷新頁面。

1. 簡單場景

表單輸入項(xiàng)不多，或者頁面內(nèi)容不多的情況，可以看成簡單場景；一個彈窗頁面只需要把一個功能完成好，沒有太多關(guān)聯(lián)性的操作，例如輸入內(nèi)容不多的新增彈窗。

另外類似于批量查詢、導(dǎo)入這類操作，彈窗中還需要再彈個彈窗去執(zhí)行導(dǎo)入模板的操作，這種情況還是可以歸于簡單場景。

小結(jié)：簡單場景差不多就是表單內(nèi)容不多、功能單一、業(yè)務(wù)簡單的操作性彈窗。

2. 復(fù)雜場景

表單輸入內(nèi)容很多需要分組，或者有很多需要關(guān)聯(lián)的操作，可以看成是復(fù)雜場景。

要么是一個主體彈窗，包含很多再彈開的彈窗。

如下圖所示：

或者是就在一個主體彈窗內(nèi)，通過分組、TAB、分步等來優(yōu)化復(fù)雜業(yè)務(wù)。

1）彈窗TAB

這里的TAB不是指頁簽，而是在彈窗內(nèi)部用TAB進(jìn)行分組。以前設(shè)計(jì)CRM系統(tǒng)時(shí)，新增會員信息部分就采用的這種方式。

其實(shí)也不代表這種方式有多好，主要是技術(shù)上當(dāng)時(shí)彈窗尺寸需要固定，寫成公共樣式，有的內(nèi)容很多，有的內(nèi)容很少，為了兼容多種情況，才考慮這種TAB分組。

如下圖所示：

這里有個注意點(diǎn)，就是必填字段問題，由于字段信息都影藏到每個TAB標(biāo)簽中，不能一眼看到哪些字段是必填，以及必填未輸入時(shí)如何提醒，我以前是設(shè)計(jì)成小三角放在標(biāo)題右頂部。

如下圖所示：

當(dāng)影藏的TAB標(biāo)簽中有必填字段未填或者其他校驗(yàn)信息提示時(shí)，可以采用紅標(biāo)方式來提醒用戶，當(dāng)用戶切換到紅標(biāo)TAB時(shí)，即可查看彈窗無法提交的原因；問題全部解決后，紅標(biāo)才會消失，當(dāng)前TAB問題則可以直接看到。

2）分組彈窗

在彈窗內(nèi)將字段信息全部展開，但是其中一部分字段又屬于同一類型的，這時(shí)可以采用分組信息來區(qū)分；分組彈窗可以將字段信息條理化，便于用戶輸入信息，可以理解為提高了用戶的認(rèn)知能力。

字段信息可以全部順排，也可以按數(shù)量橫向排列，例如一排擺2個字段，需要根據(jù)整體界面結(jié)構(gòu)來設(shè)計(jì)；另外還需要考慮下系統(tǒng)反饋時(shí)的展示方式，例如是放在信息框右側(cè)、底部、浮層提示等。

如下圖所示：

3）分步彈窗

在彈窗內(nèi)部將字段信息按先后順序分開，這種就叫分步彈窗，這種設(shè)計(jì)有個要點(diǎn)，就是第二步操作的數(shù)據(jù)需要第一步來做支撐；如果不完成第二步，無法直接從第一步到第三步。

例如我之前設(shè)計(jì)的命題系統(tǒng)，一般是要先有大題，才能設(shè)計(jì)小題。

如下圖所示：

可能有人會說，如果字段前后沒有關(guān)聯(lián)，是不是就不能用分步彈窗了，一般WEB端是采用分組方式，移動端可以按照分步來；但是一般都不是必填的，用戶可以后面有興趣時(shí)再去補(bǔ)充。

例如注冊一些APP后，需要選擇一些初始設(shè)置，以及填寫個人資料，不過都可以不填直接跳過。

二、提示性彈窗

為了讓用戶可以更好地使用產(chǎn)品，需要產(chǎn)品有很好的反饋能力，本次主要說的就是系統(tǒng)的反饋了，也就是提示性彈窗——我們在對系統(tǒng)發(fā)出指令后，都希望系統(tǒng)能給我們正確的反饋，好知道自己做的對與不對，以及如何進(jìn)行下一步操作等等。

下面我將從三個方面來聊聊提示性彈窗，即弱提醒、強(qiáng)提醒、二次確認(rèn)。

1.?弱提醒彈窗

從字面上，我們可以得知，這種彈窗對用戶的打擾不大，只是做到提醒和告知，比如用戶操作某個功能后，系統(tǒng)將結(jié)果反饋給用戶，常見的就是新建成功、刪除成功等。

不過這里要區(qū)分下，用戶輸入指令給計(jì)算機(jī)后，計(jì)算機(jī)運(yùn)算后得出結(jié)果并將結(jié)果反饋給用戶，這種可以稱為toast提示。

用戶一些簡單的鼠標(biāo)操作，例如滑過、點(diǎn)擊、懸停等，系統(tǒng)在前臺即時(shí)給出一些反饋；這種可以理解為廣義的彈窗，其實(shí)就是一些浮層，我們可以稱為tips提示。

1）toast提示

用戶點(diǎn)擊新建按鈕，系統(tǒng)彈出新建彈窗，當(dāng)輸入必填字段并確定提交后，系統(tǒng)會以toast形式提示用戶，該新建操作成功；例如“新建成功”，該彈窗停留片刻后便會自動消失，同時(shí)新建彈窗消失，并且會刷新列表并新增一條數(shù)據(jù)。

以上便是我們常見的新建操作流程，其他操作也是類似的，例如修改和刪除等。

這種提示一般會停留個幾秒便會自動消失，并不需要用戶進(jìn)行強(qiáng)確認(rèn)，用戶是不是真的知道了，系統(tǒng)不會去管了。

如下圖所示：

2）tips提示

用戶將鼠標(biāo)懸停在輸入字段右側(cè)的問號圖標(biāo)上，系統(tǒng)會將字段輸入說明以tips形式告知用戶，鼠標(biāo)滑出問號圖標(biāo)的感應(yīng)區(qū)域后，該浮層提示會消失，再次懸停則會再次出現(xiàn)。

如下圖所示：

另外在導(dǎo)航菜單上，如果文字太多，會將多的文字以省略號形式展現(xiàn)，當(dāng)鼠標(biāo)懸停在文字上時(shí)，同樣會有tips提示出現(xiàn)，展示完整的文字信息。

正常的方式還是需要精簡導(dǎo)航菜單文字，這種設(shè)計(jì)方式只是用來補(bǔ)救糟糕的用戶體驗(yàn)的。

還有一個可能用到的地方就是TAB文字了，TAB頁簽一般是會給一個固定寬度的，文字太多，也是需要用省略號，同理鼠標(biāo)懸停時(shí)可以看到tips提示的完整文字信息。

2.?強(qiáng)提醒彈窗

當(dāng)系統(tǒng)給用戶反饋后，并且需要強(qiáng)制用戶確認(rèn)時(shí)，就是我們要說的強(qiáng)提醒彈窗了。

一些比較重要的通知，例如：系統(tǒng)版本過低某些功能不支持、用戶的某些操作會造成一些什么后果等。

一些比較重要的反饋并且需要確保用戶已經(jīng)知道的場景下，我們就可以使用強(qiáng)提醒反饋，如果用戶不去響應(yīng)反饋，系統(tǒng)不會讓用戶進(jìn)行其他操作，所以我們叫做強(qiáng)提醒彈窗。

通常的做法是給一個用戶反饋的按鈕，例如：確定、知道了等，用戶點(diǎn)擊該按鈕，該提醒彈窗則會消失，這里對于反饋的文字和按鈕可以體現(xiàn)出情感化設(shè)計(jì)，可以安慰用戶被強(qiáng)制操作后的失落情緒。

如下圖所示：

還有種強(qiáng)提醒是需要輸入數(shù)據(jù)的，比如：審批同意時(shí)，審批人需要確定一個時(shí)間范圍，這時(shí)系統(tǒng)便會強(qiáng)提醒用戶輸入一個結(jié)束日期，當(dāng)然這只是一種設(shè)計(jì)方式；也可以把這個結(jié)束日期字段放到審批界面去，在做審批同意操作時(shí)作為必填字段校驗(yàn)。

3.?二次確認(rèn)彈窗

一般用戶的某些不可逆操作，在操作時(shí)需要讓用戶二次確認(rèn)；如果用戶還是要繼續(xù)操作，則系統(tǒng)執(zhí)行該操作，如果用戶取消，則關(guān)閉該操作。

二次確認(rèn)彈窗主要是為了避免用戶誤操作，造成無法挽回的損失，所以一些不可逆的操作進(jìn)行時(shí)，需要用戶進(jìn)行二次確認(rèn)；同時(shí)彈窗的文案也能提醒用戶當(dāng)前正在進(jìn)行某些不可逆的操作，想清楚再決定，給用戶一次謹(jǐn)慎思考的機(jī)會。

如下圖所示：

二次確認(rèn)比較經(jīng)典的就是用于刪除操作時(shí)，因?yàn)閯h除后該數(shù)據(jù)就徹底找不到了，只能重新建一條一樣的數(shù)據(jù)；如果是通過上游傳過來的數(shù)據(jù)，本系統(tǒng)可能還需要控制權(quán)限，只有特定權(quán)限的用戶可以刪除。有時(shí)候?yàn)榱吮苊鈹?shù)據(jù)丟失，也會有軟硬刪除之分。

系統(tǒng)刪除時(shí)，只是放到回收站或者其他特定地方，這種叫軟刪除；當(dāng)清空回收站時(shí)，就真的不再存儲該數(shù)據(jù)了，這種就叫硬刪除。

有些系統(tǒng)可能沒有刪除功能，根據(jù)業(yè)務(wù)場景，在滿足特定條件后系統(tǒng)自動批處理刪除掉數(shù)據(jù)。

三、總結(jié)

彈窗可以用來操作數(shù)據(jù)，也可以用來反饋，具體如何使用，需要結(jié)合業(yè)務(wù)場景來判斷。

B端產(chǎn)品需要有良好的容錯、防錯、智能屬性，以前更多時(shí)候是為了遷就系統(tǒng)的限制，設(shè)計(jì)了一些蹩腳的體驗(yàn)；不過也正是有限制，才能更好地發(fā)揮出交互設(shè)計(jì)師的價(jià)值。

我們需要去平衡商業(yè)價(jià)值與用戶價(jià)值，同時(shí)更要考慮系統(tǒng)的技術(shù)限制，最終形成更好的用戶體驗(yàn)方案，后期又通過用戶反饋去迭代產(chǎn)品，不斷完善產(chǎn)品的體驗(yàn)感。

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

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