了解一下「對(duì)話框」在彈框中是什么定位；看多了「控件形式」，我們從「使用場(chǎng)景」角度去思考「對(duì)話框」；類比「標(biāo)點(diǎn)」，通過(guò)語(yǔ)氣判斷「對(duì)話框」具體的場(chǎng)景應(yīng)用本文從介紹彈框開(kāi)始；主要整理了當(dāng)前主流APP使用的各種「對(duì)話框」，根據(jù)使用場(chǎng)景對(duì)其歸類，分成六大類，每一類場(chǎng)景用一種標(biāo)點(diǎn)符號(hào)作為代號(hào)；最后總結(jié)了對(duì)應(yīng)場(chǎng)景的對(duì)話框模板。

對(duì)話框是我們平時(shí)最常用、接觸最頻繁的控件之一。微信給朋友發(fā)送一篇文章，會(huì)有一個(gè)「發(fā)送確認(rèn)」的對(duì)話框；支付寶在支付過(guò)程中，會(huì)有一個(gè)「確認(rèn)付款」的對(duì)話框；iOS中的寫(xiě)新郵件視圖也是一個(gè)對(duì)話框。

對(duì)話框作為一個(gè)豐富程度僅次于父級(jí)頁(yè)面視圖的容器，極大地方便了我們的體驗(yàn)，免去了我們離開(kāi)當(dāng)前頁(yè)面去執(zhí)行任務(wù)的麻煩。雖然說(shuō)，對(duì)話框會(huì)打斷我們正常的流程，原則上需要慎用，但是，我覺(jué)得只要不濫用、用對(duì)了場(chǎng)景，它就是合適的。

下面，我們就在茫茫應(yīng)用大海中，試圖找尋一下「對(duì)話框」的足跡。在此之前，我們需要先了解一下什么是對(duì)話框。

「對(duì)話框」作為「彈框」大家族中的一員，要理解對(duì)話框，首先需要了解整個(gè)家族和它們的成員。

一、「彈框」大家族

說(shuō)明：這部分主要介紹定義、作用、類型、優(yōu)缺點(diǎn)、主要區(qū)別、總原則。

1.1 理解「彈框」和「模態(tài)」

「彈框」是指在原「父級(jí)視圖」層級(jí)之上彈出的，用于信息反饋、任務(wù)發(fā)布的一個(gè)插入式交互控件。

「模態(tài)」是一種狀態(tài)，一種提供高度集中的操作環(huán)境的狀態(tài)。

彈框分成「模態(tài)」和「非模態(tài)」兩個(gè)小家族，模態(tài)家族的人比較強(qiáng)硬，而非模態(tài)家族的人相對(duì)溫柔一點(diǎn)。兩家的主要區(qū)別：是否強(qiáng)制用戶對(duì)其進(jìn)行回應(yīng)。

模態(tài)彈框：彈出時(shí)父級(jí)視圖的操作被中斷，用戶需要首先解決彈框中的任務(wù)或者取消返回，才能去做其他事情。

非模態(tài)彈框：彈出時(shí)不會(huì)中斷其他頁(yè)面的功能，通常在超時(shí)或用戶進(jìn)行任意點(diǎn)擊操作之后自動(dòng)消失。

兩者的優(yōu)缺點(diǎn)見(jiàn)下表：

彈框的存在，可以讓用戶立即有效聚焦于當(dāng)前最緊急的信息；也可以讓用戶在不用離開(kāi)當(dāng)前頁(yè)面的前提下，完成一些輕量的任務(wù)。如淘寶中選擇商品詳情的視圖，就提供了模態(tài)化的體驗(yàn)，讓用戶能更專注于完成視圖中的任務(wù)。

1.2 「彈框」的家族成員戶

「彈框」家族共有7戶人家，其中既有「模態(tài)」家族的，也有「非模態(tài)」家族的，它們分別是：

