PMCAFF（www.pmcaff.com）：互聯(lián)網(wǎng)產(chǎn)品社區(qū)，是百度，騰訊，阿里等產(chǎn)品經(jīng)理的學(xué)習(xí)交流平臺(tái)。定期出品深度產(chǎn)品觀察，互聯(lián)產(chǎn)品研究首選。

外包大師（www.waibaodashi.com）：要外包，找大師。PMCAFF旗下高質(zhì)量互聯(lián)網(wǎng)外包解決方案提供商。聯(lián)系電話(huà)：010-57026742

作者：劉東晨，產(chǎn)品交互設(shè)計(jì)師，PMCAFF會(huì)員，關(guān)注用戶(hù)體驗(yàn)研究與設(shè)計(jì)。

編者按

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

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

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

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

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

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

反饋1：正在進(jìn)行的交易，框框用淺藍(lán)色表示，已完成或關(guān)閉的用灰色。

反饋2：客服在線(xiàn)與不在線(xiàn)的狀態(tài)反饋。

反饋3：用icon明確所售商品的性質(zhì)的反饋。

反饋4：當(dāng)鼠標(biāo)移至第一個(gè)條目時(shí)，反饋用戶(hù)，還有更多操作（轉(zhuǎn)發(fā)與標(biāo)記）。

反饋5：鼠標(biāo)移至“備注”icon時(shí)，顯示非模態(tài)彈窗，告知用戶(hù)詳細(xì)內(nèi)容。

反饋6：第三個(gè)訂單有修改過(guò)價(jià)格。

反饋7：這個(gè)訂單是在手機(jī)上下單的。

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

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

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

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

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

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

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

有用的信息反饋：

明確告訴用戶(hù)任務(wù)所處的狀態(tài)，讓用戶(hù)感受到一切都在掌握之中。

及時(shí)的提醒用戶(hù)下一步需要做什么，這一步哪些地方操作有誤。

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

在不打斷用戶(hù)行為操作的前提下提供反饋。

在用戶(hù)“犯錯(cuò)”之前及時(shí)制止，而不是“犯錯(cuò)”后告訴他。

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

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

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

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

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

• 第一，它需要用戶(hù)“提交申請(qǐng)”后才能反饋，并不能在用戶(hù)犯錯(cuò)之前及時(shí)制止。

• 第二，這種反饋搶占了視覺(jué)信息的中心，而用戶(hù)的這種犯錯(cuò)并不是一個(gè)嚴(yán)重的不可挽救的行為。

• 第三，這種反饋出現(xiàn)的位置占據(jù)了用戶(hù)的輸入信息框，一定程度上阻礙了用戶(hù)輸入信息的操作。
  

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

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

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

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

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

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

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

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

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

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

二、及時(shí)的操作及特殊情況反饋提醒，包括成功、失敗和提示。

?

大家一直用的word辦公軟件，N多年之前關(guān)于錯(cuò)誤單詞提醒反饋就做的很棒，它不會(huì)跳出一個(gè)彈窗告訴用戶(hù)“您有個(gè)單詞拼錯(cuò)了”，而然在用戶(hù)輸完這個(gè)單詞準(zhǔn)備下一個(gè)單詞前及時(shí)的、友好的將錯(cuò)誤信息以非模態(tài)形式反饋給用戶(hù)，在用戶(hù)犯錯(cuò)之前制止。至于用戶(hù)改不改，就不是程序該關(guān)心的事了。

QQ在發(fā)送好友邀請(qǐng)后會(huì)以非模態(tài)的形式反饋用戶(hù)操作成功并自動(dòng)返回消息界面，并不會(huì)balabala的彈出一個(gè)個(gè)對(duì)話(huà)框讓用戶(hù)確認(rèn)這確認(rèn)那。

如右圖，是QQ綁定手機(jī)時(shí)手機(jī)填寫(xiě)錯(cuò)誤的提示。?

QQ在無(wú)網(wǎng)絡(luò)狀態(tài)下，會(huì)在消息條目上面以非模態(tài)形式反饋給用戶(hù)，而不是蹦出一個(gè)警告彈窗。雖然QQ在非模態(tài)反饋中處理的非常出色了，但這里還存在一個(gè)問(wèn)題。

如右圖，當(dāng)我評(píng)論附近的人的新鮮事時(shí)，只有當(dāng)我準(zhǔn)備發(fā)送評(píng)論時(shí)才提醒我沒(méi)有權(quán)限。解決方案：當(dāng)我打開(kāi)鍵盤(pán)時(shí)即提示，不然辛辛苦苦打了幾百字不能發(fā)會(huì)是一種怎么樣的體驗(yàn)？?

案例1：版本升級(jí)提示

軟件版本迭代是家常便飯，讓我們看看印象筆記是如何處理的。

每次你打開(kāi)不會(huì)跳出彈窗讓你立刻升級(jí)，因?yàn)橛脩?hù)是不喜歡完全聽(tīng)從程序的安排，而且打開(kāi)軟件必定是當(dāng)前有任務(wù)需要處理，想想那些每次打開(kāi)軟件求好評(píng)的彈窗，何不在我完成任務(wù)后再提醒升級(jí)呢？

印象筆記這中非模態(tài)反饋，不僅沒(méi)有打擾到用戶(hù)正常的操作，同時(shí)還在時(shí)刻提醒用戶(hù)軟件需要升級(jí)。 再看看下面sketch和春秋的升級(jí)提醒 是不是不太友好？？

案例2：聲音調(diào)節(jié)提示

• 場(chǎng)景：用戶(hù)用APP觀看視頻，發(fā)現(xiàn)聲音聽(tīng)不清，需要調(diào)節(jié)音量。
  

• ios端：音量調(diào)節(jié)提示框居中，且較大，極大影響用戶(hù)開(kāi)頭觀影體驗(yàn)，可能造成用戶(hù)從頭觀看。

• 安卓端：音量調(diào)節(jié)提示框在頂部，且較大，雖如圖不影響觀影體驗(yàn)，但全屏后開(kāi)頭觀影體驗(yàn)較差。

• INS APP：音量調(diào)節(jié)提示框在頂部，且較小，無(wú)論是否全屏均不影響觀影體驗(yàn)。

分析

用戶(hù)觀看視頻，關(guān)注點(diǎn)在于視頻內(nèi)容，對(duì)于用戶(hù)的操作雖然需要給出相應(yīng)的反饋，但是前兩個(gè)示范卻嚴(yán)重的干涉了用戶(hù)的主任務(wù)，并且音量調(diào)節(jié)不屬于一個(gè)“突然”或“特殊”的情況，因此提示沒(méi)必要過(guò)分突顯。

從聲音的本質(zhì)分析，其屬于聽(tīng)覺(jué)范圍的體驗(yàn)，相比明確的文字或圖片視覺(jué)反饋提示，不如用戶(hù)直接用耳朵在聽(tīng)覺(jué)上感受音量變化來(lái)的更直接更有效。

其他一些非模態(tài)的處理案例：

網(wǎng)易云音樂(lè)PC端

瀏覽器搜索功能

非模態(tài)的處理更多的是應(yīng)用于游戲當(dāng)中

以上就是我對(duì)“非模態(tài)反饋”的一些總結(jié)與思考，總體來(lái)說(shuō)QQ在這方面的處理是同類(lèi)軟件中比較出色的。

本文由PMCAFF產(chǎn)品社區(qū)（www.pmcaff.com）原創(chuàng)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載。

中高端求職 & 招聘，PMCAFF人才服務(wù)最懂你

=> alice.zhang@pmcaff.com

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的案例分析：产品中非模态反馈”信息设计的意义与方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。