在交互設(shè)計稿中Toast是其中很常用的一種用戶反饋手段，但是作者卻發(fā)現(xiàn)在iOS中根本沒有toast這種部件，那么在設(shè)計該如何處理呢？一起來看看作者的解讀。

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

Google Material Design Guideline

Google的Material Design規(guī)范中，將toast和snackbars歸為一類。下面是規(guī)范中對snackbars的定義：

Snackbars包含一行與進行的操作直接相關(guān)的文案（文案前不可有icon）。它可以包含一個操作。

Snackbar示例

規(guī)范中對toast的定義：

Toast優(yōu)先適用于系統(tǒng)提示。它也在屏幕下方出現(xiàn)，但是不能被劃出屏幕外（而被清除）。

Toast示例

Snackbars/toast該如何使用呢？以下幾點是從Google MD規(guī)范中歸納出來的：

行為：Snackbars/toast從屏幕底部向上出現(xiàn)，經(jīng)過設(shè)定的秒數(shù)后消失，或者用戶進行了別的操作它們也會消失。

Snackbar出現(xiàn)和消失

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

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

不可重疊：snackbar與floating action button不能重疊

snackbar與floating action button不能重疊

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

反例：不能同時出現(xiàn)兩個snackbars

以上是Google Material Design中對于snackbars和toast的介紹。

iOS Human Interface Guideline

對于iOS系統(tǒng)，在研究了iOS的規(guī)范之后，筆者有個驚人的發(fā)現(xiàn)：嚴(yán)格地說，iOS規(guī)范中沒有Toast這個部件。筆者找遍了iOS的人機交互設(shè)計規(guī)范，都沒有找到對于Toast這種部件的介紹，在iOS系統(tǒng)中，與toast功能相似的是“HUD”（透明指示層）。

iOS系統(tǒng)中的HUD彈窗

將iOS的HUD與Android的Toast經(jīng)過對比，它們的區(qū)別有以下4點：

1. HUD出現(xiàn)在屏幕的中央，Toast在底部；
2. HUD可以由icon，Toast不能有icon，只能用文字；
3. HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明；
4. HUD中內(nèi)容可以變化（如調(diào)節(jié)音量時），Toast中內(nèi)容不可變化。

另外，在iOS的設(shè)計規(guī)范，與toast關(guān)系最緊密的“feedback（反饋）”一節(jié)中，也沒有提到Toast或者HUD。筆者分析后認(rèn)為，蘋果對于Toast這種形式，是比較謹(jǐn)慎的，也就是不鼓勵大量使用這種組件。在介紹“反饋”原則時，蘋果提到：

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

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

并且還祭出了蘋果自家郵件應(yīng)用的例子：

該應(yīng)用在更新狀態(tài)后的反饋，是在應(yīng)用的底部操作欄，展示了當(dāng)前郵件的狀態(tài)：“剛剛更新，2封未讀”。這正是符合蘋果“不操作、不打擾”的原則。相比之下，在屏幕中間出現(xiàn)HUD，雖然也不用操作，但是打擾的程度卻嚴(yán)重了許多。

?因此，在對iOS的應(yīng)用進行設(shè)計的時候，操作的反饋最好是這種打擾程度比較小的，或者通過操作本身就能看到結(jié)果的，比如下面這個例子：

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

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

歡迎留言交流。讓我們在討論中共同成長。

#專欄作家#

沐風(fēng)，微信公眾號：“沐風(fēng)與體驗設(shè)計”。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計經(jīng)驗，專注設(shè)計領(lǐng)域，歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。