1. 對(duì)話框-Dialog：Android的定義。涉及重要或有風(fēng)險(xiǎn)的操作，一般在屏幕中間位置，需用戶決策。
2. 警告框-Alert：iOS的定義。內(nèi)容同「對(duì)話框」
3. 動(dòng)作欄-Action bar：對(duì)話框加強(qiáng)版，多個(gè)功能按鈕，展示形式多變。一般從底部出現(xiàn)，用于選擇。
4. 浮層-Popup：界面某一區(qū)域浮出的半透明的臨時(shí)視圖，可展示多個(gè)選項(xiàng)，可出現(xiàn)在屏幕任何位置。如，微信的+浮層。用于選擇，更具指向性。
5. Toast：Android的非模態(tài)彈框。告知用戶操作結(jié)果或狀態(tài)變更，是一個(gè)文本形式消息的膠囊提示框，可在屏幕任何位置出現(xiàn)，不可操作。
6. HUD：iOS的非模態(tài)彈框。提供輕量級(jí)反饋，一般居中，以文字+圖標(biāo)形式出現(xiàn)，不可操作。Snackbar：Android的非模態(tài)彈框。針對(duì)操作的輕量反饋機(jī)制，位于手機(jī)屏幕底部，一般以文本和按鈕（可選）的形式出現(xiàn)。

具體的對(duì)比，見(jiàn)下表：

整個(gè)家族成員的關(guān)系和定位見(jiàn)下圖，每一種彈框的形式位置都不同，它們對(duì)用戶的干擾也不同。

在熟悉了「彈框」大家族之后，我們來(lái)認(rèn)識(shí)一下「對(duì)話框」這一戶人家的情況。

二、「對(duì)話框」是個(gè)強(qiáng)硬戶

「對(duì)話框」是在原「父級(jí)視圖」層級(jí)之上彈出的，需要強(qiáng)制用戶對(duì)其作出回應(yīng)的交互控件。作為模態(tài)家族的成員戶，對(duì)話框帶有該家族的遺傳密碼：「天生脾氣暴不好惹」。

“對(duì)話框”是其在Android平臺(tái)的大名，在iOS區(qū)行走江湖時(shí)，它又叫“警告框”，我們統(tǒng)一稱它為「對(duì)話框」。

一個(gè)標(biāo)準(zhǔn)的對(duì)話框有5大構(gòu)成要素：

1. 容器；
2. 標(biāo)題（可選）；
3. 文本；
4. 選項(xiàng)；
5. 遮罩。

如下圖所示（圖片來(lái)源：Material Design Guidelines）

「對(duì)話框」這一戶共有6名主要家庭成員，他們分別是：

每一名家族成員性格不同，但是它們都有一個(gè)共同的使命：守護(hù)自己的家園。為了應(yīng)對(duì)各種突發(fā)情況，它們也在原來(lái)的基礎(chǔ)上，發(fā)展出了各種不同的能力。

2.1 警告類 對(duì)話框

老大：警告對(duì)話框，代號(hào)“感嘆號(hào)”。

感情比較豐富。一般在發(fā)生錯(cuò)誤、問(wèn)題、安全等緊急重要或有無(wú)法挽回的風(fēng)險(xiǎn)時(shí)出現(xiàn)，強(qiáng)制打斷用戶流程。具有5項(xiàng)基本能力：

1. 信息沖突警告：信息內(nèi)容有重復(fù)或沖突。比如，手機(jī)重復(fù)注冊(cè)、時(shí)間不一致、重復(fù)領(lǐng)取優(yōu)惠券、重復(fù)繳納賬單等沖突類型。
2. 安全風(fēng)險(xiǎn)警告：出現(xiàn)賬戶、生命、財(cái)產(chǎn)等安全問(wèn)題，或者操作后將產(chǎn)生無(wú)法挽回結(jié)果，比如，賬號(hào)被盜風(fēng)險(xiǎn)、資金被刷風(fēng)險(xiǎn)、受傷風(fēng)險(xiǎn)等。
3. 連接有誤警告：客觀因素造成的連接失敗，包括網(wǎng)絡(luò)、服務(wù)器有問(wèn)題。
4. 操作錯(cuò)誤警告：「用戶方」主觀造成的操作錯(cuò)誤，包括數(shù)值空缺直接提交、操作頻繁，權(quán)限不足等。
5. 業(yè)務(wù)問(wèn)題警告：「產(chǎn)品方」造成的業(yè)務(wù)問(wèn)題，比如，產(chǎn)品下架，產(chǎn)品停止運(yùn)營(yíng)的緊急通知等。

