Toast(吐司提示)的曾經音五、現在與未來

本篇仍屬于《這個控件叫什么》專題辣恋,鑒于大家對Toast的名稱和使用事項都非常熟悉亮垫,因此劍走偏鋒來八卦一下Toast的前世今生,揭示Toast少有人知的另一面伟骨。

Toast的曾今

Toast概念的由來

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


Windows Phone中的Toast

Windows和Android的Toast有著千絲萬縷的聯系,據說一位微軟前員工在開發(fā)MSN Messenger時壹瘟,覺得MSN彈出通知方式很像烤面包(Toast)烤熟時從烤面包機(Toaster)里彈出來一樣鲫剿,因此把這種提示方式命名為Toast,后來這位微軟前員工帶著這一習慣命名跳槽去了Google稻轨。
https://en.wikipedia.org/w/index.php?title=Toast_%28computing%29&oldid=459336160

Toast的由來

iOS里的HUD

仔細閱讀iOS設計指南就會發(fā)現并沒有Toast這個控件灵莲,但iOS中確實有類似于Toast樣式出現,例如iOS的音量調節(jié)提示殴俱。 iOS 把這個組件叫做 UIProgressHUD(HUD意思很可能是heads up display)政冻,可惜這個組件是系統(tǒng)私有的,第三方App無法直接獲取使用线欲,因此出現了各種模仿它的第三方控件明场,例如MBProgressHUD、 SVProgressHUD還有JGProgressHUD李丰,從此以后HUD就成了iOS開發(fā)者里達成共識的半官方概念苦锨。


UIProgressHUD

Toast的現在

被泛化的Toast

你要是執(zhí)著的把HUD念做Toast,大家也能理解趴泌,因為如今Toast的概念已經泛化舟舒,早已打破了Android的規(guī)范。
在Android正統(tǒng)的規(guī)范中Toast:

  • 出現在屏幕底部嗜憔。
  • 只能放文字不能帶圖標秃励,文字要精簡不宜太長。
  • 不是模態(tài)的吉捶,可以透過Toast對其他控件進行操作夺鲜。
  • 短時間后會自動消失。
  • 不能對Toast進行交互呐舔,不能手動操作讓Toast主動消失谣旁。

在市面上很容易找到打破這個規(guī)則的Toast樣式,例如加載:出現在屏幕中間滋早、帶圖標,是模態(tài)的砌们,如果網速很慢杆麸,Toast可能會持續(xù)很長時間,可以通過操作讓其主動消失浪感。


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

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


Apple Store App

頂部Toast

除了Toast概念的泛化,最近不少iOS App在嘗試將Toast的位置由屏幕底部和中間改到頂部旦万,這樣做有幾個好處:1.出現位置穩(wěn)定闹击。不會因為軟鍵盤出現導致原本在屏幕底部或中間的Toast被遮蓋或浮動到其他位置。2.更容易引起用戶注意成艘。iOS持續(xù)錄音赏半、GPS被使用、正在通話狀態(tài)淆两、還有活動指示器和系統(tǒng)push通知都出現在屏幕頂部断箫,iOS用戶更習慣于在頂部感知反饋信息。3.不干擾用戶瀏覽主體內容秋冰。Toast出現在屏幕頂部不會遮擋主體內容仲义。

頂部Toast

Toast的未來

Toast有很多優(yōu)點:1.占用屏幕空間小。2.不會打斷用戶操作丹莲。3.使用簡單適用范圍廣光坝,人人都是會用Toast的產品經理。但Toast也有不少缺點:1.出現時間短甥材,在碎片化時代注意力不集中容易錯過Toast提示盯另。2.雖然非模態(tài),但是黑乎乎的樣式上給人一種模態(tài)的錯覺洲赵,會打斷心流鸳惯。3.遮蓋其他控件,但不能對Toast進行交互叠萍。
更為嚴重的是Toast被濫用的情況比較嚴重芝发,當一個App在加載、表單提示苛谷、狀態(tài)變更反饋辅鲸、斷網消息等使用Toast,不斷出現的黑乎乎矩形會對整個體驗帶來非常大的阻塞感腹殿,有時候甚至會同時出現兩個Toast或者持續(xù)彈出同一個Toast等令人啼笑皆非的情況独悴。


同時兩個Toast
持續(xù)彈出同一個Toast

