用mei) 逖櫓匾 換(huan)︰App中的反(fan)饋設計
用��mei) 逖櫓匾 換(huan)��︰App中的反(fan)饋設計-移動閱讀二維(wei)碼

立博平台官网

反(fan)饋就是(shi)用mei)?雋四(si)誠xiang)操作之後(hou),應(ying)用系di)掣沒(mei)?囊桓魷 ying)。這個響應(ying)根據場景的不同會有不同的響應(ying)形(xing)式和不同作用。

為什麼反(fan)饋設計是(shi)用mei) 逖櫓匾 囊換(huan)罰span id="more-18099">

在人機交huan)?墓討校(xiao) 沒(mei) Mwang)看到每一步(bu)都清晰,及(ji)時的顯示,用mei) Mwang)了si)餉懇徊bu)的後(hou)果以及(ji)用mei)?罟匭牡奈侍饈shi)什麼chu)R環矯媯C端(duan)和移動端(duan)產(chan)品(pin)需要保證(zheng)產(chan)品(pin)有積極,及(ji)時的反(fan)饋響應(ying)以確保用mei)?zhi)道自(zi)己(ji)所處的狀態,否則(ze)會讓(rang)用mei)?醯梅fan)應(ying)遲鈍(dun);另(ling)一方面,我們也要避(bi)免(mian)過度的信息反(fan)饋,尤其注意(yi)不要反(fan)饋錯誤信息,錯誤的信息對用mei)?斐傻撓跋焓shi)巨大的。

產(chan)品(pin)的反(fan)饋直觀的表現為界(jie)面的變化(少數(shu)為聲音和震動),通(tong)過這種變化使的用mei) 芄桓佑押黴 ?賾yu)產(chan)品(pin)進行交huan)? 幼ㄐ牡贗度氳餃ren)務流程當中去。

舉個栗子︰當用mei)?蔥型(xing)暌徊bu)操作後(hou),系di)趁mei)有及(ji)時甚至沒(mei)有給出相應(ying)的反(fan)饋提(ti)示,就tu)岣沒(mei)?dai)來疑惑(實現模型(xing)與(yu)心理模型(xing)沖突(tu)),讓(rang)用mei)?荒莧範ㄗzi)己(ji)的操作是(shi)否被執行、執行是(shi)否成功、執行整體進度、或者(zhe)是(shi)執行後(hou)會產(chan)生(sheng)怎麼樣的影響、能在哪里查詢(xun)到結果以及(ji)執行後(hou)是(shi)否可以yuan)懷che)銷等等。而這其中的任(ren)何(he)一個環節都有可能影響到用mei)?緣鼻叭ren)務的理解(jie)以是(shi)否執行下(xia)一步(bu)操作,從(cong)而影響到產(chan)品(pin)的用mei) 逖欏/p>

反(fan)饋的設計應(ying)該滿(man)足以下(xia)四(si)個原則(ze)︰

  • 反(fan)饋通(tong)過直觀的體現,可以幫(bang)助用mei)?斫jie)微交huan)?墓嬖ze),最大可能地降dang)di)用mei)?難 俺殺盡/li>
  • 別讓(rang)反(fan)饋給用mei)?斐裳沽Γ tong)過最少的反(fan)饋傳達(da)同樣的信息。
  • 反(fan)饋應(ying)該由需求驅動,然後(hou)在恰當的場景下(xia)和時間下(xia)讓(rang)用mei)?zhi)道lang)枰 zhi)道lai)氖慮(lv)欏/li>
  • 反(fan)饋的速度盡可能的快,反(fan)饋過慢會給用mei)?芯醪chan)品(pin)的性能差(cha)。

對于用mei)?裕 fan)饋設計的目的主要告訴用mei)?韻xia)幾(ji)點︰

  • 告訴用mei)?fa)什麼了什麼?
  • 用mei)?嶄兆雋聳裁詞攏/li>
  • 哪些過程已經開始(shi)了?
  • 哪些過程已經結束了?
  • 哪些過程正在進行中xiao)/li>
  • 用mei)?荒蘢鍪裁矗/li>
  • 用mei)?嶄詹僮韉慕 shi)什麼?

在設計過程中xiao) 婕ji)到反(fan)饋的情況一hua)惴治 逯擲lei)型(xing)︰

1.結果反(fan)饋

告知(zhi)用mei)?牟僮鶻 @綺僮 曬 蛘zhe)操作失(shi)敗、對操作後(hou)的一種確認。