以上能力，按照「信息-風(fēng)險(xiǎn)-連接-操作-業(yè)務(wù)」組織，是根據(jù)人的認(rèn)知過(guò)程「理解」-「興趣」-「行動(dòng)」的邏輯順序。

具體應(yīng)用場(chǎng)景如下：

3.2 確認(rèn)類 對(duì)話框

老二：確認(rèn)對(duì)話框，代號(hào)“問(wèn)號(hào)”。

細(xì)心思慮周全?？紤]到存在人為錯(cuò)誤或誤操作，而給予用戶第二次決策機(jī)會(huì)，提供反悔的余地。具有5項(xiàng)基本能力：

1. 核對(duì)信息正確：保證信息的正確性。如核對(duì)金額、家庭地址。
2. 確認(rèn)身份授權(quán)：保證信息的合法性。如進(jìn)行指紋驗(yàn)證，三方授權(quán)。
3. 確認(rèn)規(guī)則后續(xù)：保證用戶的知情權(quán)。如進(jìn)入直播后只能觀看不能評(píng)論，是否繼續(xù)；即將前往第三方；后續(xù)無(wú)法修改，不可取消，是否往下。PS：跟「功能告知」的區(qū)別：這個(gè)是動(dòng)態(tài)的、流程的，并且有進(jìn)一步操作。如，規(guī)則滿30元才能使用，是否繼續(xù)往下。
4. 確認(rèn)選擇條目：保證用戶的選擇權(quán)。如選擇男女性別，支付方式等。
5. 確認(rèn)允許操作：防止用戶的誤操作。如允許藍(lán)牙共享照片，確認(rèn)購(gòu)買(mǎi)，確認(rèn)刪除，確認(rèn)離開(kāi)頁(yè)面等。

以上按照「從信息到操作」的方式組織，信息既有正確性，也有合法性；有單條信息的確認(rèn)，也有多條信息的選擇。

具體應(yīng)用場(chǎng)景如下：

3.3 告知類 對(duì)話框

老三：告知對(duì)話框，也叫「提示對(duì)話框」，代號(hào)“句號(hào)”。

文靜知識(shí)淵博。會(huì)幫助用戶理解新功能，發(fā)現(xiàn)有趣的點(diǎn)，掌握任務(wù)進(jìn)度、產(chǎn)品狀態(tài)、操作結(jié)果，甚至監(jiān)控協(xié)議政策調(diào)整。具有7項(xiàng)基本能力：

1. 新手幫助告知：對(duì)于首次使用的用戶，基本功能的說(shuō)明。
2. 新版功能告知：對(duì)于新版發(fā)布的功能進(jìn)行告知，如個(gè)別功能的調(diào)整，如何使用等。
3. 輔助功能告知：隱藏的、不易發(fā)現(xiàn)、趣味性的、不是很重要功能適時(shí)告知，增加趣味性。
4. 結(jié)果預(yù)測(cè)告知：對(duì)即將發(fā)生的結(jié)果提前告知，一般只是告知，沒(méi)有進(jìn)一步的行動(dòng)指引。跟「1-B_安全風(fēng)險(xiǎn)警告」相比，程度要輕，影響要小。跟「2-C_確認(rèn)規(guī)則后續(xù)」相比，“告知”程度輕，以陳述語(yǔ)氣提示不影響主流程的信息；而“確認(rèn)”程度重，強(qiáng)調(diào)對(duì)結(jié)果及主流程的影響，以提問(wèn)語(yǔ)氣詢問(wèn)是否繼續(xù)。
5. 進(jìn)度狀態(tài)告知：與「具體業(yè)務(wù)」相關(guān)，表示當(dāng)前業(yè)務(wù)的進(jìn)度、產(chǎn)品狀態(tài)的變化，如外賣(mài)訂單的狀態(tài)，電商拼單狀態(tài)、設(shè)備賬戶狀態(tài)、打車(chē)業(yè)務(wù)變化狀態(tài)。
6. 操作完成告知：與「具體業(yè)務(wù)」相關(guān)，表示操作完成后的成功或失敗告知，分成兩小類：（1）只注明事項(xiàng)，沒(méi)有引導(dǎo)行為；（2）帶有引導(dǎo)操作行為的。
7. 業(yè)務(wù)調(diào)整告知：協(xié)議政策的更新、個(gè)別業(yè)務(wù)的調(diào)整、第三方的免責(zé)聲明

