編者按：看不懂iOS 和Android 的設計規范？愛奇藝高級交互設計師來幫你！這個系列文章會深入淺出地為你講解兩個規范中相同控件的概念和應用，加上超多實例演示，輕松看懂設計規范！

上期回顧：高手幫你學規范！iOS和Android規范解析之提示框+警告框

今天的這幾個控件的中文名字，在網上查了半天，沒有找到統一的叫法，所以自己翻譯了一下：簡易菜單對應的是MD（Material Design，下同）中的Simple Menu；簡易對話框，對應的是MD中的Simple Dialog，彈出框對應的是iOS中的Popover。

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

Google Material Design Guideline

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

△ ?簡易菜單（Simple Menu）

簡易菜單，就是在用戶當前操作的位置出現的選項集合。它有以下幾個規則：

消失規則：當用戶選擇了某個選項，簡易菜單立刻消失；當用戶點擊簡易菜單之外的區域，或者點擊安卓系統的返回按鈕，則簡易菜單消失。

展現規則：簡易菜單應該出現在入口的正上方，也就是覆蓋住入口。

這一條在國內的安卓系統中經常被錯用，比如下面這種情況：

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

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

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

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

下面是一個反例：

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

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

△ ?點擊Voice search,在當前位置無法展現完整的簡易菜單，因此當前已選選項“English”沒有覆蓋在入口（Voice search）的正上方

以上就是簡易菜單的用法。

簡易對話框和簡易菜單是很相似的，因為它們的功能都是一樣的：提供一系列選項。

所不同的是，簡易對話框除了可以提供選項之外，還可以提供一些相關的操作。另外，在簡易對話框中，可以展現頭像、圖標（icon）、一條選項中的說明性文字、其它操作（比如上圖中的“添加聯系人”按鈕）。簡易對話框的呼出方式，可以是點擊或者長按，而簡易菜單一般是點擊。

由于簡易對話框出現在屏幕的中央，比簡易菜單更加打擾用戶。所以MD規范簡易，盡量使用簡易菜單而不是簡易對話框。

iOS Human Interface Design Guideline

彈出框（Popovers）最開始是只建議用在iPad上的一種控件，最近由于手機屏幕越來越大，也由于安卓和iOS兩種規范的混用，也越來越多地出現在iOS應用里，比如下面這個例子：

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

關于彈出框，需要注意以下幾點：

1. 一次只能出現一個彈出框。如果一個操作激發了另一個彈出框，則進行該操作的時候，立即關閉當前彈出框，然后再出現新的彈出框。

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

3. 一般來說，在彈出框上進行了操作，則彈出框關閉。如果需要增加“放棄操作”或者“確認操作”的功能，則可增加“取消”、“完成”這樣的按鈕。如果在彈出框里可以進行多項選擇的操作，則需用戶點擊了“取消”、“完成”或者點擊彈出框以外的區域關閉彈出框。

iOS和Android規范解析——確認彈框、全屏彈框和模態視圖

前兩個是Material Design（簡稱MD，下同）規范中的確認彈框（Confirmation Dialog）和全屏彈框（Full-screen Dialog），后一個是iOS規范中的模態視圖（Modal View）。下面先說MD中的兩個。

Google Material Design Guideline

確認彈框，是需要用戶明確地選擇一個選項的彈窗。比如設定手機鈴聲時，會需要你選擇一個鈴聲，如下圖：

△ ?確認彈框示例

如果點擊“取消”按鈕，或者點擊安卓系統的“返回”按鈕，則該彈框消失，并且修改的內容不會保存；只有點擊“好的（OK）”，才會保存修改的內容。因為有這個保存修改內容的功能，所以“取消”按鈕就顯得尤為重要：如果不加“取消”按鈕，則用戶會不清楚修改的內容是否被保存，比如下面這個反例：

△ ?這個彈框只有一個“完成”按鈕。這使得安卓系統的“返回”按鈕的功能變得模糊：“返回”按鈕是“取消”的作用呢？還是“確認”修改的意思呢？

另外有一點需要格外注意：在確認彈框里，不要設計會彈出簡易彈框或者簡易菜單的按鈕，因為這會增加它的復雜度。如果一定需要使用這些彈框，則請考慮使用全屏彈框（下面會介紹到）。

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

所有的確認彈框都share一個共同點：彈框里只專注選擇一個值。比如上圖左側的日期選擇器，只選擇日期，而不是既選擇日期又選擇時間。

上面是MD中對確認彈框的介紹。下面說說全屏彈框。

△ ?全屏彈框示例

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

至于何時使用全屏彈框，有以下幾個判斷標準：

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

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

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

既然用戶的操作不是立馬生效，所以當點擊左上角的“X”號，如果用戶已經進行了一些操作，則應該彈出警告框提示用戶：

當用戶已經設置了一些選項，則點擊X號時，彈出警告框提示用戶將丟棄所做的更改。

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

△ ?右上角的“關閉”按鈕對操作的結果表意模糊

關于全屏彈框的標題，MD也給出了建議：標題要簡短。如果想要使用隨使用場景變化而變化的文案作為標題（例如創建活動時“活動的名稱”作為標題），那么如果不斷變化的文案會出現長度很長的情況，則考慮把變化的文案放在全屏彈框的內容部分，比如下面這個例子：

左邊的例子，把很長的文案“車輛責任保險”，移到了內容部分。

左邊是正確的例子，標題使用的是“新的預約”；而右邊是錯誤的情況，因為標題使用的是“車輛責任保險”，是具體一個預約的名稱，這個名稱會隨著不同預約而改變。在這個例子中，名稱長度太長，因此放在下面內容區域更為妥當。

以上是MD中關于全屏彈框的內容。

iOS Human Interface Guideline

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

△ ?模式視圖的幾種形式

模態視圖的典型案例，是iOS中日歷應用中右上角的“+”號：“創建新事件”。點擊后，從下向上出現如下頁面：

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

關于模態視圖，iOS規范中說有以下幾點需要注意：

1. 提供明顯且安全的出口。保證用戶明白他們在模態視圖中的操作引起的結果是什么。

2. 讓你的模態視圖中的任務簡單、簡短、聚焦。如果要在模態視圖中創建帶有多層級關系的任務，一定要慎重！因為用戶很容易忘記它們操作的來龍去脈。

3. 為你的任務在模態視圖中展示一個標題?？梢栽跇祟}欄的地方，也可以在別的地方。總之，可以清楚描述任務就好。

4. 只在展示很重要的提示信息時，才考慮使用警告框。最理想的情況是，警告框可以讓用戶采取行動。警告框比較打擾用戶，所以有必要讓用戶覺得這種打擾是值得的。

以上是iOS設計規范中對模態視圖的解釋。其實，“模態”是個挺有趣兒的概念。下次的文章會跟大家來介紹一下（先賣個關子，嘻嘻嘻嘻）。

總結一下，本文對比了MD中的確認彈框（提供選擇單一值的彈框）和全屏彈框（可讓用戶完成一組任務，彈框上面可以出現別的彈框），以及iOS中的模態視圖（讓用戶完成有聚焦的任務，或者提供一些列選項，比如全屏播放器中從側邊展開的操作欄）。

歡迎關注作者微信公眾號：新設計青年

「如何看懂iOS 10 的設計規范指南」

1. 看趨勢變化丨《從IOS 10設計指南變化看設計的新趨勢》
2. 看交互啟示丨《從IOS 10 的交互設計中學到的3個設計啟示》
3. 看使用方法丨《一份超詳細的「IOS 10 UI KIT」使用手冊（附源文件）》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com