原文地址? ? http://www.uisdc.com/ios-android-simple-menu-popovers
今天的這幾個控件的中文名字翩隧，在網(wǎng)上查了半天呻纹，沒有找到統(tǒng)一的叫法居暖，所以自己翻譯了一下：簡易菜單對應(yīng)的是MD（Material Design，下同）中的Simple Menu糯景；簡易對話框蟀淮，對應(yīng)的是MD中的Simple Dialog钞澳，彈出框?qū)?yīng)的是iOS中的Popover轧粟。
按照慣例，我們還是從MD的控件開始說起通惫。
Google Material Design Guideline
首先履腋，什么是簡易菜單呢惭嚣？先放一個例子出來嚇唬嚇唬人：
△ ?簡易菜單（Simple Menu）
簡易菜單晚吞，就是在用戶當(dāng)前操作的位置出現(xiàn)的選項集合槽地。它有以下幾個規(guī)則：
消失規(guī)則：當(dāng)用戶選擇了某個選項，簡易菜單立刻消失弯洗；當(dāng)用戶點擊簡易菜單之外的區(qū)域牡整，或者點擊安卓系統(tǒng)的返回按鈕逃贝，則簡易菜單消失。
展現(xiàn)規(guī)則：簡易菜單應(yīng)該出現(xiàn)在入口的正上方泥从，也就是覆蓋住入口躯嫉。
這一條在國內(nèi)的安卓系統(tǒng)中經(jīng)常被錯用祈餐，比如下面這種情況：
△ ?點擊右上角的三個點帆阳，則菜單覆蓋在三個點的正上方
國內(nèi)很多安卓版本的應(yīng)用屋吨，點擊三個點之后至扰，菜單是出現(xiàn)在三個點的下方渊胸。如果僅僅是從MD規(guī)范的角度來說台妆，這是不太規(guī)范的做法接剩。
另外，簡易菜單還有一個展現(xiàn)原則疫稿，要把當(dāng)前已經(jīng)選擇的選項展現(xiàn)在入口的正上方遗座，就像下面這樣：
△ ?選項中的第三個途蒋，是當(dāng)前已選擇選項。點擊入口后懊烤，第三個選項位于入口的正上方
下面是一個反例：
△ ?在上圖中腌紧，當(dāng)前已選擇的是第二個選項壁肋。但是點擊入口打開簡易菜單墩划，是第一個選項出現(xiàn)在入口的正上方嗡综，所以是錯誤的极景。
但是，也有例外氢卡，如果菜單的入口剛好位于頁面的邊緣位置译秦，導(dǎo)致當(dāng)前頁面展現(xiàn)不下簡易菜單了击碗，則不必遵循“當(dāng)前已選選項必須在入口正上方”這個原則，比如下面這個例子：
△ ?點擊Voice search,在當(dāng)前位置無法展現(xiàn)完整的簡易菜單阁吝，因此當(dāng)前已選選項“English”沒有覆蓋在入口（Voice search）的正上方
以上就是簡易菜單的用法突勇。
簡易對話框和簡易菜單是很相似的甲馋，因為它們的功能都是一樣的：提供一系列選項。
所不同的是，簡易對話框除了可以提供選項之外共屈，還可以提供一些相關(guān)的操作拗引。另外矾削，在簡易對話框中，可以展現(xiàn)頭像欲间、圖標（icon）猎贴、一條選項中的說明性文字蝴光、其它操作（比如上圖中的“添加聯(lián)系人”按鈕）蔑祟。簡易對話框的呼出方式疆虚，可以是點擊或者長按，而簡易菜單一般是點擊罢屈。
由于簡易對話框出現(xiàn)在屏幕的中央儡遮，比簡易菜單更加打擾用戶暗赶。所以MD規(guī)范簡易蹂随，盡量使用簡易菜單而不是簡易對話框岳锁。
iOS Human Interface Design Guideline
彈出框（Popovers）最開始是只建議用在iPad上的一種控件，最近由于手機屏幕越來越大咳燕，也由于安卓和iOS兩種規(guī)范的混用招盲，也越來越多地出現(xiàn)在iOS應(yīng)用里曹货，比如下面這個例子：
可以看到顶籽，iOS的彈出框和Android的菜單比較相似银觅，但iOS的彈出框是出現(xiàn)在入口的下面的究驴，且要有箭頭纳胧，指示入口的位置跑慕。
關(guān)于彈出框，需要注意以下幾點：
1. 一次只能出現(xiàn)一個彈出框牢硅。如果一個操作激發(fā)了另一個彈出框减余，則進行該操作的時候位岔，立即關(guān)閉當(dāng)前彈出框，然后再出現(xiàn)新的彈出框杨刨。
2. 彈出框上面不能覆蓋別的控件妖胀，警告框除外赚抡。
3. 一般來說纠屋，在彈出框上進行了操作巾遭，則彈出框關(guān)閉灼舍。如果需要增加“放棄操作”或者“確認操作”的功能骑素，則可增加“取消”献丑、“完成”這樣的按鈕。如果在彈出框里可以進行多項選擇的操作箩做，則需用戶點擊了“取消”邦邦、“完成”或者點擊彈出框以外的區(qū)域關(guān)閉彈出框燃辖。
iOS和Android規(guī)范解析——確認彈框黔龟、全屏彈框和模態(tài)視圖
前兩個是Material Design（簡稱MD，下同）規(guī)范中的確認彈框（Confirmation Dialog）和全屏彈框（Full-screen Dialog）巍棱，后一個是iOS規(guī)范中的模態(tài)視圖（Modal View）。下面先說MD中的兩個豁状。
Google Material Design Guideline
確認彈框泻红，是需要用戶明確地選擇一個選項的彈窗霞掺。比如設(shè)定手機鈴聲時菩彬，會需要你選擇一個鈴聲骗灶，如下圖：
△ ?確認彈框示例
如果點擊“取消”按鈕脱羡，或者點擊安卓系統(tǒng)的“返回”按鈕免都，則該彈框消失，并且修改的內(nèi)容不會保存绕娘；只有點擊“好的（OK）”脓规，才會保存修改的內(nèi)容。因為有這個保存修改內(nèi)容的功能险领，所以“取消”按鈕就顯得尤為重要：如果不加“取消”按鈕抖拦，則用戶會不清楚修改的內(nèi)容是否被保存，比如下面這個反例：
△ ?這個彈框只有一個“完成”按鈕舷暮。這使得安卓系統(tǒng)的“返回”按鈕的功能變得模糊：“返回”按鈕是“取消”的作用呢态罪？還是“確認”修改的意思呢？
另外有一點需要格外注意：在確認彈框里复颈，不要設(shè)計會彈出簡易彈框或者簡易菜單的按鈕，因為這會增加它的復(fù)雜度。如果一定需要使用這些彈框耗啦，則請考慮使用全屏彈框（下面會介紹到）凿菩。
確認彈框的形式，除了剛剛提到的設(shè)定鈴聲的列表帜讲，還可以有很多樣式：
所有的確認彈框都share一個共同點：彈框里只專注選擇一個值衅谷。比如上圖左側(cè)的日期選擇器，只選擇日期似将，而不是既選擇日期又選擇時間获黔。
上面是MD中對確認彈框的介紹。下面說說全屏彈框在验。
△ ?全屏彈框示例
全屏彈框承載了一組任務(wù)玷氏，這些任務(wù)在用戶點擊“保存”或者“取消”之前，都不會獨自生效（對腋舌，就是捆綁式銷售的意思?? ）盏触。在全屏彈框里，各種彈框都可以彈彈彈块饺。全屏彈框是所有彈框中赞辩，唯一允許彈框上面有彈框的情況；一般情況下授艰，除非是警告框诗宣，否則所有彈框都不能在別的彈框之上出現(xiàn)。
至于何時使用全屏彈框想诅，有以下幾個判斷標準：
所需彈框包含需要輸型入操作的入口召庞，比如輸入框，或者日期選擇期来破。
改動不是實時保存的篮灼，而是點擊“保存”按鈕之后一起打包保存。
應(yīng)用里沒有實時保存草稿的功能徘禁。
當(dāng)需要進行一系列操作或設(shè)置诅诱，然后再提交它們時（其實和第二條比較相似）。
關(guān)于全屏彈框送朱，有一個需要注意的點：頂部操作欄娘荡。頂部的操作欄，左上角一定要放置表達“取消”含義的按鈕驶沼，而不是“返回”炮沐；右上角一定要放置表達“保存”的意思桨螺，而不是“關(guān)閉”栏豺。
先說左上角啰脚，下面的例子很好地說明了原因 ：
既然用戶的操作不是立馬生效，所以當(dāng)點擊左上角的“X”號呐赡，如果用戶已經(jīng)進行了一些操作椎椰，則應(yīng)該彈出警告框提示用戶：
當(dāng)用戶已經(jīng)設(shè)置了一些選項爆土，則點擊X號時蚁吝，彈出警告框提示用戶將丟棄所做的更改。
全屏彈框右上角表達“保存”含義的按鈕垦缅，可根據(jù)場景選擇不同的文案冲泥，但最好使用動詞，比如“保存壁涎，發(fā)送凡恍，分享，更新粹庞，創(chuàng)建”等咳焚。不要使用模糊的詞匯洽损，像“完成”庞溜、“好的”（在確認彈框可以用，全屏彈框不能用）碑定、“關(guān)閉”流码。下面是個反例：
△ ?右上角的“關(guān)閉”按鈕對操作的結(jié)果表意模糊
關(guān)于全屏彈框的標題，MD也給出了建議：標題要簡短延刘。如果想要使用隨使用場景變化而變化的文案作為標題（例如創(chuàng)建活動時“活動的名稱”作為標題）漫试，那么如果不斷變化的文案會出現(xiàn)長度很長的情況，則考慮把變化的文案放在全屏彈框的內(nèi)容部分碘赖，比如下面這個例子：
左邊的例子驾荣，把很長的文案“車輛責(zé)任保險”，移到了內(nèi)容部分普泡。
左邊是正確的例子播掷，標題使用的是“新的預(yù)約”；而右邊是錯誤的情況撼班，因為標題使用的是“車輛責(zé)任保險”歧匈，是具體一個預(yù)約的名稱，這個名稱會隨著不同預(yù)約而改變砰嘁。在這個例子中件炉，名稱長度太長，因此放在下面內(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)用中右上角的“+”號：“創(chuàng)建新事件”。點擊后，從下向上出現(xiàn)如下頁面：
一般來說孤里，模態(tài)視圖包括一個“完成”按鈕和“取消”按鈕伏伯，但也不是100%一定。
關(guān)于模態(tài)視圖捌袜，iOS規(guī)范中說有以下幾點需要注意：
1. 提供明顯且安全的出口说搅。保證用戶明白他們在模態(tài)視圖中的操作引起的結(jié)果是什么。
2. 讓你的模態(tài)視圖中的任務(wù)簡單虏等、簡短弄唧、聚焦。如果要在模態(tài)視圖中創(chuàng)建帶有多層級關(guān)系的任務(wù)霍衫，一定要慎重候引！因為用戶很容易忘記它們操作的來龍去脈。
3. 為你的任務(wù)在模態(tài)視圖中展示一個標題敦跌〕胃桑可以在標題欄的地方，也可以在別的地方柠傍◆锓總之，可以清楚描述任務(wù)就好惧笛。
4. 只在展示很重要的提示信息時从媚，才考慮使用警告框。最理想的情況是患整，警告框可以讓用戶采取行動拜效。警告框比較打擾用戶，所以有必要讓用戶覺得這種打擾是值得的各谚。
以上是iOS設(shè)計規(guī)范中對模態(tài)視圖的解釋紧憾。其實，“模態(tài)”是個挺有趣兒的概念嘲碧。下次的文章會跟大家來介紹一下（先賣個關(guān)子稻励，嘻嘻嘻嘻）。
總結(jié)一下愈涩，本文對比了MD中的確認彈框（提供選擇單一值的彈框）和全屏彈框（可讓用戶完成一組任務(wù)望抽，彈框上面可以出現(xiàn)別的彈框），以及iOS中的模態(tài)視圖（讓用戶完成有聚焦的任務(wù)履婉，或者提供一些列選項煤篙，比如全屏播放器中從側(cè)邊展開的操作欄）。
