想做靠譜的APP？先掌握大廠這套「反饋設計」方法！

前言

“即時反饋”我們經常掛在嘴邊，是產品可用性的基本要求之一，指用戶的每一次操作立刻得到回應，每一次投入立即得到量化的回報。但“反饋”具體要怎么設計，卻沒有一個系統的方法。我結合了近期項目中一些關于反饋設計的思考，總結了自己的一套反饋設計方法，和大家分享，也期待和大家一起討論，共同進步。

定義反饋

怎么去定義“反饋”，這個問題確實有為難到我，網絡上對“反饋設計”也沒有一個非常權威的釋義。所以我回歸了最原始的方式 —— 查字典。下面是《劍橋英語詞典》和《現代漢語詞典》里對“反饋”的解釋。

反饋的詞典釋意

在這篇文章里，我們主要討論互聯網產品中的“反饋”設計，結合詞典解釋和我的研究范圍，這里我給本文討論的“反饋”下了個定義：

反饋，指產品系統對用戶行為給出的回應，以及用戶從該回應中獲取的信息。

反饋的作用

反饋的作用包括基礎作用和情感作用兩部分。

基礎作用指反饋解決可用性問題的能力。用戶通過反饋得知操作結果，及時感知系統當前狀態及變化，并憑借從反饋中獲取的信息決策下一步行為。

情感作用指利用反饋來調節或調動用戶情緒。合理的反饋能給用戶提供控制感和愉悅感，從而減少挫折感及其他負面情緒，甚至還能提供爽感，刺激用戶發生更多行為。

反饋回路

怎么設計反饋

介紹完“反饋”的定義和作用，我們進入到本文的正題 —— 怎么設計“反饋”。我把反饋設計的流程分3步：

反饋設計的 3 個步驟

1. 定位場景

結合用戶在 APP 中完成一項目標任務前、中、后可能進行的操作行為，可以將反饋出現的場景歸納為以下 8 種，不同的場景對反饋有不同的要求。

場景 1：告知操作有效。用戶在操作的過程中，系統通過交互元素的狀態變化告知用戶這些操作是有效的。一般而言，這類型的反饋都比較輕量，微動效為主。

輸入框光標示意

場景 2：提供更多選擇。在用戶的具體任務不明確時，明確告訴用戶可以進行哪些操作，提供用戶更多選擇，明確用戶目標。

微博及淘寶截圖

場景 3：確認用戶操作。在用戶進行一些重要的、或不可逆的操作前，讓用戶進行二次確認。

ios 相冊及支付寶截圖

場景 4：同步任務進程。一些任務不會立刻完成，用戶需要知道任務完成的進度，消除用戶焦慮。

vivo 帳號及蘋果 appstore 截圖

場景 5：任務結果展示。用戶完成一個任務后需明確展示任務結果，如成功、失敗，使用戶更有掌控感。一些場景沒有類似于“成功”、“失敗”這種明確的結果，需提供用戶需要的信息。

淘寶及抖音截圖

場景 6：任務狀態更新。在用戶完成某些任務后，系統主動反饋該任務相關的狀態更新或通知用戶來源于其它用戶的信息。

淘寶及微信截圖

場景 7：引導用戶操作。在用戶使用一些復雜功能或新功能時，系統主動提供更多信息幫助用戶決策或提供操作指導。

小紅書及螞蟻森林截圖

場景 8：異常狀態提示。系統發生異常時，需要告知用戶，如無網絡、故障等。

2. “三維”分析

“三維”是我根據之前的項目案例總結的反饋設計的三個維度，包括內容呈現、情緒導向和反饋強度。

維度 1：內容呈現。

前面也有提到過，反饋指的是系統對用戶行為的回應以及用戶從該回應中獲取的信息，反饋本質上是信息的傳遞。在每次設計反饋之前建議思考以下幾個問題：

1. 用戶最想知道什么？
2. 用戶可以進行哪些操作？
3. 用戶進行下一步操作需要哪些輔助信息？
4. 我是否清晰準確地傳達了這些信息？

通過思考以上幾個問題，確保反饋中的信息沒有遺漏。

