產(chǎn)品設(shè)計(jì)必讀:常用反饋方式的分類

0 評論 9760 瀏覽 68 收藏 13 分鐘

用戶將信息操作給系統(tǒng),系統(tǒng)告知用戶操作的結(jié)果或者操作對象狀態(tài)的變更。系統(tǒng)反饋給用戶信息的常見方式有哪些?本文作者對此進(jìn)行了詳細(xì)的分類,一起來看看吧。

“交互設(shè)計(jì)”指的是人機(jī)交互方式的設(shè)計(jì)。人機(jī)交互指的是用戶和系統(tǒng)之間進(jìn)行信息的傳遞——用戶通過操作(例如手動錄入或者選擇)把信息傳遞給系統(tǒng),系統(tǒng)反饋信息給用戶,告知用戶操作的結(jié)果或者操作對象狀態(tài)的變更。在這里我們詳細(xì)分享一下系統(tǒng)反饋給用戶信息的常見方式。

反饋信息有兩個交互設(shè)計(jì)的要點(diǎn):

  • 及時(shí)性:避免用戶等待產(chǎn)生焦躁情緒或者繼續(xù)進(jìn)行其他無效的操作。
  • 簡單易讀:用戶看到(或聽到)反饋能明白結(jié)果的含義和指向性。

常見的反饋方式分為6種:彈框、頁面、標(biāo)簽、紅點(diǎn)、動畫、聲音。

一、彈框

彈框分為模態(tài)彈框和非模態(tài)彈框,兩者最大的區(qū)別是前者強(qiáng)制用戶進(jìn)行交互。

模態(tài)框一般會有一層黑色透明的蒙板,它打斷用戶所屬的主流程,只能到完成模態(tài)框的操作,才能返回到主流程中去。非模態(tài)框一般沒有那一層蒙板,不會影響所屬的主流程,彈出非模態(tài)也能看見底層的主流程,過一定的時(shí)間(3~5s)后會自動消失(或者點(diǎn)擊彈框外的其他位置)。

模態(tài)彈框?qū)儆谥亓考壏答?,?yōu)勢是能夠獲取用戶的關(guān)注焦點(diǎn),對將要操作或者正在操作產(chǎn)生會產(chǎn)生結(jié)果進(jìn)行明確的告知,從而引起用戶的重視和思考,防止用戶誤操作。例如用戶在刪除重要信息時(shí)會有“一旦刪除,無法恢復(fù)”的彈窗提示。劣勢是會打斷用戶當(dāng)前的操作。

非模態(tài)彈框?qū)儆谳p量級反饋,優(yōu)勢是不會影響用戶當(dāng)前的操作,干擾非常小。例如用戶關(guān)注成功之后會有“關(guān)注成功”的toast提示。劣勢是因?yàn)橐曈X效果不夠明顯、顯示時(shí)間有限等因素導(dǎo)致用戶容易錯過。所以我們在平時(shí)的設(shè)計(jì)中要根據(jù)不同的場景和反饋的重要程度選擇合適的反饋方式 。

1. 模態(tài)彈框

模態(tài)彈框分為對話框、動作欄和浮層。

對話框一般用在比較重要的系統(tǒng)狀態(tài)變化或者重要且不可逆的操作時(shí),需要用戶知曉操作會產(chǎn)生的后果;對一些重要的操作進(jìn)行繼續(xù)或者放棄,方向A或者方向B選擇的詢問;重要信息錄入提交或者驗(yàn)證等。

底部動作欄是指從頁面底部向上滑出的面板,通常讓用戶對當(dāng)前的操作進(jìn)行確認(rèn)或者展示多個操作項(xiàng)讓其進(jìn)行選擇。相比較對話框,底部動作欄能承擔(dān)數(shù)量更多且表現(xiàn)形式更豐富的選項(xiàng),例如列表、宮格、圖文,可觸發(fā)更多的動作等。

對于同樣都為兩個選項(xiàng)的情況,對話框更多的用在讓用戶對接下來的操作進(jìn)行選擇的場景,底部動作欄用在讓用戶對之前的操作進(jìn)行二次確認(rèn)的場景。

浮層可以出現(xiàn)在頁面中的任何位置,對于頁面元素比較多或者頁面有比較多相似元素時(shí),能夠給用戶更具有指向性的提示。浮層展示的內(nèi)容一般為多種操作的選項(xiàng)。

2. 非模態(tài)彈框

非模態(tài)彈窗分為toast、snackbar、noticebar。

toast是一種輕量型的反饋方式,不會打斷用戶當(dāng)前的操作流程,對用戶的打擾是最小。其缺點(diǎn)是容易被用戶忽視,而且不適合展示過多的信息,可能在用戶還沒讀完信息之前就消失了。

常見的toast表現(xiàn)方式為文字或者icon+文字的組合方式。出現(xiàn)的位置會根據(jù)場景的不同設(shè)計(jì)在頁面的頂部、中間或者底部。經(jīng)過一定的時(shí)間間隔(3s~5s)后自動消失,或者用戶點(diǎn)擊其他位置也會自動消失。

注:

  • toast是安卓設(shè)計(jì)規(guī)范的組件,當(dāng)時(shí)目前也常用在IOS的設(shè)計(jì)中,IOS設(shè)計(jì)規(guī)范中的HUD和toast類似。
  • 一些安卓用戶會在禁用通知欄消息時(shí)把toast通知也給禁用了,這樣就無法接收到toast形式的消息通知了。
  • 背景顏色和停留時(shí)間都可以設(shè)置。

snackbar是比toast稍微重一點(diǎn)的輕量型反饋方式,包含一行與進(jìn)行中的操作相關(guān)的文案&(最多)一個操作,并且snackbar不能包含使其消息的“取消”操作。

