Toast(吐司提示)的曾經(jīng)、現(xiàn)在與未來

8 評(píng)論 32111 瀏覽 134 收藏 10 分鐘

本篇屬于《這個(gè)控件叫什么》專題,鑒于大家對(duì)Toast的名稱和使用事項(xiàng)都非常熟悉,因此劍走偏鋒來八卦一下Toast的前世今生,揭示Toast少有人知的另一面。

Toast的曾經(jīng)

Toast概念的由來

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

Windows Phone中的Toast

Windows和Android的Toast有著千絲萬縷的聯(lián)系,據(jù)說一位微軟前員工在開發(fā)MSN Messenger時(shí),覺得MSN彈出通知方式很像烤面包(Toast)烤熟時(shí)從烤面包機(jī)(Toaster)里彈出來一樣,因此把這種提示方式命名為Toast,后來這位微軟前員工帶著這一習(xí)慣命名跳槽去了Google。

(?https://en.wikipedia.org/w/index.php?title=Toast_%28computing%29&oldid=459336160?)

Toast的由來

iOS里的HUD

仔細(xì)閱讀iOS設(shè)計(jì)指南就會(huì)發(fā)現(xiàn)并沒有Toast這個(gè)控件,但iOS中確實(shí)有類似于Toast樣式出現(xiàn),例如iOS的音量調(diào)節(jié)提示。 iOS 把這個(gè)組件叫做 UIProgressHUD(HUD意思很可能是heads up display),可惜這個(gè)組件是系統(tǒng)私有的,第三方App無法直接獲取使用,因此出現(xiàn)了各種模仿它的第三方控件,例如MBProgressHUD、 SVProgressHUD還有JGProgressHUD,從此以后HUD就成了iOS開發(fā)者里達(dá)成共識(shí)的半官方概念。

UIProgressHUD

Toast的現(xiàn)在

被泛化的Toast

你要是執(zhí)著的把HUD念做Toast,大家也能理解,因?yàn)槿缃馮oast的概念已經(jīng)泛化,早已打破了Android的規(guī)范。
在Android正統(tǒng)的規(guī)范中Toast:

出現(xiàn)在屏幕底部。

只能放文字不能帶圖標(biāo),文字要精簡(jiǎn)不宜太長(zhǎng)。

不是模態(tài)的,可以透過Toast對(duì)其他控件進(jìn)行操作。

短時(shí)間后會(huì)自動(dòng)消失。

不能對(duì)Toast進(jìn)行交互,不能手動(dòng)操作讓Toast主動(dòng)消失。

在市面上很容易找到打破這個(gè)規(guī)則的Toast樣式,例如加載:出現(xiàn)在屏幕中間、帶圖標(biāo),是模態(tài)的,如果網(wǎng)速很慢,Toast可能會(huì)持續(xù)很長(zhǎng)時(shí)間,可以通過操作讓其主動(dòng)消失。

打破原有規(guī)則的Toast

泛化使得Toast原本的定義變得模糊,拓展了很多新的使用場(chǎng)景??丶x和用途的變化也在隨著時(shí)間演化,演化出符合業(yè)務(wù)和用戶習(xí)慣的新形式反過來又會(huì)促成新的控件定義和規(guī)范,目前在移動(dòng)平臺(tái)里,似乎所有半透明矩形提示和反饋都可以被稱作Toast。連iOS官方的Apple Store App都開始使用類似Toast的控件。

頂部Toast

除了Toast概念的泛化,最近不少iOS App在嘗試將Toast的位置由屏幕底部和中間改到頂部,這樣做有幾個(gè)好處:

  1. 出現(xiàn)位置穩(wěn)定。不會(huì)因?yàn)檐涙I盤出現(xiàn)導(dǎo)致原本在屏幕底部或中間的Toast被遮蓋或浮動(dòng)到其他位置。
  2. 更容易引起用戶注意。iOS持續(xù)錄音、GPS被使用、正在通話狀態(tài)、還有活動(dòng)指示器和系統(tǒng)push通知都出現(xiàn)在屏幕頂部,iOS用戶更習(xí)慣于在頂部感知反饋信息。
  3. 不干擾用戶瀏覽主體內(nèi)容。Toast出現(xiàn)在屏幕頂部不會(huì)遮擋主體內(nèi)容。

頂部Toast

