反饋是交互設(shè)計(jì)中最前線(xiàn)的一環(huán)，它的好壞直接影響產(chǎn)品體驗(yàn)。

前段時(shí)間看到一個(gè)有趣的例子，這是某個(gè)應(yīng)用中添加銀行卡的頁(yè)面。伴隨著用戶(hù)的輸入，系統(tǒng)會(huì)自動(dòng)判斷銀行卡的類(lèi)型，銀行卡的默認(rèn)圖標(biāo)會(huì)變?yōu)檎谳斎氲目ㄌ?hào)對(duì)應(yīng)的卡片類(lèi)型。這種方式幫助用戶(hù)省掉了一個(gè)選擇卡片類(lèi)型的步驟。另外，當(dāng)用戶(hù)正確的完成了16位卡號(hào)的填寫(xiě)，文本框會(huì)自動(dòng)改變顯示模式，之前輸入的卡號(hào)只會(huì)顯示出最后的4位，節(jié)省出的3個(gè)字段就分配給了有效期、CVV碼和郵編。這里有一個(gè)很棒的細(xì)節(jié)，當(dāng)用戶(hù)在輸入CVV碼時(shí)，左側(cè)的圖標(biāo)會(huì)發(fā)生變化(如圖1)，提示用戶(hù)所謂的CVV碼就是卡片背后的3位數(shù)字，非常貼心。這是一種很積極的信息回饋方式，讓用戶(hù)能夠感受到系統(tǒng)對(duì)他們的操作產(chǎn)生了響應(yīng)。

（圖1）

這個(gè)例子只是“反饋”的一種形式，無(wú)論哪種形式的反饋都是在向用戶(hù)傳遞信息。能告訴用戶(hù)當(dāng)前的狀態(tài)，下一步該做什么，幫助用戶(hù)做出判斷和決定。這里整理了一些更多的反饋形式。

第一種：氣泡狀提示

氣泡狀提示通常是短暫出現(xiàn)在畫(huà)面上的，就像氣泡一樣過(guò)一會(huì)就會(huì)自己消失，并不需要對(duì)它進(jìn)行任何操作。這種提示通常用于告知人物狀態(tài)和操作結(jié)果。例如：發(fā)送成功，加載中，已刪除等。不過(guò)由于氣泡提示的特性，它容易被用戶(hù)忽略，所以并不適合承載太多文字或重要信息。

（圖2）

第二種：彈出框

彈出框一般會(huì)帶有一兩句說(shuō)明文字和兩個(gè)操作按鈕，用于確認(rèn)和取消重要的操作。例如：是否刪除內(nèi)容？是否要在無(wú)wifi的情況下看視頻等。通常會(huì)用顏色突出顯示可能造成用戶(hù)損失的操作項(xiàng)，如：刪除，不保存等。彈出框出現(xiàn)的時(shí)候會(huì)強(qiáng)迫用戶(hù)進(jìn)行操作并屏蔽背景的所有內(nèi)容，算是對(duì)用戶(hù)打擾最大的一種提示。通常用戶(hù)都想趕快關(guān)掉彈出框以便接著進(jìn)行操作，所以彈出框上的說(shuō)明和按鈕上的文字最好言簡(jiǎn)意賅，一目了然，能夠幫助用戶(hù)快速作出決策。作為設(shè)計(jì)師，我們要避免濫用彈出框提示，不太重要但又需要反饋的事就默默飄個(gè)氣泡好了，以免用戶(hù)常常被驚嚇。

（圖3）

第四種：按鈕，圖標(biāo)，鏈接的按下?tīng)顟B(tài)

這類(lèi)反饋是基于人在現(xiàn)實(shí)世界的經(jīng)驗(yàn)。在現(xiàn)實(shí)中按一個(gè)按鈕，它會(huì)立即有按下?tīng)顟B(tài)，例如陷進(jìn)平面中或變色發(fā)光。在無(wú)觸感的2d的屏幕上，更應(yīng)該有狀態(tài)的改變，讓用戶(hù)看到他的操作已經(jīng)被界面接收到了。iOS安卓系統(tǒng)平臺(tái)上的開(kāi)關(guān)控件就是一個(gè)例子。它模擬了現(xiàn)實(shí)中的開(kāi)關(guān)，在撥動(dòng)的過(guò)程中非常直觀地給用戶(hù)反饋并告訴用戶(hù)當(dāng)前所處的狀態(tài)。iOS系統(tǒng)中的手電筒，打開(kāi)的時(shí)候是高亮狀態(tài)，告知用戶(hù)它已經(jīng)被打開(kāi)了。

（圖4）

第五種：聲音和振動(dòng)

聲音能在一定程度上給用戶(hù)提供有用的反饋。比如虛擬鍵盤(pán)在按下時(shí)的咔噠聲，短信成功發(fā)送后的嗖聲，微信搖一搖手機(jī)之后的咔嚓聲。不過(guò)聲音反饋屬于點(diǎn)睛之比，而且受環(huán)境影響，如果過(guò)多地使用會(huì)變成一種打擾。震動(dòng)是一種比較強(qiáng)烈的觸覺(jué)反饋，可以用來(lái)代替或加強(qiáng)聲音提示。在手機(jī)系統(tǒng)中應(yīng)用的非常廣泛：如來(lái)電，短信等。在第三方應(yīng)用上很少用到，除非是游戲里面掛掉時(shí)會(huì)震你一下，可見(jiàn)震動(dòng)還是過(guò)于猛烈了。