常規(guī)設(shè)計(jì)一般出現(xiàn)在頁面的底部,可把snackbar看成可點(diǎn)擊的Toast,用戶可以點(diǎn)擊按鈕進(jìn)行交互,即使用戶不點(diǎn)擊Snackbar,經(jīng)過一定的時(shí)間間隔(3s~5s)后自動消失,或者用戶點(diǎn)擊其他位置也會自動消失。

注:toast和snackbar的停留時(shí)間一般為3~5s,但也可以根據(jù)場景的需求設(shè)置更長的時(shí)間。

noticebar通告欄屬于臨時(shí)視圖的范疇,可以在不影響用戶操作的情況下起到持續(xù)性提示用戶的作用,適合一些狀態(tài)變更的重要通知但又不需要用戶立即去進(jìn)行操作的反饋提示??梢詢H僅是一個文案提示,也可以增加可點(diǎn)擊的入口。

注:noticebar可以同時(shí)在一個頁面出現(xiàn)多個。

二、頁面

頁面的反饋一般用于重要且完整流程的結(jié)束,是一個非常重的反饋形式。例如購買支付成功或者提交重要信息之后的頁面反饋。而彈框一般用于完整流其中一個操作節(jié)點(diǎn)的反饋。

有兩種特殊的頁面反饋形式:

  • 空頁面:要明確有沒有必要使用頁面,如果使用空頁面,要告知用戶這是什么內(nèi)容的空頁面,為什么是空的,并對希望用戶接下來的操作進(jìn)行引導(dǎo)。
  • 頁面內(nèi)嵌反饋,常用在網(wǎng)絡(luò)切換時(shí)(從WIF切換到5G流量)對用戶的提示。同樣是需要用戶知曉要使用比較重的提示的場景,如果使用彈窗就會影響用戶主流程的操作,所以為了達(dá)到同樣的目的又考慮到用戶的體驗(yàn),使用頁面內(nèi)嵌反饋是一個更為合適的選擇。

三、標(biāo)簽

常見標(biāo)簽為頁面某個操作或者頁面某個元素對象局部反饋的文字標(biāo)簽提示,例如用戶在進(jìn)行手勢驗(yàn)證時(shí),如果手勢錯誤時(shí)進(jìn)行彈窗提示與直接頁面文字標(biāo)簽提示,前者比后者要增加”關(guān)閉彈窗”的操作,而且提示內(nèi)容較多時(shí)也增加了用戶的記憶成本,用戶體驗(yàn)較差。

在進(jìn)行注冊郵箱時(shí),填寫的信息如果有錯誤,文字標(biāo)簽的提示兼顧了反饋的及時(shí)性、明確的指向性以及友好的引導(dǎo)性。

四、紅點(diǎn)

一般通知消息使用紅點(diǎn)或者帶有數(shù)字的紅點(diǎn)標(biāo)識來反饋,用戶閱讀完成之后紅點(diǎn)消失或者對應(yīng)的數(shù)值減少。另外紅點(diǎn)標(biāo)識上也會展示一些文案來表達(dá)特定的含義來吸引用戶的關(guān)注,此處不再詳解。

五、動畫

動畫的反饋方式是為了更加吸引用戶的注意力,減少用戶等待的焦躁感,例如在加載頁面資源 時(shí)展示有趣的動畫?;蛘邽榱烁庇^簡單的展示操作對象狀態(tài)的變化,例如點(diǎn)贊、收藏、未關(guān)注、已關(guān)注icon的變化,一般稱為這種按鈕為多態(tài)按鈕。

多態(tài)按鈕的優(yōu)勢是在不影響用戶操作主流程的前提下及時(shí)展示操作對象的變化,且變化之后的狀態(tài)持續(xù)直觀的顯示。

六、聲音

聲音形式的反饋一般用在用戶不方便及時(shí)查看頁面且比較重要的信息提示中,例如商家收款到賬具體金額的語音提示,外賣店家收到新單的語音提示。

例如早上大家騎著共享單車到公司樓下匆忙關(guān)閉自行車開關(guān)趕時(shí)間去打卡時(shí)收到“關(guān)閉成功”的語音提示。

七、小結(jié)

上文已經(jīng)對產(chǎn)品設(shè)計(jì)中常用的各種反饋類型進(jìn)行了詳細(xì)的介紹,在平時(shí)設(shè)計(jì)反饋機(jī)制以及選擇反饋方式時(shí),我們需要明確五點(diǎn):

  1. 此操作或者此流程是否有必要進(jìn)行反饋?
  2. 反饋的節(jié)點(diǎn)在哪里更合適?
  3. 反饋信息的重要程度如何,如果用戶看不到此反饋會產(chǎn)生什么影響?
  4. 對于必須使用重量級反饋的方式時(shí),考慮到用戶體驗(yàn)問題是否能在保證用戶看到時(shí)不影響主流程的操作?
  5. 用戶接收到反饋時(shí),是否需要引導(dǎo)去做些什么,是否需要立刻去操作?

總之,這些問題的答案都要根據(jù)具體的使用場景來進(jìn)行具體分析。因?yàn)槿魏畏答伓紩τ脩粼斐筛蓴_,所以為了更好地用戶體驗(yàn),應(yīng)該減少彈框的使用,本著“能不用彈框就不要用彈框,能用非模態(tài)彈框就不要用模態(tài)彈框”的原則來設(shè)計(jì)產(chǎn)品。對于有必要使用彈框進(jìn)行提示的場景,要在合適的時(shí)機(jī)使用選擇合適的彈框。

好啦,此波分享到此結(jié)束~希望本篇文章能幫到需要的小伙伴們~

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

題圖來自Unsplash,基于 CC0 協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!