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

12 評(píng)論 180362 瀏覽 1124 收藏 6 分鐘

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

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

1.反饋

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

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

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

2.Toast

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

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

豆瓣APP&淘寶APP

3.Snackbar

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

帶一個(gè)操作 & 不帶操作

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

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

4.Dialog

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

強(qiáng)提示 & 運(yùn)營(yíng)消息

如上圖,Dialog有兩種使用場(chǎng)景,第一是很強(qiáng)的消息提示;第二是重要的運(yùn)營(yíng)消息。

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

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

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

臨時(shí)框:Actionbar

5.總結(jié)

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

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

#專欄作家#

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

本文原創(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. 不知道不要亂講好不,你好好查一下actionbar是個(gè)什么東西

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

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

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

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

    來(lái)自廣東 回復(fù)
  6. 覺得寫得很棒,簡(jiǎn)潔清晰~

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

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

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

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

      回復(fù)
    2. 他大概說(shuō)振動(dòng)吧

      來(lái)自廣東 回復(fù)
    3. 同問(wèn)

      來(lái)自北京 回復(fù)