a.以toast形(xing)式給用mei)?fan)饋。例如:微信轉(zhuan)發(fa)他人信息,出現toast,提(ti)示ji)沒(mei)?丫 fa)送成功。

b.以浮層動畫的形(xing)式給用mei)?fan)饋。例如微信輸入語音時,出現zhi)﹝愣  ti)示ji)沒(mei)?撓鏌羰淙朧shi)有效的。

2.狀態反(fan)饋

操作前後(hou)展示效果不一樣。

當用mei)?僮骱hou),界(jie)面操作前的狀態和操作後(hou)的狀態不一致(zhi)。通(tong)過這個不一致(zhi),給用mei)?fan)饋我的操作得到了提(ti)交。

3.過渡(du)反(fan)饋

有些時候程序確實不huai)豢歟 郝募釉廝俁群脫映儻侍猓 饈焙蟯tong)過常見的過渡(du)組(zu)件(jian)給用mei)?fan)饋,過渡(du)反(fan)饋的目的在于通(tong)過向(xiang)用mei)?fan)饋當前的響應(ying)進度和合(he)理的時間消(xiao)耗來讓(rang)用mei)?詰卻討蟹潘上(shang)xia)來chu)/p>

a.以進度指(zhi)示器給用mei)?fan)饋當前bai)刺 @玟 榔髟詰慊魎閹骱hou),頁面加載的進程反(fan)饋。

b.以系di)自(zi)定義(yi)的循環動畫,例如iOS的菊花Loading 和安卓的圓形(xing)Loading 。

例如︰he) bo)問答,點擊立即支付然後(hou)出現的過渡(du)動畫。

例如︰YouTube頁面加載過渡(du)的圓形(xing)Loading 。

4.操作反(fan)饋

對下(xia)一步(bu)操作的指(zhi)引,用mei)?慊饕桓霾僮 統魷中碌牟僮髯zu)件(jian)以此(ci)給用mei)?姆fan)饋。

當用mei)?幸桓霾僮骱hou),出現反(fan)饋,這個反(fan)饋通(tong)常是(shi)通(tong)過浮層彈框、調(diao)起鍵盤、進入下(xia)一個界(jie)面等等形(xing)式表現。

例如︰iOS原生(sheng)郵shi)jian),點擊回復/轉(zhuan)發(fa)出現底部浮層。

5.聲音和震動的反(fan)饋

聲音和震動也是(shi)反(fan)饋的一種的表現形(xing)式,通(tong)過用mei)?牟僮骷右隕艉駝鴝 囊跡 沒(mei)?芮康男睦 凳盡/p>

例如QQ郵箱(xiang),發(fa)送過程和成功後(hou)都有聲音提(ti)示。這是(shi)一個很典型(xing)的通(tong)過聲音反(fan)饋的例子。

如何(he)判斷你(ni)的反(fan)饋設計是(shi)有效的,非過度的反(fan)饋

上(shang)面介紹(shao)的反(fan)饋的各種類(lei)型(xing)。但(dan)是(shi)很多情況設計師們過度使用反(fan)饋。常見的情況是(shi)過度使用Toast。

例如貓(miao)眼(yan)︰點擊已想看愛心變灰,同時bei)魷oast提(ti)示。這樣就存在過度的反(fan)饋。反(fan)觀Instagram點擊取消(xiao)點贊(zan),就沒(mei)有出現Toast提(ti)示。

為什麼ci)宜得miao)眼(yan)的反(fan)饋過度呢(ne)?因為用mei)?慊韃僮魘保  淖刺 丫 淞耍 敲湊飧鱸 su)的變化已經暗示ji)沒(mei)? pp進行了反(fan)饋,沒(mei)必(bi)要在出現Toast提(ti)示。

如何(he)判斷你(ni)的涉及(ji)反(fan)饋是(shi)否過度?

在設計pin)蠢 保 綣丫 幸蛔zu)元素(su)的變化足以暗示ji)沒(mei)?鼻白(bai)刺 玫攪朔fan)饋,那麼沒(mei)必(bi)要再增加多余的元素(su)進行反(fan)饋提(ti)示(除非有特別的目的)。這樣會使得用mei)?男睦碭旱1渲兀 桓齜fan)饋可能不足以影響用mei) 逖椋 綣pp都出現zhong)庵智榭觶 牆 shi)一場災難。

歡迎(ying)關注作者(zhe)的微信公(gong)眾號niu)strong>「UEDC」

本文鏈(lian)接︰http://www.mobileui.cn/app-feedback-design.html
本文標簽: ,