中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

交互基礎(chǔ)科普!聊聊移動(dòng)APP中反饋提示的設(shè)計(jì)方

2020-09-26    分類: 網(wǎng)站建設(shè)

一、為什么要反饋

1、以人與人的交流為例

人與人的交流中,無法忍受的一種情況是:對(duì)方對(duì)自己說的話沒有反應(yīng),好像視而不見;沒有反饋或是不友好的反饋,就好像冷冰冰的人一樣,會(huì)給用戶帶來無助或不悅的負(fù)面體驗(yàn)。

2、及時(shí)恰當(dāng)?shù)姆答伒挠锰幨鞘裁?/strong>

能夠告訴用戶下一步該做什么幫助用戶做出判斷和決定二、反饋的形式

反饋的形式多樣,所有的提示都應(yīng)該在恰當(dāng)?shù)臅r(shí)候出現(xiàn)在恰當(dāng)?shù)奈恢茫?用簡(jiǎn)短而清晰的文字提供有用的信息,不讓用戶產(chǎn)生迷惑。

1、氣泡狀提示

1)用處一

通常是短暫出現(xiàn)在畫面上,就像氣泡一樣過一會(huì)兒就會(huì)自己消失,并不需要對(duì)它進(jìn)行任何操作

通常用于告訴任務(wù)狀態(tài)、操作結(jié)果

下圖三個(gè)例子都屬于操作結(jié)果的反饋提示,圖1提示添加收藏成功,采用系統(tǒng)自帶的toast吐司提示;圖2是新微博加載成功的提示,在導(dǎo)航欄下方浮在內(nèi)容區(qū)上方;圖3是QQ空間添加到歌單的提示,顯示在導(dǎo)航欄背景色與狀態(tài)欄顏色一致,效果不錯(cuò)。盡管展示位置不同,但這些提示都是短暫的出現(xiàn)在畫面上,1秒左右消失。


2)用處二

用于引導(dǎo),就像漫畫中的對(duì)話框一樣,帶有一個(gè)指向具體位置的小尖,提示用戶需要關(guān)注哪個(gè)位置。

與用處一不同,這類引導(dǎo)類提示通常不回很快消失。如下圖,圖1奇妙清單、圖2知乎的例子,都提供了關(guān)閉按鈕,用戶既可以點(diǎn)擊指引區(qū)域也可以點(diǎn)擊關(guān)閉按鈕,來讓提示消失;圖3來自圖片社交App——in,用戶點(diǎn)擊指引區(qū)域才能讓提示消失。


3)不足之處

容易被用戶忽略,所以不適合承載太多文字或重要信息

2、彈出框

1)用法

一般會(huì)帶有一兩句說明文字和兩個(gè)操作按鈕,用于確認(rèn)和取消重要操作(比如,是否刪除內(nèi)容)

通常會(huì)用明顯的顏色,突出顯示可能造成喲過戶損失的操作項(xiàng)(比如,“刪除”、“不保存”)

2)特點(diǎn)

彈出框的出現(xiàn),會(huì)強(qiáng)迫用戶關(guān)注彈窗內(nèi)容和操作,并屏蔽背景的所有內(nèi)容

對(duì)用戶打擾大的一種提示

3)設(shè)計(jì)注意

彈出框上的說明、按鈕上的文字,最好言簡(jiǎn)意賅、一目了然,能幫助用戶快速做出決策。 因?yàn)橥ǔS脩舳枷脍s快關(guān)掉彈出框,以便接著完成被打斷的操作。

設(shè)計(jì)過程中要避免濫用彈出框提示,對(duì)于不太重要又要反饋的事可以用氣泡提示表示。

3、按鈕/圖標(biāo)/鏈接的按下狀態(tài)

1)基于人在現(xiàn)實(shí)世界經(jīng)驗(yàn)

在現(xiàn)實(shí)中按一個(gè)按鈕會(huì)立即有按下狀態(tài)

2)人機(jī)交互

當(dāng)用戶在屏幕上按下一個(gè)按鈕或鏈接時(shí),也需要有狀態(tài)的改變,讓用戶知道界面已經(jīng)接收到他的操作了。

如下圖,圖1是iPhone照片界面,點(diǎn)擊按下右上角的“選擇”,文字透明度變高、顏色變淡;圖2是豆瓣App,點(diǎn)擊某個(gè)區(qū)塊時(shí)顯示背景色表示按下的效果;圖3、4是知乎App,點(diǎn)擊按下按鈕時(shí),背景顏色加深,同時(shí)按鈕尺寸動(dòng)效縮小。