按照「基礎(chǔ)功能」—「具體業(yè)務(wù)」—「政策法規(guī)」的邏輯組織順序。

具體應(yīng)用場(chǎng)景如下：

3.4 引導(dǎo)類 對(duì)話框

老四：引導(dǎo)對(duì)話框，代號(hào)“逗號(hào)”。

好動(dòng)漂亮口才好。主要針對(duì)于分支流程，因?yàn)橛脩舻男枰?、后臺(tái)的需要、運(yùn)營(yíng)的需要，而希望用戶去完成的一系列任務(wù)。具有4項(xiàng)基本能力：

1. 新手操作引導(dǎo)：基于用戶的認(rèn)知能力的不同，對(duì)于新功能、新用戶的操作引導(dǎo)。區(qū)別于前文的「3-A_新手幫助告知」，這個(gè)有具體的操作選項(xiàng)引導(dǎo)，而告知只是提醒，沒(méi)有行為引導(dǎo)。
2. 功能流程引導(dǎo)：基于后臺(tái)的業(yè)務(wù)需要，對(duì)于一些分支功能的引導(dǎo)，包括綁定手機(jī)號(hào)、身份證上傳、權(quán)限使用、信息更新、版本更新、產(chǎn)品評(píng)價(jià)等。
3. 貼心智能引導(dǎo)：給予用戶更好的體驗(yàn)，提供主要功能以外的貼心幫助，比如，自動(dòng)展示粘貼的文本，自動(dòng)記憶之前的瀏覽位置。
4. 運(yùn)營(yíng)手段引導(dǎo)：基于運(yùn)營(yíng)活動(dòng)的需要，提供附加的增值功能引導(dǎo)，比如，引導(dǎo)開(kāi)通指紋，引導(dǎo)續(xù)費(fèi)，引導(dǎo)兌換、引導(dǎo)評(píng)價(jià)、引導(dǎo)閱讀等。

具體應(yīng)用場(chǎng)景如下：

3.5 輸入類 對(duì)話框

老五：輸入對(duì)話框，代號(hào)“冒號(hào)”。

愛(ài)好寫(xiě)字記錄。對(duì)于一些沉浸式或者簡(jiǎn)易型的任務(wù)視圖，需要做一些簡(jiǎn)單的信息錄入，假如跳頁(yè)又過(guò)于繁瑣，這時(shí)可采用輸入對(duì)話框。一般使用較少，因?yàn)槭謾C(jī)空間本來(lái)就有限，對(duì)話框空間更小，不方便輸入。它具有2項(xiàng)基本能力：

1. 安全驗(yàn)證輸入：用戶身份驗(yàn)證，比如，手機(jī)號(hào)、驗(yàn)證碼、支付密碼等。
2. 文本備注輸入：文字的錄入。比如評(píng)論，付款備注等。

具體應(yīng)用場(chǎng)景如下：

3.6 全屏類 對(duì)話框

老六：全屏對(duì)話框，代號(hào)“省略號(hào)”。

愛(ài)做夢(mèng)少年。一些需要沉浸感和強(qiáng)表現(xiàn)力的簡(jiǎn)易任務(wù)可使用，從而不需要在頁(yè)面間切換，方便快捷，但應(yīng)用得比較少。具體應(yīng)用場(chǎng)景如下：

終于介紹完了「對(duì)話框」一家的6位主要成員，那它們成員之間的關(guān)系怎么樣呢？

三、「對(duì)話框」成員關(guān)系

對(duì)于6位「對(duì)話框」按照輕重緩急的排序是：

警告類 > 確認(rèn)類 > 告知類 > 引導(dǎo)類 > 輸入類 > 全屏類

根據(jù)它們的代號(hào)也可以判斷「對(duì)話框」的歸屬：感情強(qiáng)烈的屬于警告框；詢問(wèn)語(yǔ)氣的屬于確認(rèn)框；不帶情感色彩的陳述語(yǔ)氣的表示高職類；話說(shuō)了一半，有進(jìn)一步行動(dòng)的就是引導(dǎo)框；需要調(diào)用鍵盤(pán)的就是輸入框；而全屏在父級(jí)視圖上堆疊的，就剩下全屏框了。

