為什么彈窗總結(jié)文章這么多我還要總結(jié),主要原因是用彈窗來概括APP提醒交互本就不精準(zhǔn)。而且現(xiàn)在出現(xiàn)彈窗亂用,爆用的情況,產(chǎn)品經(jīng)理一說強(qiáng)調(diào),營(yíng)銷,設(shè)計(jì)師就加一個(gè)彈窗。彈窗加彈窗的情景,看到我都是崩潰的。彈窗本身是一種模態(tài)彈窗,對(duì)用戶行為阻斷強(qiáng)烈,所以一些不是特別重要的情況下可以選擇其他優(yōu)先級(jí)的提醒交互。
一、提醒交互概念
提醒交互是指:需要給用戶提醒信息時(shí),界面中出現(xiàn)的一些提醒機(jī)制,已達(dá)到告知用戶信息或者讓用戶強(qiáng)制做出選擇的目的。 彈窗是為了讓用戶回應(yīng),需要用戶與之交互的窗口,根據(jù)是否需要強(qiáng)制用戶交互分為:模態(tài)彈窗和非模態(tài)彈窗。模態(tài)彈窗會(huì)打斷用戶的當(dāng)前操作流程,用戶不在彈框上操作的話,無法進(jìn)入下一個(gè)操作。優(yōu)點(diǎn)是可以很好的獲取的用戶的視覺焦點(diǎn),缺點(diǎn)也顯而易見,打斷了用戶的當(dāng)前操作流程,引起用戶的反感。
二、彈窗體系的分類
在彈窗分類的時(shí)候,我們先要明確自己分類的目標(biāo),是快速選擇出適合我們當(dāng)時(shí)情景下的提醒交互。所以我們按照提醒程度來區(qū)分比較合適,按照ios和安卓來分就沒有必要。但是值得一提的是,我么日常用的英文名稱都是從這兩個(gè)系統(tǒng)自帶的開發(fā)語言來命名的。從開發(fā)角度上,ue知道系統(tǒng)自帶的提示,會(huì)大大提高開發(fā)效率,當(dāng)然現(xiàn)在很多形式都在兩個(gè)系統(tǒng)中通用,最終選擇需要根據(jù)實(shí)際情況而定。
三、彈窗提醒交互的應(yīng)用案例
(1)、Toast提示
Toast是安卓系統(tǒng)的一個(gè)控件名詞,現(xiàn)在也應(yīng)用于iOS系統(tǒng)中。Toast屬于一種輕量級(jí)的反饋,常常以小彈框的形式出現(xiàn),一般出現(xiàn)1到2秒會(huì)自動(dòng)消失,可以出現(xiàn)在屏幕上中下任意位置。Toast信息給予用戶及時(shí)反饋,確保用戶知曉自己所處的狀態(tài),并做出相應(yīng)的措施。
設(shè)計(jì)原則:
1、同個(gè)產(chǎn)品會(huì)模塊盡量使用同一位置,讓用戶產(chǎn)生統(tǒng)一認(rèn)知
2、Toast提示可以用圖片加文字的形式,不適合承載過多的文字和重要信息。
3、一般是灰黑或黑色半透明,但是為了視覺美觀統(tǒng)一現(xiàn)出現(xiàn)提示更弱化的白色底和彩色底。
應(yīng)用場(chǎng)景:
1、正在加載等過程狀態(tài)
2、輕度提醒的結(jié)果狀態(tài)
優(yōu)化方案:
有些過程提醒的Toast提示可以優(yōu)化成另一種形式
1、多態(tài)按鈕
如果按鈕被按下后需要與服務(wù)器交互后才能真正響應(yīng)操作,那么等待難以避免。這種情況下可以給按鈕增加多個(gè)狀態(tài),讓用戶知道App已經(jīng)接受到他的操作。典型的例子是支付寶的確認(rèn)付款按鈕,支付前、支付中和付款成功三個(gè)狀態(tài)。
2、動(dòng)效代替過程
現(xiàn)在動(dòng)效的應(yīng)用越來越越連貫和大膽,適當(dāng)?shù)膭?dòng)效可以省略一些過程提醒。例如電商App加入購(gòu)物車,商品飛入購(gòu)物車中,有趣流暢。
但是京東部分頁面的加入購(gòu)物車既做了動(dòng)效,又加了Toast提示,我覺得是比較多余的,此時(shí)toast提示可以去掉。
(2)、HUD提示
HUD是與Toast類似的ios系統(tǒng)上的效果。
HUD與Toast的區(qū)別:
1、HUD只出現(xiàn)在屏幕的中央,Toast應(yīng)用位置廣泛。
2、HUD可以包含內(nèi)容比較富豐,Toast一般用文字,或者加載動(dòng)效。
3、HUD一般是毛玻璃透明,Toast一般是灰黑或者黑色半透明,延伸顏色多。
4、HUD中內(nèi)容開發(fā)接受到信息后反饋所以可以變化(如調(diào)節(jié)音量時(shí)),Toast中內(nèi)容不可變化。
應(yīng)用場(chǎng)景:
(3)、Snackbar 對(duì)話框提示
nackbar 是 Android 5.0 新特性——Material Design 中的一個(gè)控件。Snackbar會(huì)在超時(shí)或者用戶在屏幕其他地方觸摸之后自動(dòng)消失;可以在屏幕上滑動(dòng)關(guān)閉;
出現(xiàn)時(shí)不會(huì)阻礙用戶在屏幕上的輸入。
Snackbar與Toast的區(qū)別:
1、Snackbar可以滑動(dòng)退出,也可以處理用戶交互(點(diǎn)擊)事件
2、Snackbar一般設(shè)置時(shí)間會(huì)比Toast長(zhǎng)。
設(shè)計(jì)原則:
1、屏幕上同時(shí)最多只能顯示一個(gè)Snackbar,需要多個(gè)時(shí),則先將當(dāng)前顯示的Snackbar隱藏后再顯示新的Snackbar。
2、可以在Snackbar中添加一個(gè)按鈕,處理用戶點(diǎn)擊事件。
應(yīng)用場(chǎng)景:
用戶可能需要了解、感興趣的變更信息,如:安裝完成、任務(wù)刪除、好友消息、網(wǎng)絡(luò)錯(cuò)誤、賬號(hào)升級(jí)等
(4)、 Tips提示欄
開發(fā)沒有固定的組件,但是對(duì)設(shè)計(jì)語言來說,tips它是內(nèi)嵌在頁面上的,一般讓用戶觸發(fā)關(guān)閉或進(jìn)入下級(jí)頁面。
應(yīng)用場(chǎng)景:
一般用于需要用戶感知到的通知信息,例如金融類的到期提醒,或者類似廣告的輕度提示。
(5)、Popover 浮層(ios) / popup 浮層(安卓)
Popover是ios的,popup是安卓的,現(xiàn)在功能上基本相通了,所以我這邊就解析Popover
Popover 浮層
Popover(氣泡彈出框/彈出式氣泡/氣泡)是由一個(gè)矩形和三角箭頭組成的彈出窗口,箭頭指向的地方通常是導(dǎo)致Popover彈出的控件或區(qū)域。通過點(diǎn)擊Popover內(nèi)的按鈕或非Popover的屏幕其他區(qū)域可關(guān)閉Popover。
設(shè)計(jì)原則:
1、箭頭的指向很好的表達(dá)了Popover和觸發(fā)控件的潛在關(guān)系,用戶可以匹配對(duì)應(yīng)位置
2、相比于Action Sheet,Popover的三角箭頭能明確的指示當(dāng)前操作的是哪個(gè)條目,不易出錯(cuò)。Popover顯示區(qū)域較小呈現(xiàn)的選項(xiàng)有限,為了防止誤操作不建議在Popover里啟用滾動(dòng),如果選項(xiàng)很多,建議使用Action Sheet。
應(yīng)用場(chǎng)景:
1、快捷導(dǎo)航
2、情境下的相關(guān)選項(xiàng)
3、提示引導(dǎo)
(6)強(qiáng)引導(dǎo)浮層
我為什么要把他單獨(dú)拎出來呢,因?yàn)檫@個(gè)浮層的應(yīng)用,已經(jīng)是模態(tài)提示了,此刻該對(duì)話框中的內(nèi)容獲取了焦點(diǎn),想要操作對(duì)話框以外的功能。
設(shè)計(jì)原則:
因?yàn)閷?duì)用戶干擾比較大,且很多用戶在不敢興趣的請(qǐng)款下不會(huì)去進(jìn)行操作,所以現(xiàn)在用單純的氣泡彈窗不加遮罩的情況較多。
應(yīng)用場(chǎng)景:
比如我們上新功能,局部的按鈕、功能模塊搬家,一些復(fù)雜且容易被遺漏的一些操作,會(huì)使用這中浮層。
(7)動(dòng)作欄
因?yàn)橹罢f過很多英文解釋都是直接用的ios和安卓原生系統(tǒng)的英文代碼,所以動(dòng)作欄我沒有解釋成actionbar,因?yàn)榘沧块_發(fā)語言所講的actionbar并沒有彈窗意思,只是操作欄而已,所以不計(jì)入彈窗體系中。這里所以說的是底部的動(dòng)作欄,在Material Design里稱之為Bottom Sheets,在iOS的設(shè)計(jì)規(guī)范中有Activity Views和Action Sheets兩種。
我們這邊所說的動(dòng)作欄一般是從頁面底部出現(xiàn),也有人稱底部動(dòng)作欄,在Material Design里稱之為Bottom Sheets,在iOS的設(shè)計(jì)規(guī)范中有Activity tanchuan和Action Sheets兩種。
操作欄本質(zhì)上也是收納操作選擇項(xiàng),避免脫離該頁面重新開啟一個(gè)頁面,導(dǎo)致操作不連續(xù),另一個(gè)優(yōu)點(diǎn)是更加節(jié)省界面空間。
設(shè)計(jì)原則:
1、一般由用戶主動(dòng)發(fā)起的任務(wù)。
2、收納內(nèi)容不易過多,如果較多需要限定內(nèi)容滑動(dòng)范圍。
應(yīng)用場(chǎng)景:
操作列表 Actionsheet
以簡(jiǎn)潔的功能描述性文字展示功能按鈕,敏感的功能操作一般用紅色字體標(biāo)出,主要應(yīng)用在操作選擇、刪除、拍照等。
操作視圖 Actionview
以圖標(biāo)和文字結(jié)合的形式展示功能,典型案例:分享、購(gòu)買、支付,現(xiàn)在延伸的場(chǎng)景比較多。
(8)對(duì)話框
對(duì)話框也就是我們熟知的彈窗,安卓開發(fā)語言 Dialog,ios開發(fā)語言Alert。對(duì)話框來傳達(dá)重要信息,需要用戶主動(dòng)操作或進(jìn)行選擇才能繼續(xù)。手機(jī)端一般至多2個(gè)按鈕,按鈕較多會(huì)選擇actionsheet,web端選項(xiàng)較多可使用復(fù)選框。
根據(jù)操作類型分類:
1、信息傳達(dá)-確認(rèn)/關(guān)閉
2、信息輸入-輸入提交
3、信息選擇-雙向按鈕
設(shè)計(jì)原則:
1、確保用戶能夠看到提示。
2、必須用戶主動(dòng)操作或進(jìn)行選擇才能繼續(xù)。
3、阻斷用戶最嚴(yán)重,需要克制使用。
應(yīng)用場(chǎng)景:
1、重要提示信息:跟用戶切身利益有關(guān)系的提示、產(chǎn)品本身重要的信息等
2、需要用戶選中或輸入信息的,如系統(tǒng)權(quán)限,或驗(yàn)證密碼等
2、商業(yè)意圖:廣告、推薦(大家都是為了掙錢,商業(yè)意圖有時(shí)候需要犧牲一些用戶體驗(yàn)。)
四、刪除提醒用什么
說到這里,我必須要說一下Alert View 與 Action Sheet 的區(qū)別
1、最重要的判斷原則是,用戶主動(dòng)發(fā)起的任務(wù)使用 Action Sheet,否則使用 Alert。
2、當(dāng)用戶的下一步操作,與當(dāng)前任務(wù)的主要目標(biāo)不符,或某些含有潛在風(fēng)險(xiǎn)的操作時(shí),應(yīng)該使用 Action Sheet,而非 Alert。
舉一個(gè)典型的例子
之前寫過一篇關(guān)于微信7.0升級(jí)的文章,說道張小龍是很崇敬喬布斯的,所以設(shè)計(jì)產(chǎn)品的時(shí)候盡量跟著apple的規(guī)則來設(shè)計(jì)的。Apple和微信刪除都只用了Alert sheet,因?yàn)閯h除之前用戶是經(jīng)過思考的,有預(yù)見性的,而且不屬于頁面的主要操作行為。并且微信在刪除好友和不再關(guān)注的結(jié)果都提前跟用戶說明了。
那么刪除一定要用Alert sheet嗎?
當(dāng)然不是。在刪除列表項(xiàng)的時(shí)候,apple、微信、qq、淘寶都使用了列表刪除組件,但是他們出發(fā)刪除按鈕后的反饋卻不一樣。
1、apple短信刪除還是通過Alert sheet再次確認(rèn)刪除,因?yàn)槎绦艃?nèi)容包含信息多,相對(duì)可能是重要信息。
2、微信聊天列表刪除在原來按鈕區(qū)域用“確認(rèn)刪除”按鈕確認(rèn)刪除。主要原因是該會(huì)話刪除后,與該好友的聊天記錄也會(huì)完全清空。所以確認(rèn)是需要的,只不過我覺得第一次刪除時(shí)需要感知用戶“您的刪除將會(huì)導(dǎo)致會(huì)話記錄的清空”會(huì)更好。
3、qq聊天列表刪除點(diǎn)擊刪除就直接不見了,主要原因是該刪除并沒有清空聊天記錄或者其他影響,好友也可以通過搜索找到,只是做了一次“聊天界面的清理”
4、淘寶商品列表刪除點(diǎn)擊刪除也是直接不見了的,主要原因是女生購(gòu)物車東西太多,隨便刪,哈哈,而且刪除后在歷史足跡和搜索中任然能找到。
列表的刪除也會(huì)涉及到批量刪除。
1、apple批量刪除短信的時(shí)候,是直接刪除了,我個(gè)人理解原因是,當(dāng)你進(jìn)入“批量刪除”的狀態(tài)的時(shí)候,你的目的很明確,所以給用戶最爽的體驗(yàn)就直接刪除。
2、同樣是批量刪除,淘寶卻用了一個(gè)彈窗刪除,按照之前的邏輯是不是有問題呢。其實(shí)不然,短信刪除是信息管理,但是商品刪除,是違背商業(yè)意圖,“一兩個(gè)刪除是幫助你選擇更好的,批量刪除得讓我緩緩,你再思考一下吧”。但是我覺得彈窗還是過了,像京東使用actionsheet會(huì)更好,因?yàn)橛脩舻囊鈭D是很明確的。
寫著寫著就收不住了,先這樣吧,我覺得還是比較完善了,看完你基本了解你改用什么區(qū)提醒用戶了,謝謝看到這里的朋友。
需要更多有關(guān)于彈窗設(shè)計(jì)的童鞋,戳這里呦!
設(shè)計(jì)總結(jié):
1.設(shè)計(jì)師需要明確設(shè)計(jì)目標(biāo)和會(huì)對(duì)用戶造成的影響來選擇提醒方式。
2.能展示在主體信息的就不要用額外的提醒方式,能用弱提醒的就不用強(qiáng)提醒。
3.彈窗運(yùn)用需要克制,好的產(chǎn)品是給用戶帶來沉浸式的體驗(yàn),避免過多干擾和阻斷。
原創(chuàng):上仙修行
原文鏈接:https://www.ui.cn/detail/468912.html
全站高品質(zhì)素材免費(fèi)下載!