（圖5）

第六種：動(dòng)畫(huà)

動(dòng)畫(huà)會(huì)給用戶(hù)提供有意義的反饋，幫助用戶(hù)直觀地了解到操作的結(jié)果。提升使用時(shí)的愉悅感。比如擬物動(dòng)畫(huà)，這種形象的動(dòng)畫(huà)幫助用戶(hù)清晰地感受到操作執(zhí)行的整個(gè)過(guò)程，并且增添了樂(lè)趣。例如在執(zhí)行刪除操作時(shí)，被刪除的東西一下碎掉；還有一些會(huì)持續(xù)比較久的操作（如下載或刪除大量文件），用動(dòng)態(tài)的進(jìn)度條展示已完成的進(jìn)度，能夠減少用戶(hù)的焦慮；還有一些有趣的下拉刷新動(dòng)畫(huà)，不但反饋了下拉刷新的過(guò)程，還讓加載的等待變的有趣。也有些動(dòng)畫(huà)通過(guò)形變來(lái)暗示用戶(hù)狀態(tài)的改變（如圖6），點(diǎn)擊“按鈕形狀”開(kāi)關(guān)后，返回按鈕的形狀發(fā)生了改變。

（圖6）

第七種：情感化設(shè)計(jì)

在mac系統(tǒng)中有一些很好的例子。例如，當(dāng)用戶(hù)在“系統(tǒng)偏好設(shè)置”中進(jìn)行搜索時(shí)，與搜索關(guān)鍵詞相關(guān)的項(xiàng)目會(huì)高亮顯示，相關(guān)度越高，高亮聚焦的亮度越高配置了觸屏鼠標(biāo)和沒(méi)用配置觸屏鼠標(biāo)的”Finder”窗口也不盡相同，前者沒(méi)有后者的拖動(dòng)滾動(dòng)條。（圖7）

（圖7）

上面講到了反饋的形式，下面我們來(lái)整理一下反饋的內(nèi)容：

1. 信息：反饋提示所帶的文字信息應(yīng)該簡(jiǎn)潔易懂，適當(dāng)?shù)氖褂脠D標(biāo)可以吸引用戶(hù)的注意，幫助用戶(hù)判斷提示的類(lèi)型。
2. 警告：警告框用于向用戶(hù)展示對(duì)使用程序有重要影響的信息。
3. 錯(cuò)誤：錯(cuò)誤是提示用戶(hù)操作出現(xiàn)了問(wèn)題或異常，無(wú)法繼續(xù)執(zhí)行。錯(cuò)誤提示告知用戶(hù)為什么操作被中斷，以及出現(xiàn)了什么錯(cuò)誤。錯(cuò)誤信息要盡量準(zhǔn)確，通俗易懂，有效的錯(cuò)誤提示要解釋發(fā)生的原因，并提供解決方案以使用戶(hù)能夠進(jìn)行修復(fù)。
4. 確認(rèn)：確認(rèn)是用于詢(xún)問(wèn)用戶(hù)是否要繼續(xù)某個(gè)操作，讓用戶(hù)進(jìn)一步對(duì)所做的操作進(jìn)行確定和執(zhí)行，為用戶(hù)提供可反悔，可撤銷(xiāo)的退路。讓用戶(hù)對(duì)一些執(zhí)行結(jié)果較危險(xiǎn)或不可逆的操作進(jìn)行二次選擇和確認(rèn)，防止用戶(hù)誤操作。

接下來(lái)說(shuō)一下反饋出現(xiàn)的位置。反饋主要出現(xiàn)在“狀態(tài)欄”，“導(dǎo)航欄”，內(nèi)容區(qū)上方，屏幕中，標(biāo)簽欄上方和頁(yè)面底部。

最后簡(jiǎn)單總結(jié)一下反饋設(shè)計(jì)的規(guī)則：

1. 為用戶(hù)在各個(gè)階段的操作提供必要，積極，及時(shí)的反饋；
2. 避免過(guò)度反饋，以免給用戶(hù)帶來(lái)不必要的打擾和驚嚇；
3. 能夠及時(shí)看到效果的，簡(jiǎn)單的操作可以省略反饋提示；
4. 所提供的反饋要能讓用戶(hù)以最便捷的方式完成選擇；
5. 為不同類(lèi)型的反饋?zhàn)霾町惢O(shè)計(jì)；
6. 不要打斷用戶(hù)的意識(shí)流，避免遮擋用戶(hù)可能會(huì)去查看或操作的對(duì)象。

反饋是交互設(shè)計(jì)中最前線(xiàn)的一環(huán)，它的好壞直接影響產(chǎn)品體驗(yàn)。實(shí)際設(shè)計(jì)中，由于項(xiàng)目時(shí)間緊張，往往沒(méi)有給這塊應(yīng)有的關(guān)注，特寫(xiě)此文時(shí)刻提醒自己。

作者：?微微風(fēng)

來(lái)源：微信公眾號(hào)【ME網(wǎng)易移動(dòng)設(shè)計(jì)】