編輯導(dǎo)讀：彈窗是吸引注意力的一種方式，不管是PC端還是移動(dòng)端都廣泛使用。本文作者從交互設(shè)計(jì)的角度，對(duì)彈窗進(jìn)行分析，與你分享。

過(guò)去幾周我們都在講一些非常玄學(xué)的設(shè)計(jì)理論相關(guān)內(nèi)容，這周換一下口味，我們繼續(xù)來(lái)講基礎(chǔ)控件。

不知道大家對(duì)交互設(shè)計(jì)中的控件持一個(gè)什么樣的態(tài)度，反正我自己入行的時(shí)候其實(shí)是挺“怕”這玩意的。這些東西好像都來(lái)頭不小，讓我一個(gè)不小心就犯很多體驗(yàn)錯(cuò)誤。但現(xiàn)在來(lái)看這樣的心態(tài)其實(shí)很不必要，因?yàn)楸M管控件設(shè)計(jì)有很多約定俗成的規(guī)則，但嚴(yán)格來(lái)說(shuō)控件的應(yīng)用不該講“對(duì)”和“錯(cuò)”，只講一致性與更好地貼合場(chǎng)景。面對(duì)控件時(shí)態(tài)度放松一點(diǎn)，也能讓人更好地去思考未來(lái)改進(jìn)的可能性。

另外，由于市面上已經(jīng)存在很多比較基礎(chǔ)的、移動(dòng)端場(chǎng)景下或者UI角度的彈窗文章，所以這一篇我將著重講一講PC端那種特復(fù)雜的大彈窗怎么做，內(nèi)容比較多，所以會(huì)分兩期。

一、初識(shí)彈窗

想象一下你去一家意大利餐館吃晚飯，正餐剛端上來(lái)你正吃的高興呢，一個(gè)服務(wù)生空著手走到你旁邊戳戳你：“這位客人，外面有個(gè)人叫你，你站起來(lái)跟我過(guò)去一下?！蹦悴坏貌唬ê懿磺樵傅兀和３燥?，站起來(lái)跟他走了。

——同一個(gè)吃晚飯的場(chǎng)景，假如這次服務(wù)生端著托盤(pán)走了過(guò)來(lái)，你一抬頭，他“啪”一下把托盤(pán)上的罩子打開(kāi)，盤(pán)子上放著一個(gè)小紙條，并且示意你拿起來(lái)看看。

在交互設(shè)計(jì)中，假如把全頁(yè)面的跳轉(zhuǎn)類(lèi)比成那個(gè)叫你“站起來(lái)跟我走”的服務(wù)生，彈窗就是那個(gè)端著托盤(pán)的服務(wù)生。他用一個(gè)新的任務(wù)或信息（托盤(pán)里的紙條），打斷了用戶原本的任務(wù)（吃飯），但是并沒(méi)有把用戶從桌子上拽起來(lái)，完全離開(kāi)當(dāng)前場(chǎng)景——也就是飯桌。

因此可以這么說(shuō)：網(wǎng)頁(yè)與移動(dòng)端設(shè)計(jì)中，彈窗本質(zhì)上是一種對(duì)用戶注意力的引導(dǎo)形式。它弱于全頁(yè)面跳轉(zhuǎn)、可能具有打斷性，要求用戶從原來(lái)的場(chǎng)景中抽出一部分精力來(lái)應(yīng)對(duì)它。

二、什么是彈窗？

既然彈窗是引導(dǎo)注意力的一種形式，那是不是所有引導(dǎo)注意力的控件，都能叫彈窗呢？

在PC應(yīng)用程序設(shè)計(jì)的時(shí)代，所有的任務(wù)都是在窗體或者窗口 （window）上面完成的。因此實(shí)際上不存在所謂“全頁(yè)面”和“彈窗”的差異，只有“這種窗口”和“那種窗口”的差異。比如在我的這篇文章里出現(xiàn)過(guò)的兩種“彈窗”，在windows 7中同屬于dialog box類(lèi)；而除了這種窗口（彈窗），當(dāng)時(shí)還定義了wizard、property sheet等多種不同的窗口樣式。每種窗口都有一個(gè)主要的解決問(wèn)題與標(biāo)準(zhǔn)樣式。

PC設(shè)計(jì)從應(yīng)用程序進(jìn)入網(wǎng)頁(yè)時(shí)代后，用戶不再在多個(gè)窗口之間跳來(lái)跳去，而是在一個(gè)網(wǎng)頁(yè)窗口下完成任務(wù)。因此在網(wǎng)頁(yè)狀態(tài)下，設(shè)計(jì)師模仿繼承了“窗口”的樣式與交互形式，產(chǎn)生了我們熟悉的“彈窗”。

隨著網(wǎng)頁(yè)/移動(dòng)端設(shè)計(jì)的不斷發(fā)展，我們也發(fā)現(xiàn)，其實(shí)不用完全依照應(yīng)用程序設(shè)計(jì)窗口的那一套來(lái)做彈窗或者做觸達(dá)，因此網(wǎng)頁(yè)/移動(dòng)端產(chǎn)生了很多獨(dú)有的設(shè)計(jì)樣式。這些樣式雖然起源于窗口，但更靈活多變、和傳統(tǒng)意義上的“窗口”有一些差異。

