5蔓姚、控件系列之TOAST(吐司提示)的曾經捕虽、現(xiàn)在與未來

Toast概念的由來:除了Android規(guī)范,Windows的規(guī)范中也有Toast坡脐,但定義不一樣泄私。Toast在Android中的定義就是大家所熟悉的黑色半透明提示,而在Windows的規(guī)范中Toast概念幾乎等同于Android的一條Notification(通知)备闲。Windows和Android的Toast有著千絲萬縷的聯(lián)系晌端,據說一位微軟前員工在開發(fā)MSN Messenger時,覺得MSN彈出通知方式很像烤面包(Toast)烤熟時從烤面包機(Toaster)里彈出來一樣恬砂,因此把這種提示方式命名為Toast咧纠,后來這位微軟前員工帶著這一習慣命名跳槽去了Google。

Toast的由來

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

UIProgressHUD

被泛化的Toast:你要是執(zhí)著的把HUD念做Toast诊沪,大家也能理解,因為如今Toast的概念已經泛化曾撤,早已打破了Android的規(guī)范端姚。

在Android正統(tǒng)的規(guī)范中Toast:①出現(xiàn)在屏幕底部。②只能放文字不能帶圖標挤悉,文字要精簡不宜太長渐裸。③是模態(tài)的,可以透過Toast對其他控件進行操作装悲。④短時間后會自動消失昏鹃。⑤不能對Toast進行交互,不能手動操作讓Toast主動消失诀诊。

在市面上很容易找到打破這個規(guī)則的Toast樣式洞渤,例如加載:出現(xiàn)在屏幕中間、帶圖標属瓣,是模態(tài)的载迄,如果網速很慢,Toast可能會持續(xù)很長時間抡蛙,可以通過操作讓其主動消失宪巨。

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

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

Apple Store App

頂部Toast:除了Toast概念的泛化蒜田,最近不少iOS App在嘗試將Toast的位置由屏幕底部和中間改到頂部,這樣做有幾個好處:1.出現(xiàn)位置穩(wěn)定选泻。不會因為軟鍵盤出現(xiàn)導致原本在屏幕底部或中間的Toast被遮蓋或浮動到其他位置冲粤。2.更容易引起用戶注意。iOS持續(xù)錄音页眯、GPS被使用梯捕、正在通話狀態(tài)、還有活動指示器和系統(tǒng)push通知都出現(xiàn)在屏幕頂部窝撵,iOS用戶更習慣于在頂部感知反饋信息傀顾。3.不干擾用戶瀏覽主體內容。Toast出現(xiàn)在屏幕頂部不會遮擋主體內容碌奉。

頂部Toast

Toast的未來:Toast有很多優(yōu)點:1.占用屏幕空間小短曾。2.不會打斷用戶操作寒砖。3.使用簡單適用范圍廣,人人都是會用Toast的產品經理嫉拐。但Toast也有不少缺點:1.出現(xiàn)時間短哩都,在碎片化時代注意力不集中容易錯過Toast提示。2.雖然非模態(tài)婉徘,但是黑乎乎的樣式上給人一種模態(tài)的錯覺漠嵌,會打斷心流。3.遮蓋其他控件判哥,但不能對Toast進行交互献雅。

更為嚴重的是Toast被濫用的情況比較嚴重,當一個App在加載塌计、表單提示挺身、狀態(tài)變更反饋、斷網消息等使用Toast锌仅,不斷出現(xiàn)的黑乎乎矩形會對整個體驗帶來非常大的阻塞感章钾,有時候甚至會同時出現(xiàn)兩個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可以附帶一個操作(也可以不帶)弃酌。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末氨菇,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子妓湘,更是在濱河造成了極大的恐慌查蓉,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件榜贴,死亡現(xiàn)場離奇詭異豌研,居然都是意外死亡,警方通過查閱死者的電腦和手機唬党,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門鹃共,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人初嘹,你說我怎么就攤上這事及汉。” “怎么了屯烦?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵坷随,是天一觀的道長。 經常有香客問我驻龟,道長温眉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任翁狐,我火速辦了婚禮类溢,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己闯冷,他們只是感情好砂心,可當我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蛇耀,像睡著了一般辩诞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上纺涤,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天译暂,我揣著相機與錄音,去河邊找鬼撩炊。 笑死外永,一個胖子當著我的面吹牛,可吹牛的內容都是我干的拧咳。 我是一名探鬼主播伯顶,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼呛踊!你這毒婦竟也來了砾淌?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤谭网,失蹤者是張志新(化名)和其女友劉穎汪厨,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體愉择,經...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡劫乱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了锥涕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衷戈。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖层坠,靈堂內的尸體忽然破棺而出殖妇,到底是詐尸還是另有隱情,我是刑警寧澤破花,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布谦趣,位于F島的核電站,受9級特大地震影響座每,放射性物質發(fā)生泄漏前鹅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一峭梳、第九天 我趴在偏房一處隱蔽的房頂上張望舰绘。 院中可真熱鬧,春花似錦、人聲如沸捂寿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽者蠕。三九已至窃祝,卻和暖如春掐松,著一層夾襖步出監(jiān)牢的瞬間踱侣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工大磺, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留抡句,地道東北人。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓杠愧,卻偏偏與公主長得像待榔,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子流济,可洞房花燭夜當晚...
    茶點故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內容