中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

一、關(guān)于反饋

1. 定義

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

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

2. 作用

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

3. 設(shè)計原則

1）貼切

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

2）適當(dāng)

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

4. 何時使用

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

二、反饋分類

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

1）正向反饋

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

2）提示反饋

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

3）異常反饋

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

2. 按使用過程分類

1）提示反饋

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

2）過程反饋

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

3）結(jié)果反饋

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

3. 按組件分類

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

三、組件用法

1. 通知橫幅

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

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

注意事項：

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

2. 通知框

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

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

注意事項：

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

3. 全局提示

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

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

注意事項：

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

4. 對話框

1）模態(tài)彈窗

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

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

注意事項：

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

2）側(cè)邊抽屜

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

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

注意事項：

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

5. 氣泡

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

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

注意事項：

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

6. 一般交互反饋

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

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

注意事項：

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

7. 表單校驗

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

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

注意事項：

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

8. 徽標(biāo)

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

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

分類：

注意事項：

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

9. 加載器

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

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

注意事項：

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

10. 進度指示

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

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

注意事項：

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

11. 骨架屏

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

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

注意事項：

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

12. 空狀態(tài)

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

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

注意事項：

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

四、小結(jié)

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

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