移動端反饋樣式

反饋是交互設計中最前線的一環,它的好壞直接影響產品體驗。微信

反饋的形式

1、氣泡狀提示

氣泡狀提示一般是短暫出如今畫面上的,就像氣泡同樣過一會就會本身消失,並不須要對它進行任何操做。這種提示一般用於告知人物狀態和操做結果。例如:發送成功,加載中,已刪除等。不過因爲氣泡提示的特性,它容易被用戶忽略,因此並不適合承載太多文字或重要信息。 網絡

2、彈出框

彈出框通常會帶有一兩句說明文字和兩個操做按鈕,用於確認和取消重要的操做。例如:是否刪除內容?是否要在無wifi的狀況下看視頻等。一般會用顏色突出顯示可能形成用戶損失的操做項,如:刪除,不保存等。彈出框出現的時候會強迫用戶進行操做並屏蔽背景的全部內容,算是對用戶打擾最大的一種提示。一般用戶都想趕快關掉彈出框以便接着進行操做,因此彈出框上的說明和按鈕上的文字最好言簡意賅,一目瞭然,可以幫助用戶快速做出決策。做爲設計師,咱們要避免濫用彈出框提示,不過重要但又須要反饋的事就默默飄個氣泡好了,以避免用戶經常被驚嚇。 優化

3、按鈕,圖標,連接的按下狀態

這類反饋是基於人在現實世界的經驗。在現實中按一個按鈕,它會當即有按下狀態,例如陷進平面中或變色發光。在無觸感的2d的屏幕上,更應該有狀態的改變,讓用戶看到他的操做已經被界面接收到了。iOS安卓系統平臺上的開關控件就是一個例子。它模擬了現實中的開關,在撥動的過程當中很是直觀地給用戶反饋並告訴用戶當前所處的狀態。iOS系統中的手電筒,打開的時候是高亮狀態,告知用戶它已經被打開了。 動畫

4、聲音和振動

聲音能在必定程度上給用戶提供有用的反饋。好比虛擬鍵盤在按下時的咔噠聲,短信成功發送後的嗖聲,微信搖一搖手機以後的咔嚓聲。不過聲音反饋屬於點睛之比,並且受環境影響,若是過多地使用會變成一種打擾。震動是一種比較強烈的觸覺反饋,能夠用來代替或增強聲音提示。在手機系統中應用的很是普遍:如來電,短信等。在第三方應用上不多用到,除非是遊戲裏面掛掉時會震你一下,可見震動仍是過於猛烈了。 設計

5、動畫

動畫會給用戶提供有意義的反饋,幫助用戶直觀地瞭解到操做的結果。提高使用時的愉悅感。好比擬物動畫,這種形象的動畫幫助用戶清晰地感覺到操做執行的整個過程,而且增添了樂趣。例如在執行刪除操做時,被刪除的東西一下碎掉;還有一些會持續比較久的操做(以下載或刪除大量文件),用動態的進度條展現已完成的進度,可以減小用戶的焦慮;還有一些有趣的下拉刷新動畫,不但反饋了下拉刷新的過程,還讓加載的等待變的有趣。也有些動畫經過形變來暗示用戶狀態的改變,點擊「按鈕形狀」開關後,返回按鈕的形狀發生了改變。 3d

6、頁面

頁面提示是指用系統的整個單獨頁面來對用戶進行提示,一般包含圖標、提示內容、處理方法等,出現最多的就是用戶在相應功能頁沒有數據及鏈接不到網絡時,通常還會加上功能按鈕,經過該按鈕,可引導用戶解決當前頁面出現的問題。 cdn

7、標籤

多用於錯誤提示,告之用戶哪些地方出現錯誤,該如何解決;不少標籤會在用戶從新聚焦選框時消失,但對於要求過多,用戶沒法一時記住的狀況,相比於用戶出錯時的標籤提示,在用戶出錯前就明確好要求會更好。 視頻

反饋的內容

  • 傳達信息:反饋提示所帶的文字信息應該簡潔易懂,適當的使用圖標能夠吸引用戶的注意,幫助用戶判斷提示的類型。 向用戶傳達系統升級、推薦、廣告等信息,如點開豆瓣,提示你今天的內容已經爲你準備好了;如最新版本增長了啥啥啥牛逼功能,問你要不要升級;如 提示你,咱們要搞個大活動啦,你上去能夠領取啥啥啥福利之類的等等。 傳達信息的頻次要適當,特別是一些非必要信息,不然容易引發用戶反感。
  • 警告:警告框用於向用戶展現對使用程序有重要影響的信息。 提示當前的用戶操做將形成重大影響,如購買某理財產品有風險肯定購買?刪除這個APP將刪除它保存的全部數據肯定刪除?關閉定位功能將不能準確爲您服務等都屬於警告提示,相較於肯定提示,警告提示更多的突出當前操做將會形成的影響,通常包括標題(操做描述)、內容(操做將會形成的影響)、選擇按鈕。 所以,警告提示最好爲疑問語氣(最終仍是要看場景的),且影響描述要簡單直接,避免引發用戶誤解,按鈕也要清晰明白,避免「是否」等說法。
  • 錯誤:錯誤是提示用戶操做出現了問題或異常,沒法繼續執行。錯誤提示告知用戶爲何操做被中斷,以及出現了什麼錯誤。錯誤信息要儘可能準確,通俗易懂,有效的錯誤提示要解釋發生的緣由,並提供解決方案以使用戶可以進行修復。 錯誤也是反饋提示中出現較多的一種,主要是提示用戶的操做有什麼問題,能夠怎樣解決。如提示你鏈接不到網絡,你該怎麼檢查網絡;如提示你填寫的這個密碼不對,咱們要求的是8~16個字符的;如提示你餘額不足以支付,要不要換卡支付等等。 對於錯誤提示,APP 和 網頁存在較多區別,如APP 更多用彈窗提示錯誤,而網頁更多用標籤提示錯誤。你們需注意,這裏就很少說了。
  • 確認:確認是用於詢問用戶是否要繼續某個操做,讓用戶進一步對所作的操做進行肯定和執行,爲用戶提供可反悔,可撤銷的退路。讓用戶對一些執行結果較危險或不可逆的操做進行二次選擇和確認,防止用戶誤操做。 確認是反饋提示當中出現頻次最高的內容之一,包括讓用戶肯定系統是否可獲取一些用戶權限,用戶的當前操做是不是本身本意,用戶選擇分享等。

