如何設(shè)計(jì)一個(gè)好的提醒
本文作者將結(jié)合設(shè)計(jì)規(guī)范及自身的項(xiàng)目經(jīng)歷,將提示方式的使用場(chǎng)景及界限給總結(jié)出來,希望對(duì)大家以后處理提示方式時(shí)有些參考和幫助。enjoy~

如何減少打擾用戶的次數(shù)甚至不打擾用戶,是每一個(gè)用戶體驗(yàn)設(shè)計(jì)師應(yīng)該考慮的事。相信很多設(shè)計(jì)師都曾糾結(jié)于何時(shí)用對(duì)話框和Toast來做提示。兩者大的區(qū)別是對(duì)話框是一種帶有操作的提示,需要用戶操作后才會(huì)消失,這會(huì)直接打斷用戶的流程;Toast屬于輕量提示,不帶操作,顯示幾秒后自動(dòng)消失,不會(huì)打斷用戶操作。

除了以上兩種形式,還衍生出Toast+操作的提示,如:

以及用Toast+圖標(biāo)或浮層的提示,如:

以上設(shè)計(jì)都有亮點(diǎn)及合理的地方,但如何合適使用不打擾用戶才是關(guān)鍵。怎么才算合理是一個(gè)問題,因?yàn)槊總€(gè)設(shè)計(jì)師的看法都有自己的主觀評(píng)判標(biāo)準(zhǔn),但這些標(biāo)準(zhǔn)在用戶身上往往只有兩個(gè)結(jié)果,良好的體驗(yàn)和差勁的體驗(yàn)。在這里我結(jié)合設(shè)計(jì)規(guī)范及自身的項(xiàng)目經(jīng)歷,將提示方式的使用場(chǎng)景及界限給總結(jié)出來,希望對(duì)大家以后處理提示方式時(shí)有些參考和幫助。
iOS設(shè)計(jì)規(guī)范
先從iOS設(shè)計(jì)規(guī)范開始,iOS推薦設(shè)計(jì)師使用橫幅,對(duì)話框和小氣泡的形式來提示用戶,但不推薦設(shè)計(jì)師經(jīng)常使用對(duì)話框的提示形式。只有這三種提示方式是明顯不夠的,但規(guī)范里允許設(shè)計(jì)師將提示功能與APP自身結(jié)合,建立更符合場(chǎng)景的提示機(jī)制。有很多設(shè)計(jì)師會(huì)將Android的Toast概念直接引入iOS設(shè)計(jì)中,以及衍生出Toast+操作,浮層等提醒方式。由于iOS對(duì)此沒有明確的設(shè)計(jì)規(guī)范,只要是設(shè)計(jì)合理的,怎么提示都行。
Material Design設(shè)計(jì)規(guī)范
相對(duì)于iOS設(shè)計(jì)規(guī)范,Material Design以更謹(jǐn)慎的態(tài)度設(shè)計(jì)了提示用戶的規(guī)范,并歸納出兩個(gè)非常棒的概念:確認(rèn)(Confirm)及確知(Acknowledge)。
確認(rèn)是要求用戶確認(rèn)自己確實(shí)希望執(zhí)行剛才所調(diào)用的操作。在某些情況下,確認(rèn)隨需要用戶考慮的操作所相關(guān)的警告或關(guān)鍵信息一起顯示。
確知就是顯示一段文字信息,讓用戶知道自己剛才調(diào)用的操作已經(jīng)完成。這將消除系統(tǒng)正在執(zhí)行的隱式操作的不確定性。在某些情況下,確知隨撤消操作的選項(xiàng)一起顯示。
在Material Design規(guī)范里,提示只有對(duì)話框(確認(rèn))及Toast(確知)和Snackbar(確知),同理對(duì)話框也是一種非常強(qiáng)的提示方式,會(huì)直接打斷用戶操作,所以設(shè)計(jì)時(shí)要謹(jǐn)慎對(duì)待。
這里要闡述一下Toast,在規(guī)范里是規(guī)定只有文字,是不能配圖標(biāo)的,所以配圖的就不應(yīng)該叫Toast了,這種樣式可以直接理解為一種浮層。同時(shí),Toast也是不能帶操作的,如果配操作的,在Material Design里被稱為Snackbar,這是Android 5.0新出的控件。Snackbar 是一種針對(duì)操作的輕量級(jí)反饋機(jī)制,常以一個(gè)小的彈出框的形式,出現(xiàn)在手機(jī)屏幕下方或者桌面左下方。它們出現(xiàn)在屏幕所有層的上方,包括浮動(dòng)操作按鈕,它同Toast一樣3秒后消失。三種樣式比較:

Google也給出了何時(shí)需要確認(rèn)或確知用戶操作。以下為我的翻譯:

