@龍爪槐守望者 ：鑒于國內交互設計名詞混亂不統一，很多設計師不知道如何用專業術語稱呼一個控件，因此我開了《這個控件叫什么》專題，梳理控件的名稱和使用事項，希望能為推動交互設計發展，做出一點微小的貢獻。

往期回顧：

1. 《「這個控件叫什么」系列之小紅點+索引導航+分段控件》
2. 《「這個控件叫什么」系列之加載占位圖+頁面指示器》
3. 《「這個控件叫什么」系列之步進器+SWITCH》

Toast概念的由來

除了Android規范，Windows的規范中也有Toast，但定義不一樣。Toast在Android中的定義就是大家所熟悉的黑色半透明提示，而在Windows的規范中Toast概念幾乎等同于Android的一條Notification（通知）。

△ ?Windows Phone中的Toast

Windows和Android的Toast有著千絲萬縷的聯系，據說一位微軟前員工在開發MSN Messenger時，覺得MSN彈出通知方式很像烤面包（Toast）烤熟時從烤面包機（Toaster）里彈出來一樣，因此把這種提示方式命名為Toast，后來這位微軟前員工帶著這一習慣命名跳槽去了Google。
（ https://en.wikipedia.org?）

△ ?Toast的由來

iOS里的HUD

仔細閱讀iOS設計指南就會發現并沒有Toast這個控件，但iOS中確實有類似于Toast樣式出現，例如iOS的音量調節提示。 iOS 把這個組件叫做 UIProgressHUD（HUD意思很可能是heads up display），可惜這個組件是系統私有的，第三方App無法直接獲取使用，因此出現了各種模仿它的第三方控件，例如MBProgressHUD、 SVProgressHUD還有JGProgressHUD，從此以后HUD就成了iOS開發者里達成共識的半官方概念。

△ ?UIProgressHUD

被泛化的Toast

你要是執著的把HUD念做Toast，大家也能理解，因為如今Toast的概念已經泛化，早已打破了Android的規范。
在Android正統的規范中Toast：

• 出現在屏幕底部。
• 只能放文字不能帶圖標，文字要精簡不宜太長。
• 不是模態的，可以透過Toast對其他控件進行操作。
• 短時間后會自動消失。
• 不能對Toast進行交互，不能手動操作讓Toast主動消失。

在市面上很容易找到打破這個規則的Toast樣式，例如加載：出現在屏幕中間、帶圖標，是模態的，如果網速很慢，Toast可能會持續很長時間，可以通過操作讓其主動消失。

△ ?打破原有規則的Toast

泛化使得Toast原本的定義變得模糊，拓展了很多新的使用場景。控件定義和用途的變化也在隨著時間演化，演化出符合業務和用戶習慣的新形式反過來又會促成新的控件定義和規范，目前在移動平臺里，似乎所有半透明矩形提示和反饋都可以被稱作Toast。連iOS官方的Apple Store App都開始使用類似Toast的控件。

頂部Toast

除了Toast概念的泛化，最近不少iOS App在嘗試將Toast的位置由屏幕底部和中間改到頂部，這樣做有幾個好處：1.出現位置穩定。不會因為軟鍵盤出現導致原本在屏幕底部或中間的Toast被遮蓋或浮動到其他位置。2.更容易引起用戶注意。iOS持續錄音、GPS被使用、正在通話狀態、還有活動指示器和系統push通知都出現在屏幕頂部，iOS用戶更習慣于在頂部感知反饋信息。3.不干擾用戶瀏覽主體內容。Toast出現在屏幕頂部不會遮擋主體內容。

△ ?頂部Toast

Toast的未來

Toast有很多優點：1.占用屏幕空間小。2.不會打斷用戶操作。3.使用簡單適用范圍廣，人人都是會用Toast的產品經理。但Toast也有不少缺點：1.出現時間短，在碎片化時代注意力不集中容易錯過Toast提示。2.雖然非模態，但是黑乎乎的樣式上給人一種模態的錯覺，會打斷心流。3.遮蓋其他控件，但不能對Toast進行交互。
更為嚴重的是Toast被濫用的情況比較嚴重，當一個App在加載、表單提示、狀態變更反饋、斷網消息等使用Toast，不斷出現的黑乎乎矩形會對整個體驗帶來非常大的阻塞感，有時候甚至會同時出現兩個Toast或者持續彈出同一個Toast等令人啼笑皆非的情況。

△ ?同時兩個Toast

△ ?持續彈出同一個Toast

代替Toast的其他形式

濫用Toast是懶惰的做法，設計師完全有其他形式代替Toast，達到更優雅的用戶體驗。

頁面內提示

這種提示可以常駐在頁面里，即使用戶短時間內注意力轉移，提示也不會消失，確保用戶能一直完整的看到。此外頁面內提示能容納更多信息量，與頁面本身風格比較契合，沒有阻塞感，適合表單錯誤提示、加載過渡。

△ ?表單頁面內提示

多態按鈕

如果按鈕被按下后需要與服務器交互后才能真正響應操作，那么等待難以避免。這種情況下可以給按鈕增加多個狀態，讓用戶知道App已經接受到他的操作。典型的例子是支付寶的確認付款按鈕，擁有付款前、正在付款和付款成功三個狀態，反饋明顯不需要額外再用Toast進行提示。

△ ?支付寶多態按鈕

動效

優雅的動態效果能給吸引用戶注意力，富含情感給用戶留下深刻印象。事物之間的關系可以通過動效進行隱喻。例如電商App加入購物車，商品飛入購物車中，有趣流暢。

△ ?商品飛入購物車

震動和聲音

除了屏幕內反饋，屏幕外的反饋效果更強烈更真實。例如拍照時“咔擦”聲音，還有啟動靜音模式時手機震動。考慮到手機放在包里感知不到震動或者手機音量太小，因此聲音和震動建議作為輔助反饋手段。

Snackbar

Snackbar可以理解為是加強版的Toast。樣式和規則與Toast非常相似，不同主要有兩點：1.Snackbar支持主動滑動關閉。2.Snackbar可以附帶一個操作（也可以不帶）。

在最新的Google Material Design里，Snackbar和Toast被放在一起來介紹，而且Snackbar的篇幅要遠多于Toast，后者被打上了Android Only的標記，Snackbar能代替很多Toast的使用場景。（ https://material.io/guidelines/components/snackbars-toasts.html）

可以預見，隨著設計師的專業程度提升還有用戶對體驗品味不斷提高，Toast使用場景會不斷縮小，泛化的定義終將回歸到原點——操作后的輕量級短時反饋提示。

后面優設會持續更新，想提前學習的可以關注作者的微信公眾號：

「新人科普好文系列」

1. 交互原型丨《術語小科普！聊聊線框稿、視覺稿與原型的區別》
2. 移動端尺寸丨《通俗易懂！超全面的移動端尺寸基礎知識科普指南》
3. 字體規范丨《界面設計必備！全方位科普常用的字體規范（附神器）》

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

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