前言

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

定義反饋

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

反饋的詞典釋意

在這篇文章里，我們主要討論互聯(lián)網(wǎng)產(chǎn)品中的“反饋”設(shè)計，結(jié)合詞典解釋和我的研究范圍，這里我給本文討論的“反饋”下了個定義：

反饋，指產(chǎn)品系統(tǒng)對用戶行為給出的回應(yīng)，以及用戶從該回應(yīng)中獲取的信息。

反饋的作用

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

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

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

反饋回路

怎么設(shè)計反饋

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

反饋設(shè)計的 3 個步驟

1. 定位場景

結(jié)合用戶在 APP 中完成一項目標(biāo)任務(wù)前、中、后可能進(jìn)行的操作行為，可以將反饋出現(xiàn)的場景歸納為以下 8 種，不同的場景對反饋有不同的要求。

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

輸入框光標(biāo)示意

場景 2：提供更多選擇。在用戶的具體任務(wù)不明確時，明確告訴用戶可以進(jìn)行哪些操作，提供用戶更多選擇，明確用戶目標(biāo)。

微博及淘寶截圖

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

ios 相冊及支付寶截圖

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

vivo 帳號及蘋果 appstore 截圖

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

淘寶及抖音截圖

場景 6：任務(wù)狀態(tài)更新。在用戶完成某些任務(wù)后，系統(tǒng)主動反饋該任務(wù)相關(guān)的狀態(tài)更新或通知用戶來源于其它用戶的信息。

淘寶及微信截圖

場景 7：引導(dǎo)用戶操作。在用戶使用一些復(fù)雜功能或新功能時，系統(tǒng)主動提供更多信息幫助用戶決策或提供操作指導(dǎo)。

小紅書及螞蟻森林截圖

場景 8：異常狀態(tài)提示。系統(tǒng)發(fā)生異常時，需要告知用戶，如無網(wǎng)絡(luò)、故障等。

2. “三維”分析

“三維”是我根據(jù)之前的項目案例總結(jié)的反饋設(shè)計的三個維度，包括內(nèi)容呈現(xiàn)、情緒導(dǎo)向和反饋強(qiáng)度。

維度 1：內(nèi)容呈現(xiàn)。

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

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

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

維度 2：情緒導(dǎo)向。

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

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

B 站及支付寶截圖

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

王者榮耀截圖

但要注意，長時間、單一的積極反饋會使用戶逐漸感到無聊，而一直收到消極反饋，則會挫敗用戶積極性。因此，我們應(yīng)當(dāng)控制積極反饋及消極反饋的出現(xiàn)比例，注意反饋的正負(fù)調(diào)節(jié)，使用戶能夠有較好的情緒體驗。

維度 3：反饋強(qiáng)度。

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

影響反饋的因素

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

不同持續(xù)時長的動效效果

出現(xiàn)位置：我們視覺中心區(qū)域的事物總是高清的，四周的區(qū)域都是模糊的，因為人的視網(wǎng)膜中央有一塊叫做“中央凹”的區(qū)域，此處視錐細(xì)胞密集，負(fù)責(zé)視覺的高清成像。當(dāng)反饋出現(xiàn)的位置越靠近視覺中心，就越容易被用戶注意到，反饋的強(qiáng)度也就越大。

反饋形式：反饋的尺寸大小、配色、動效都會影響反饋的強(qiáng)度。一般來講模態(tài)反饋的強(qiáng)度大于非模態(tài)反饋。下面“形式選擇”部分會對反饋的形式進(jìn)行介紹。

3. 形式選擇

在對反饋的場景、強(qiáng)度和情緒導(dǎo)向進(jìn)行分析后，是時候去選擇一個恰當(dāng)?shù)姆答佇问搅恕８鶕?jù)《交互設(shè)計精髓》中的描述，反饋可以分為“頁面跳轉(zhuǎn)”、“模態(tài)反饋”及“非模態(tài)反饋”。

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

不同的頁面切換效果

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

常見的模態(tài)彈出層組件有以下幾種形式：

常見模態(tài)反饋樣式示意

模態(tài)反饋可以在不跳轉(zhuǎn)頁面的情況下承載較多操作，但反饋強(qiáng)度較強(qiáng)，干擾大，需要適度使用。

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

常見非模態(tài)反饋樣式示意

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

設(shè)計案例 01-vivo 官網(wǎng) APP 社區(qū)上傳反饋

Step1 定位場景

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

Step2 “三維”分析

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

上傳反饋承載內(nèi)容簡析

反饋強(qiáng)度：同時，在這個情境下，我們的目標(biāo)是減少用戶等待中的不耐煩、把用戶的注意力轉(zhuǎn)移到社區(qū)內(nèi)容上，因此，上傳任務(wù)進(jìn)度的反饋不適合做的太強(qiáng)，考慮使用占用面積較小的樣式放置在頁面的四周。

上傳反饋位置示意

Step3 形式選擇

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

上傳反饋樣式示意

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

上傳反饋位置分析示意

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

最終方案示意

設(shè)計案例 02-vivo 積分商城抽獎結(jié)果反饋

Step1 定位場景

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

舊版抽獎反饋彈窗

Step2 “三維”分析

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

抽獎結(jié)果反饋內(nèi)容簡析

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

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

Step3 形式選擇

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

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

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

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

未中獎彈窗示意

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

小禮品彈窗示意

這個抽獎結(jié)果反饋的優(yōu)化上線后，人均抽獎次數(shù)有較為明顯提升。并且，我們發(fā)現(xiàn)隨機(jī)插圖的策略比較直觀，對低頻抽獎激勵效果更好；而小禮品獎勵，則對抽獎高活用戶的激勵性更強(qiáng)。

彈窗效果示意

最后

這篇文章給大家分享了我做反饋設(shè)計的思路，包含定位場景、“三維”分析、樣式選擇三步，希望能給大家?guī)韱l(fā)～

反饋設(shè)計方法總結(jié)

歡迎關(guān)注作者微信公眾號：「VMIC UED」