如果每次做設(shè)計(jì)時(shí)都走一遍上述的流程估計(jì)大家都會(huì)懵逼吧,我以提示的重要性將提示的界限及場(chǎng)景舉例出來。為了更好區(qū)分專業(yè)術(shù)語及iOS和Android的差異,提出了一些新詞語,如果有誤請(qǐng)指正。
重要程度(從高往低):
1、對(duì)話框(需要突出提示或存在兩個(gè)操作按鈕以上的提示,影響現(xiàn)流程。)

適用場(chǎng)景:
需要重大決定的場(chǎng)景
容易引起誤操作的場(chǎng)景
需要確認(rèn)的場(chǎng)景
引導(dǎo)到其他流程的場(chǎng)景
運(yùn)營(yíng)方案
樣式說明:
對(duì)話框在界面整體居中顯示
對(duì)話框文案應(yīng)盡量簡(jiǎn)短,結(jié)尾不使用標(biāo)點(diǎn)符號(hào)
對(duì)話框可以針對(duì)運(yùn)營(yíng)活動(dòng)或不同場(chǎng)景下進(jìn)行樣式設(shè)計(jì)
必須提供關(guān)閉、取消等回到原流程的按鈕
(2)輕操作(適用于輕量提示時(shí)帶有操作,如撤銷、查看、增添、修改數(shù)據(jù),不影響現(xiàn)流程。)

*輕操作在Android里是Snackbar,在iOS里沒有相關(guān)定義
適用場(chǎng)景:
用于撤銷場(chǎng)景:①刪除操作(簡(jiǎn)化刪除流程里彈出對(duì)話框的流程);②用于做出重大決定后的撤銷操作,如清空全部數(shù)據(jù)和取消綁卡;
用于查看,添加,修改等打斷現(xiàn)流程的操作,如①收藏后查看落地頁;②收藏后修改存放的文件夾。
樣式說明:
Android Snackbar顯示時(shí)長(zhǎng)為3秒;iOS為自定義
Android Snackbar顯示在頁面底部;iOS為自定義,左右居中顯示
輕操作文案應(yīng)為陳述句且盡量簡(jiǎn)短,結(jié)尾不使用標(biāo)點(diǎn)符號(hào)
(3)浮層(適用于如日夜間模式,隱私模式等帶有功能性質(zhì)的輕量提示,不影響現(xiàn)流程。)

適用場(chǎng)景:
功能(模式):日夜間模式;隱私模式;無圖模式;xxx模式
重要提示:支付成功/失敗;支付loading(顯示時(shí)長(zhǎng)由自身決定)
樣式說明:
浮層結(jié)構(gòu)為icon+文案或占整個(gè)頁面
若干秒后自動(dòng)消失
浮層顯示在界面整體居中顯示
浮層文案應(yīng)盡量簡(jiǎn)短,結(jié)尾不使用標(biāo)點(diǎn)符號(hào)
(4)Toast(適用于如引起其他頁面和系統(tǒng)數(shù)據(jù)發(fā)生變化、失敗操作的輕量提示,不影響現(xiàn)流程。)

適用場(chǎng)景:
操作失敗(網(wǎng)絡(luò)異常)
頁面內(nèi)數(shù)據(jù)添、刪除加成功導(dǎo)致其他頁面數(shù)據(jù)發(fā)生變化,如推薦新聞
無法操作時(shí)的輕量提示
其他頁面數(shù)據(jù)發(fā)生變化,如下載完成、失敗
樣式說明:
Android Toast使用系統(tǒng)默認(rèn)樣式;,iOS Toast使用自定義樣式
Android Toast顯示時(shí)長(zhǎng)為3秒;iOS為自定義
Android Toast顯示在頁面底部且左右居中,iOS Toast為自定義
Toast文案應(yīng)為陳述句且盡量簡(jiǎn)短,結(jié)尾不使用標(biāo)點(diǎn)符號(hào);
(5)無提示(操作后頁面有明顯的變化且不會(huì)對(duì)用戶其他方面造成影響,不影響現(xiàn)流程。)
適用場(chǎng)景:頁面內(nèi)數(shù)據(jù)添加,刪除成功
哪個(gè)場(chǎng)景下給提示?
哪個(gè)場(chǎng)景下不給提示?
這也是一個(gè)很好的問題。
舉個(gè)刪除單條歷史記錄的例子,如果歷史記錄與用戶其他信息無耦合,在刪除一條時(shí),頁面里明顯消失了該條記錄,這已經(jīng)是一個(gè)很明顯的提示了,這時(shí)候就不需要再彈Toast告知了。
舉個(gè)個(gè)性化推薦的例子,由于每條數(shù)據(jù)都和其他數(shù)據(jù)耦合在一起,如果用戶刪除一條數(shù)據(jù)時(shí),他的目的不僅僅是刪除這條數(shù)據(jù),還有對(duì)于這類數(shù)據(jù)不感興趣,雖然頁面里明顯消失了該條數(shù)據(jù),但也需要告知用戶再也不推薦類似消息了。
舉個(gè)取消關(guān)注的例子,用戶是對(duì)該內(nèi)容源不感興趣才確認(rèn)取消關(guān)注的,但很多應(yīng)用都覺得用戶好像不知道取消關(guān)注后再也收不到相關(guān)內(nèi)容源了,一定要用對(duì)話框告訴用戶“取消關(guān)注后就再也收不到相關(guān)內(nèi)容”,簡(jiǎn)直加大了用戶取消關(guān)注的阻力(這就是產(chǎn)品經(jīng)理希望的)??梢試L試用snackbar的形式,當(dāng)用戶取消關(guān)注后,彈出一條snackbar,告訴用戶“再也不關(guān)注該內(nèi)容源”,后面增加一個(gè)撤銷。當(dāng)用戶真的是誤操作時(shí),他可以選取撤銷重新添加該內(nèi)容源,不是的話,也減少了用戶再次確認(rèn)的步驟,體驗(yàn)上比對(duì)話框形式好很多。
提示很簡(jiǎn)單,但如何使用和設(shè)計(jì)起來還真的有點(diǎn)難度,希望看完后對(duì)大家以后使用提示時(shí)有所幫助。
猜你喜歡
聯(lián)絡(luò)方式:
電話:18905275581
郵箱:1700970777@qq.com