維度 2：情緒導向。

反饋可以通過文案、圖片、動效、音效來給用戶傳達情緒。在設計的時候，我們要考慮用戶當前所處的情境適合什么樣的反饋。

同樣是輸入驗證碼登錄，B 站使用的趣味性的插圖來表達密碼安全，而支付寶則更加嚴肅。

B 站及支付寶截圖

同時，夸張的積極反饋能夠給予用戶很好的激勵效果，使用戶獲得爽感，這種使用方式在游戲中非常常見。

王者榮耀截圖

但要注意，長時間、單一的積極反饋會使用戶逐漸感到無聊，而一直收到消極反饋，則會挫敗用戶積極性。因此，我們應當控制積極反饋及消極反饋的出現比例，注意反饋的正負調節，使用戶能夠有較好的情緒體驗。

維度 3：反饋強度。

反饋的強度可以理解為反饋能夠吸引用戶注意力的程度。強度越大越能夠吸引用戶注意力，也越能夠調動用戶情緒，同時對用戶操作干擾也越大，容易引起用戶反感；反之，強度越弱對用戶干擾越小，但過弱的反饋用戶可能會忽略。

影響反饋的因素

持續時長：每次反饋都會有一定的持續時長，需合理控制。時長越長，反饋強度越強，時長越短，反饋強度越弱。根據 Material Desig 設計規范的建議，一般的移動端反饋動效持續時長通常在 300 毫秒內，超過 400ms 可能會感覺太慢。

不同持續時長的動效效果

出現位置：我們視覺中心區域的事物總是高清的，四周的區域都是模糊的，因為人的視網膜中央有一塊叫做“中央凹”的區域，此處視錐細胞密集，負責視覺的高清成像。當反饋出現的位置越靠近視覺中心，就越容易被用戶注意到，反饋的強度也就越大。

反饋形式：反饋的尺寸大小、配色、動效都會影響反饋的強度。一般來講模態反饋的強度大于非模態反饋。下面“形式選擇”部分會對反饋的形式進行介紹。

3. 形式選擇

在對反饋的場景、強度和情緒導向進行分析后，是時候去選擇一個恰當的反饋形式了。根據《交互設計精髓》中的描述，反饋可以分為“頁面跳轉”、“模態反饋”及“非模態反饋”。

頁面跳轉：當用戶即將進行的操作較為復雜或當前頁面與即將操作的頁面毫無關聯時，使用頁面跳轉的反饋方式。值得一提的是，頁面跳轉的動效有多種形式，直接切換、水平切換、垂直切換、收縮放大、聯動等等，需要綜合考慮使用場景，使用符合用戶預期的跳轉方式。

不同的頁面切換效果

模態反饋：模態一種臨時模式，它通過遮罩將用戶當前看到的內容和之前看到的內容區分開來，界面中只有 popup（彈出層）組件具有可交互行為，其它一切皆不可操作，并且需要一個明確的操作才能退出該模式。模態模式讓用戶可以專注于一個獨立的任務，確保用戶收到關鍵信息，并在必要時采取行動。

常見的模態彈出層組件有以下幾種形式：

常見模態反饋樣式示意

模態反饋可以在不跳轉頁面的情況下承載較多操作，但反饋強度較強，干擾大，需要適度使用。

非模態反饋：非模態反饋指的是一種在不打斷或影響用戶正常操作的前提下進行信息反饋的有效形式。包含以下幾種形式：

常見非模態反饋樣式示意

非模態反饋的強弱取決于視覺設計（大小、色彩、動效等），但通常來說比較輕量，能有效展示信息，也能塑造氛圍。

設計案例 01-vivo 官網 APP 社區上傳反饋

Step1 定位場景

在 vivo 社區發布動態，點擊上傳按鈕后，會在當前頁面上傳圖片和視頻。但在圖片、視頻比較大的情況下，用戶需要在當前頁面等待比較長的時間。為了減少用戶等待時的不耐煩，我們決定把當前頁面反饋上傳進度優化成了點擊發布按鈕后到社區首頁上傳，讓用戶在等待上傳的過程中可以閱讀社區內容。

