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

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

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

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

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

一、「彈框」大家族

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

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

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

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

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

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

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

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

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

1.2 「彈框」的家族成員戶

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

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

具體的對比，見下表：

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

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

二、「對話框」是個強硬戶

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

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

一個標準的對話框有5大構成要素：

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

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

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

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

2.1 警告類 對話框

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

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

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

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

具體應用場景如下：

3.2 確認類 對話框

老二：確認對話框，代號“問號”。

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

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

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

具體應用場景如下：

3.3 告知類 對話框

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

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

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

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

具體應用場景如下：

3.4 引導類 對話框

老四：引導對話框，代號“逗號”。

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

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

具體應用場景如下：

3.5 輸入類 對話框

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

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

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

具體應用場景如下：

3.6 全屏類 對話框

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

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

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

三、「對話框」成員關系

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

警告類 > 確認類 > 告知類 > 引導類 > 輸入類 > 全屏類

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

具體的關鍵識別特征：

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

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

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

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

具體的使用原則有：

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

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

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

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

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

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

在設計過程中，我們都是在了解了用戶心理，明確產品意圖和使用場景的基礎上，展開我們的工作。「對話框」是我們用戶體驗地圖的服務觸點之一，它們串聯起了用戶的場景故事；這些故事使我們的設計有源可考。根據「使用場景」定義，也更利于我們的設計發(fā)散思考，更符合我們“以人為本”的設計思維，保證產品的易用性和可理解性。

以下是對應場景的對話框的樣式：

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

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

參考文獻：

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

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

題圖來自Unsplash，基于CC0協議