“交互設(shè)計”指的是人機交互方式的設(shè)計。人機交互指的是用戶和系統(tǒng)之間進行信息的傳遞——用戶通過操作（例如手動錄入或者選擇）把信息傳遞給系統(tǒng)，系統(tǒng)反饋信息給用戶，告知用戶操作的結(jié)果或者操作對象狀態(tài)的變更。在這里我們詳細分享一下系統(tǒng)反饋給用戶信息的常見方式。

反饋信息有兩個交互設(shè)計的要點：

• 及時性：避免用戶等待產(chǎn)生焦躁情緒或者繼續(xù)進行其他無效的操作。
• 簡單易讀：用戶看到(或聽到)反饋能明白結(jié)果的含義和指向性。

常見的反饋方式分為6種：彈框、頁面、標簽、紅點、動畫、聲音。

一、彈框

彈框分為模態(tài)彈框和非模態(tài)彈框，兩者最大的區(qū)別是前者強制用戶進行交互。

模態(tài)框一般會有一層黑色透明的蒙板，它打斷用戶所屬的主流程，只能到完成模態(tài)框的操作，才能返回到主流程中去。非模態(tài)框一般沒有那一層蒙板，不會影響所屬的主流程，彈出非模態(tài)也能看見底層的主流程，過一定的時間(3~5s)后會自動消失(或者點擊彈框外的其他位置)。

模態(tài)彈框?qū)儆谥亓考壏答?，?yōu)勢是能夠獲取用戶的關(guān)注焦點，對將要操作或者正在操作產(chǎn)生會產(chǎn)生結(jié)果進行明確的告知，從而引起用戶的重視和思考，防止用戶誤操作。例如用戶在刪除重要信息時會有“一旦刪除，無法恢復(fù)”的彈窗提示。劣勢是會打斷用戶當前的操作。

非模態(tài)彈框?qū)儆谳p量級反饋，優(yōu)勢是不會影響用戶當前的操作，干擾非常小。例如用戶關(guān)注成功之后會有“關(guān)注成功”的toast提示。劣勢是因為視覺效果不夠明顯、顯示時間有限等因素導(dǎo)致用戶容易錯過。所以我們在平時的設(shè)計中要根據(jù)不同的場景和反饋的重要程度選擇合適的反饋方式 。

1. 模態(tài)彈框

模態(tài)彈框分為對話框、動作欄和浮層。

對話框一般用在比較重要的系統(tǒng)狀態(tài)變化或者重要且不可逆的操作時，需要用戶知曉操作會產(chǎn)生的后果；對一些重要的操作進行繼續(xù)或者放棄，方向A或者方向B選擇的詢問；重要信息錄入提交或者驗證等。

底部動作欄是指從頁面底部向上滑出的面板，通常讓用戶對當前的操作進行確認或者展示多個操作項讓其進行選擇。相比較對話框，底部動作欄能承擔數(shù)量更多且表現(xiàn)形式更豐富的選項，例如列表、宮格、圖文，可觸發(fā)更多的動作等。

對于同樣都為兩個選項的情況，對話框更多的用在讓用戶對接下來的操作進行選擇的場景，底部動作欄用在讓用戶對之前的操作進行二次確認的場景。

浮層可以出現(xiàn)在頁面中的任何位置，對于頁面元素比較多或者頁面有比較多相似元素時，能夠給用戶更具有指向性的提示。浮層展示的內(nèi)容一般為多種操作的選項。

2. 非模態(tài)彈框

非模態(tài)彈窗分為toast、snackbar、noticebar。

toast是一種輕量型的反饋方式，不會打斷用戶當前的操作流程，對用戶的打擾是最小。其缺點是容易被用戶忽視，而且不適合展示過多的信息，可能在用戶還沒讀完信息之前就消失了。

常見的toast表現(xiàn)方式為文字或者icon+文字的組合方式。出現(xiàn)的位置會根據(jù)場景的不同設(shè)計在頁面的頂部、中間或者底部。經(jīng)過一定的時間間隔(3s~5s)后自動消失，或者用戶點擊其他位置也會自動消失。

注：

• toast是安卓設(shè)計規(guī)范的組件，當時目前也常用在IOS的設(shè)計中，IOS設(shè)計規(guī)范中的HUD和toast類似。
• 一些安卓用戶會在禁用通知欄消息時把toast通知也給禁用了，這樣就無法接收到toast形式的消息通知了。
• 背景顏色和停留時間都可以設(shè)置。

snackbar是比toast稍微重一點的輕量型反饋方式，包含一行與進行中的操作相關(guān)的文案&(最多)一個操作，并且snackbar不能包含使其消息的“取消”操作。

