從今天 起，我們開始介紹iOS和Android設計規范中的各種控件。掌握它們，能有效地幫你設計出一個高質量的交互稿。今天我們要介紹的是提示框，英文是toast。

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

Material Design Guidelines

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 Human Interface Guidelines

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

△ ?iOS系統中的HUD彈窗

知識運用

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

1. 既然iOS的設計規范不鼓勵使用toast，那么在日常的設計中，toast應該在什么情況下使用？

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

作者系列文章：

1. 高手幫你學規范！iOS和Android規范解析之提示框+警告框
2. 高手幫你學規范！iOS和Android規范解析之簡易菜單+彈框
3. 高手幫你學規范！iOS和Android規范解析之底部浮層
4. 高手幫你學規范！iOS和Android規范解析之按鈕

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

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

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

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

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