由于中文表達(dá)的含糊和不清晰，現(xiàn)在國(guó)內(nèi)設(shè)計(jì)界傾向于把這些形形色色的觸達(dá)/操作形式全部都統(tǒng)稱(chēng)為“彈窗”，但細(xì)究起來(lái)，我們甚至可以畫(huà)一張九宮格：

△你是彈窗原教旨主義者嗎？

我在這里無(wú)意于給“彈窗”這個(gè)概念正本清源，但為了下文能夠更有指向性，我們這里只把“層級(jí)高于頁(yè)面的”、“容器大概是個(gè)方形”的控件納入接下來(lái)“彈窗”的概念范圍。并且由于callout/tooltip的一些變體和menu菜單不太好區(qū)分，為了方便，這期就不講這些比較小的非模態(tài)控件了。

同時(shí)我也認(rèn)為，大家日常工作中特別是做控件的時(shí)候，可以去思考一下控件的具體定義，以防溝通起來(lái)雞同鴨講。

三、為什么彈窗？

還是承接上文那個(gè)吃飯場(chǎng)景，那個(gè)端著托盤(pán)的服務(wù)走后，你急急忙忙放下刀叉，把字條從托盤(pán)里拿出來(lái)：展開(kāi)一看發(fā)現(xiàn)上面寫(xiě)的是——

△氣不氣人？

你可能當(dāng)場(chǎng)就想跳起來(lái)大罵服務(wù)生：這點(diǎn)事情需要這時(shí)候來(lái)打擾我嗎？

同樣的道理，既然彈窗只是一種形式，那么是否選擇這種形式，必然是由其實(shí)質(zhì)內(nèi)容（也就是場(chǎng)景與任務(wù)）決定的。我基于我自己的經(jīng)驗(yàn)把彈窗的作用分成三種（當(dāng)然你也可以分得更細(xì)，比如IBM就把他們的彈窗組件分成5種）：

• 觸達(dá)彈窗：這個(gè)彈窗是由系統(tǒng)觸發(fā)的，而非用戶主動(dòng)觸發(fā)的，一般用作信息通知，可能附帶簡(jiǎn)單操作
• 信息展示彈窗：用戶主動(dòng)觸發(fā)，一般用來(lái)收納全頁(yè)面上放不下的信息詳情
• 操作彈窗：用戶主動(dòng)觸發(fā)或受用戶的操作觸發(fā)，可能用來(lái)承載復(fù)雜操作（比如表單）

在決定要設(shè)計(jì)一個(gè)彈窗時(shí)，至少要思考三個(gè)關(guān)于彈窗內(nèi)容的問(wèn)題：

• 是否急迫：假如這是一個(gè)觸達(dá)彈窗，用戶是否需要馬上處理/查看彈窗上的內(nèi)容/任務(wù)？
• 具體情境：假如這是一個(gè)操作或信息展示型彈窗，用戶在處理這個(gè)內(nèi)容/任務(wù)時(shí)，是否需要對(duì)照或查看其他內(nèi)容？這個(gè)內(nèi)容/任務(wù)是否反復(fù)發(fā)生/需要反復(fù)處理？
• 生效方式：假如這是一個(gè)操作彈窗，用戶是否需要對(duì)照自己處理的結(jié)果，再次對(duì)內(nèi)容進(jìn)行調(diào)整？

1. 是否急迫

這個(gè)問(wèn)題決定了你需要占用多少用戶注意力，是否要選擇“彈窗”作為你的觸達(dá)方式。

就像我們上面提到的，觸達(dá)彈窗不是由用戶自己觸發(fā)的，因此這個(gè)彈窗肯定不在用戶預(yù)期之內(nèi)，這意味著用戶有很大可能性不會(huì)去看這個(gè)彈窗。

對(duì)于觸達(dá)彈窗來(lái)說(shuō)，假如這件事情不那么急迫，不需要用戶馬上進(jìn)行處理、或者用戶根本處理不了，那么你可以考慮用以下方式弱化、降級(jí)觸達(dá)：

• 降低視覺(jué)音量：模態(tài)彈窗變成非模態(tài)彈窗，或者設(shè)置彈窗消失時(shí)間
• 主動(dòng)觸達(dá)降級(jí)為被動(dòng)展示：將觸達(dá)彈窗變成用戶主動(dòng)點(diǎn)擊查看

由于觸達(dá)本身是個(gè)很大的話題，我們這里不做贅述。未來(lái)講觸達(dá)的時(shí)候再細(xì)講。

2. 具體情境

對(duì)于操作或信息展示彈窗來(lái)說(shuō)，這個(gè)問(wèn)題決定我們選擇組件的層級(jí)、以及是否需要阻斷用戶和頁(yè)面其他內(nèi)容的交互（也就是模態(tài)/非模態(tài)）。

