在iOS的設計規(guī)范以及Android的MD規(guī)范中，都有警告框（Alerts）這個組件。筆者研究了這個組件，發(fā)現在兩種系統(tǒng)中，它們有以下兩個共同點：

1. 都出現在頁面的中央且自帶蒙層；

iOS和Android警告框

2. 警告框的選項通常是兩個，且應避免“是/否“這樣的選項，選項應明確告知用戶操作的結果。

在其它方面，兩種規(guī)范都存在著各自的特點。下面我們來一起探究一下。

Google Material Design

先來說說設計師相對不熟悉的Android。MD規(guī)范對于警告框的定義是這樣神兒的：

警告框是一種緊急的打擾（提示），以告知用戶一個發(fā)生了的情況。

需要注意的是，警告框和之前提到的snackbars都是在用戶進行操作之后出現的提示框，那么同樣是提示框，他們出現的時機有什么區(qū)別呢？警告框可以看作是操作的確認，可以理解為操作的“最后一步”，只有當用戶點擊了“確認”按鈕這個操作才算是真正完成；但snackbars是當用戶真正操作完了之后才出現的提示信息，其信息的重要程度比警告框要低。另外，在很多情況下，snackbars會有“撤銷”按鈕，留給用戶反悔的余地。

MD規(guī)范把警告框分成兩種：有標題的和沒有標題的。

MD規(guī)范認為大多數的警告框應該都是沒有標題的，用一到兩句描述一個告知決定的文案。在寫這句文案時，有兩點需要注意：

1. 使用疑問句，例如：“刪除這個對話？”。

2. 文案與警告框中的按鈕文案要相關聯(lián)。

按鈕的文案，應告知用戶操作的結果。盡量避免使用“是/否”這樣的文案。如下圖：

左邊的警告框，按鈕文案“刪除”明確地告知了操作的結果；右邊的按鈕文案，回答了上面“刪除草稿嗎？”這個問題，但是沒有告知操作的結果（其實也就是告知的不直接），所以不被建議使用。

對于有標題的警告框，MD提出，“只在高風險的操作時使用（如，操作將導致網絡失去連接）”。并且，用戶通過標題和操作按鈕，就應該能明白是在做什么選擇。

對于標題，需注意以下兩點：

1. （與無標題的Alerts一樣）使用詢問操作的疑問句，例如，“清除USB存儲內容？”

2. 避免道歉或者有歧義的問句，例如，“警告！”、“你確定嗎？（Are you sure?）”

有標題的警告框示例

以上是MD規(guī)范中對于警告框的介紹。

iOS Human Interface Guideline

在iOS規(guī)范中，對于警告框的定義是醬紫的：

警告框傳達了你的應用或設備某種狀態(tài)的重要信息，并且常常需要用戶來進行操作。

規(guī)范中，對警告框包含的元素做出了如下規(guī)定：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。同時，警告框的樣式都是磨砂效果的圓角白框，不可更改。如下圖所示：

幾種警告框

關于警告框的使用，蘋果給出了兩個原則：

1. 盡量少使用。蘋果認為警告框只用在重要的場景下，像是購買、刪除、報錯。警告框不常出現，確保了它能夠引起用戶足夠的重視。一定要確保每一個警告框都提供重要的信息和有用的操作選項。

2. 確保警告框在豎屏、橫屏條件下都顯示正常。

關于標題、描述信息和按鈕這三個元素，蘋果又分別給出了指導原則。

標題和描述信息

由于這兩部分都是文案，所以蘋果放在一起進行了介紹。

標題要盡量簡潔，字越少越好。標題可以考慮使用疑問句或者簡短的陳述句。對于描述信息，首先它不是必須的。如果一定需要描述信息，則盡量保證描述信息盡可能短（一到兩行）。另外，在寫這些文案的時候，要盡量避免顯得“指責”、“審判”和“羞辱”（國內應該沒有哪個應用敢出一個有羞辱意思的警告框吧，不要命了吧，呵呵呵呵）。因為用戶都知道，警告框的出現，是來告知他們出現了問題或者比較危險的情況的，所以文案要明確地告知這些信息。It’s better to be negative and direct than positive and oblique（傳達壞消息但文案直截了當也比傳達好消息但文案表意模糊要更好一些）。最后，盡量避免使用“你”、“你的”、“我”、“我的”這樣的文案，有時候它們會被理解為帶有羞辱意味或者高傲的。

知識運用

請回答以下兩個問題，這將幫你更好理解這周的主題。

1. 警告框是一種對用戶的操作打斷比較大的控件，在日常的設計中，應該在什么情況下使用警告框？

2. 請查看你手機里的APP，嘗試找到一個警告框使用錯誤的地方，和使用正確的地方。這將幫你理解如何正確地使用警告框。