什么是反饋設(shè)計(jì)？簡(jiǎn)單來(lái)說(shuō)，反饋設(shè)計(jì)可以讓用戶知道當(dāng)前在做什么、將要做什么、會(huì)產(chǎn)生什么結(jié)果，以及如何處理，可以有效地減少用戶的困惑和錯(cuò)誤。這篇文章里，作者就對(duì)反饋設(shè)計(jì)做了相對(duì)全面的拆解和分析，一起來(lái)看看吧。

失蹤人口回歸啦，前一段時(shí)間忙著生活，最近一個(gè)項(xiàng)目比較多被問(wèn)反饋設(shè)計(jì)的種種問(wèn)題，發(fā)現(xiàn)網(wǎng)上的文章都講不全講不透，我還是從UI設(shè)計(jì)師的角度出發(fā)將會(huì)窮舉反饋設(shè)計(jì)中用到的所有內(nèi)容，爭(zhēng)取讓大家一篇就能了解所有的反饋設(shè)計(jì)規(guī)則。

一、關(guān)于反饋

1. 定義

是指為用戶與系統(tǒng)之間有效溝通而設(shè)計(jì)的一系列界面元素、動(dòng)效、交互機(jī)制。

它旨在讓用戶知道當(dāng)前在做什么，將要做什么，會(huì)產(chǎn)生什么結(jié)果，如何處理。不同的交互，使用不同的模式來(lái)反饋信息或結(jié)果。

2. 作用

反饋設(shè)計(jì)對(duì)于B端產(chǎn)品的成功至關(guān)重要。它可以改善用戶體驗(yàn)，減少用戶的困惑和錯(cuò)誤，并提高產(chǎn)品的可用性和可靠性。通過(guò)提供有效的反饋，產(chǎn)品可以增強(qiáng)用戶對(duì)產(chǎn)品的信任感，從而提升用戶的滿意度和忠誠(chéng)度。

3. 設(shè)計(jì)原則

1）貼切

應(yīng)該與用戶工作流程和任務(wù)需求緊密結(jié)合，準(zhǔn)確及時(shí)反饋，向用戶傳遞正確的消息，從而提高工作效率和用戶滿意度。

2）適當(dāng)

反饋信息簡(jiǎn)潔，只展示必要的信息，避免給用戶帶來(lái)不必要的干擾。對(duì)于那些能夠即時(shí)看到結(jié)果的簡(jiǎn)單操作，可以省略反饋提示。

4. 何時(shí)使用

需要用戶感知重要狀態(tài)和更新，相應(yīng)用戶的特定操作出現(xiàn)，例如提交表單、導(dǎo)出數(shù)據(jù)。

二、反饋分類

1. 按狀態(tài)分類

1）正向反饋

提醒用戶操作已完成，可進(jìn)行其他操作。

2）提示反饋

提醒用戶系統(tǒng)正在處理的操作、引導(dǎo)將要進(jìn)行的操作，可等待、放棄、跟隨、進(jìn)行其他操作。

3）異常反饋

提醒用戶操作失敗，可重試、放棄、嘗試其他操作。

2. 按使用過(guò)程分類

1）提示反饋

操作前提示用來(lái)告訴用戶需要知道什么，為用戶的下一步操作增加成功率。

2）過(guò)程反饋

操作過(guò)程中的即時(shí)交互反饋，為用戶增加信任感。

3）結(jié)果反饋

操作結(jié)束后提醒用戶操作結(jié)果，成功、失敗、以及指向性引導(dǎo)。為用戶增加安全感。

3. 按組件分類

