APP 反饋的三種形式:toast、snackbar、dialog
聰明的產(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)載。
不知道不要亂講好不,你好好查一下actionbar是個什么東西
標(biāo)準(zhǔn)的叫法好像是Action Sheet而不是Action Bar吧?
為什么我收藏不了啊…chrome
Toast,Snackbar,Dialog,Actionbar。Toast有烤面包的意思,和彈出框很像,我猜起這名字有這方面原因吧
謝謝分享!~~
覺得寫得很棒,簡潔清晰~
寫的不太完全啊,會讓很多新人蒙逼的。dialog也分很多種,alert confirm等等啊
若無明顯的字打錯了,那將會更好。
APP的反饋形式有很多,帖主只闡述了視覺中的3種,還有聽覺,觸覺
觸覺都有什么樣的形式,可以舉個例子么。
他大概說振動吧
同問