編輯導(dǎo)語(yǔ)：不管是Web端還是移動(dòng)端，我們?cè)谑褂脮r(shí)經(jīng)常會(huì)看見(jiàn)彈窗類(lèi)的消息，大多為提示類(lèi)消息；彈窗對(duì)于體驗(yàn)感來(lái)說(shuō)也是非常重要的，怎么才能設(shè)計(jì)出好的彈窗？本文作者詳細(xì)介紹了B端產(chǎn)品中的彈窗設(shè)計(jì)，我們一起來(lái)看一下。

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

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

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

類(lèi)似的情況還有很多，下面我會(huì)從操作性和提示性?xún)煞矫鎭?lái)聊聊B端產(chǎn)品中的彈窗。

一、操作性彈窗

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

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

比較常見(jiàn)的是彈窗形式，新增提交后，彈窗消失，值傳給父級(jí)并自動(dòng)刷新頁(yè)面。

1. 簡(jiǎn)單場(chǎng)景

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

另外類(lèi)似于批量查詢(xún)、導(dǎo)入這類(lèi)操作，彈窗中還需要再?gòu)梻€(gè)彈窗去執(zhí)行導(dǎo)入模板的操作，這種情況還是可以歸于簡(jiǎn)單場(chǎng)景。

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

2. 復(fù)雜場(chǎng)景

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

要么是一個(gè)主體彈窗，包含很多再?gòu)楅_(kāi)的彈窗。

如下圖所示：

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

1）彈窗TAB

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

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

如下圖所示：

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

如下圖所示：

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

2）分組彈窗

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

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

如下圖所示：

3）分步彈窗

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

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

如下圖所示：

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

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

二、提示性彈窗

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

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

1.?弱提醒彈窗

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

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

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

1）toast提示

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

以上便是我們常見(jiàn)的新建操作流程，其他操作也是類(lèi)似的，例如修改和刪除等。

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

如下圖所示：

2）tips提示

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

如下圖所示：

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

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

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

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

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

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

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

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

如下圖所示：

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

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

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

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

如下圖所示：

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

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

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

三、總結(jié)

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

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

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

作者：D.cheerful，微信號(hào)：dcf8859，微信公眾號(hào)：D哥設(shè)計(jì)。

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

題圖來(lái)自 unsplash，基于 CC0 協(xié)議