反饋機(jī)制如許設(shè)計(jì)，才能不讓用戶討厭

王M爭：用戶在使用產(chǎn)品時(shí)，用戶既必要和產(chǎn)品溝通，產(chǎn)品也必要和用戶溝通，這時(shí)就必要一套完善的反饋機(jī)制為用戶和產(chǎn)品之間搭起一座橋梁。

反饋是產(chǎn)品設(shè)計(jì)中特別很是緊張的一個(gè)環(huán)節(jié)，它的存在與否會(huì)極大的影響你產(chǎn)品的用戶體驗(yàn)。

這篇文章我將從反饋的種類、體例和使用場景來梳理一下產(chǎn)品中的反饋機(jī)制，盼望可以對(duì)大家有所幫助。

反饋從涵蓋范圍上來說可以分為兩種：操作反饋與用戶反饋。我們這里說的重要是操作反饋，為了表述方便，以下都簡稱反饋。

一、為什么要反饋

判定一款產(chǎn)品的前景只要看它能否幫助用戶解決題目。同樣的題目拋給設(shè)計(jì)師「為什么我們要在產(chǎn)品中建立反饋機(jī)制？ 」或者說「反饋究竟可以解決用戶的哪些痛點(diǎn)？ 」對(duì)于這個(gè)題目，我想起前段時(shí)間看到的一個(gè)段子：

有人問「為什么男生追女生追到一半就不追了？ 」有一個(gè)評(píng)論獲得高贊——「看不到進(jìn)度條?！?/p>

我們可以把這層關(guān)系代入到產(chǎn)品設(shè)計(jì)中，女生是產(chǎn)品，男生是用戶，而進(jìn)度條就是反饋。

由于用戶的每一步操作都得不到反饋，你對(duì)當(dāng)前體系的狀況一竅不通，就會(huì)產(chǎn)生一種焦慮感。焦慮感發(fā)展到最后是很恐怖的，連女神都能摒棄，更不用說一款產(chǎn)品了。

以上這個(gè)例子雖然不怎么恰當(dāng)，但是基本上可以幫助我們了解反饋機(jī)制建立的需要性，幫助用戶隨時(shí)感知體系的狀況，知足用戶的控制感，消減不確定性給用戶帶來的負(fù)面情緒。

二、反饋體例

常見的反饋體例有以下6種：彈框、網(wǎng)頁、標(biāo)簽、（功能性）動(dòng)畫、小紅點(diǎn)和聲音。

1. 彈框

彈框是最重要的反饋體例。

彈框可以分為模態(tài)彈框和非模態(tài)彈框，它們最大的區(qū)別就在于是否強(qiáng)制用戶交互。

模態(tài)彈框會(huì)打斷用戶當(dāng)前的操作流程，用戶不在彈框上操作的話，其余功能都使用不了。所以設(shè)計(jì)師在構(gòu)建反饋系統(tǒng)的時(shí)候，模態(tài)彈框都是用于展示優(yōu)先級(jí)最高的信息。一樣平常都會(huì)出如今用戶在進(jìn)行有風(fēng)險(xiǎn)性，不可逆的操作。

非模態(tài)彈框相比來說就顯得「溫文 」多了，出現(xiàn)2~3秒之后就會(huì)主動(dòng)消散，不會(huì)對(duì)用戶造成干擾，屬于輕量型的反饋。

彈框自身就是一個(gè)重大的系統(tǒng)，之前我已經(jīng)寫過一篇比較細(xì)致的分析文章《彈框系統(tǒng)總結(jié)：模態(tài)彈框和非模態(tài)彈框》，對(duì)彈框系統(tǒng)進(jìn)行了梳理和總結(jié)，盼望可以解決大家心中的一些迷惑。

2. 網(wǎng)頁

用網(wǎng)頁來完成反饋也很常見。與彈框相比，網(wǎng)頁反饋的更傾向于是一個(gè)流程的盡頭站。例如我們購買理財(cái)前要做的風(fēng)險(xiǎn)評(píng)測(cè)，購買商品最后的效果都會(huì)通過一個(gè)新的網(wǎng)頁來展示。