• 通知橫幅：由操作引發(fā)的通知，一般在以條狀進(jìn)行展示。
• 通知框：由操作引發(fā)的較為重要的通知，需要用戶關(guān)閉消失。
• 全局提示：一種反饋浮層，用來(lái)反饋不太緊要的信息，一般3秒后消失。
• 對(duì)話框：由操作引發(fā)的較為重要的通知，一般以對(duì)話框的形式通知并需要用戶關(guān)閉。
• 氣泡：在目標(biāo)元素周圍浮起的小氣泡用來(lái)提供非必要的上下文信息而不打斷用戶。
• 交互反饋：指一般的交互狀態(tài)給用戶的反饋例如“點(diǎn)擊、懸停、失焦等”。
• 表單校驗(yàn)：用于表單填寫(xiě)需要即時(shí)校驗(yàn)的反饋，例如用戶名、密碼、手機(jī)號(hào)等。
• 徽標(biāo)：視覺(jué)指示器用來(lái)傳達(dá)相關(guān)組件的狀態(tài)或描述。
• 加載器：用可視化的方式提示當(dāng)前組件處于什么狀態(tài)。
• 進(jìn)度指示：用可視化方式提示當(dāng)前組件的加載進(jìn)度。
• 骨架屏：簡(jiǎn)單的框架讓用戶知道界面正在努力加載，緩解焦慮。
• 空狀態(tài)：空頁(yè)面視覺(jué)填充，讓用戶清晰感知當(dāng)前頁(yè)面是什么狀態(tài)并引導(dǎo)下一步操作。

三、組件用法

1. 通知橫幅

何時(shí)使用：用于全頁(yè)面的狀態(tài)與通知展示，例如：提醒功能（信息或即將到來(lái)的活動(dòng)）、錯(cuò)誤處理（錯(cuò)誤或異常情況）、新引導(dǎo)用戶（引導(dǎo)他們熟悉的界面、了解操作流程和功能模塊）、用戶反饋（用于收集用戶反饋和建議）等情況下使用。

如何使用：通常以橫幅形式在頁(yè)面頂部中間出現(xiàn)，跟隨頁(yè)面滾動(dòng)，為常駐信息，需用戶關(guān)閉。

注意事項(xiàng)：

1. 通知橫幅在頁(yè)面內(nèi)指定位置露出，為用戶提供不特定的任務(wù)與通知，不影響用戶操作；
2. 通知橫幅可以通過(guò)操作觸發(fā)，不會(huì)自動(dòng)消失，一直存在直到被用戶關(guān)閉；
3. 橫幅跟隨頁(yè)面內(nèi)容滾動(dòng)；
4. 一個(gè)頁(yè)面盡量只展示一條橫幅、盡量保持一行展示；
5. 標(biāo)題盡量避免使用標(biāo)點(diǎn)符號(hào)，疑問(wèn)句結(jié)尾可使用問(wèn)號(hào)；
6. 正文描述不要重復(fù)說(shuō)明標(biāo)題內(nèi)容。

2. 通知框

何時(shí)使用：用于主動(dòng)向用戶發(fā)出消息通知。

如何使用：通常以卡片的形式在頁(yè)面四角彈出非模態(tài)彈窗，不跟隨頁(yè)面滾動(dòng)，給用戶提供及時(shí)且較重要的信息，用戶關(guān)閉后消失的常駐通知框。

注意事項(xiàng)：

1. 通知框懸浮于頁(yè)面上常駐需用戶關(guān)閉；
2. 標(biāo)題盡量避免使用標(biāo)點(diǎn)符號(hào)，疑問(wèn)句結(jié)尾可使用問(wèn)號(hào)；
3. 正文描述不要重復(fù)說(shuō)明標(biāo)題內(nèi)容，盡量簡(jiǎn)潔1-2句話即可；
4. 操作按鈕的文本需展示具體含義。

3. 全局提示

何時(shí)使用：提示一些臨時(shí)性的反饋，例如用戶完成創(chuàng)建、編輯、刪除等操作后提示的成功、錯(cuò)誤、運(yùn)行中的狀態(tài)，顯示在固定位置且不跟隨頁(yè)面滾動(dòng)而消失，固定時(shí)長(zhǎng)后自動(dòng)消失，不阻斷用戶的輕量提示。

