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

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

一、關于反饋

1. 定義

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

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

2. 作用

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

3. 設計原則

1）貼切

應該與用戶工作流程和任務需求緊密結合，準確及時反饋，向用戶傳遞正確的消息，從而提高工作效率和用戶滿意度。

2）適當

反饋信息簡潔，只展示必要的信息，避免給用戶帶來不必要的干擾。對于那些能夠即時看到結果的簡單操作，可以省略反饋提示。

4. 何時使用

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

二、反饋分類

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

1）正向反饋

提醒用戶操作已完成，可進行其他操作。

2）提示反饋

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

3）異常反饋

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

2. 按使用過程分類

1）提示反饋

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

2）過程反饋

操作過程中的即時交互反饋，為用戶增加信任感。

3）結果反饋

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

3. 按組件分類

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

三、組件用法

1. 通知橫幅

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

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

注意事項：

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

2. 通知框

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

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

注意事項：

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

3. 全局提示

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

如何使用：提示被及時查看又不打擾用戶，文案簡單清晰，可有一個功能按鈕，3s或以上自動關閉。

注意事項：

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

4. 對話框

1）模態(tài)彈窗

何時使用：需要提供反饋信息、確認操作等場景時，對話框會中斷當前任務流所以常用于快捷且不需要頻繁操作的任務，例如簡單的信息收集工作如表單填寫，使用戶在當前頁面可以快速完成任務。

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

注意事項：

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

2）側邊抽屜

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

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

注意事項：

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

5. 氣泡

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

如何使用：點擊/鼠標移入元素，彈出氣泡式的卡片浮層。

注意事項：

氣泡時浮層，跟隨頁面滾動，懸浮或點擊展示，鼠標劃走或點擊空白區(qū)域氣泡消失。

6. 一般交互反饋

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

如何使用：當鼠標產(chǎn)生交互時使用，例如懸停、點擊、校驗、失焦等情況時。

注意事項：

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

7. 表單校驗

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

如何使用：校驗前給提示，校驗中給進度或加載器，檢驗后給修改提示或成功提示。

注意事項：

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

8. 徽標

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

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

分類：

注意事項：

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

9. 加載器

何時使用：內(nèi)容需要一段不確定時長的加載時使用加載器，讓用戶感知當前操作正在處理，能夠對結果有直觀的預期。

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

注意事項：

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

10. 進度指示

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

如何使用：需要較長等待時，用百分比的進度條展示當前的的狀態(tài)。

注意事項：

1. 進度時長過長時，使用文本輔助說明，減少焦慮；
2. 同功能類型模塊使用相同的進度樣式；
3. 成功或者失敗的進度反饋使用顏色明顯的組件進行結果反饋；
4. 如果不能度量準確的百分比進度，請使用加載器。

11. 骨架屏

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

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

注意事項：

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

12. 空狀態(tài)

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

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

注意事項：

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

四、小結

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

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