今天介紹三個(gè)控件，前兩個(gè)是Material Design（簡稱MD，下同）規(guī)范中的確認(rèn)彈框（Confirmation Dialog）和全屏彈框（Full-screen Dialog），后一個(gè)是iOS規(guī)范中的模態(tài)視圖（Modal View）。下面先說MD中的兩個(gè)。

Google Material Design Guideline

確認(rèn)彈框，是需要用戶明確地選擇一個(gè)選項(xiàng)的彈窗。比如設(shè)定手機(jī)鈴聲時(shí)，會(huì)需要你選擇一個(gè)鈴聲，如下圖：

確認(rèn)彈框示例

如果點(diǎn)擊“取消”按鈕，或者點(diǎn)擊安卓系統(tǒng)的“返回”按鈕，則該彈框消失，并且修改的內(nèi)容不會(huì)保存；只有點(diǎn)擊“好的（OK）”，才會(huì)保存修改的內(nèi)容。因?yàn)橛羞@個(gè)保存修改內(nèi)容的功能，所以“取消”按鈕就顯得尤為重要：如果不加“取消”按鈕，則用戶會(huì)不清楚修改的內(nèi)容是否被保存，比如下面這個(gè)反例：

這個(gè)彈框只有一個(gè)“完成”按鈕。這使得安卓系統(tǒng)的“返回”按鈕的功能變得模糊：“返回”按鈕是“取消”的作用呢？還是“確認(rèn)”修改的意思呢？

另外有一點(diǎn)需要格外注意：在確認(rèn)彈框里，不要設(shè)計(jì)會(huì)彈出簡易彈框或者簡易菜單的按鈕，因?yàn)檫@會(huì)增加它的復(fù)雜度。如果一定需要使用這些彈框，則請考慮使用全屏彈框（下面會(huì)介紹到）。

確認(rèn)彈框的形式，除了剛剛提到的設(shè)定鈴聲的列表，還可以有很多樣式：

所有的確認(rèn)彈框都share一個(gè)共同點(diǎn)：彈框里只專注選擇一個(gè)值。比如上圖左側(cè)的日期選擇器，只選擇日期，而不是既選擇日期又選擇時(shí)間。

上面是MD中對確認(rèn)彈框的介紹。下面說說全屏彈框。

全屏彈框示例

全屏彈框承載了一組任務(wù)，這些任務(wù)在用戶點(diǎn)擊“保存”或者“取消”之前，都不會(huì)獨(dú)自生效（對，就是捆綁式銷售的意思 ）。在全屏彈框里，各種彈框都可以彈彈彈。全屏彈框是所有彈框中，唯一允許彈框上面有彈框的情況；一般情況下，除非是警告框，否則所有彈框都不能在別的彈框之上出現(xiàn)。

至于何時(shí)使用全屏彈框，有以下幾個(gè)判斷標(biāo)準(zhǔn)：

• 所需彈框包含需要輸型入操作的入口，比如輸入框，或者日期選擇期；
• 改動(dòng)不是實(shí)時(shí)保存的，而是點(diǎn)擊“保存”按鈕之后一起打包保存；
• 應(yīng)用里沒有實(shí)時(shí)保存草稿的功能；
• 當(dāng)需要進(jìn)行一系列操作或設(shè)置，然后再提交它們時(shí)（其實(shí)和第二條比較相似）。

關(guān)于全屏彈框，有一個(gè)需要注意的點(diǎn)：頂部操作欄。頂部的操作欄，左上角一定要放置表達(dá)“取消”含義的按鈕，而不是“返回”；右上角一定要放置表達(dá)“保存”的意思，而不是“關(guān)閉”。

先說左上角，下面的例子很好地說明了原因 ：

既然用戶的操作不是立馬生效，所以當(dāng)點(diǎn)擊左上角的“X”號(hào)，如果用戶已經(jīng)進(jìn)行了一些操作，則應(yīng)該彈出警告框提示用戶：

當(dāng)用戶已經(jīng)設(shè)置了一些選項(xiàng)，則點(diǎn)擊X號(hào)時(shí)，彈出警告框提示用戶將丟棄所做的更改

全屏彈框右上角表達(dá)“保存”含義的按鈕，可根據(jù)場景選擇不同的文案，但最好使用動(dòng)詞，比如“保存，發(fā)送，分享，更新，創(chuàng)建”等。不要使用模糊的詞匯，像“完成”、“好的”（在確認(rèn)彈框可以用，全屏彈框不能用）、“關(guān)閉”。下面是個(gè)反例：