代替Toast的其他形式

濫用Toast是懶惰的做法,設計師完全有其他形式代替Toast锣尉,達到更優(yōu)雅的用戶體驗刻炒。

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


    表單頁面內提示
  • 多態(tài)按鈕
    如果按鈕被按下后需要與服務器交互后才能真正響應操作厨埋,那么等待難以避免。這種情況下可以給按鈕增加多個狀態(tài)捐顷,讓用戶知道App已經接受到他的操作荡陷。典型的例子是支付寶的確認付款按鈕,擁有付款前迅涮、正在付款和付款成功三個狀態(tài)废赞,反饋明顯不需要額外再用Toast進行提示。
支付寶多態(tài)按鈕
  • 動效
    優(yōu)雅的動態(tài)效果能給吸引用戶注意力叮姑,富含情感給用戶留下深刻印象唉地。事物之間的關系可以通過動效進行隱喻。例如電商App加入購物車传透,商品飛入購物車中耘沼,有趣流暢。


    商品飛入購物車
  • 震動和聲音
    除了屏幕內反饋朱盐,屏幕外的反饋效果更強烈更真實群嗤。例如拍照時“咔擦”聲音,還有啟動靜音模式時手機震動兵琳】衩兀考慮到手機放在包里感知不到震動或者手機音量太小,因此聲音和震動建議作為輔助反饋手段躯肌。

  • Snackbar
    Snackbar可以理解為是加強版的Toast者春。樣式和規(guī)則與Toast非常相似,不同主要有兩點:1.Snackbar支持主動滑動關閉清女。2.Snackbar可以附帶一個操作(也可以不帶)钱烟。

Snackbar

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

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








《這個控件叫什么》專題

這個控件叫:Badge/徽標/小紅點
這個控件叫:A-Z index/字母索引導航
這個控件叫:Segment Controls/分段控件(附錄與Tabs的區(qū)別)
這個控件叫:Skeleton Screen/加載占位圖
這個控件叫:Page Indicator/Page Controls/頁面指示器
這個控件叫:Stepper/步進器
這個控件叫:Switch/開關/滑動開關/切換開關
這個控件叫:Picker/選擇器/拾取器
這個控件叫:Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤
這個控件叫:Action Sheet/動作菜單/動作面板/行動列表
這個控件叫:Popover/氣泡彈出框/彈出式氣泡/氣泡
這個控件叫:Text fields/輸入框/文本框
這個控件可能叫:Notice Bar/通告欄

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市尘吗,隨后出現的幾起案子逝她,更是在濱河造成了極大的恐慌,老刑警劉巖睬捶,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件黔宛,死亡現場離奇詭異,居然都是意外死亡擒贸,警方通過查閱死者的電腦和手機臀晃,發(fā)現死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來介劫,“玉大人徽惋,你說我怎么就攤上這事∽希” “怎么了险绘?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長誉碴。 經常有香客問我宦棺,道長,這世上最難降的妖魔是什么黔帕? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任代咸,我火速辦了婚禮,結果婚禮上蹬屹,老公的妹妹穿的比我還像新娘侣背。我一直安慰自己,他們只是感情好慨默,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布贩耐。 她就那樣靜靜地躺著,像睡著了一般厦取。 火紅的嫁衣襯著肌膚如雪潮太。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天虾攻,我揣著相機與錄音铡买,去河邊找鬼。 笑死霎箍,一個胖子當著我的面吹牛奇钞,可吹牛的內容都是我干的。 我是一名探鬼主播漂坏,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼景埃,長吁一口氣:“原來是場噩夢啊……” “哼媒至!你這毒婦竟也來了?” 一聲冷哼從身側響起谷徙,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤拒啰,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后完慧,有當地人在樹林里發(fā)現了一具尸體谋旦,經...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年屈尼,在試婚紗的時候發(fā)現自己被綠了册着。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡鸿染,死狀恐怖指蚜,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情涨椒,我是刑警寧澤摊鸡,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站蚕冬,受9級特大地震影響免猾,放射性物質發(fā)生泄漏。R本人自食惡果不足惜囤热,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一猎提、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧旁蔼,春花似錦锨苏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至限佩,卻和暖如春葵诈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背祟同。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工作喘, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人晕城。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓泞坦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親砖顷。 傳聞我的和親對象是個殘疾皇子暇矫,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內容