用戶將信息操作給系統(tǒng)，系統(tǒng)告知用戶操作的結(jié)果或者操作對(duì)象狀態(tài)的變更。系統(tǒng)反饋給用戶信息的常見方式有哪些？本文作者對(duì)此進(jìn)行了詳細(xì)的分類，一起來看看吧。

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

反饋信息有兩個(gè)交互設(shè)計(jì)的要點(diǎn)：

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

常見的反饋方式分為6種：彈框、頁面、標(biāo)簽、紅點(diǎn)、動(dòng)畫、聲音。

一、彈框

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

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

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

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

1. 模態(tài)彈框

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

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

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

對(duì)于同樣都為兩個(gè)選項(xiàng)的情況，對(duì)話框更多的用在讓用戶對(duì)接下來的操作進(jìn)行選擇的場(chǎng)景，底部動(dòng)作欄用在讓用戶對(duì)之前的操作進(jìn)行二次確認(rèn)的場(chǎng)景。

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

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

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

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

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

注：

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

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

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

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

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

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

二、頁面

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

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

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

三、標(biāo)簽

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

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

四、紅點(diǎn)

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

五、動(dòng)畫

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

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

六、聲音

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

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

七、小結(jié)

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

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

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

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