聊聊移動APP中反饋提示的設計方法與執行個體

來源:互聯網
上載者:User

   給使用者及時、恰當的反饋,是互動設計非常重要的一項原則。由搜狐新聞用戶端團隊撰寫的《設計之下》一書中,對操作反饋從形式、內容、位置幾個方面做了非常詳細的總結,滿滿乾貨。今天@青溪Joanna 這篇讀書筆記提取了書中的要點並配上執行個體,分享給大家。

  一、為什麼要反饋

  1、以人與人的交流為例

  1)人與人的交流中,無法忍受的一種情況是:對方對自己說的話沒有反應,好像視而不見。

  2)沒有反饋或是不友好的反饋,就好像冷冰冰的人一樣,會給使用者帶來無助或不悅的負面體驗

  2、及時恰當的反饋的用處是什麼

  1)能夠告訴使用者下一步該做什麼

  2)協助使用者做出判斷和決定

  二、反饋的形式

  反饋的形式多樣,所有的提示都應該在恰當的時候出現在恰當的位置, 用簡短而清晰的文字提供有用的資訊,不讓使用者產生迷惑。

  1、氣泡狀提示

  1)用處一

  通常是短暫出現在畫面上,就像氣泡一樣過一會兒就會自己消失,並不需要對它進行任何操作

  通常用於告訴任務狀態、操作結果

  下圖三個例子都屬於操作結果的反饋提示,圖1提示添加收藏成功,採用系統內建的toast多士提示;圖2是新微博載入成功的提示,在導覽列下方浮在內容區上方;圖3是QQ空間添加到歌單的提示,顯示在導覽列背景色與狀態列顏色一致,效果不錯。儘管展示位置不同,但這些提示都是短暫的出現在畫面上,1秒左右消失。

  2)用處二

  用於引導,就像漫畫中的對話方塊一樣,帶有一個指向具體位置的小尖,提示使用者需要關注哪個位置。

  與用處一不同,這類引導類提示通常不回很快消失。如下圖,圖1Wunderlist、圖2知乎的例子,都提供了關閉按鈕,使用者既可以點擊指引地區也可以點擊關閉按鈕,來讓提示消失;圖3來自圖片社交App——in,使用者點擊指引地區才能讓提示消失。

  3)不足之處

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

  2、彈出框

  1)用法

  一般會帶有一兩句解說文字和兩個操作按鈕,用於確認和取消重要操作(比如,是否刪除內容)

  通常會用明顯的顏色,反白可能造成喲過戶損失的操作項(比如,“刪除”、“不儲存”)

  2)特點

  彈出框的出現,會強迫使用者關注彈窗內容和操作,並屏蔽背景的所有內容

  對使用者打擾最大的一種提示

  3)設計注意

  彈出框上的說明、按鈕上的文字,最好言簡意賅、一目瞭然,能協助使用者快速做出決策。 因為通常使用者都想趕快關掉彈出框,以便接著完成被打斷的操作。

  設計過程中要避免濫用彈出框提示,對於不太重要又要反饋的事可以用氣泡提示表示。

  3、按鈕/表徵圖/連結的按下狀態

  1)基於人在現實世界經驗

  在現實中按一個按鈕會立即有按下狀態

  2)人機互動

  當使用者在螢幕上按下一個按鈕或連結時,也需要有狀態的改變,讓使用者知道介面已經接收到他的操作了。

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

  4、聲音

  1)常見例子

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

  簡訊、郵件發送成功後的“嗖”一聲

  微信搖一搖手機之後的哢嚓聲

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

  2)設計注意

  恰當使用聲音反饋有點睛效果,但過多的使用反而會變成一種打擾

  不能將聲音作為主要反饋,且要給使用者關閉提示音的權利(因為使用者所處的環境多樣,可能很吵而聽不見聲音,也可能不適合開啟聲音)

  5、震動

  1)用處

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

  2)例子

  在手機系統中應用廣泛,比如來電、簡訊、已串連充電 在手機App中較少用到

  3)設計注意

  不要亂用為好

  6、動畫

  1)用處

  給使用者提供有意義的反饋,協助使用者直觀瞭解操作的結果

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

  2)例子

  iOS系統在刪除郵件、照片時,通過擬物化的動畫效果,讓使用者知道操作已經生效,即——不要的郵件或照片已經被丟入了垃圾桶。 這種形象的動畫,協助使用者清晰感受到操作的執行過程,並增添了樂趣。

  在一些會持續比較久的操作裡,比如下載、刪除大量檔案,用動態進度條展示已完成的進度,並在可能的時候提供解釋資訊,能夠減少使用者的焦慮。

  很多有趣的下拉重新整理、上滑載入更多的例子,讓等待不再枯燥

  三、反饋的內容

  1、資訊

  1)設計注意

  文字資訊應該簡潔易懂,避免使用倒裝句,最好一兩句就能將意思表達清楚

  避免使用過於程式化的語言

  頁面已有詳細解說文字的操作,其反饋資訊可以簡單一些,不必重複頁面已有文字。比如暱稱,介面上已有格式要求時,反饋錯誤時只需提示“暱稱不符合要求”

  適當使用表徵圖,可以吸引使用者注意,協助使用者判斷提示的類型。

  2、警告

  1)用處

  警告框,用於向使用者展示對使用程式有重要影響的資訊。

  2)特點

  浮現在程式中央,覆蓋在主程式之上

  它的到來,是由於程式或裝置的狀態發生了重要變動,並不一定是使用者最近的操作導致的

  通常至少有一個按鈕,使用者點擊後即可關閉視窗

  一般會有標題,並展示額外的輔助資訊

  3、錯誤

  1)用處

  提示使用者操作出現了問題或異常,無法繼續執行

  2)設計注意

  錯誤提示,告知使用者為什麼操作被中斷,以及出現了什麼錯誤。

  錯誤資訊要盡量準確、通俗易懂。

  有效錯誤提示資訊要解釋發生的原因,並提供解決方案,以使使用者能夠從錯誤中恢複。

  4、確認

  1)用處

  用於詢問使用者是否要繼續某個操作,讓使用者進一步確認,為使用者提供可反悔、可撤銷的退路。

  2)設計注意

  當使用者的操作結果較危險或無法復原時,通過二次選擇和確認,防止使用者誤操作

  四、反饋出現的位置

  1、狀態列

  1)優點

  很好的利用空間

  2)缺點

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

  3)例子

  如下圖,圖1、2是新浪微博App,在寫微博介面點擊“發送”,回到原介面同時狀態列提示發送狀態;圖3是網易郵箱大師App,郵件發送後離開寫郵件介面,同時右上方提示郵件的發送進度。

  通常發送內容時,需要一定的時間,為了不讓使用者空等、還能去做點別的事兒,將等待過程弱化是很有必要的。

  2、導覽列

  1)使用情境

  一般是串連狀態的展示,表示產品正在努力串連網路、拉取資料中

  適合顯示臨時的較重要的提示類資訊

  2)例子

  如下圖,圖1是QQ音樂添加歌單的提示,前文也有提到;圖2是AppFlow,載入內容時在導覽列提示,載入完成後再回到原狀態,這種方式在Reeder中也有用到。

  3、內容區上方

  1)使用情境

  位置在內容區上方、導覽列下方,通常為下拉重新整理,是載入新內容的一種捷徑。

  預設的提示資訊是隱藏的,向下拉介面時才顯示對應的提示資訊,以引導使用者操作。

  4、螢幕中心

  1)使用情境

  通常為整體性的比較重要的資訊提示

  需要引起使用者重視的、系統提示均可以顯示在此位置

  2)設計注意

  現在大家越來越追求產品風格,奢易屬於自己產品的獨特反饋形式、並自訂某個固定的位置顯示提示也較為流行。

  5、功能表列上方

  1)使用情境

  可根據需要靈活的使用,基本沒什麼限制

  可以是應用的整體資訊的提示;也可以是與介面底部內容相關的提示。 比如,載入更多內容、或氣泡提示表示圖片上傳中 等等。

  2)例子

  如下圖,豆瓣App,載入首頁內容,暫無更新的提示。既告知了使用者結果,又引導使用者去搜尋更多興趣,讓首頁內容變得更加豐富。

  6、底部(覆蓋功能表列)

  1)使用情境

  在此位置顯示提示,並沒有什麼特別的好處,或許是對於新形式的一種追求。

  2)例子

  如下圖,Keep下載視頻的提示,進度條顯示在底部,此位置較為明顯也不會影響使用者瀏覽內容區。

  五、反饋的設計原則

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

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

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

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

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

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

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。