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

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

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

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

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

一、「彈框」大家族

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

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

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

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

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

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

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

兩者的優(yōu)缺點見下表：

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

1.2 「彈框」的家族成員戶

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

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

具體的對比，見下表：

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

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

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

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

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

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

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

如下圖所示（圖片來源：Material Design Guidelines）

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

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

2.1 警告類 對話框

老大：警告對話框，代號“感嘆號”。

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

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

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

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

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

老二：確認(rèn)對話框，代號“問號”。

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

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

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

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

3.3 告知類 對話框

老三：告知對話框，也叫「提示對話框」，代號“句號”。

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

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

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

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

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

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

好動漂亮口才好。主要針對于分支流程，因為用戶的需要、后臺的需要、運(yùn)營的需要，而希望用戶去完成的一系列任務(wù)。具有4項基本能力：

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

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

3.5 輸入類 對話框

老五：輸入對話框，代號“冒號”。

愛好寫字記錄。對于一些沉浸式或者簡易型的任務(wù)視圖，需要做一些簡單的信息錄入，假如跳頁又過于繁瑣，這時可采用輸入對話框。一般使用較少，因為手機(jī)空間本來就有限，對話框空間更小，不方便輸入。它具有2項基本能力：

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

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

3.6 全屏類 對話框

老六：全屏對話框，代號“省略號”。

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

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

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

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

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

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

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

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

每一類對話框擁有的場景能力，見下圖：

四、「場景歸類」的實際意義

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

具體的使用原則有：

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

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

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

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

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

而這里，我們從另一個視角——「使用場景」將對話框再次定義。

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

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

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

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

參考文獻(xiàn)：

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

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

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