如何使用：提示被及時(shí)查看又不打擾用戶，文案簡(jiǎn)單清晰，可有一個(gè)功能按鈕，3s或以上自動(dòng)關(guān)閉。

注意事項(xiàng)：

1. 全局提示位置固定（參考：在頁(yè)面頂部居中）；
2. 全局提示消失時(shí)間不能小于3秒。
3. 標(biāo)題句尾不使用句號(hào)
4. 文案格式推薦名詞+動(dòng)詞，例如“刪除成功”非“成功刪除”
5. 相關(guān)操作要有意義，不使用“已讀”類似操作。

4. 對(duì)話框

1）模態(tài)彈窗

何時(shí)使用：需要提供反饋信息、確認(rèn)操作等場(chǎng)景時(shí)，對(duì)話框會(huì)中斷當(dāng)前任務(wù)流所以常用于快捷且不需要頻繁操作的任務(wù)，例如簡(jiǎn)單的信息收集工作如表單填寫(xiě)，使用戶在當(dāng)前頁(yè)面可以快速完成任務(wù)。

如何使用：對(duì)話框?yàn)槟B(tài)，需要吸引用戶全部的注意的通知或操作，寬度按規(guī)范定出2-4個(gè)（參考：360px、640px、800px、960px），高度適應(yīng)內(nèi)容（最小高度參考：200x\最大高度根據(jù)頁(yè)面留出邊距參考：80px），背景蒙層參考：色彩#000000，透明度45%。

注意事項(xiàng)：

1. 對(duì)話框?qū)儆趶?qiáng)反饋，會(huì)打擾用戶不要隨意使用；
2. 對(duì)話框按鈕布局規(guī)則參考：主按鈕居右，次要按鈕在主按鈕左側(cè)，按鈕組整體位于內(nèi)容區(qū)的左下方（設(shè)計(jì)大原則主按鈕貼邊固定，設(shè)計(jì)實(shí)例中有按鈕組居左的，主按鈕就貼最左邊）；
3. 內(nèi)容區(qū)超過(guò)彈窗最大高度可以出現(xiàn)滾動(dòng)條，但最好不要使用滾動(dòng)。蒙層區(qū)域不跟隨滾動(dòng)條滾動(dòng)；
4. 支持彈窗套疊，套疊彈窗不超過(guò)3層，關(guān)閉/返回規(guī)則為返回上一級(jí)彈窗，套疊時(shí)蒙層也依次疊加；
5. 信息錄入類對(duì)話框不建議點(diǎn)擊蒙層關(guān)閉；
6. 標(biāo)題命名使用動(dòng)詞+名詞，結(jié)尾不使用句號(hào)，疑問(wèn)句可使用問(wèn)號(hào)。操作按鈕命名使用標(biāo)題內(nèi)的動(dòng)詞即可。

2）側(cè)邊抽屜

何時(shí)使用：信息的快速錄入與頁(yè)面輔助信息查看時(shí)使用，例如信息展示、信息錄入、幫助中心、詳情頁(yè)等，用于補(bǔ)充彈窗無(wú)法滿足展示需求時(shí)。

如何使用：從屏幕側(cè)邊（上下左右）滑出的浮層面板，同時(shí)有蒙層覆蓋背景的模態(tài)抽屜。上下抽屜尺寸規(guī)范參考：寬度充滿容器，高度根據(jù)規(guī)范固定1-2種（480）；左右抽屜尺寸參考：寬度根據(jù)規(guī)范固定2-3種（480、720），高度充滿容器。背景蒙層參考：色彩#000000，透明度45%。

注意事項(xiàng)：

1. 信息錄入類抽屜不建議點(diǎn)擊蒙層關(guān)閉；
2. 主體內(nèi)容超過(guò)抽屜高度是使用滾動(dòng)體展示，不支持橫向滾動(dòng)條；
3. 支持彈窗套疊，套疊抽屜不超過(guò)3層，關(guān)閉/返回規(guī)則為返回上一級(jí)抽屜，套疊時(shí)蒙層也依次疊加；
4. 無(wú)論上、下、左、右那種類型，標(biāo)題統(tǒng)一左對(duì)齊，操作按鈕右對(duì)齊；
5. 內(nèi)容較少，不是高頻操作的情況建議使用彈窗，不使用抽屜。

