設計實習生濫用這個組件,聽說已被總監暴打!

0 評論 7121 瀏覽 7 收藏 8 分鐘

導讀:設計師在日常工作中經常會需要設計一些反饋手段,以提示用戶操作的結果。toast的就是反饋設計當中比較好用的設計組件,「小巧」「對用戶打擾小」「非模態」一些特點讓他的使用場景非常廣泛。同時作者在翻閱資料的時候也發現一些意想不到冷知識,一起來看看吧。

本文約定:由于「toast」泛指具有該特質的一類組件,所以下對于該類型組件均統稱為「toast」。

01「Toast」的前世今生

據說一位微軟前員工在開發MSN Messenger時,覺得MSN彈出通知方式很像烤面包(Toast)烤熟時從烤面包機(Toaster)里彈出來一樣,因此把這種提示方式命名為Toast,后來這位微軟前員工帶著這一習慣命名跳槽去了Google。

現在交互設計范疇當中,「toast」不是單獨指某一類型交互組件,已經成為一個被泛化的概念,具備「小而靈巧」「不打斷用戶體驗」特質的反饋組件都可以被稱作為「toast」。

02 谷歌對「toast」的看法

谷歌設計體系之下「Snackbars」與「toast」的概念相仿,其特點如下:

  • 承載一種對用戶的反饋信息。
  • 出現在屏幕的邊緣
  • 不應該中斷用戶體驗,停留一段時間后自動消失。
  • 可承載操作。

谷歌設計體系下的「Snackbars」

03 蘋果對「toast」的看法

敲黑板說個冷知識,小編查閱了蘋果的人機交互規范發現并沒有類似「toast」使用場景的交互組件。當時有點想不通,不過結合蘋果設計理念“不操作、不打擾”的原則似乎就比較說的通,iOS會通過對信息內容的操作直接告訴用戶結果,例如下圖,當用戶完成對短信刪除操作后,短信直接消失,沒有必要再通過toast類型組件去告知用戶。

蘋果對于反饋設計十分謹慎,只有在必要的時候才會考慮去打擾用戶破壞體驗,在“Feedback”設計建議中提到,將狀態提示跟其他類型反饋自然順暢的集成到你界面當中,例如iOS系統中對于未讀信息提示的設計。

這里應該會有同學提到一個以前iOS系統下的怪物組件「UIProgressHUD」,他從外觀樣式上看起來跟「toast」有一定的相似性,但是整一個交互行為差別巨大。

  • HUD出現在屏幕的中央,Toast在底部;
  • HUD可以由icon,Toast不能有icon,只能用文字與按鈕;
  • HUD一般是毛玻璃透明,Toast一般是灰黑或者黑色半透明;
  • HUD一般用在調節信息(如調節音量時),Toast中內容不可變化。

不過iOS 13中蘋果還是秉承著自己的設計理念,最終拋棄了音量調整的HUD,采用音量滑動條的方式,并且位于屏幕左側,盡可能消除對用戶的打擾。

04「Toast」的設計注意點

1. 讓「Toast」自動關閉

「toast」是系統對用戶傳遞消息最低程度的中斷,不需要用戶進行交互。自動讓其消失,停留時長再屏幕上至少四秒,最多十秒。

下圖為各種反饋組件到擾優先級對比表(出自Material design文檔)

2. 一次只出現一個

當需要多個「toast」更新時,它們應該一次出現一個。如果多個連續出現的話就違背「toast」不中斷用戶體驗的初衷了。

3. 可泛化的使用「Toast」

隨著互聯網的深入發展,現在對于他的泛化使得Toast原本的定義變得模糊,拓展了很多新的使用場景??丶x和用途的變化也在隨著時間演化,演化出符合業務和用戶習慣的新形式反過來又會促成新的控件定義和規范,連iOS官方的Apple Store App都開始使用類似Toast的控件,并且不少app里「toast」也出現在屏幕的中間(這點與Material design對于「toast」的看法相違背)。

4. 使用時注意實際場景

上文提到「toast」可以適當的泛化使用,但是并不分場合亂用,比如許多產品在加載、表單提示、狀態變更反饋、斷網消息等一些需要重度提示的場景也在使用「toast」,這就很讓人啼笑皆非了。

05 文末小節

由于「toast」類型組件使用簡單適用范圍廣,造成它這么多年來一直在產品設計當中被濫用,不過隨著互聯網設計不斷深入發展,「toast」類型組件被濫用的狀況正在逐漸變好,同時不少相似設計場景其實有更匹配的設計組件去代替「toast」,所以「toast」類型組件的使用場景會不斷縮小,泛化的定義終將回歸到原點——操作后的輕量級短時反饋提示。

 

作者:月亮與六便士;公眾號:月亮體驗設計坊

本文由 @月亮與六便士 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!