4、聲音

1)常見例子

虛擬鍵盤在按下時(shí)的咔嚓聲

短信、郵件發(fā)送成功后的“嗖”一聲

微信搖一搖手機(jī)之后的咔嚓聲

拍照App按下按鈕是的咔嚓聲

2)設(shè)計(jì)注意

恰當(dāng)使用聲音反饋有點(diǎn)睛效果,但過多的使用反而會(huì)變成一種打擾

不能將聲音作為主要反饋,且要給用戶關(guān)閉提示音的權(quán)利(因?yàn)橛脩羲幍沫h(huán)境多樣,可能很吵而聽不見聲音,也可能不適合打開聲音)

5、振動(dòng)

1)用處

一種比較強(qiáng)烈的觸覺反饋,可用來代替或加強(qiáng)聲音提示

2)例子

在手機(jī)系統(tǒng)中應(yīng)用廣泛,比如來電、短信、已連接充電 在手機(jī)App中較少用到

3)設(shè)計(jì)注意

不要亂用為好

6、動(dòng)畫

1)用處

給用戶提供有意義的反饋,幫助用戶直觀了解操作的結(jié)果

精美有趣的動(dòng)畫,能給用戶留下深刻印象、提升使用時(shí)的愉悅感,甚至成為產(chǎn)品吸引用戶的一個(gè)因素

2)例子

iOS系統(tǒng)在刪除郵件、照片時(shí),通過擬物化的動(dòng)畫效果,讓用戶知道操作已經(jīng)生效,即——不要的郵件或照片已經(jīng)被丟入了垃圾桶。 這種形象的動(dòng)畫,幫助用戶清晰感受到操作的執(zhí)行過程,并增添了樂趣。

在一些會(huì)持續(xù)比較久的操作里,比如下載、刪除大量文件,用動(dòng)態(tài)的進(jìn)度條展示已完成的進(jìn)度,并在可能的時(shí)候提供解釋信息,能夠減少用戶的焦慮。

很多有趣的下拉刷新、上滑加載更多的例子,讓等待不再枯燥

三、反饋的內(nèi)容

1、信息

1)設(shè)計(jì)注意

文字信息應(yīng)該簡(jiǎn)潔易懂,避免使用倒裝句,最好一兩句就能將意思表達(dá)清楚

避免使用過于程序化的語言

頁面已有詳細(xì)說明文字的操作,其反饋信息可以簡(jiǎn)單一些,不必重復(fù)頁面已有文字。比如昵稱,界面上已有格式要求時(shí),反饋錯(cuò)誤時(shí)只需提示“昵稱不符合要求”

適當(dāng)使用圖標(biāo),可以吸引用戶注意,幫助用戶判斷提示的類型。

2、警告

1)用處

警告框,用于向用戶展示對(duì)使用程序有重要影響的信息。

2)特點(diǎn)

浮現(xiàn)在程序中央,覆蓋在主程序之上

它的到來,是由于程序或設(shè)備的狀態(tài)發(fā)生了重要變動(dòng),并不一定是用戶最近的操作導(dǎo)致的

通常至少有一個(gè)按鈕,用戶點(diǎn)擊后即可關(guān)閉窗口

一般會(huì)有標(biāo)題,并展示額外的輔助信息

3、錯(cuò)誤

1)用處

提示用戶操作出現(xiàn)了問題或異常,無法繼續(xù)執(zhí)行

2)設(shè)計(jì)注意

錯(cuò)誤提示,告知用戶為什么操作被中斷,以及出現(xiàn)了什么錯(cuò)誤。

錯(cuò)誤信息要盡量準(zhǔn)確、通俗易懂。

有效的錯(cuò)誤提示信息要解釋發(fā)生的原因,并提供解決方案,以使用戶能夠從錯(cuò)誤中恢復(fù)。

4、確認(rèn)

1)用處

用于詢問用戶是否要繼續(xù)某個(gè)操作,讓用戶進(jìn)一步確認(rèn),為用戶提供可反悔、可撤銷的退路。

2)設(shè)計(jì)注意

當(dāng)用戶的操作結(jié)果較危險(xiǎn)或不可逆時(shí),通過二次選擇和確認(rèn),防止用戶誤操作

四、反饋出現(xiàn)的位置

1、狀態(tài)欄

1)優(yōu)點(diǎn)

很好的利用空間

2)缺點(diǎn)

位置不是很明顯,建議只提示重要程度不高、或有跨畫面顯示需求的提示