Toast的未來

Toast有很多優(yōu)點(diǎn):

  1. 占用屏幕空間小。
  2. 不會(huì)打斷用戶操作。
  3. 使用簡(jiǎn)單適用范圍廣,人人都是會(huì)用Toast的產(chǎn)品經(jīng)理。

但Toast也有不少缺點(diǎn):

  1. 出現(xiàn)時(shí)間短,在碎片化時(shí)代注意力不集中容易錯(cuò)過Toast提示。
  2. 雖然非模態(tài),但是黑乎乎的樣式上給人一種模態(tài)的錯(cuò)覺,會(huì)打斷心流。
  3. 遮蓋其他控件,但不能對(duì)Toast進(jìn)行交互。

更為嚴(yán)重的是Toast被濫用的情況比較嚴(yán)重,當(dāng)一個(gè)App在加載、表單提示、狀態(tài)變更反饋、斷網(wǎng)消息等使用Toast,不斷出現(xiàn)的黑乎乎矩形會(huì)對(duì)整個(gè)體驗(yàn)帶來非常大的阻塞感,有時(shí)候甚至?xí)瑫r(shí)出現(xiàn)兩個(gè)Toast或者持續(xù)彈出同一個(gè)Toast等令人啼笑皆非的情況。

同時(shí)兩個(gè)Toast

持續(xù)彈出同一個(gè)Toast

代替Toast的其他形式

濫用Toast是懶惰的做法,設(shè)計(jì)師完全有其他形式代替Toast,達(dá)到更優(yōu)雅的用戶體驗(yàn)。

頁面內(nèi)提示

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

表單頁面內(nèi)提示

多態(tài)按鈕

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

支付寶多態(tài)按鈕

動(dòng)效

優(yōu)雅的動(dòng)態(tài)效果能給吸引用戶注意力,富含情感給用戶留下深刻印象。事物之間的關(guān)系可以通過動(dòng)效進(jìn)行隱喻。例如電商App加入購物車,商品飛入購物車中,有趣流暢。

商品飛入購物車

震動(dòng)和聲音

除了屏幕內(nèi)反饋,屏幕外的反饋效果更強(qiáng)烈更真實(shí)。例如拍照時(shí)“咔擦”聲音,還有啟動(dòng)靜音模式時(shí)手機(jī)震動(dòng)??紤]到手機(jī)放在包里感知不到震動(dòng)或者手機(jī)音量太小,因此聲音和震動(dòng)建議作為輔助反饋手段。

Snackbar

Snackbar可以理解為是加強(qiáng)版的Toast。樣式和規(guī)則與Toast非常相似,不同主要有兩點(diǎn):1.Snackbar支持主動(dòng)滑動(dòng)關(guān)閉。2.Snackbar可以附帶一個(gè)操作(也可以不帶)。

Snackbar

在最新的Google Material Design里,Snackbar和Toast被放在一起來介紹,而且Snackbar的篇幅要遠(yuǎn)多于Toast,后者被打上了Android Only的標(biāo)記,Snackbar能代替很多Toast的使用場(chǎng)景。(?https://material.io/guidelines/components/snackbars-toasts.html?)

可以預(yù)見,隨著設(shè)計(jì)師的專業(yè)程度提升還有用戶對(duì)體驗(yàn)品味不斷提高,Toast使用場(chǎng)景會(huì)不斷縮小,泛化的定義終將回歸到原點(diǎn)——操作后的輕量級(jí)短時(shí)反饋提示。

 

本文由 @龍爪槐守望者 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 寫得好

    來自北京 回復(fù)
  2. 您好,請(qǐng)問什么是模態(tài)

    來自北京 回復(fù)
    1. 我之后再寫一篇文章會(huì)說明,簡(jiǎn)單來說 就是界面中突然出現(xiàn)一個(gè)東西,不把這個(gè)東西操作掉,就無法點(diǎn)擊原來界面的東西,比如彈窗

      來自北京 回復(fù)
    2. 簡(jiǎn)而言之就是蒙層

      來自中國(guó) 回復(fù)
  3. 啊呀 好像配圖配錯(cuò)了一張,我要改一下

    來自北京 回復(fù)
  4. 6666666

    來自北京 回復(fù)
  5. 有用

    來自廣東 回復(fù)
  6. good!

    來自北京 回復(fù)