今天介紹三個(gè)控件上煤，前兩個(gè)是Material Design（簡(jiǎn)稱(chēng)MD，下同）規(guī)范中的確認(rèn)彈框（Confirmation Dialog）和全屏彈框（Full-screen Dialog）他匪，后一個(gè)是iOS規(guī)范中的模態(tài)視圖（Modal View）。下面先說(shuō)MD中的兩個(gè)夸研。
Google Material Design Guideline
確認(rèn)彈框邦蜜，是需要用戶(hù)明確地選擇一個(gè)選項(xiàng)的彈窗。比如設(shè)定手機(jī)鈴聲時(shí)亥至，會(huì)需要你選擇一個(gè)鈴聲悼沈，如下圖
如果點(diǎn)擊“取消”按鈕，或者點(diǎn)擊安卓系統(tǒng)的“返回”按鈕姐扮，則該彈框消失絮供，并且修改的內(nèi)容不會(huì)保存；只有點(diǎn)擊“好的（OK）”茶敏，才會(huì)保存修改的內(nèi)容壤靶。因?yàn)橛羞@個(gè)保存修改內(nèi)容的功能，所以“取消”按鈕就顯得尤為重要：如果不加“取消”按鈕惊搏，則用戶(hù)會(huì)不清楚修改的內(nèi)容是否被保存贮乳，比如下面這個(gè)反例：
另外有一點(diǎn)需要格外注意：在確認(rèn)彈框里包雀，不要設(shè)計(jì)會(huì)彈出簡(jiǎn)易彈框或者簡(jiǎn)易菜單的按鈕，因?yàn)檫@會(huì)增加它的復(fù)雜度亲铡。如果一定需要使用這些彈框才写，則請(qǐng)考慮使用全屏彈框（下面會(huì)介紹到）。
確認(rèn)彈框的形式奖蔓，除了剛剛提到的設(shè)定鈴聲的列表赞草，還可以有很多樣式：
所有的確認(rèn)彈框都share一個(gè)共同點(diǎn)：彈框里只專(zhuān)注選擇一個(gè)值。比如上圖左側(cè)的日期選擇器吆鹤，只選擇日期厨疙，而不是既選擇日期又選擇時(shí)間。
上面是MD中對(duì)確認(rèn)彈框的介紹疑务。下面說(shuō)說(shuō)全屏彈框沾凄。
全屏彈框承載了一組任務(wù)，這些任務(wù)在用戶(hù)點(diǎn)擊“保存”或者“取消”之前知允，都不會(huì)獨(dú)自生效（對(duì)撒蟀，就是捆綁式銷(xiāo)售的意思?? ）。在全屏彈框里温鸽，各種彈框都可以彈彈彈保屯。全屏彈框是所有彈框中，唯一允許彈框上面有彈框的情況涤垫；一般情況下姑尺，除非是警告框，否則所有彈框都不能在別的彈框之上出現(xiàn)蝠猬。
至于何時(shí)使用全屏彈框切蟋，有以下幾個(gè)判斷標(biāo)準(zhǔn)：
- 所需彈框包含需要輸型入操作的入口，比如輸入框榆芦，或者日期選擇期敦姻；
- 改動(dòng)不是實(shí)時(shí)保存的，而是點(diǎn)擊“保存”按鈕之后一起打包保存歧杏；
- 應(yīng)用里沒(méi)有實(shí)時(shí)保存草稿的功能；
- 當(dāng)需要進(jìn)行一系列操作或設(shè)置迷守，然后再提交它們時(shí)（其實(shí)和第二條比較相似）犬绒。
關(guān)于全屏彈框，有一個(gè)需要注意的點(diǎn)：頂部操作欄兑凿。頂部的操作欄凯力，左上角一定要放置表達(dá)“取消”含義的按鈕茵瘾，而不是“返回”；右上角一定要放置表達(dá)“保存”的意思咐鹤，而不是“關(guān)閉”拗秘。
先說(shuō)左上角，下面的例子很好地說(shuō)明了原因 ：
既然用戶(hù)的操作不是立馬生效祈惶，所以當(dāng)點(diǎn)擊左上角的“X”號(hào)雕旨，如果用戶(hù)已經(jīng)進(jìn)行了一些操作，則應(yīng)該彈出警告框提示用戶(hù)：
全屏彈框右上角表達(dá)“保存”含義的按鈕，可根據(jù)場(chǎng)景選擇不同的文案疹蛉，但最好使用動(dòng)詞活箕，比如“保存，發(fā)送可款，分享育韩，更新，創(chuàng)建”等闺鲸。不要使用模糊的詞匯筋讨，像“完成”、“好的”（在確認(rèn)彈框可以用翠拣，全屏彈框不能用）版仔、“關(guān)閉”。下面是個(gè)反例：
關(guān)于全屏彈框的標(biāo)題误墓，MD也給出了建議：標(biāo)題要簡(jiǎn)短蛮粮。如果想要使用隨使用場(chǎng)景變化而變化的文案作為標(biāo)題（例如創(chuàng)建活動(dòng)時(shí)“活動(dòng)的名稱(chēng)”作為標(biāo)題），那么如果不斷變化的文案會(huì)出現(xiàn)長(zhǎng)度很長(zhǎng)的情況谜慌，則考慮把變化的文案放在全屏彈框的內(nèi)容部分然想，比如下面這個(gè)例子：
左邊是正確的例子妨蛹，標(biāo)題使用的是“新的預(yù)約”；而右邊是錯(cuò)誤的情況晴竞，因?yàn)闃?biāo)題使用的是“車(chē)輛責(zé)任保險(xiǎn)”蛙卤，是具體一個(gè)預(yù)約的名稱(chēng)，這個(gè)名稱(chēng)會(huì)隨著不同預(yù)約而改變。在這個(gè)例子中颤难，名稱(chēng)長(zhǎng)度太長(zhǎng)神年，因此放在下面內(nèi)容區(qū)域更為妥當(dāng)。
以上是MD中關(guān)于全屏彈框的內(nèi)容行嗤。
iOS Human Interface Guideline
在iOS中已日，蘋(píng)果使用“模態(tài)視圖”來(lái)指那些在當(dāng)前頁(yè)插入的“浮層頁(yè)面”。模態(tài)視圖有下面幾種形式：
模態(tài)視圖的典型案例栅屏，是iOS中日歷應(yīng)用中右上角的“+”號(hào)：“創(chuàng)建新事件”飘千。點(diǎn)擊后，從下向上出現(xiàn)如下頁(yè)面：
一般來(lái)說(shuō)既琴，模態(tài)視圖包括一個(gè)“完成”按鈕和“取消”按鈕占婉，但也不是100%一定。
關(guān)于模態(tài)視圖甫恩，iOS規(guī)范中說(shuō)有以下幾點(diǎn)需要注意：
1. 提供明顯且安全的出口逆济。保證用戶(hù)明白他們?cè)谀B(tài)視圖中的操作引起的結(jié)果是什么。
2. 讓你的模態(tài)視圖中的任務(wù)簡(jiǎn)單磺箕、簡(jiǎn)短奖慌、聚焦。如果要在模態(tài)視圖中創(chuàng)建帶有多層級(jí)關(guān)系的任務(wù)松靡，一定要慎重简僧！因?yàn)橛脩?hù)很容易忘記它們操作的來(lái)龍去脈。
3. 為你的任務(wù)在模態(tài)視圖中展示一個(gè)標(biāo)題雕欺〉郝恚可以在標(biāo)題欄的地方，也可以在別的地方屠列±材妫總之，可以清楚描述任務(wù)就好笛洛。
4. 只在展示很重要的提示信息時(shí)夏志，才考慮使用警告框。最理想的情況是苛让，警告框可以讓用戶(hù)采取行動(dòng)沟蔑。警告框比較打擾用戶(hù)，所以有必要讓用戶(hù)覺(jué)得這種打擾是值得的狱杰。
以上是iOS設(shè)計(jì)規(guī)范中對(duì)模態(tài)視圖的解釋瘦材。其實(shí)，“模態(tài)”是個(gè)挺有趣兒的概念仿畸。下次的文章會(huì)跟大家來(lái)介紹一下（先賣(mài)個(gè)關(guān)子食棕，嘻嘻嘻嘻）。
總結(jié)一下，今天的文章宣蠕，對(duì)比了MD中的確認(rèn)彈框（提供選擇單一值的彈框）和全屏彈框（可讓用戶(hù)完成一組任務(wù)，彈框上面可以出現(xiàn)別的彈框）甥捺，以及iOS中的模態(tài)視圖（讓用戶(hù)完成有聚焦的任務(wù)抢蚀，或者提供一些列選項(xiàng)，比如全屏播放器中從側(cè)邊展開(kāi)的操作欄）镰禾。
歡迎留言討論皿曲。討論會(huì)讓我們更清楚這些控件。
知識(shí)運(yùn)用
請(qǐng)對(duì)比確認(rèn)彈框和全屏彈框有哪些區(qū)別吴侦？
確認(rèn)彈框（提供選擇單一值的彈框）
全屏彈框（可讓用戶(hù)完成一組任務(wù)屋休，彈框上面可以出現(xiàn)別的彈框），
