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

按照慣例，我們還是從MD的控件開始說起。

Google Material Design Guideline

首先，什么是簡易菜單呢？先放一個例子出來嚇唬嚇唬人：

簡易菜單（Simple Menu）

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

• 消失規(guī)則：當用戶選擇了某個選項，簡易菜單立刻消失；當用戶點擊簡易菜單之外的區(qū)域，或者點擊安卓系統(tǒng)的返回按鈕，則簡易菜單消失。
• 展現(xiàn)規(guī)則：簡易菜單應該出現(xiàn)在入口的正上方，也就是覆蓋住入口。

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

點擊右上角的三個點，則菜單覆蓋在三個點的正上方

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

選項中的第三個，是當前已選擇選項。點擊入口后，第三個選項位于入口的正上方。

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

下面是一個反例：

在上圖中，當前已選擇的是第二個選項。但是點擊入口打開簡易菜單，是第一個選項出現(xiàn)在入口的正上方，所以是錯誤的。

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

點擊Voice search,在當前位置無法展現(xiàn)完整的簡易菜單，因此當前已選選項“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應用里，比如下面這個例子：

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

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

1. 一次只能出現(xiàn)一個彈出框。如果一個操作激發(fā)了另一個彈出框，則進行該操作的時候，立即關(guān)閉當前彈出框，然后再出現(xiàn)新的彈出框。
2. 彈出框上面不能覆蓋別的控件，警告框除外。
3. 一般來說，在彈出框上進行了操作，則彈出框關(guān)閉。如果需要增加“放棄操作”或者“確認操作”的功能，則可增加“取消”、“完成”這樣的按鈕。如果在彈出框里可以進行多項選擇的操作，則需用戶點擊了“取消”、“完成”或者點擊彈出框以外的區(qū)域關(guān)閉彈出框。

以上對比了MD中的簡易菜單和簡易對話框，他們的功能相似，只是簡易對話框中還可以加入頭像、圖標（icon）、關(guān)于選項的說明性文字以及其它操作，所以功能性更強。但簡易對話框出現(xiàn)的形式，導致了它對用戶的打擾更大，因此MD簡易盡量使用簡易菜單，除非有使用簡易對話框的必要再使用它。

另外，在iOS中，彈出框是與上面兩個控件較為相似的控件。有個細節(jié)需要注意：MD中的簡易菜單，形式上是一個矩形，沒有箭頭指示入口位置；iOS的彈出框，規(guī)范里強調(diào)要有箭頭指示入口位置。這個區(qū)別需要提醒一下。

最后順提一句，討論能讓我們的認識更深刻，也更全面。歡迎大家留言討論。

相關(guān)閱讀

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

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

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

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

#專欄作家#

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

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

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