具體的關(guān)鍵識(shí)別特征：

• 警告類：感嘆。程度最重，有無(wú)法挽回的風(fēng)險(xiǎn)。
• 確認(rèn)類：疑問(wèn)。主干任務(wù)。
• 告知類：陳述。靜態(tài)的。提示為主，無(wú)引導(dǎo)操作。
• 引導(dǎo)類：繼續(xù)。分支任務(wù)。動(dòng)態(tài)的。引導(dǎo)操作為主，適當(dāng)提示。

每一類對(duì)話框擁有的場(chǎng)景能力，見(jiàn)下圖：

四、「場(chǎng)景歸類」的實(shí)際意義

主流平臺(tái)設(shè)計(jì)指南告訴我們，模態(tài)彈框會(huì)打斷用戶當(dāng)前操作流程，所以「使用彈框要克制」?？傇瓌t是：能在界面展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框。

具體的使用原則有：

• 彈框使用盡量克制；
• 文字需要精簡(jiǎn)，使用行為召喚動(dòng)詞。
• 注意區(qū)分復(fù)雜任務(wù)和輕量任務(wù)，選擇對(duì)應(yīng)的彈框類型。
• 反饋要及時(shí)。
• 可使用引導(dǎo)幫助選擇。

也許，根據(jù)以上「彈框」的設(shè)計(jì)原則，我們就能把「對(duì)話框」設(shè)計(jì)得符合平臺(tái)規(guī)范和設(shè)計(jì)開(kāi)發(fā)需求。過(guò)程中，我們還會(huì)根據(jù)「控件樣式」來(lái)定義「對(duì)話框」的規(guī)范，比如：

• 是否有標(biāo)題？
• 是否需要換行？
• 是否多于兩個(gè)選項(xiàng)？
• 是否有圖標(biāo)？
• 是否有輸入框？

比如，以下分別是微信小程序和Ant Design中定義的對(duì)話框規(guī)范。

這樣的定義既保證了控件設(shè)計(jì)的一致性，也避免了我們重復(fù)設(shè)計(jì)，有利于開(kāi)發(fā)對(duì)同一種類型對(duì)話框的的多次調(diào)用。

而這里，我們從另一個(gè)視角——「使用場(chǎng)景」將對(duì)話框再次定義。

在設(shè)計(jì)過(guò)程中，我們都是在了解了用戶心理，明確產(chǎn)品意圖和使用場(chǎng)景的基礎(chǔ)上，展開(kāi)我們的工作?！笇?duì)話框」是我們用戶體驗(yàn)地圖的服務(wù)觸點(diǎn)之一，它們串聯(lián)起了用戶的場(chǎng)景故事；這些故事使我們的設(shè)計(jì)有源可考。根據(jù)「使用場(chǎng)景」定義，也更利于我們的設(shè)計(jì)發(fā)散思考，更符合我們“以人為本”的設(shè)計(jì)思維，保證產(chǎn)品的易用性和可理解性。

以下是對(duì)應(yīng)場(chǎng)景的對(duì)話框的樣式：

也許，當(dāng)我們下一次碰到「對(duì)話框」的問(wèn)題時(shí)，我們可以這樣思考：

1. 這里需不需要使用「對(duì)話框」，有沒(méi)有其他方式？
2. 這里的使用場(chǎng)景是什么？看語(yǔ)氣的強(qiáng)烈：是感嘆、疑問(wèn)、陳述還是鼓勵(lì)或輸入。
3. 具體又是場(chǎng)景中的哪一種情況？比如，疑問(wèn)語(yǔ)氣：是讓你核對(duì)，還是讓你選擇，抑或是讓你決策。
4. 選擇使用對(duì)應(yīng)的對(duì)話框，并放在「用戶體驗(yàn)地圖」大環(huán)境下去驗(yàn)證。

參考文獻(xiàn)：

1. 題圖：Illustration for Dialog axiata srilanka by Deilon Waijayantha @Dribbble
2. 認(rèn)識(shí)移動(dòng)端彈框——三水采田
3. 如何設(shè)計(jì)優(yōu)秀的彈框？這里有一份全面總結(jié)！——王M爭(zhēng)
4. 四種App彈窗設(shè)計(jì)：Toast、Dialog、Actionbar 和 Snackbar——@Ricky

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

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