APP 反饋的三種形式:toast、snackbar、dialog

12 評論 180385 瀏覽 1124 收藏 6 分鐘

聰明的產(chǎn)品會在恰當(dāng)?shù)臅r間給予恰當(dāng)?shù)姆答仯环答仭⒎答伈患皶r、反饋不對都會讓用戶反感你的產(chǎn)品,從而失去用戶。

現(xiàn)在的公司是做軟硬件一體化,我負(fù)責(zé)OS層面的交互方案,這里會遇到要制定一些設(shè)計原則,從而讓產(chǎn)品體驗更統(tǒng)一。我們都知道,針對信息提醒,有一種設(shè)計形式叫toast,如何對toast進(jìn)行規(guī)范,引發(fā)了我寫這篇文章。

1.反饋

互聯(lián)網(wǎng)產(chǎn)品存在兩套反饋機制,一套是有明顯界面變動的反饋,例如你點擊淘寶列表頁,立馬就進(jìn)入了商品詳情頁,頁面的及時跳轉(zhuǎn)是明顯的視覺反饋;再比如你輸入完賬號密碼,點擊登錄,登錄成功,并進(jìn)入了APP首頁,這也是很明顯的視覺反饋。

但,如果某種反饋不明顯該怎么辦?例如,你登錄的時候你輸錯了賬號密碼,點擊登錄,是進(jìn)入不了APP的,這個時候大部分產(chǎn)品都會給予toast提示用戶:密碼或賬號輸入錯誤,請重試。你看到這個提示之后,就會知道自己改怎么做了。這就是反饋的第二套機制:通過設(shè)計不同的形式來提示用戶。

常見的反饋有三種樣式:toast、snackbar、dialog。

2.Toast

toast屬于一種輕量級的反饋,常常以小彈框的形式出現(xiàn),一般出現(xiàn)1到2秒會自動消失,可以出現(xiàn)在屏幕上中下任意位置,但同個產(chǎn)品會模塊盡量使用同一位置,讓用戶產(chǎn)生統(tǒng)一認(rèn)知。

在樣式上,盡量和產(chǎn)品整體風(fēng)格保持一致,這樣會更和諧,不至于突兀。

豆瓣APP&淘寶APP

3.Snackbar

Snackbar繼承了toast的所有特性,即:為小彈窗的形式,會自動消失。有三個差異化:①可以出現(xiàn)0到1個操作,不包含取消按鈕;②點擊Snackbar以外的區(qū)域,Snackbar會消失;③一般只出現(xiàn)在屏幕底部。

帶一個操作 & 不帶操作

Snackbar只出現(xiàn)在Android平臺,提示程度比toast稍重,介于Toast和Dialog之間。

Snackbar使用場景:當(dāng)你刪除某張照片時,可以在屏幕底部出現(xiàn)Snackbar,提示“照片成功刪除”,并附帶撤銷操作,當(dāng)用戶點擊撤銷時,照片可恢復(fù)。用戶不進(jìn)行操作Snackbar則消失,照片刪除成功。

4.Dialog

如果Toast和Snackbar兩種形式都不足以達(dá)到你需要的反饋強度,則推薦你使用Dialog的形式,即對話框提示。

強提示 & 運營消息

如上圖,Dialog有兩種使用場景,第一是很強的消息提示;第二是重要的運營消息。

由于Dialog不會自行消失,必須用戶操作后(點擊確定或關(guān)閉)才能消失,所以會打斷用戶當(dāng)前任務(wù),這會增加用戶的焦慮和不安感,影響用戶體驗,請謹(jǐn)慎使用。如果一定要使用Dialog形式來提示用戶,可以嘗試在視覺上做得更有趣,減少用戶的焦慮和不安。

除了Toast、Snackbar、Dialog之外,還有一種臨時框,叫Actionbar,該提示框一般用于讓用戶選擇操作,而不是作為反饋或消息提示。

所有的設(shè)計形式都是服務(wù)于產(chǎn)品功能,而產(chǎn)品功能則來源于用戶需求、公司戰(zhàn)略、老板意志等方面。在知道每種設(shè)計形式的來龍去脈的基礎(chǔ)上,讓設(shè)計形式服務(wù)好用戶和公司。

臨時框:Actionbar

5.總結(jié)

人機交互最重要的一條原則之一:反饋。我們拿人與人之間打比方,和某朋友聊天,你依據(jù)他一句,針對你的每個話題他都在給你反饋,有言語的反饋、表情和動作的反饋等。試想一下,如果某個笨蛋朋友,你說一句,他半天不理人,你會不會很懊惱?為什么?因為他沒有給你應(yīng)有的反饋。

當(dāng)你在和互聯(lián)網(wǎng)產(chǎn)品交互時,產(chǎn)品會給你視覺(界面的變動)、聽覺(提示音)、觸覺(震動)的反饋,聰明的產(chǎn)品會在恰當(dāng)?shù)臅r間給予恰當(dāng)?shù)姆答仯环答?、反饋不及時、反饋不對都會讓用戶反感你的產(chǎn)品,從而失去用戶。

#專欄作家#

鄒志楠,微信公眾號:UE修養(yǎng),人人都是產(chǎn)品經(jīng)理專欄作家。交互設(shè)計師,專注于互聯(lián)網(wǎng)產(chǎn)品設(shè)計。

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 不知道不要亂講好不,你好好查一下actionbar是個什么東西

    來自廣東 回復(fù)
  2. 標(biāo)準(zhǔn)的叫法好像是Action Sheet而不是Action Bar吧?

    來自廣東 回復(fù)
  3. 為什么我收藏不了啊…chrome

    來自廣東 回復(fù)
  4. Toast,Snackbar,Dialog,Actionbar。Toast有烤面包的意思,和彈出框很像,我猜起這名字有這方面原因吧

    來自安徽 回復(fù)
  5. 謝謝分享!~~

    來自廣東 回復(fù)
  6. 覺得寫得很棒,簡潔清晰~

    來自福建 回復(fù)
  7. 寫的不太完全啊,會讓很多新人蒙逼的。dialog也分很多種,alert confirm等等啊

    回復(fù)
  8. 若無明顯的字打錯了,那將會更好。

    回復(fù)
  9. APP的反饋形式有很多,帖主只闡述了視覺中的3種,還有聽覺,觸覺

    來自江蘇 回復(fù)
    1. 觸覺都有什么樣的形式,可以舉個例子么。

      回復(fù)
    2. 他大概說振動吧

      來自廣東 回復(fù)
    3. 同問

      來自北京 回復(fù)