右上角的“關(guān)閉”按鈕對操作的結(jié)果表意模糊

關(guān)于全屏彈框的標(biāo)題，MD也給出了建議：標(biāo)題要簡短。如果想要使用隨使用場景變化而變化的文案作為標(biāo)題（例如創(chuàng)建活動(dòng)時(shí)“活動(dòng)的名稱”作為標(biāo)題），那么如果不斷變化的文案會(huì)出現(xiàn)長度很長的情況，則考慮把變化的文案放在全屏彈框的內(nèi)容部分，比如下面這個(gè)例子：

左邊的例子，把很長的文案“車輛責(zé)任保險(xiǎn)”，移到了內(nèi)容部分。PS：沒想到MD規(guī)范中竟然出現(xiàn)了德語！之前在德國待了三年，竟然在這用上了德語！

左邊是正確的例子，標(biāo)題使用的是“新的預(yù)約”；而右邊是錯(cuò)誤的情況，因?yàn)闃?biāo)題使用的是“車輛責(zé)任保險(xiǎn)”，是具體一個(gè)預(yù)約的名稱，這個(gè)名稱會(huì)隨著不同預(yù)約而改變。在這個(gè)例子中，名稱長度太長，因此放在下面內(nèi)容區(qū)域更為妥當(dāng)。

以上是MD中關(guān)于全屏彈框的內(nèi)容。

iOS Human Interface Guideline

在iOS中，蘋果使用“模態(tài)視圖”來指那些在當(dāng)前頁插入的“浮層頁面”。模態(tài)視圖有下面幾種形式：

模式視圖的幾種形式

模態(tài)視圖的典型案例，是iOS中日歷應(yīng)用中右上角的“+”號(hào)：“創(chuàng)建新事件”。點(diǎn)擊后，從下向上出現(xiàn)如下頁面：

一般來說，模態(tài)視圖包括一個(gè)“完成”按鈕和“取消”按鈕，但也不是100%一定。

關(guān)于模態(tài)視圖，iOS規(guī)范中說有以下幾點(diǎn)需要注意：

1. 提供明顯且安全的出口。保證用戶明白他們在模態(tài)視圖中的操作引起的結(jié)果是什么。
2. 讓你的模態(tài)視圖中的任務(wù)簡單、簡短、聚焦。如果要在模態(tài)視圖中創(chuàng)建帶有多層級(jí)關(guān)系的任務(wù)，一定要慎重！因?yàn)橛脩艉苋菀淄浰鼈儾僮鞯膩睚埲ッ}。
3. 為你的任務(wù)在模態(tài)視圖中展示一個(gè)標(biāo)題?？梢栽跇?biāo)題欄的地方，也可以在別的地方?？傊梢郧宄枋鋈蝿?wù)就好。
4. 只在展示很重要的提示信息時(shí)，才考慮使用警告框。最理想的情況是，警告框可以讓用戶采取行動(dòng)。警告框比較打擾用戶，所以有必要讓用戶覺得這種打擾是值得的。

以上是iOS設(shè)計(jì)規(guī)范中對模態(tài)視圖的解釋。其實(shí)，“模態(tài)”是個(gè)挺有趣兒的概念。下次的文章會(huì)跟大家來介紹一下（先賣個(gè)關(guān)子，嘻嘻嘻嘻）。

小結(jié)

總結(jié)一下，今天的文章，對比了MD中的確認(rèn)彈框（提供選擇單一值的彈框）和全屏彈框（可讓用戶完成一組任務(wù)，彈框上面可以出現(xiàn)別的彈框），以及iOS中的模態(tài)視圖（讓用戶完成有聚焦的任務(wù)，或者提供一些列選項(xiàng)，比如全屏播放器中從側(cè)邊展開的操作欄）。

歡迎留言討論。討論會(huì)讓我們更清楚這些控件。

相關(guān)閱讀

iOS和Android規(guī)范解析——提示框（Toast）對比

iOS和Android規(guī)范解析——警告框（Alerts）對比

iOS和Android規(guī)范解析——底部浮層（上）

iOS和Android規(guī)范解析——底部浮層（下）

iOS和Android規(guī)范解析——簡易菜單、簡易對話框和彈出框

#專欄作家#

沐風(fēng)，微信公眾號(hào)：“沐風(fēng)與體驗(yàn)設(shè)計(jì)”。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評(píng)選最佳人氣獎(jiǎng)。愛奇藝Phone和PC端交互團(tuán)隊(duì)負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計(jì)經(jīng)驗(yàn)，專注設(shè)計(jì)領(lǐng)域，歡迎關(guān)注。

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

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