想象這么一個(gè)場(chǎng)景：假如你是一個(gè)中學(xué)老師，你正在給每個(gè)小朋友寫(xiě)期末評(píng)語(yǔ)。學(xué)校提供的寫(xiě)評(píng)語(yǔ)系統(tǒng)長(zhǎng)這樣：

你發(fā)愁了：班上有50個(gè)孩子，每個(gè)人的期末評(píng)語(yǔ)得按照他們的平時(shí)表現(xiàn)和期末成績(jī)來(lái)寫(xiě)。為了寫(xiě)這個(gè)評(píng)語(yǔ)，你得打開(kāi)期末成績(jī)excel、打開(kāi)學(xué)生檔案，再打開(kāi)百度搜索評(píng)語(yǔ)模板，一邊復(fù)制、一邊粘貼：

再來(lái)一個(gè)場(chǎng)景：假如你是一個(gè)第一天上崗的客服，用戶來(lái)找你咨詢(xún)：“這件衣服有幾個(gè)碼呀？我能穿上嗎？”

你一愣，“等等哦，我給你去查查”，然后打開(kāi)了商品鏈接一通翻找。等你找到了，關(guān)閉商品頁(yè)正準(zhǔn)備回復(fù)呢，這時(shí)候客戶也消失了。

這就叫完成任務(wù)時(shí)，需要“對(duì)照或查看”其他內(nèi)容。這種情況下假如設(shè)計(jì)一個(gè)模態(tài)彈窗，的確好像起到了“引導(dǎo)注意力、讓用戶專(zhuān)注當(dāng)前任務(wù)”的效果，但也嚴(yán)重影響了用戶完成任務(wù)的能力。對(duì)此，我們一般有以下幾種方式來(lái)解決：

• 嘗試不用彈窗，而采用側(cè)邊欄來(lái)承載信息或任務(wù)
• 使用各種形式的非模態(tài)彈窗，來(lái)讓用戶在完成任務(wù)的同時(shí)，可以自由行動(dòng)、甚至允許暫時(shí)中斷任務(wù)

比如第二個(gè)案例里，我們可以嘗試用側(cè)邊欄承載商品信息，這樣客服就不需要離開(kāi)當(dāng)前聊天頁(yè)面，而可以直接通過(guò)側(cè)邊欄獲取商品規(guī)格，直接給到顧客及時(shí)的反饋。

而在第一個(gè)案例中，也許我們可以嘗試在學(xué)生的單人信息頁(yè)上打開(kāi)側(cè)邊欄，或者做成停駐窗口（docked window）的形式。這樣即使在輸入中，用戶也可以去查閱完成任務(wù)所必要的信息，降低任務(wù)的完成難度。

這個(gè)案例之所以我們不使用側(cè)邊欄，而采用了層級(jí)高于頁(yè)面本身的面板來(lái)完成，主要還是考慮到寫(xiě)“期末評(píng)語(yǔ)”這個(gè)情景比較偏向長(zhǎng)文本輸入、一次性提交后不再支持編輯，所以相對(duì)于頁(yè)面內(nèi)輸入，面板感覺(jué)起來(lái)比較“鄭重”。這個(gè)就純屬個(gè)人習(xí)慣了。

3. 生效方式

這個(gè)問(wèn)題在操作型彈窗非常多見(jiàn)。設(shè)計(jì)師用Mac的多，不知道平時(shí)打開(kāi)系統(tǒng)偏好設(shè)置的時(shí)候，有沒(méi)有注意過(guò)不同的菜單，右下角一會(huì)有“應(yīng)用”和“復(fù)原”按鈕，一會(huì)兒又沒(méi)有。

很明顯，這兩種彈窗的生效方式（或者叫生效模式）是不同的。有提交按鈕的彈窗，在你沒(méi)有真正點(diǎn)擊“提交”之前，所有的修改都只是暫存，并沒(méi)有真正生效。而右邊這種沒(méi)有提交按鈕的彈窗，在你與彈窗內(nèi)容區(qū)交互時(shí)，就已經(jīng)即時(shí)生效了。windows給這兩種模式起了名字：前者叫延遲提交模式delate commit model，后者叫即時(shí)提交模式immediate commit model。

我們大部分在網(wǎng)頁(yè)端能見(jiàn)到的常規(guī)模態(tài)操作彈窗，都應(yīng)該采用有提交按鈕、需要再次確認(rèn)的延遲提交模式：它的潛臺(tái)詞是，你可以仔細(xì)思考一下你鍵入的內(nèi)容、選擇的選項(xiàng)，隨意修改到符合你的想法之后，再提交生效。相比起效率，這種模式更加關(guān)注準(zhǔn)確性，填錯(cuò)了可能造成一些后果。

但假如你的任務(wù)本身操作量不大，但是變更很頻繁，比起準(zhǔn)確性、更關(guān)注效率，那么就應(yīng)該思考是否可以采用非模態(tài)彈窗或者側(cè)邊欄+即時(shí)提交模式，來(lái)創(chuàng)造相對(duì)高效、輕量的體驗(yàn)。比如windows edge的這個(gè)側(cè)邊欄，雖然也是設(shè)置，但采用了非模態(tài)面板+即時(shí)生效。

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

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