今天的這幾個(gè)控件的中文名字，在網(wǎng)上查了半天，沒(méi)有找到統(tǒng)一的叫法，所以自己翻譯了一下：簡(jiǎn)易菜單對(duì)應(yīng)的是MD（Material Design，下同）中的Simple Menu；簡(jiǎn)易對(duì)話框，對(duì)應(yīng)的是MD中的Simple Dialog，彈出框?qū)?yīng)的是iOS中的Popover。

按照慣例，我們還是從MD的控件開(kāi)始說(shuō)起。

Google Material Design Guideline

首先，什么是簡(jiǎn)易菜單呢？先放一個(gè)例子出來(lái)嚇唬嚇唬人：

簡(jiǎn)易菜單（Simple Menu）

好像例子沒(méi)有任何可怕的點(diǎn)。就是想說(shuō)個(gè)冷笑話，你管我。分析上面的例子，簡(jiǎn)易菜單，就是在用戶當(dāng)前操作的位置出現(xiàn)的選項(xiàng)集合。它有以下幾個(gè)規(guī)則：

消失規(guī)則：當(dāng)用戶選擇了某個(gè)選項(xiàng)，簡(jiǎn)易菜單立刻消失；當(dāng)用戶點(diǎn)擊簡(jiǎn)易菜單之外的區(qū)域，或者點(diǎn)擊安卓系統(tǒng)的返回按鈕，則簡(jiǎn)易菜單消失。

展現(xiàn)規(guī)則：簡(jiǎn)易菜單應(yīng)該出現(xiàn)在入口的正上方，也就是覆蓋住入口。

這一條在國(guó)內(nèi)的安卓系統(tǒng)中經(jīng)常被錯(cuò)用，比如下面這種情況：

點(diǎn)擊右上角的三個(gè)點(diǎn)，則菜單覆蓋在三個(gè)點(diǎn)的正上方

國(guó)內(nèi)很多安卓版本的應(yīng)用，點(diǎn)擊三個(gè)點(diǎn)之后，菜單是出現(xiàn)在三個(gè)點(diǎn)的下方。如果僅僅是從MD規(guī)范的角度來(lái)說(shuō)，這是不太規(guī)范的做法。

另外，簡(jiǎn)易菜單還有一個(gè)展現(xiàn)原則，要把當(dāng)前已經(jīng)選擇的選項(xiàng)展現(xiàn)在入口的正上方，就像下面這樣：

選項(xiàng)中的第三個(gè)，是當(dāng)前已選擇選項(xiàng)。點(diǎn)擊入口后，第三個(gè)選項(xiàng)位于入口的正上方

下面是一個(gè)反例：

在上圖中，當(dāng)前已選擇的是第二個(gè)選項(xiàng)。但是點(diǎn)擊入口打開(kāi)簡(jiǎn)易菜單，是第一個(gè)選項(xiàng)出現(xiàn)在入口的正上方，所以是錯(cuò)誤的。

但是，也有例外，如果菜單的入口剛好位于頁(yè)面的邊緣位置，導(dǎo)致當(dāng)前頁(yè)面展現(xiàn)不下簡(jiǎn)易菜單了，則不必遵循“當(dāng)前已選選項(xiàng)必須在入口正上方”這個(gè)原則，比如下面這個(gè)例子：

點(diǎn)擊Voice search,在當(dāng)前位置無(wú)法展現(xiàn)完整的簡(jiǎn)易菜單，因此當(dāng)前已選選項(xiàng)“English”沒(méi)有覆蓋在入口（Voice search）的正上方

以上就是簡(jiǎn)易菜單的用法。

簡(jiǎn)易對(duì)話框和簡(jiǎn)易菜單是很相似的，因?yàn)樗鼈兊墓δ芏际且粯拥模禾峁┮幌盗羞x項(xiàng)。

所不同的是，簡(jiǎn)易對(duì)話框除了可以提供選項(xiàng)之外，還可以提供一些相關(guān)的操作。另外，在簡(jiǎn)易對(duì)話框中，可以展現(xiàn)頭像、圖標(biāo)（icon）、一條選項(xiàng)中的說(shuō)明性文字、其它操作（比如上圖中的“添加聯(lián)系人”按鈕）。簡(jiǎn)易對(duì)話框的呼出方式，可以是點(diǎn)擊或者長(zhǎng)按，而簡(jiǎn)易菜單一般是點(diǎn)擊。

由于簡(jiǎn)易對(duì)話框出現(xiàn)在屏幕的中央，比簡(jiǎn)易菜單更加打擾用戶。所以MD規(guī)范簡(jiǎn)易，盡量使用簡(jiǎn)易菜單而不是簡(jiǎn)易對(duì)話框。

iOS Human Interface Design Guideline

彈出框（Popovers）最開(kāi)始是只建議用在iPad上的一種控件，最近由于手機(jī)屏幕越來(lái)越大，也由于安卓和iOS兩種規(guī)范的混用，也越來(lái)越多地出現(xiàn)在iOS應(yīng)用里，比如下面這個(gè)例子：

可以看到，iOS的彈出框和Android的菜單比較相似，但iOS的彈出框是出現(xiàn)在入口的下面的，且要有箭頭，指示入口的位置。

關(guān)于彈出框，需要注意以下幾點(diǎn)：

1. 一次只能出現(xiàn)一個(gè)彈出框。如果一個(gè)操作激發(fā)了另一個(gè)彈出框，則進(jìn)行該操作的時(shí)候，立即關(guān)閉當(dāng)前彈出框，然后再出現(xiàn)新的彈出框。

2. 彈出框上面不能覆蓋別的控件，警告框除外。

3. 一般來(lái)說(shuō)，在彈出框上進(jìn)行了操作，則彈出框關(guān)閉。如果需要增加“放棄操作”或者“確認(rèn)操作”的功能，則可增加“取消”、“完成”這樣的按鈕。如果在彈出框里可以進(jìn)行多項(xiàng)選擇的操作，則需用戶點(diǎn)擊了“取消”、“完成”或者點(diǎn)擊彈出框以外的區(qū)域關(guān)閉彈出框。

以上就是今天的全部?jī)?nèi)容。

順提一句，討論能讓我們的認(rèn)識(shí)更深刻，也更全面。歡迎大家留言討論。

相關(guān)閱讀

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

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

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

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

德國(guó)海龜一枚?? ，曾任職于騰訊微生活、網(wǎng)易、宜信等公司?，F(xiàn)為愛(ài)奇藝UDC高級(jí)交互設(shè)計(jì)師。歡迎關(guān)注。