瞭解一下「對話框」在彈框中是什麼定位;看多了「控件形式」,我們從「使用場景」角度去思考「對話框」;類比「標點」,通過語氣判斷「對話框」具體的場景應用本文從介紹彈框開始;主要整理了當前主流APP使用的各種「對話框」,根據使用場景對其歸類,分成六大類,每一類場景用一種標點符號作為代號;最後總結了對應場景的對話框模板。
對話框是我們平時最常用、接觸最頻繁的控件之一。微信給朋友發送一篇文章,會有一個「發送確認」的對話框;支付寶在支付過程中,會有一個「確認付款」的對話框;iOS中的寫新郵件視圖也是一個對話框。
對話框作為一個豐富程度僅次於父級頁面視圖的容器,極大地方便了我們的體驗,免去了我們離開當前頁面去執行任務的麻煩。雖然說,對話框會打斷我們正常的流程,原則上需要慎用,但是,我覺得只要不濫用、用對了場景,它就是合適的。
下面,我們就在茫茫應用大海中,試圖找尋一下「對話框」的足跡。在此之前,我們需要先了解一下什麼是對話框。
「對話框」作為「彈框」大家族中的一員,要理解對話框,首先需要了解整個家族和它們的成員。
一、「彈框」大家族
說明:這部分主要介紹定義、作用、類型、優缺點、主要區別、總原則。
1.1 理解「彈框」和「模態」
「彈框」是指在原「父級視圖」層級之上彈出的,用於信息反饋、任務發佈的一個插入式交互控件。
「模態」是一種狀態,一種提供高度集中的操作環境的狀態。
彈框分成「模態」和「非模態」兩個小家族,模態家族的人比較強硬,而非模態家族的人相對溫柔一點。兩家的主要區別:是否強制用戶對其進行迴應。
模態彈框:彈出時父級視圖的操作被中斷,用戶需要首先解決彈框中的任務或者取消返回,才能去做其他事情。
非模態彈框:彈出時不會中斷其他頁面的功能,通常在超時或用戶進行任意點擊操作之後自動消失。
兩者的優缺點見下表:
彈框的存在,可以讓用戶立即有效聚焦於當前最緊急的信息;也可以讓用戶在不用離開當前頁面的前提下,完成一些輕量的任務。如淘寶中選擇商品詳情的視圖,就提供了模態化的體驗,讓用戶能更專注於完成視圖中的任務。
1.2 「彈框」的家族成員戶
「彈框」家族共有7戶人家,其中既有「模態」家族的,也有「非模態」家族的,它們分別是:
- 對話框-Dialog:Android的定義。涉及重要或有風險的操作,一般在屏幕中間位置,需用戶決策。
- 警告框-Alert:iOS的定義。內容同「對話框」
- 動作欄-Action bar:對話框加強版,多個功能按鈕,展示形式多變。一般從底部出現,用於選擇。
- 浮層-Popup:界面某一區域浮出的半透明的臨時視圖,可展示多個選項,可出現在屏幕任何位置。如,微信的+浮層。用於選擇,更具指向性。
- Toast:Android的非模態彈框。告知用戶操作結果或狀態變更,是一個文本形式消息的膠囊提示框,可在屏幕任何位置出現,不可操作。
- HUD:iOS的非模態彈框。提供輕量級反饋,一般居中,以文字+圖標形式出現,不可操作。Snackbar:Android的非模態彈框。針對操作的輕量反饋機制,位於手機屏幕底部,一般以文本和按鈕(可選)的形式出現。
具體的對比,見下表:
整個家族成員的關係和定位見下圖,每一種彈框的形式位置都不同,它們對用戶的干擾也不同。
在熟悉了「彈框」大家族之後,我們來認識一下「對話框」這一戶人家的情況。
二、「對話框」是個強硬戶
「對話框」是在原「父級視圖」層級之上彈出的,需要強制用戶對其作出迴應的交互控件。作為模態家族的成員戶,對話框帶有該家族的遺傳密碼:「天生脾氣暴不好惹」。
“對話框”是其在Android平臺的大名,在iOS區行走江湖時,它又叫“警告框”,我們統一稱它為「對話框」。
一個標準的對話框有5大構成要素:
- 容器;
- 標題(可選);
- 文本;
- 選項;
- 遮罩。
如下圖所示(圖片來源:Material Design Guidelines)
「對話框」這一戶共有6名主要家庭成員,他們分別是:
每一名家族成員性格不同,但是它們都有一個共同的使命:守護自己的家園。為了應對各種突發情況,它們也在原來的基礎上,發展出了各種不同的能力。
2.1 警告類 對話框
老大:警告對話框,代號“感嘆號”。
感情比較豐富。一般在發生錯誤、問題、安全等緊急重要或有無法挽回的風險時出現,強制打斷用戶流程。具有5項基本能力:
- 信息衝突警告:信息內容有重複或衝突。比如,手機重複註冊、時間不一致、重複領取優惠券、重複繳納賬單等衝突類型。
- 安全風險警告:出現賬戶、生命、財產等安全問題,或者操作後將產生無法挽回結果,比如,賬號被盜風險、資金被刷風險、受傷風險等。
- 連接有誤警告:客觀因素造成的連接失敗,包括網絡、服務器有問題。
- 操作錯誤警告:「用戶方」主觀造成的操作錯誤,包括數值空缺直接提交、操作頻繁,權限不足等。
- 業務問題警告:「產品方」造成的業務問題,比如,產品下架,產品停止運營的緊急通知等。
以上能力,按照「信息-風險-連接-操作-業務」組織,是根據人的認知過程「理解」-「興趣」-「行動」的邏輯順序。
具體應用場景如下:
3.2 確認類 對話框
老二:確認對話框,代號“問號”。
細心思慮周全。考慮到存在人為錯誤或誤操作,而給予用戶第二次決策機會,提供反悔的餘地。具有5項基本能力:
- 核對信息正確:保證信息的正確性。如核對金額、家庭地址。
- 確認身份授權:保證信息的合法性。如進行指紋驗證,三方授權。
- 確認規則後續:保證用戶的知情權。如進入直播後只能觀看不能評論,是否繼續;即將前往第三方;後續無法修改,不可取消,是否往下。PS:跟「功能告知」的區別:這個是動態的、流程的,並且有進一步操作。如,規則滿30元才能使用,是否繼續往下。
- 確認選擇條目:保證用戶的選擇權。如選擇男女性別,支付方式等。
- 確認允許操作:防止用戶的誤操作。如允許藍牙共享照片,確認購買,確認刪除,確認離開頁面等。
以上按照「從信息到操作」的方式組織,信息既有正確性,也有合法性;有單條信息的確認,也有多條信息的選擇。
具體應用場景如下:
3.3 告知類 對話框
老三:告知對話框,也叫「提示對話框」,代號“句號”。
文靜知識淵博。會幫助用戶理解新功能,發現有趣的點,掌握任務進度、產品狀態、操作結果,甚至監控協議政策調整。具有7項基本能力:
- 新手幫助告知:對於首次使用的用戶,基本功能的說明。
- 新版功能告知:對於新版發佈的功能進行告知,如個別功能的調整,如何使用等。
- 輔助功能告知:隱藏的、不易發現、趣味性的、不是很重要功能適時告知,增加趣味性。
- 結果預測告知:對即將發生的結果提前告知,一般只是告知,沒有進一步的行動指引。跟「1-B_安全風險警告」相比,程度要輕,影響要小。跟「2-C_確認規則後續」相比,“告知”程度輕,以陳述語氣提示不影響主流程的信息;而“確認”程度重,強調對結果及主流程的影響,以提問語氣詢問是否繼續。
- 進度狀態告知:與「具體業務」相關,表示當前業務的進度、產品狀態的變化,如外賣訂單的狀態,電商拼單狀態、設備賬戶狀態、打車業務變化狀態。
- 操作完成告知:與「具體業務」相關,表示操作完成後的成功或失敗告知,分成兩小類:(1)只註明事項,沒有引導行為;(2)帶有引導操作行為的。
- 業務調整告知:協議政策的更新、個別業務的調整、第三方的免責聲明
按照「基礎功能」—「具體業務」—「政策法規」的邏輯組織順序。
具體應用場景如下:
3.4 引導類 對話框
老四:引導對話框,代號“逗號”。
好動漂亮口才好。主要針對於分支流程,因為用戶的需要、後臺的需要、運營的需要,而希望用戶去完成的一系列任務。具有4項基本能力:
- 新手操作引導:基於用戶的認知能力的不同,對於新功能、新用戶的操作引導。區別於前文的「3-A_新手幫助告知」,這個有具體的操作選項引導,而告知只是提醒,沒有行為引導。
- 功能流程引導:基於後臺的業務需要,對於一些分支功能的引導,包括綁定手機號、身份證上傳、權限使用、信息更新、版本更新、產品評價等。
- 貼心智能引導:給予用戶更好的體驗,提供主要功能以外的貼心幫助,比如,自動展示粘貼的文本,自動記憶之前的瀏覽位置。
- 運營手段引導:基於運營活動的需要,提供附加的增值功能引導,比如,引導開通指紋,引導續費,引導兌換、引導評價、引導閱讀等。
具體應用場景如下:
3.5 輸入類 對話框
老五:輸入對話框,代號“冒號”。
愛好寫字記錄。對於一些沉浸式或者簡易型的任務視圖,需要做一些簡單的信息錄入,假如跳頁又過於繁瑣,這時可採用輸入對話框。一般使用較少,因為手機空間本來就有限,對話框空間更小,不方便輸入。它具有2項基本能力:
- 安全驗證輸入:用戶身份驗證,比如,手機號、驗證碼、支付密碼等。
- 文本備註輸入:文字的錄入。比如評論,付款備註等。
具體應用場景如下:
3.6 全屏類 對話框
老六:全屏對話框,代號“省略號”。
愛做夢少年。一些需要沉浸感和強表現力的簡易任務可使用,從而不需要在頁面間切換,方便快捷,但應用得比較少。具體應用場景如下:
終於介紹完了「對話框」一家的6位主要成員,那它們成員之間的關係怎麼樣呢?
三、「對話框」成員關係
對於6位「對話框」按照輕重緩急的排序是:
警告類 > 確認類 > 告知類 > 引導類 > 輸入類 > 全屏類
根據它們的代號也可以判斷「對話框」的歸屬:感情強烈的屬於警告框;詢問語氣的屬於確認框;不帶情感色彩的陳述語氣的表示高職類;話說了一半,有進一步行動的就是引導框;需要調用鍵盤的就是輸入框;而全屏在父級視圖上堆疊的,就剩下全屏框了。
具體的關鍵識別特徵:
- 警告類:感嘆。程度最重,有無法挽回的風險。
- 確認類:疑問。主幹任務。
- 告知類:陳述。靜態的。提示為主,無引導操作。
- 引導類:繼續。分支任務。動態的。引導操作為主,適當提示。
每一類對話框擁有的場景能力,見下圖:
四、「場景歸類」的實際意義
主流平臺設計指南告訴我們,模態彈框會打斷用戶當前操作流程,所以「使用彈框要剋制」。總原則是:能在界面展示就不用彈框,能用非模態彈框的就不要用模態彈框。
具體的使用原則有:
- 彈框使用盡量剋制;
- 文字需要精簡,使用行為召喚動詞。
- 注意區分複雜任務和輕量任務,選擇對應的彈框類型。
- 反饋要及時。
- 可使用引導幫助選擇。
也許,根據以上「彈框」的設計原則,我們就能把「對話框」設計得符合平臺規範和設計開發需求。過程中,我們還會根據「控件樣式」來定義「對話框」的規範,比如:
- 是否有標題?
- 是否需要換行?
- 是否多於兩個選項?
- 是否有圖標?
- 是否有輸入框?
比如,以下分別是微信小程序和Ant Design中定義的對話框規範。
這樣的定義既保證了控件設計的一致性,也避免了我們重複設計,有利於開發對同一種類型對話框的的多次調用。
而這裡,我們從另一個視角——「使用場景」將對話框再次定義。
在設計過程中,我們都是在瞭解了用戶心理,明確產品意圖和使用場景的基礎上,展開我們的工作。「對話框」是我們用戶體驗地圖的服務觸點之一,它們串聯起了用戶的場景故事;這些故事使我們的設計有源可考。根據「使用場景」定義,也更利於我們的設計發散思考,更符合我們“以人為本”的設計思維,保證產品的易用性和可理解性。
以下是對應場景的對話框的樣式:
也許,當我們下一次碰到「對話框」的問題時,我們可以這樣思考:
- 這裡需不需要使用「對話框」,有沒有其他方式?
- 這裡的使用場景是什麼?看語氣的強烈:是感嘆、疑問、陳述還是鼓勵或輸入。
- 具體又是場景中的哪一種情況?比如,疑問語氣:是讓你核對,還是讓你選擇,抑或是讓你決策。
- 選擇使用對應的對話框,並放在「用戶體驗地圖」大環境下去驗證。
參考文獻:
- 題圖:Illustration for Dialog axiata srilanka by Deilon Waijayantha @Dribbble
- 認識移動端彈框——三水採田
- 如何設計優秀的彈框?這裡有一份全面總結!——王M爭
- 四種App彈窗設計:Toast、Dialog、Actionbar 和 Snackbar——@Ricky
本文由 @Aseem 原創發佈於人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基於CC0協議