反饋出現的位置

反饋主要出如今「狀態欄」,「導航欄」,內容區上方,屏幕中,標籤欄上方和頁面底部。對象

下反饋設計的規則

  • 爲用戶在各個階段的操做提供必要,積極,及時的反饋;
  • 避免過分反饋,以避免給用戶帶來沒必要要的打擾和驚嚇;
  • 可以及時看到效果的,簡單的操做能夠省略反饋提示;
  • 所提供的反饋要能讓用戶以最便捷的方式完成選擇;
  • 爲不一樣類型的反饋作差別化設計;
  • 不要打斷用戶的意識流,避免遮擋用戶可能會去查看或操做的對象。

如何避免沒必要要的提示?

防錯在先,容錯在後,因此要避免沒必要要的提示,就要儘可能少犯錯,若是仍是犯錯了,那就經過優化,來提升用戶解決問題的能力及解決問題過程當中的體驗。
一、輸入提示 除了在選框附近提示,也可直接在選框中對用戶進行提示,以防一進入頁面就專心只填選框的人。
二、自動完成 一方面減小用戶操做,另外一方面減小用戶輸入錯誤,經過選擇更快更好的肯定目標。
三、根據溫馨度安排控件位置 總有些手殘黨不當心點到按鈕,致使不當心給人發信息呀,不當心刪除了某文件呀,不當心點錯進視頻之類的,因此爲了解決這類問題,最好把一些不重要或使用頻次低的按鈕,放在人手不方便操做的地方,PC網頁通常放在邊角,手機則放在以下的紅色區域(據研究顯示,49%的人單手操做手機,而單手操做手機時,有三個大的操做區域:方便操做到的,不是很方便操做到的,難操做到的,而紅色區域就爲難操做到的區域)。 blog

四、只能選擇可選項 總有人會在輸入數字的界面會輸入字母,也有人會在選擇旅行時間時選擇到已過去的時間,針對這些,在設計時應儘可能引導用戶選擇可選項,過去的日期就勾選不上,在輸入數字密碼時只顯示數字鍵盤等。
五、屏幕展架 屏幕展架是優化提示的一種方式,它指在展現頁面時,如遇到網絡不順暢或加載緩慢等問題時,依次展示內容,而不是等到內容所有所有加載完才顯示。這種方式能讓用戶知道系統是在運做的,減小用戶焦慮。
六、簡化提示 只提供重要信息是咱們的宗旨,至於對不起呀,咱們由於系統剛纔崩了下致使啥啥啥了,須要你從新刷新一下啥啥啥的一堆廢話,用戶是不想知道也不須要知道的,咱們只提供核心問題,影響及簡短的解決方案。
七、優化操做步驟 減小沒必要要的操做從而減小提示也是一種優化提示的方式,如支付寶以前在支付時須要再點擊確認付款,如今只要輸入密碼或指紋以後就直接支付了,減小了操做步驟的同時也減小了與用戶的交互提示。
八、避免頻繁,只在必要狀況下出現 如今不少APP會頻繁的推送通知或在用戶進入界面後不斷提示,很大程度上形成用戶厭煩,因此儘可能避免頻繁給沒必要要的提示,對於部分有必要提示,還可告知用戶在哪裏能夠關閉提示或當前窗口就可選擇再也不提示。
九、提示明確 明確的提示可以讓用戶清晰的知道當前操做的結果,讓用戶按照本身需求選擇合理選項,減小錯誤操做後形成的不良影響。

小結

反饋提示是產品設計中的重要一環,但切記不要濫用,不要複雜化,最好從場景中來到場景中去,根據不一樣場景選擇適合的提示方式,固然也要遵照不一樣設計的規範。 不過規範是官方給的,咱們是要活用的,就像在 iOS 裏面是沒 toast 提示,有HUD 提示,但兩個是極其類似的,只是叫法不一樣而已,因此有時不一樣設計的規範之間互用也並非不行的,只是要考慮到場景及系統適應性等等問題,總之咱們的大目標是優化用戶體驗,提升產品轉化率,只要能達到目的,借用下其餘合理規範又有何不可呢。

相關文章
相關標籤/搜索