編者按

本文作者是PMCAFF會(huì)員劉東晨，首發(fā)于PMCAFF社區(qū)。文中作者用豐富的案例，如淘寶、知乎、QQ郵箱、ins、Gmail、印象筆記、網(wǎng)易云音樂，解釋了非模態(tài)反饋的意義和應(yīng)用，并詳細(xì)解說了如何設(shè)計(jì)非模態(tài)反饋。對于產(chǎn)品設(shè)計(jì)有參考價(jià)值，值得細(xì)讀，歡迎大家討論。

什么是非模態(tài)反饋?

艾倫·庫珀在《about face》第十五章中提到過“富視覺非模態(tài)反饋”(rich visual modeless feedback，RVMF)可能是最重要的一種非模態(tài)反饋方式了。

它的“富”在于能夠深入全面的信息，讓人了解一個(gè)進(jìn)程的狀態(tài)或者屬性，或者當(dāng)前應(yīng)用程序的對象。它的“視覺”是指按習(xí)慣方式利用屏幕上的像素(通常是動(dòng)態(tài)的)。

它的“非模態(tài)”在于信息能及時(shí)輕松地顯示出來，即不需要用戶做特殊動(dòng)作或者轉(zhuǎn)換模式，就能看到和理解這些反饋。(參考http://flylib.com/books/en/2.153.1.174/1/)

從淘寶的訂單頁我們可以看出幾個(gè)“富視覺非模態(tài)反饋”實(shí)例。

1. 反饋1：正在進(jìn)行的交易，框框用淺藍(lán)色表示，已完成或關(guān)閉的用灰色。
2. 反饋2：客服在線與不在線的狀態(tài)反饋。
3. 反饋3：用icon明確所售商品的性質(zhì)的反饋。
4. 反饋4：當(dāng)鼠標(biāo)移至第一個(gè)條目時(shí)，反饋用戶，還有更多操作(轉(zhuǎn)發(fā)與標(biāo)記)。
5. 反饋5：鼠標(biāo)移至“備注”icon時(shí)，顯示非模態(tài)彈窗，告知用戶詳細(xì)內(nèi)容。
6. 反饋6：第三個(gè)訂單有修改過價(jià)格。
7. 反饋7：這個(gè)訂單是在手機(jī)上下單的。

以上通過顏色、圖標(biāo)及詳細(xì)的文字等信息告知用戶某一訂單的所有狀態(tài)和屬性。這雖然能夠讓用戶掌控所有訂單情況，但是在視覺讀取上需要耗費(fèi)用戶很大的能量，并且一些某些反饋需要手動(dòng)操作才行。因此這種“富視覺非模態(tài)反饋”需要一定的學(xué)習(xí)成本，它更適用于更多的后臺(tái)系統(tǒng)中的。

上面兩個(gè)圖都是為了提醒用戶輸入有誤，左圖非模態(tài)反饋，信息提示幾秒后便消失，并不妨礙用戶正常的操作行為。右圖為模態(tài)反饋，中斷了用戶的操作，需用戶手動(dòng)確認(rèn)后方可進(jìn)行后續(xù)操作。

我的定義，非模態(tài)反饋(modeless feedback)是一種有效的信息提示的表達(dá)方式，這種信息的反饋不會(huì)影響到用戶正常的操作，更不會(huì)打斷用戶的行為，它能夠在關(guān)鍵時(shí)刻提醒用戶任務(wù)的狀態(tài)是什么，是完成了還是失敗了還是出錯(cuò)了甚至是操作提示，這就是非模態(tài)反饋。

模態(tài)是指界面中只有提醒彈框才具有可交互行為，其他一切都不可操作;非模態(tài)不會(huì)把提醒做成彈框，可能會(huì)處理成List Notification， Toast list等方式來提醒用戶手機(jī)

非模態(tài)反饋的意義?

上一段中，從我對“非模態(tài)反饋”的定義中，就不難得出其意義的所在。

存在的意義在于，幫助用戶更加有效的完成任務(wù)?！坝行А卑颂峁┯杏玫男畔⒎答?，提高任務(wù)的操作效率。

有用的信息反饋：

1. 明確告訴用戶任務(wù)所處的狀態(tài)，讓用戶感受到一切都在掌握之中。
2. 及時(shí)的提醒用戶下一步需要做什么，這一步哪些地方操作有誤。

提高任務(wù)的操作效率：

1. 在不打斷用戶行為操作的前提下提供反饋。
2. 在用戶“犯錯(cuò)”之前及時(shí)制止，而不是“犯錯(cuò)”后告訴他。

程序必須假裝用戶始終是正確的，并不意味著用戶實(shí)際上總是正確的。用戶出錯(cuò)可能不是程序的故障，但是程序有責(zé)任。

而非模態(tài)反饋的意義在于審核用戶的操作，然后給出相應(yīng)的判斷，但不能“自以為是”地糾正用戶的錯(cuò)誤。?

如何設(shè)計(jì)非模態(tài)反饋?

上文中，說到“富視覺非模態(tài)反饋”的應(yīng)用，更多的在于后臺(tái)系統(tǒng)中的行為。而“非模態(tài)反饋”則是簡單的用戶輸入信息或操作，系統(tǒng)給出相應(yīng)的答復(fù)，在設(shè)計(jì)這個(gè)答復(fù)的信息界面時(shí)，我們則需要從用戶的角度出發(fā)，以有效的幫助用戶完成任務(wù)為目標(biāo)設(shè)計(jì)。

上文中提到的案例，這其實(shí)并不是一個(gè)很好的“非模態(tài)反饋”設(shè)計(jì)案例，為什么?如左圖：

• 第一，它需要用戶“提交申請”后才能反饋，并不能在用戶犯錯(cuò)之前及時(shí)制止。
• 第二，這種反饋搶占了視覺信息的中心，而用戶的這種犯錯(cuò)并不是一個(gè)嚴(yán)重的不可挽救的行為。
• 第三，這種反饋出現(xiàn)的位置占據(jù)了用戶的輸入信息框，一定程度上阻礙了用戶輸入信息的操作。

因此更好的“非模態(tài)反饋”是如右圖，在用戶跳過金額或快遞直接輸入單號時(shí)，及時(shí)的在用戶提交之前反饋用戶那些遺漏的輸入，并以一種更和諧不打斷用戶操作的方式進(jìn)行。

非模態(tài)反饋的使用場景

下面我將列舉一些具體的場景，舉例說明一些“非模態(tài)反饋”案例。

一、明確并告知用戶任務(wù)狀態(tài)?

chrome瀏覽器中打開一個(gè)新的頁面，將已加載好的內(nèi)容呈現(xiàn)給用戶，同時(shí)標(biāo)簽欄中有個(gè)小轉(zhuǎn)頭提示用戶頁面并未全部加載完成。

qq郵箱發(fā)送郵件的過程同時(shí)允許用戶繼續(xù)瀏覽內(nèi)容。

Gmail是第一個(gè)把刪除的模態(tài)彈框設(shè)計(jì)成List Notification這種方式的，提醒用戶撤銷剛才的刪除操作，這種非模態(tài)的處理，讓刪除的流程更加順暢和輕松自如。

ins發(fā)布一條動(dòng)態(tài)時(shí)，以非模態(tài)的形式告知用戶上傳進(jìn)度同時(shí)不影響用戶對其他內(nèi)容的繼續(xù)瀏覽。而下方某APP在上傳歌曲時(shí)以模態(tài)彈窗反饋用戶進(jìn)度，不僅打斷了用戶的后續(xù)操作同時(shí)無取消按鈕，上傳成功后依舊采用模態(tài)對話框，嚴(yán)重干擾到了用戶操作流程。

QQ在界面加載時(shí)，如左圖導(dǎo)航欄下面有個(gè)進(jìn)度條反饋加載情況。

QQ在綁定手機(jī)號碼后，如右圖會(huì)自動(dòng)進(jìn)入到匹配通訊錄的任務(wù)，并告訴用戶程序在干什么。