大色欧美,色老头网站久久网,最近最新手机中文字幕在线看,最新毛片网,a视频在线播放,中文字幕一区二区三区有限公司,国产成人精品视频免费

給用戶(hù)及時(shí)、恰當(dāng)?shù)姆答?，是交互設(shè)計(jì)非常重要的一項(xiàng)原則。由搜狐新聞客戶(hù)端團(tuán)隊(duì)撰寫(xiě)的《設(shè)計(jì)之下》一書(shū)中，對(duì)操作反饋從形式、內(nèi)容、位置幾個(gè)方面做了非常詳細(xì)的總結(jié)，滿(mǎn)滿(mǎn)干貨。今天這篇讀書(shū)筆記提取了書(shū)中的要點(diǎn)并配上實(shí)例，分享給大家。

一、為什么要反饋

1、以人與人的交流為例

1）人與人的交流中，無(wú)法忍受的一種情況是：對(duì)方對(duì)自己說(shuō)的話(huà)沒(méi)有反應(yīng)，好像視而不見(jiàn)。
2）沒(méi)有反饋或是不友好的反饋，就好像冷冰冰的人一樣，會(huì)給用戶(hù)帶來(lái)無(wú)助或不悅的負(fù)面體驗(yàn)

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

1）能夠告訴用戶(hù)下一步該做什么
2）幫助用戶(hù)做出判斷和決定

二、反饋的形式

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

1、氣泡狀提示

1）用處一

• 通常是短暫出現(xiàn)在畫(huà)面上，就像氣泡一樣過(guò)一會(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)在畫(huà)面上，1秒左右消失。

2）用處二

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

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

3）不足之處

容易被用戶(hù)忽略，所以不適合承載太多文字或重要信息

2、彈出框

1）用法

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

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

2）特點(diǎn)

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

• 對(duì)用戶(hù)打擾最大的一種提示

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

• 彈出框上的說(shuō)明、按鈕上的文字，最好言簡(jiǎn)意賅、一目了然，能幫助用戶(hù)快速做出決策。 因?yàn)橥ǔＳ脩?hù)都想趕快關(guān)掉彈出框，以便接著完成被打斷的操作。

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

3、按鈕/圖標(biāo)/鏈接的按下?tīng)顟B(tài)

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

• 在現(xiàn)實(shí)中按一個(gè)按鈕會(huì)立即有按下?tīng)顟B(tài)

2）人機(jī)交互

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

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

4、聲音

1）常見(jiàn)例子

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

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

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

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

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

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

• 不能將聲音作為主要反饋，且要給用戶(hù)關(guān)閉提示音的權(quán)利（因?yàn)橛脩?hù)所處的環(huán)境多樣，可能很吵而聽(tīng)不見(jiàn)聲音，也可能不適合打開(kāi)聲音）

5、振動(dòng)

1）用處

• 一種比較強(qiáng)烈的觸覺(jué)反饋，可用來(lái)代替或加強(qiáng)聲音提示

2）例子

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

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

• 不要亂用為好

6、動(dòng)畫(huà)

1）用處

• 給用戶(hù)提供有意義的反饋，幫助用戶(hù)直觀(guān)了解操作的結(jié)果

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

2）例子

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

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

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

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

1、信息

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

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

• 避免使用過(guò)于程序化的語(yǔ)言

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

• 適當(dāng)使用圖標(biāo)，可以吸引用戶(hù)注意，幫助用戶(hù)判斷提示的類(lèi)型。

2、警告

1）用處

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

2）特點(diǎn)

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

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

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

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

3、錯(cuò)誤

1）用處

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

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

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

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

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

4、確認(rèn)

1）用處

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

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

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

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

1、狀態(tài)欄

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

• 很好的利用空間

2）缺點(diǎn)

• 位置不是很明顯，建議只提示重要程度不高、或有跨畫(huà)面顯示需求的提示

3）例子

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

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

2、導(dǎo)航欄

1）使用場(chǎng)景

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

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

2）例子

如下圖，圖1是QQ音樂(lè)添加歌單的提示，前文也有提到；圖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)用戶(hù)操作。

4、屏幕中心

1）使用場(chǎng)景

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

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

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

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

5、菜單欄上方

1）使用場(chǎng)景

• 可根據(jù)需要靈活的使用，基本沒(méi)什么限制

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

2）例子

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

6、底部（覆蓋菜單欄）

1）使用場(chǎng)景

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

2）例子

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

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

1、為用戶(hù)在各個(gè)階段的反饋提供必要、積極、即時(shí)的反饋
2、避免過(guò)渡反饋，以免給用戶(hù)帶來(lái)不必要的打擾
3、能夠及時(shí)看到效果的、簡(jiǎn)單的操作，可以省略反饋提示
4、所提供的反饋，要能讓用戶(hù)用最便捷的方式完成選擇
5、未不同類(lèi)型的反饋?zhàn)霾町惢O(shè)計(jì)
6、不要打斷用戶(hù)的意識(shí)流，避免遮擋用戶(hù)可能回去查看或操作的對(duì)象。