本文的由來(lái)是我在體驗(yàn)自家產(chǎn)品后，產(chǎn)品體驗(yàn)很差，認(rèn)為需要有操作反饋的設(shè)計(jì)；所以在學(xué)習(xí)參考了相關(guān)知識(shí)后，我借由寫文章總結(jié)下操作反饋的相關(guān)設(shè)計(jì)，希望對(duì)大家有幫助~

引言

最近在使用自家產(chǎn)品的時(shí)候出現(xiàn)了一個(gè)令人很尷尬的事情。

我們做的是一款給培訓(xùn)機(jī)構(gòu)進(jìn)行招生營(yíng)銷、教務(wù)管理和家校溝通的產(chǎn)品。那天體驗(yàn)充值課程的時(shí)候，遇到一個(gè)問(wèn)題，我給學(xué)生充值課程，顯示操作成功了，但是該學(xué)生的課時(shí)和課時(shí)費(fèi)均沒(méi)有發(fā)生變化，我以為是遇到bug了，又試了幾次，還是一樣的效果。

于是我問(wèn)了一下技術(shù)，原來(lái)在基礎(chǔ)設(shè)置中設(shè)置了課時(shí)變更需要審核，只有審核之后才能變更成功。我又問(wèn)他，為什么不給一個(gè)提示；他回答說(shuō)：原來(lái)產(chǎn)品就是這么設(shè)計(jì)的。

由此可見(jiàn)，有一個(gè)合理的操作反饋是如此的重要，不然會(huì)令用戶感到莫名其妙，明明操作成功了，為什么數(shù)據(jù)還沒(méi)有發(fā)生變化，體驗(yàn)非常不好。因此，學(xué)習(xí)總結(jié)了一下操作反饋的相關(guān)設(shè)計(jì)，分享一下。

一、什么是操作反饋

操作反饋”，是指在使用產(chǎn)品時(shí)，系統(tǒng)對(duì)用戶的操作，或因戶的行為導(dǎo)致的變化，給出的反饋，它是體現(xiàn)人與“機(jī)”交互的關(guān)鍵場(chǎng)景。

二、為什么需要操作反饋

幫助用戶隨時(shí)感知系統(tǒng)的狀態(tài)，能夠告訴用戶下一步應(yīng)該操作什么或者幫助用戶做出判讀和決定，幫助滿足用戶的控制感，消減不確定性給用戶帶來(lái)的負(fù)面情緒，提升用戶體驗(yàn)。

三、哪些操作場(chǎng)景需要反饋

1. 操作確認(rèn)

對(duì)于一些具有“破壞性”或不可逆的操作，在用戶操作前，我們應(yīng)當(dāng)讓用戶“再次確認(rèn)”。除了要讓用戶二次確認(rèn)，更重要的是要告知用戶當(dāng)前操作可能帶來(lái)的“危害”、對(duì)其他模塊或未來(lái)的使用帶來(lái)的影響，引導(dǎo)用戶慎重決定自己的操作，從而減少用戶犯錯(cuò)的可能。

常見(jiàn)的操作場(chǎng)景有：刪除、修改、支付、退出、提交……

2. 操作結(jié)果

當(dāng)用戶通過(guò)點(diǎn)擊按鈕、填寫表格等一系列行為并完成最終任務(wù)時(shí)，設(shè)計(jì)師需要明確的告知用戶任務(wù)的結(jié)果：失敗還是成功，后續(xù)需要做什么。這可以讓用戶對(duì)自己的操作有更多的信心，對(duì)當(dāng)前任務(wù)有更多的“掌控感”。

常用場(chǎng)景有：提交、增加、保存、收藏、點(diǎn)贊……

3. 任務(wù)進(jìn)程

當(dāng)用戶進(jìn)行一些不會(huì)馬上完成的任務(wù)時(shí)，系統(tǒng)需要有一個(gè)加載、校驗(yàn)、查詢或計(jì)算的過(guò)程。在這個(gè)過(guò)程中，我們必須讓用戶的操作得到恰當(dāng)?shù)姆答仯茏層脩裟芨兄浆F(xiàn)在的進(jìn)程是否成功或者進(jìn)度是什么樣的，增加用戶的掌控感，消除用戶的焦慮感。

