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

iOS 蘋果公司文章 DIALOG 人人都是產品經理 2017-05-10

今天介紹三個控件，前兩個是Material Design（簡稱MD，下同）規範中的確認彈框（Confirmation Dialog）和全屏彈框（Full-screen Dialog），後一個是iOS規範中的模態視圖（Modal View）。下面先說MD中的兩個。

Google Material Design Guideline

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

確認彈框示例

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

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

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

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

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

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

全屏彈框示例

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

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

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

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

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

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

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

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

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

左邊的例子，把很長的文案“車輛責任保險”，移到了內容部分。PS：沒想到MD規範中竟然出現了德語！之前在德國待了三年，竟然在這用上了德語！

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

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

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

模式視圖的幾種形式

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

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

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

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

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

歡迎留言討論。討論會讓我們更清楚這些控件。