常規(guī)設(shè)計一般出現(xiàn)在頁面的底部，可把snackbar看成可點擊的Toast，用戶可以點擊按鈕進行交互，即使用戶不點擊Snackbar，經(jīng)過一定的時間間隔(3s~5s)后自動消失，或者用戶點擊其他位置也會自動消失。

注：toast和snackbar的停留時間一般為3~5s，但也可以根據(jù)場景的需求設(shè)置更長的時間。

noticebar通告欄屬于臨時視圖的范疇，可以在不影響用戶操作的情況下起到持續(xù)性提示用戶的作用，適合一些狀態(tài)變更的重要通知但又不需要用戶立即去進行操作的反饋提示?？梢詢H僅是一個文案提示，也可以增加可點擊的入口。

注：noticebar可以同時在一個頁面出現(xiàn)多個。

二、頁面

頁面的反饋一般用于重要且完整流程的結(jié)束，是一個非常重的反饋形式。例如購買支付成功或者提交重要信息之后的頁面反饋。而彈框一般用于完整流其中一個操作節(jié)點的反饋。

有兩種特殊的頁面反饋形式：

• 空頁面：要明確有沒有必要使用頁面，如果使用空頁面，要告知用戶這是什么內(nèi)容的空頁面，為什么是空的，并對希望用戶接下來的操作進行引導(dǎo)。
• 頁面內(nèi)嵌反饋，常用在網(wǎng)絡(luò)切換時(從WIF切換到5G流量)對用戶的提示。同樣是需要用戶知曉要使用比較重的提示的場景，如果使用彈窗就會影響用戶主流程的操作，所以為了達到同樣的目的又考慮到用戶的體驗，使用頁面內(nèi)嵌反饋是一個更為合適的選擇。

三、標簽

常見標簽為頁面某個操作或者頁面某個元素對象局部反饋的文字標簽提示，例如用戶在進行手勢驗證時，如果手勢錯誤時進行彈窗提示與直接頁面文字標簽提示，前者比后者要增加”關(guān)閉彈窗”的操作，而且提示內(nèi)容較多時也增加了用戶的記憶成本，用戶體驗較差。

在進行注冊郵箱時，填寫的信息如果有錯誤，文字標簽的提示兼顧了反饋的及時性、明確的指向性以及友好的引導(dǎo)性。

四、紅點

一般通知消息使用紅點或者帶有數(shù)字的紅點標識來反饋，用戶閱讀完成之后紅點消失或者對應(yīng)的數(shù)值減少。另外紅點標識上也會展示一些文案來表達特定的含義來吸引用戶的關(guān)注，此處不再詳解。

五、動畫

動畫的反饋方式是為了更加吸引用戶的注意力，減少用戶等待的焦躁感，例如在加載頁面資源 時展示有趣的動畫?；蛘邽榱烁庇^簡單的展示操作對象狀態(tài)的變化，例如點贊、收藏、未關(guān)注、已關(guān)注icon的變化，一般稱為這種按鈕為多態(tài)按鈕。

多態(tài)按鈕的優(yōu)勢是在不影響用戶操作主流程的前提下及時展示操作對象的變化，且變化之后的狀態(tài)持續(xù)直觀的顯示。

六、聲音

聲音形式的反饋一般用在用戶不方便及時查看頁面且比較重要的信息提示中，例如商家收款到賬具體金額的語音提示，外賣店家收到新單的語音提示。

例如早上大家騎著共享單車到公司樓下匆忙關(guān)閉自行車開關(guān)趕時間去打卡時收到“關(guān)閉成功”的語音提示。

七、小結(jié)

上文已經(jīng)對產(chǎn)品設(shè)計中常用的各種反饋類型進行了詳細的介紹，在平時設(shè)計反饋機制以及選擇反饋方式時，我們需要明確五點：

1. 此操作或者此流程是否有必要進行反饋？
2. 反饋的節(jié)點在哪里更合適？
3. 反饋信息的重要程度如何,如果用戶看不到此反饋會產(chǎn)生什么影響？
4. 對于必須使用重量級反饋的方式時，考慮到用戶體驗問題是否能在保證用戶看到時不影響主流程的操作？
5. 用戶接收到反饋時，是否需要引導(dǎo)去做些什么，是否需要立刻去操作？

總之，這些問題的答案都要根據(jù)具體的使用場景來進行具體分析。因為任何反饋都會對用戶造成干擾，所以為了更好地用戶體驗，應(yīng)該減少彈框的使用，本著“能不用彈框就不要用彈框，能用非模態(tài)彈框就不要用模態(tài)彈框”的原則來設(shè)計產(chǎn)品。對于有必要使用彈框進行提示的場景，要在合適的時機使用選擇合適的彈框。

好啦，此波此結(jié)束~希望本篇文章能幫到需要的小伙伴們~