3)例子

如下圖,圖1、2是新浪微博App,在寫微博界面點(diǎn)擊“發(fā)送”,回到原界面同時(shí)狀態(tài)欄提示發(fā)送狀態(tài);圖3是網(wǎng)易郵箱大師App,郵件發(fā)送后離開寫郵件界面,同時(shí)右上角提示郵件的發(fā)送進(jìn)度。

通常發(fā)送內(nèi)容時(shí),需要一定的時(shí)間,為了不讓用戶空等、還能去做點(diǎn)別的事兒,將等待過程弱化是很有必要的。


2、導(dǎo)航欄

1)使用場(chǎng)景

一般是連接狀態(tài)的展示,表示產(chǎn)品正在努力連接網(wǎng)絡(luò)、拉取數(shù)據(jù)中

適合顯示臨時(shí)的較重要的提示類信息

2)例子

如下圖,圖1是QQ音樂添加歌單的提示,前文也有提到;圖2是AppFlow,加載內(nèi)容時(shí)在導(dǎo)航欄提示,加載完成后再回到原狀態(tài),這種方式在Reeder中也有用到。


3、內(nèi)容區(qū)上方

1)使用場(chǎng)景

位置在內(nèi)容區(qū)上方、導(dǎo)航欄下方,通常為下拉刷新,是加載新內(nèi)容的一種快捷方式。

默認(rèn)的提示信息是隱藏的,向下拉界面時(shí)才顯示對(duì)應(yīng)的提示信息,以引導(dǎo)用戶操作。

4、屏幕中心

1)使用場(chǎng)景

通常為整體性的比較重要的信息提示

需要引起用戶重視的、系統(tǒng)提示均可以顯示在此位置

2)設(shè)計(jì)注意

現(xiàn)在大家越來越追求產(chǎn)品風(fēng)格,奢易屬于自己產(chǎn)品的獨(dú)特反饋形式、并自定義某個(gè)固定的位置顯示提示也較為流行。

5、菜單欄上方

1)使用場(chǎng)景

可根據(jù)需要靈活的使用,基本沒什么限制

可以是應(yīng)用的整體信息的提示;也可以是與界面底部?jī)?nèi)容相關(guān)的提示。 比如,加載更多內(nèi)容、或氣泡提示表示圖片上傳中 等等。

2)例子

如下圖,豆瓣App,加載首頁內(nèi)容,暫無更新的提示。既告知了用戶結(jié)果,又引導(dǎo)用戶去搜索更多興趣,讓首頁內(nèi)容變得更加豐富。


6、底部(覆蓋菜單欄)

1)使用場(chǎng)景

在此位置顯示提示,并沒有什么特別的好處,或許是對(duì)于新形式的一種追求。

2)例子

如下圖,Keep下載視頻的提示,進(jìn)度條顯示在底部,此位置較為明顯也不會(huì)影響用戶瀏覽內(nèi)容區(qū)。


五、反饋的設(shè)計(jì)原則

1、為用戶在各個(gè)階段的反饋提供必要、積極、即時(shí)的反饋

2、避免過渡反饋,以免給用戶帶來不必要的打擾

3、能夠及時(shí)看到效果的、簡(jiǎn)單的操作,可以省略反饋提示

4、所提供的反饋,要能讓用戶用最便捷的方式完成選擇

5、未不同類型的反饋?zhàn)霾町惢O(shè)計(jì)

6、不要打斷用戶的意識(shí)流,避免遮擋用戶可能回去查看或操作的對(duì)象。

分享題目:交互基礎(chǔ)科普!聊聊移動(dòng)APP中反饋提示的設(shè)計(jì)方
當(dāng)前網(wǎng)址:http://m.rwnh.cn/news19/86719.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、響應(yīng)式網(wǎng)站、商城網(wǎng)站、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)關(guān)鍵詞優(yōu)化

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

左贡县| 渭南市| 灵川县| 威海市| 平湖市| 登封市| 汤原县| 通江县| 仁寿县| 茂名市| 平山县| 丰县| 滕州市| 山西省| 佛学| 郎溪县| 会昌县| 博湖县| 金沙县| 德州市| 荆门市| 边坝县| 昌都县| 胶南市| 临澧县| 天水市| 伊金霍洛旗| 都江堰市| 芜湖县| 蓬安县| 独山县| 巴南区| 荥阳市| 和田市| 榆社县| 健康| 遵化市| 平乐县| 新竹市| 阳朔县| 临湘市|