-
小程序如何實(shí)現(xiàn)盈利?
小程序自出現(xiàn)之后,有許多的公司通過小程序進(jìn)行互聯(lián)網(wǎng)創(chuàng)業(yè)。而共享產(chǎn)品的出現(xiàn)就使這些公司成為了受益者,像我們生活中常用的共享單車、共享充電寶等,這類產(chǎn)品有一部分就是通過小程序來實(shí)現(xiàn)的。用戶在進(jìn)行使用時(shí),直接打開小程序掃碼就能實(shí)現(xiàn)。小程序如何實(shí)現(xiàn)盈利?...
-
當(dāng)前流行的虛擬主機(jī)限制方式優(yōu)缺點(diǎn)分析
虛擬主機(jī)的資源(CPU、內(nèi)存、帶寬等)總是有限的,為了保證虛擬主機(jī)上的數(shù)百用戶都能正常訪問,必須對(duì)每個(gè)虛擬主機(jī)站點(diǎn)進(jìn)行一定的限制,以防止個(gè)別訪問量較大的站點(diǎn)占據(jù)大部分的服務(wù)資源而導(dǎo)致服務(wù)器速度慢或者不穩(wěn)定的情況。 當(dāng)前的虛擬主機(jī)主要分為三類流量限...
-
功能結(jié)構(gòu)圖、信息結(jié)構(gòu)圖、結(jié)構(gòu)圖區(qū)別詳解
你還在問產(chǎn)品結(jié)構(gòu)圖到底是信息結(jié)構(gòu)圖還是功能結(jié)構(gòu)圖嗎?這里有微信的實(shí)際例圖幫助你更好地理解這組命運(yùn)三姐妹圖類。 在寫PRD、競(jìng)品分析文檔中,我們常常會(huì)看到產(chǎn)品結(jié)構(gòu)圖、產(chǎn)品功能結(jié)構(gòu)圖或者產(chǎn)品信息結(jié)構(gòu)圖的身影,但需要講清楚他們的定義和作用也真沒看上...
-
iPhoneX網(wǎng)頁導(dǎo)航概念
這個(gè)概念使得單手操作,即使在大型移動(dòng)設(shè)備上也能輕松實(shí)現(xiàn)網(wǎng)站導(dǎo)航。 在移動(dòng)應(yīng)用程序設(shè)計(jì)中,選擇漢堡菜單按鈕還是標(biāo)簽欄作為導(dǎo)航一直是個(gè)古老的爭(zhēng)論話題。目前看來,由于手機(jī)屏幕尺寸越來越大,標(biāo)簽欄導(dǎo)航功能...
-
像素,分辨率和適配
不管是UI還是交互都是屬于從國(guó)外傳進(jìn)來的“舶來品”,在翻譯成中文的時(shí)候可能會(huì)出現(xiàn)一些詞不達(dá)意的錯(cuò)誤。在傳播過程中,這些錯(cuò)誤可能會(huì)被進(jìn)一步的放大。我們可以在網(wǎng)上看到很多設(shè)計(jì)相關(guān)的文章或者書籍,其中相同的事物在不同的地方可能會(huì)有不同的...