所以，對(duì)于網(wǎng)頁和彈框，我們可以做出以下總結(jié)：網(wǎng)頁反饋的主體是操作流程，而彈框反饋的主體是操作舉動(dòng)。

從獲取視覺焦點(diǎn)的角度來說，網(wǎng)頁比彈框更出眾。

之前在火車站碰到一件事情：當(dāng)時(shí)我在排隊(duì)取票，前面的大媽回頭跟我說她的票取不了。我發(fā)現(xiàn)她沒有關(guān)閉購買保險(xiǎn)的彈框，當(dāng)然不能點(diǎn)擊「確認(rèn)打印 」的按鈕。

其實(shí)這個(gè)事情反映了用戶對(duì)于界面中元素具有一種「所見即所得 」生理，既然這里展示了，那么也應(yīng)該就能操作。

對(duì)于這種情況，有兩個(gè)解決方法：

• 設(shè)置表現(xiàn)時(shí)間，讓其主動(dòng)消散；
• 以網(wǎng)頁的情勢(shì)展示，如許用戶就看不到打印按鈕，不會(huì)發(fā)生無效點(diǎn)擊的情況。

3. 標(biāo)簽

（筆墨）標(biāo)簽在反饋系統(tǒng)中同樣占據(jù)一席之地，不過它的使用場景比較單一，重要用于表單，用戶錄入信息的過程可以提供逐行報(bào)錯(cuò)提醒。

當(dāng)然表單信息錄入報(bào)錯(cuò)也可以通過彈框也完成，但是有兩個(gè)瑕玷：

• 彈框會(huì)遮擋界面信息，用戶看不到表單內(nèi)容；
• 在錄入項(xiàng)目過多的情況下，標(biāo)簽可以給予更具有指向性的提醒，用戶不用辛苦去探求。

所以說在表單信息錄入我們選擇更加輕量化的標(biāo)簽。

4. 動(dòng)畫

動(dòng)畫也可以用來完成反饋，這里的動(dòng)畫特指的是功能性動(dòng)畫。

動(dòng)畫的合理使用可以吸引用戶的細(xì)致力，由于人類都是視覺動(dòng)物，在 app 和頁面中，小動(dòng)畫對(duì)我們來說像是視線里的甜點(diǎn)一樣，我們會(huì)不自發(fā)的被它們吸引。

前面說的三種反饋樣式重要展示的是效果，而動(dòng)畫由于其自身的特征則可以用來展示過程。正在加載中、正在下載中，這些透露表現(xiàn)「過程 」的狀況用動(dòng)畫來演示是特別很是合適的。

但是在動(dòng)畫的使用上，我們照舊要穩(wěn)重，由于動(dòng)畫太復(fù)雜的話會(huì)拖慢界面加載的速度。

總之一句話，動(dòng)畫只是甜點(diǎn)，不是正餐，吃多了會(huì)發(fā)胖。

5. 小紅點(diǎn)

小紅點(diǎn)在反饋中偶爾也會(huì)出現(xiàn)，例如在網(wǎng)易云音樂里下載一首歌，你不會(huì)收到一個(gè)彈框「歌曲下載完成 」，你只會(huì)在本地音樂里看到一個(gè)小紅點(diǎn)，這就意味著下載完成。

所以小紅點(diǎn)雖然用的不多，但是它的存在可以緩解彈框的壓力。

6. 聲音

聲音是經(jīng)常受到設(shè)計(jì)師忽視的一個(gè)反饋體例，但是是我們接觸最早的。我們之前打電話按鍵，每按一下就會(huì)發(fā)出「滴 」的聲響，告訴用戶按鍵成功。

三、反饋原則

上面給大家介紹目前最常見的幾種反饋體例，那么我們?nèi)绾谓o一款產(chǎn)品建立反饋系統(tǒng)呢？