5. 氣泡

何時(shí)使用：當(dāng)目標(biāo)元素可能引起用戶疑問(wèn)時(shí)，用于顯示解釋功能、幫助文案等的輔助信息展示，也可以承載鏈接、按鈕等功能的非打斷性提示。

如何使用：點(diǎn)擊/鼠標(biāo)移入元素，彈出氣泡式的卡片浮層。

注意事項(xiàng)：

氣泡時(shí)浮層，跟隨頁(yè)面滾動(dòng)，懸浮或點(diǎn)擊展示，鼠標(biāo)劃走或點(diǎn)擊空白區(qū)域氣泡消失。

6. 一般交互反饋

何時(shí)使用：為了確保用戶的使用體驗(yàn)，每個(gè)組件都應(yīng)使用不同的交互讓用戶感知鼠標(biāo)操作的效果，一般有“常規(guī)、禁用、校驗(yàn)、懸停、點(diǎn)擊、失焦”6種交互樣式，失焦與常規(guī)通常是相同的這里不做討論，校驗(yàn)反饋的內(nèi)容下一模塊單獨(dú)講解，這里不做討論，由于整個(gè)B端組件過(guò)于龐大，我們只列舉一二種進(jìn)行分析。

如何使用：當(dāng)鼠標(biāo)產(chǎn)生交互時(shí)使用，例如懸停、點(diǎn)擊、校驗(yàn)、失焦等情況時(shí)。

注意事項(xiàng)：

無(wú)論哪種狀態(tài)都要保證文字圖案的可閱讀性。

7. 表單校驗(yàn)

何時(shí)使用：以確保用戶輸入的數(shù)據(jù)準(zhǔn)確、一致、安全，并符合要求時(shí)使用，例如必填項(xiàng)、電子郵件、電話號(hào)碼的格式驗(yàn)證、密碼的一致性、內(nèi)容的安全檢查不包含惡意代碼等。

如何使用：校驗(yàn)前給提示，校驗(yàn)中給進(jìn)度或加載器，檢驗(yàn)后給修改提示或成功提示。

注意事項(xiàng)：

1. 組件失去焦點(diǎn)后進(jìn)行前端規(guī)則校驗(yàn)，若校驗(yàn)未通過(guò)，顯示原因到下方。
2. 組件提示文本在獲取焦點(diǎn)后消失。
3. 設(shè)計(jì)盡可能簡(jiǎn)單和易于理解，以便用戶能夠輕松地使用和理解。

8. 徽標(biāo)

何時(shí)使用：未讀消息或通知、狀態(tài)提示（進(jìn)行中、已完成等）、屬性提示（熱銷、限免等）、功能提示（新功能等）、數(shù)據(jù)呈現(xiàn)（關(guān)鍵數(shù)據(jù)加標(biāo)）。

如何使用：一般出現(xiàn)在圖標(biāo)或文字的右上角。提供及時(shí)、重要的信息提示。

分類：

注意事項(xiàng)：

1. 用于狀態(tài)標(biāo)識(shí)的徽標(biāo)，例如數(shù)字徽標(biāo)、小圓點(diǎn)，當(dāng)用戶對(duì)該信息已經(jīng)感知或后臺(tái)數(shù)字發(fā)生變化，應(yīng)及時(shí)更新微標(biāo)中的數(shù)字或小圓點(diǎn)的顯示狀態(tài)；
2. 可視區(qū)域內(nèi)少量的使用徽標(biāo)，避免多個(gè)徽標(biāo)視覺(jué)疲勞；
3. 徽標(biāo)使用要保持統(tǒng)一，同一層級(jí)要用一樣的樣式；
4. 當(dāng)內(nèi)容進(jìn)行操作后徽標(biāo)自動(dòng)刷新?tīng)顟B(tài)（消息類處理后刷新、狀態(tài)類開(kāi)通后刷新）。

