建站知識

Website development

北京網(wǎng)站交互設(shè)計云智聊聊移動APP中反饋提示的設(shè)計方法與實例

發(fā)布時間：2015-12-21 09:29:13

TAGS：網(wǎng)站設(shè)計培訓(xùn)學(xué)校,廣州網(wǎng)站設(shè)計公司

1-150919111102936

一、為什么要反饋

1、以人與人的交流為例

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

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

能夠告訴用戶下一步該做什么幫助用戶做出判斷和決定

二、反饋的形式

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

1、氣泡狀提示

1）用處一

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

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

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

2）用處二

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

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

3）不足之處

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

2、彈出框

1）用法

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

通常會用明顯的顏色，突出顯示可能造成喲過戶損失的操作項（比如，“刪除”、“不保存”）

2）特點

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

對用戶打擾大的一種提示

3）設(shè)計注意

彈出框上的說明、按鈕上的文字，好言簡意賅、一目了然，能幫助用戶快速做出決策。因為通常用戶都想趕快關(guān)掉彈出框，以便接著完成被打斷的操作。

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

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

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

在現(xiàn)實中按一個按鈕會立即有按下狀態(tài)

2）人機交互

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

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

4、聲音

1）常見例子

虛擬鍵盤在按下時的咔嚓聲

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

微信搖一搖手機之后的咔嚓聲

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

2）設(shè)計注意

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

不能將聲音作為主要反饋，且要給用戶關(guān)閉提示音的權(quán)利（因為用戶所處的環(huán)境多樣，可能很吵而聽不見聲音，也可能不適合打開聲音）

5、振動

1）用處

一種比較強烈的觸覺反饋，可用來代替或加強聲音提示

2）例子

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

3）設(shè)計注意

不要亂用為好

6、動畫

1）用處

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

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

2）例子

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

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

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

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

1、信息

1）設(shè)計注意

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

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

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

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

2、警告

1）用處

警告框，用于向用戶展示對使用程序有重要影響的信息。

2）特點

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

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

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

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

3、錯誤

1）用處

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

2）設(shè)計注意

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

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

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

4、確認

1）用處

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

2）設(shè)計注意

當(dāng)用戶的操作結(jié)果較危險或不可逆時，通過二次選擇和確認，防止用戶誤操作

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

1、狀態(tài)欄

1）優(yōu)點

很好的利用空間

2）缺點

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

3）例子

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

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

2、導(dǎo)航欄

1）使用場景

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

適合顯示臨時的較重要的提示類信息

2）例子

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

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

1）使用場景

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

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

4、屏幕中心

1）使用場景

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

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

2）設(shè)計注意

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

5、菜單欄上方

1）使用場景

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

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

2）例子

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

6、底部（覆蓋菜單欄）

1）使用場景

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

2）例子

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

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

1、為用戶在各個階段的反饋提供必要、積極、即時的反饋

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

3、能夠及時看到效果的、簡單的操作，可以省略反饋提示

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

5、未不同類型的反饋做差異化設(shè)計

6、不要打斷用戶的意識流，避免遮擋用戶可能回去查看或操作的對象

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,6280,0.html

上一篇：北京網(wǎng)站設(shè)計云智談360搜索聯(lián)盟升級之后廣告樣式“圖片排行榜”

下一篇：北京網(wǎng)站開發(fā)云智新聞網(wǎng)站如何讓用戶自覺出錢訂閱？

您還有可能感興趣的內(nèi)容

Related articles

1URL鏈接優(yōu)化到底有多重要？

2北京網(wǎng)站建設(shè)使用開源項目的正確姿勢

3北京網(wǎng)站優(yōu)化云智談如何做好網(wǎng)站的用戶體驗優(yōu)化

4北京網(wǎng)站開發(fā)云智總結(jié)世界十大黑客組織都是哪些？

5北京網(wǎng)站建設(shè)云智裝修裝飾公司網(wǎng)站建設(shè)解決方案

6北京網(wǎng)站建設(shè)專題頁對于老網(wǎng)站的深遠影響

7北京ASP、JSP、PHP三種動態(tài)網(wǎng)站制作技術(shù)比較

8如何免費（輕成本）在網(wǎng)上做推廣宣傳

9北京網(wǎng)站開發(fā)酒店網(wǎng)站開發(fā)公司建設(shè)方案

10北京網(wǎng)站優(yōu)化SEO優(yōu)化中容易忽略的細節(jié)問題……

建站流程

Website development

網(wǎng)站需
求分析

網(wǎng)站策
劃方案

頁面風(fēng)
格設(shè)計

程序設(shè)
計研發(fā)

資料錄
入優(yōu)化

確認交
付使用

后續(xù)跟
蹤服務(wù)

+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

外貿(mào)網(wǎng)站建設(shè)

網(wǎng)站視覺優(yōu)化

網(wǎng)站原型設(shè)計

域名空間

北京網(wǎng)站建設(shè)高質(zhì)量軟文的條件

網(wǎng)站開發(fā)優(yōu)化優(yōu)勢

手機網(wǎng)站制作流程

公司網(wǎng)站設(shè)計制作

空間服務(wù)器

優(yōu)秀網(wǎng)站建設(shè)

云智商業(yè)

網(wǎng)站設(shè)計優(yōu)化

網(wǎng)站專題

企業(yè)網(wǎng)站策劃

HTTPS

相關(guān)程序
更多+

新聞發(fā)布
管理系統(tǒng)

產(chǎn)品展示
管理系統(tǒng)

網(wǎng)上商城
管理系統(tǒng)

信息發(fā)布
管理系統(tǒng)

廣告管理
管理系統(tǒng)

訂單管理
管理系統(tǒng)

客戶評價
更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤

我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌

技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦

不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理

解決方案
更多+

響應(yīng)式布局移動互聯(lián)網(wǎng)解決方案

企業(yè)形象網(wǎng)站建設(shè)解決方案

網(wǎng)上商城購物網(wǎng)站建設(shè)解決方案

集團公司網(wǎng)站建設(shè)解決方案

影視文化傳媒行業(yè)網(wǎng)站建設(shè)解決方案

建站經(jīng)驗
更多+

2022短視頻發(fā)展趨勢觀察

分享人像動漫化BAT哪家強？

警惕~企業(yè)過期域名被不法分子盯上

人類信息存儲發(fā)展簡史

Nginx重啟Shell腳本無效或失敗解決方法【wdlinux版本】