交互設計師在設計交互稿的時候，時常需要一些反饋手段，以提示用戶操作的結果。Toast是其中很常用的一種：它簡單、小巧、對用戶的打擾小。然而現在很多應用中，存在對于toast過度使用的情況，并且常常出現Android樣式的toast出現在iOS應用中（反之亦然）的情形。在研究了iOS和Android的規范之后，筆者驚人地發現iOS中其實是沒有toast這種部件的。到底我們在設計的時候應該處理這種部件呢？且看下面的分解。

提示框（Toast）對比

Google的Material Design規范中，是把toast和snackbars歸為一類的。下面是規范中對snackbars的定義：Snackbars包含一行與進行的操作直接相關的文案（文案前不可有icon）。它可以包含一個操作。

△ ?Snackbar示例

規范中對toast的定義：

Toast優先適用于系統提示。它也在屏幕下方出現，但是不能被劃出屏幕外（而被清除）。

△ ?Toast示例

行為

Snackbars/toast從屏幕底部向上出現，經過設定的秒數后消失，或者用戶進行了別的操作它們也會消失。

△ ?Snackbar出現和消失

簡潔

提示的文案要簡短，包含的操作按鈕最多只有一個，或者沒有。（注意，snackbar不能包含使其消失的“取消”按鈕！）。

△ ?左邊是正確的，右邊是錯誤的（因為多了“取消”按鈕）

不可重疊

snackbar與floating action button不能重疊。

一次只出現一個

如果出現了一個snackbar，這時候用戶進行了操作，需要出現另一個，則第一個snackbar從上向下退出，之后第二個snackbar從下向上出現。

△ ?反例：不能同時出現兩個snackbars

以上是Google Material Design中對于snackbars和toast的定義。

對于iOS系統，在研究了iOS的規范之后，筆者有個驚人的發現：嚴格地說，iOS規范中沒有Toast這個部件。筆者找遍了iOS的人機交互設計規范，都沒有找到對于Toast這種部件的介紹，與之最為接近的，是Alert（警告框）。但警告框的使用場景與Toast不同，之后將另開一篇文章介紹。在iOS系統中，與toast對應的是“HUD”（透明指示層）。

△ ?iOS系統中的HUD彈窗

iOS的HUD與Android的Toast的區別有：

• ?HUD出現在屏幕的中央，Toast在底部。
• ?HUD可以有icon，Toast不能有icon，只能用文字。
• ?HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明。
• ?HUD中內容可以變化（如調節音量時），Toast中內容不可變化。

研究了iOS的設計規范，發現規范中“feedback（反饋）”一節中，也沒有提到Toast或者HUD，筆者認為，蘋果對于Toast這種形式，是比較謹慎的。在介紹反饋時，蘋果提到：

潛移默化地將狀態改變或者其它類型的反饋放進你的界面中。理想的情況是：用戶可以不用進行操作或者被打擾，就能得知重要的信息。

Unobtrusively integrate status and other types of feedback into your interface.Ideally, users can get important information without taking action or being interrupted.

而且舉了蘋果自家郵件應用的例子：

在應用的底部操作欄，展示了當前郵件的狀態：“剛剛更新，2封未讀”。我想，這正是符合蘋果“不操作、不打擾”的原則。相比之下，在屏幕中間出現HUD，雖然也不用操作，但是打擾的程度卻嚴重了許多。因此，在對iOS的應用進行設計的時候，操作的反饋最好是這種打擾程度比較小的，或者通過操作本身就能看到結果的，比如下面這個例子：

用戶進行刪除操作之后，短信就消失了，這時候就不需要再彈出HUD提示“已刪除”。

以上對比了iOS和Android設計規范中對Toast這類提示框的用法說明。有一點還想提醒大家：規范是官方給出的最標準的做法，但是具體的運用還是要看場景的需要。很喜歡初中老師說過的一句話：“學數學要會‘死去活來’，要死死的掌握住公式，然后靈活運用”。對于規范，也是這個道理。

警告框（Alerts）對比

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

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

△ ?iOS和Android警告框

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

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

Google Material Design

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

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

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

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

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

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

2. 文案與警告框中的按鈕文案要相關聯。

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

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

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

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

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

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

△ ?有標題的警告框

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

iOS Human Interface Guideline

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

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

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

△ ?幾種警告框

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

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

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

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

標題和描述信息

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

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

按鈕

對于按鈕的設計，有以下幾點需要注意：

1. 通常情況下，使用兩個按鈕。只有一個按鈕的警告框通常用于告知（重要信息）。如果需要三個按鈕，蘋果建議考慮使用上拉菜單（action sheets）。

2. 按鈕的文案建議使用能夠描述操作結果的文案。避免使用“是/否”這樣的文案。（這一點和MD規范相同）

3. 一般來說，左邊放“取消”按鈕，右邊放用戶最可能點擊的按鈕。蘋果建議左邊那個表達取消操作的按鈕都叫作“取消”，不要使用別的詞（“撤銷”、“不要~~~”?? 之類）。如果想強調取消按鈕，可以將它加粗。如果按鈕中包含毀滅性操作，如刪除，則在樣式上應該讓按鈕文案體現出這個感覺。

4. Home鍵自帶取消警告框功能。如果頁面上有一個警告框，此時用戶按了iPhone上的Home鍵而退出了應用，那么用戶再次回到應用，警告框應該消失（相當于在按了Home鍵的時候取消了警告框）。

以上介紹了iOS和Android規范中對于警告框的規定。還是那句話，規范是最標準的情況，場景是千變萬化的，具體運用的時候還是需要根據場景來靈活應用。這就像先掌握數學公式，之后遇到不同的題目，運用公式來靈活解題。

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

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

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

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

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量200萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com