認(rèn)識(shí)我的讀者應(yīng)該會(huì)發(fā)現(xiàn)我特別很是喜好「系統(tǒng) 」這個(gè)詞，類似的文章我有寫過標(biāo)記系統(tǒng)、導(dǎo)航系統(tǒng)、配色系統(tǒng)，大家有愛好可以去查看之前的文章。

為什么我如此的癡迷系統(tǒng)呢？其實(shí)系統(tǒng)說白了就是產(chǎn)品（思維），設(shè)計(jì)師必要站在產(chǎn)品的角度去看待設(shè)計(jì)。

經(jīng)常有同伙私信我，讓我看下這個(gè)界面做的怎么樣。在我偶然間的前提下，我分外愿意與這些同伙交流的，由于別人樂意來找你，其實(shí)也是對(duì)你的認(rèn)可，所以我不會(huì)去故作高冷的不搭理這些人。

但是單個(gè)界面我看不出什么能力，你要是給我一個(gè)app，我說不定還能說出點(diǎn)東西。設(shè)計(jì)師假如想要謀求更好的發(fā)展，必然要完成從「how it looks 」到「how it works 」的思維變化。設(shè)計(jì)師具備產(chǎn)品思維在我看來是大勢(shì)所趨。

對(duì)于反饋來說，我總結(jié)出的設(shè)計(jì)原則就是兩點(diǎn)：輕量化和差異化。

首先我們必要找出所有必要反饋的場景，然后進(jìn)行優(yōu)先級(jí)的排布，將緊張的信息優(yōu)先使用網(wǎng)頁和（模態(tài)）彈框來展示，然后依次使用（非模態(tài)）彈框，標(biāo)簽和動(dòng)效來展示。

不要一提到反饋就使用彈框，一使用彈框就是 dialog，翻來覆去都用爛了。

接下來是差異化設(shè)計(jì)，這必要設(shè)計(jì)師對(duì)所有的反饋進(jìn)行精準(zhǔn)定位。

以新版蝦米音樂為例，它的反饋可以分為流程反饋和舉動(dòng)反饋。流程反饋指的是用戶的操作必要肯定的時(shí)間來處理，例如加載新動(dòng)態(tài)，下載一首歌；舉動(dòng)反饋屬于即時(shí)性的反饋，用戶可以立馬看到，例如點(diǎn)贊一首歌，關(guān)注一小我。

蝦米中的這兩種反饋都采用的是非模態(tài)彈框，但是在方向上進(jìn)行了區(qū)分。由上圖我們可以發(fā)現(xiàn)流程反饋都是由上往下出現(xiàn)的。

而所有的舉動(dòng)反饋都是用上面的這種最簡單 toast 來完成。其實(shí)流程反饋用上面的toast來展示沒有任何題目，但是會(huì)略顯得單調(diào)，這里進(jìn)行了區(qū)分，實(shí)現(xiàn)了差異化設(shè)計(jì)。

說到差異化，之前有同伙問我如何去平衡設(shè)計(jì)中「差異化 」和「同等性 」的關(guān)系。

其實(shí)我小我認(rèn)為這兩者之間并沒有特別很是明確的對(duì)立關(guān)系：差異指的是品牌層面的「獨(dú)樹一幟 」，從同質(zhì)化的競品中脫穎而出；而同等性更多的考慮在于提拔產(chǎn)品的易用性，優(yōu)化用戶體驗(yàn)。差異重要存在于外部關(guān)系，例如競品；而同等表現(xiàn)更多的是內(nèi)部關(guān)系，例如多終端視覺設(shè)計(jì)同等性。

從目標(biāo)來說差異是為了吸引用戶，而同等是為了留住用戶。

四、總結(jié)

以上就是我對(duì)產(chǎn)品反饋機(jī)制的總結(jié)分析，假如大家有什么不同的意見或看法，迎接留言交流。

迎接關(guān)注作者的微信公眾號(hào)：「王M爭」