9. 加載器

何時(shí)使用：內(nèi)容需要一段不確定時(shí)長(zhǎng)的加載時(shí)使用加載器，讓用戶感知當(dāng)前操作正在處理，能夠?qū)Y(jié)果有直觀的預(yù)期。

如何使用：加載器組件適用于短時(shí)加載場(chǎng)景，建議大于1秒不超過(guò)4秒；當(dāng)文字按鈕需要更新時(shí)使用加載器過(guò)度，避免突然出現(xiàn)文字的變化。

注意事項(xiàng)：

1. 盡可能描述加載狀態(tài)，例如“保存中…”“確認(rèn)中…”等；
2. 等待時(shí)間超過(guò)4秒建議使用帶百分比的進(jìn)度，給用戶確定性。

10. 進(jìn)度指示

何時(shí)使用：文件上傳或下載（向用戶展示當(dāng)前的上傳/下載狀態(tài)和速度，以及預(yù)計(jì)的剩余時(shí)間）、安裝程序（表示安裝進(jìn)度）、數(shù)據(jù)加載（需要較長(zhǎng)時(shí)間來(lái)加載數(shù)據(jù)）、任務(wù)進(jìn)度（某個(gè)任務(wù)或者整個(gè)項(xiàng)目的完成進(jìn)度）、表單填寫(xiě)（用戶當(dāng)前的位置，以及還需要完成哪些步驟）。

如何使用：需要較長(zhǎng)等待時(shí)，用百分比的進(jìn)度條展示當(dāng)前的的狀態(tài)。

注意事項(xiàng)：

1. 進(jìn)度時(shí)長(zhǎng)過(guò)長(zhǎng)時(shí)，使用文本輔助說(shuō)明，減少焦慮；
2. 同功能類型模塊使用相同的進(jìn)度樣式；
3. 成功或者失敗的進(jìn)度反饋使用顏色明顯的組件進(jìn)行結(jié)果反饋；
4. 如果不能度量準(zhǔn)確的百分比進(jìn)度，請(qǐng)使用加載器。

11. 骨架屏

何時(shí)使用：需要等待加載的組件部分使用的占位符，按照內(nèi)容部分的架構(gòu)抽離出信息骨架圖進(jìn)行展示，讓用戶對(duì)加載的內(nèi)容有一定認(rèn)知。

如何使用：用戶操作后，內(nèi)容加載出來(lái)前，在加載區(qū)域使用骨架圖展示，配合wave動(dòng)畫(huà)使用。

注意事項(xiàng)：

1. 固定不變的內(nèi)容在刷新時(shí)不需要使用骨架展示。
2. 骨架的表達(dá)要與展示內(nèi)容保持一致，保持簡(jiǎn)潔，不需要展示細(xì)節(jié)。

12. 空狀態(tài)

何時(shí)使用：所加載內(nèi)容為空、加載錯(cuò)誤等不同狀態(tài)時(shí)使用的占位符。

如何使用：使用占位圖像、文字描述、操作按鈕等元素對(duì)所在區(qū)域進(jìn)行展示。

注意事項(xiàng)：

避免空提示的出現(xiàn)，要給予至少文字的提示。

四、小結(jié)

反饋設(shè)計(jì)很容易被產(chǎn)品和UI忽略，然而卻是用戶體驗(yàn)中不可缺少的關(guān)鍵，對(duì)用戶的操作樣樣有反饋是基本的產(chǎn)品原則。上面的總結(jié)涵蓋的方面已盡量全面，有我個(gè)人的間接也有對(duì)其他文章內(nèi)容的總結(jié)，希望對(duì)你有一點(diǎn)點(diǎn)幫助。

下次想看什么可以留言告訴我～期待你的反饋！