常見(jiàn)的場(chǎng)景有：上傳、下載、更新……

4. 表單校驗(yàn)

用戶在填寫表單后，點(diǎn)擊“保存”、“提交”等操作時(shí)，我們需要對(duì)用戶輸入的內(nèi)容進(jìn)行校驗(yàn)。這樣做除了避免或減少用戶錯(cuò)誤，也可以規(guī)范用戶的操作，使系統(tǒng)存儲(chǔ)的信息可控、規(guī)范化、結(jié)構(gòu)化。

常見(jiàn)場(chǎng)景：字符的合規(guī)性、手機(jī)號(hào)碼的校驗(yàn)、字符長(zhǎng)度……

四、有哪些反饋方式

1、彈框

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

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

非模態(tài)彈框相比來(lái)說(shuō)就顯得“溫和”多了，出現(xiàn)2-3秒之后就會(huì)自動(dòng)消失，不會(huì)對(duì)用戶造成干擾。屬于輕量型的反饋。如在顯示操作結(jié)果場(chǎng)景中，用來(lái)告訴用戶操作結(jié)果。

2、頁(yè)面

用頁(yè)面來(lái)完成反饋也很常見(jiàn)。

與彈框相比，頁(yè)面反饋的更傾向于是一個(gè)流程的終點(diǎn)站。如我們?cè)谔詫氈型瓿捎唵沃髸?huì)跳轉(zhuǎn)到訂單詳情頁(yè)，頁(yè)面包含的信息更多。所以，對(duì)于頁(yè)面和彈框，我們可以做出以下總結(jié)：頁(yè)面反饋的主體是操作流程，而彈框反饋的主體是操作行為。也主要是在操作結(jié)果場(chǎng)景中使用。

3. 標(biāo)簽

標(biāo)簽在反饋體系中同樣占據(jù)一席位置，不過(guò)它的使用場(chǎng)景比較單一：主要用于表單，用戶錄入信息的過(guò)程可以提供逐行報(bào)錯(cuò)提示。標(biāo)簽?zāi)芙o予更有指向性的提示，而不需要用戶去查找是哪里出錯(cuò)。

4. 動(dòng)畫

動(dòng)畫的合理使用可以吸引用戶的注意力，因?yàn)槿祟惗际且曈X(jué)動(dòng)物，用動(dòng)畫反饋更能吸引用戶的注意力，在用戶等待的時(shí)候不至于時(shí)刻關(guān)注時(shí)間，使用戶不會(huì)產(chǎn)生等待太長(zhǎng)的焦慮。主要應(yīng)用在任務(wù)進(jìn)程等場(chǎng)景中。

5. 聲音

聲音是我們最常見(jiàn)的反饋方式，iOS下載的時(shí)候會(huì)叮咚的一聲，表示開(kāi)始下載。聽(tīng)到這樣的聲音用戶就覺(jué)得很爽，提升了用戶體驗(yàn)。操作確認(rèn)和操作結(jié)果場(chǎng)景中都可用到。

6. 反饋原則

首先我們需要找出所有需要反饋的場(chǎng)景，然后進(jìn)行優(yōu)先級(jí)的排布，將重要的信息優(yōu)先使用頁(yè)面和(模態(tài))彈框來(lái)展示，然后依次使用(非模態(tài))彈框，標(biāo)簽和動(dòng)效來(lái)展示。我們盡量能盡可能完全的向用戶展示信息又做到不過(guò)分打擾用戶，站在用戶的角度提升用戶體驗(yàn)。

總結(jié)

在工作中我們會(huì)遇到很多體驗(yàn)不好的地方，要在工作中思考總結(jié)學(xué)習(xí)才能提升自己的產(chǎn)品能力。

這篇文章借鑒總結(jié)了一些大神的佳作并自己總結(jié)了一下；思考之后還需要經(jīng)常把玩各種產(chǎn)品，體驗(yàn)各個(gè)產(chǎn)品的不同之處和相同之處，細(xì)細(xì)體會(huì)，慢慢學(xué)習(xí)，逐步成長(zhǎng)。

本文由 @酒歌 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。