Step2 “三維”分析

內容呈現：作為一個動態上傳任務的進程反饋，它需要即時地、客觀地告知用戶上傳進度、上傳結果以及注意事項，并且提供“取消上傳”、“查看動態”等便捷操作。

上傳反饋承載內容簡析

反饋強度：同時，在這個情境下，我們的目標是減少用戶等待中的不耐煩、把用戶的注意力轉移到社區內容上，因此，上傳任務進度的反饋不適合做的太強，考慮使用占用面積較小的樣式放置在頁面的四周。

上傳反饋位置示意

Step3 形式選擇

基于前面的分析，我們鎖定了懸浮球和 snackbar 的兩種樣式。懸浮球相較于 snackbar 占用的面積更小，反饋更輕量。但考慮到用戶在上傳過程中可能會進行“取消上傳”、“重新上傳”等操作，還需要呈現網絡中斷等異常場景，懸浮球難以直接承載，需要搭配模態彈窗使用，讓操作變得更復雜，所以最終選取了 snackbar 的形式。

上傳反饋樣式示意

那么 snackbar 要放在上方還是下方呢？用戶在瀏覽頁面時，用戶是自上而下瀏覽的，新的內容從屏幕下方出現，因此最終決定把 snackbar 放置在屏幕上方，讓頁面下半部分視覺區域更開闊些。

上傳反饋位置分析示意

最終我們使用了置于頂部的 snackbar，最終效果如下所示（僅部分狀態）。

最終方案示意

設計案例 02-vivo 積分商城抽獎結果反饋

Step1 定位場景

抽獎是 vivo 積分商城一個比較核心的玩法，用戶可以使用積分去抽特定的禮品，如手機等。但中獎是有一定概率的，假如用戶運氣不好一直抽不中，情緒就會比較低落，挫敗參與抽獎的積極性。本次抽獎結果反饋優化要解決的問題有兩個，一是調節未中獎用戶的情緒，二是提升用戶抽獎積極性。

舊版抽獎反饋彈窗

Step2 “三維”分析

內容呈現：同樣的，在設計這個反饋時，我還是問了自己以下幾個問題，確保在信息呈現上沒有遺漏。

抽獎結果反饋內容簡析

情緒導向 & 反饋強度：用戶對抽獎結果是存在期待的，所謂期望越大、失望越大，抽中了，用戶肯定是喜悅的，如果抽不中，用戶挫敗感也會很強。因此，對于“中獎”用戶，毋庸置疑是需要放大喜悅，而對于“未中獎”的情況，則需要使用積極的圖像和文案來減少用戶挫敗感，起到安撫用戶的作用。

要達到上述效果，需要用較強的樣式去渲染氛圍。同時，反饋中需要承載“再抽一次”這種輕量的操作，那么彈窗還是比較合適的選擇。

Step3 形式選擇

結合上述原因，我們最終決定保留彈窗的形式，主要使用插圖和文案來達到放大喜悅、減少挫敗的效果。

圖片 5-3 未中獎與中獎彈窗樣式示意

但怎么樣才能讓用戶即使沒中獎，也想多抽幾次呢？這里使用了兩個策略：

1. 未中獎彈窗配置多套插圖和文案，隨機出現，當用戶發現插圖每次都不一樣時，好奇心會驅使用戶多點幾次，還能夠避免單一的樣式讓用戶感到厭煩。

未中獎彈窗示意

2. 多次未中獎提供隨機的小禮品獎勵，包括積分、免費抽獎卡等，給用戶小小的驚喜，同時提升抽獎積極性。

小禮品彈窗示意

這個抽獎結果反饋的優化上線后，人均抽獎次數有較為明顯提升。并且，我們發現隨機插圖的策略比較直觀，對低頻抽獎激勵效果更好；而小禮品獎勵，則對抽獎高活用戶的激勵性更強。

彈窗效果示意

最后

這篇文章給大家分享了我做反饋設計的思路，包含定位場景、“三維”分析、樣式選擇三步，希望能給大家帶來啟發～

反饋設計方法總結

歡迎關注作者微信公眾號：「VMIC UED」