從彈框到標點，關於對話框的場景化探討

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

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

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

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

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

一、「彈框」大家族

說明：這部分主要介紹定義、作用、類型、優缺點、主要區別、總原則。

1.1 理解「彈框」和「模態」

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

「模態」是一種狀態，一種提供高度集中的操作環境的狀態。

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

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

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

兩者的優缺點見下表：

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

1.2 「彈框」的家族成員戶

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

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

具體的對比，見下表：

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

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

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

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

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

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

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

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

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

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

2.1 警告類 對話框

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

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

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

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

具體應用場景如下：

3.2 確認類 對話框

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

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

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

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

具體應用場景如下：

3.3 告知類 對話框

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

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

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

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

具體應用場景如下：

3.4 引導類 對話框

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

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

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

具體應用場景如下：

3.5 輸入類 對話框

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

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

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

具體應用場景如下：

3.6 全屏類 對話框

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

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

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

三、「對話框」成員關係

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

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

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

具體的關鍵識別特徵：

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

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

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

主流平臺設計指南告訴我們，模態彈框會打斷用戶當前操作流程，所以「使用彈框要剋制」。總原則是：能在界面展示就不用彈框，能用非模態彈框的就不要用模態彈框。

具體的使用原則有：

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

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

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

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

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

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

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

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

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

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

參考文獻：

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

本文由 @Aseem 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議