彈窗要如何設(shè)計(jì),用戶才會(huì)喜歡
筆者從產(chǎn)品設(shè)計(jì)、視覺設(shè)計(jì)、體驗(yàn)設(shè)計(jì)角度入手,分析彈窗中的交互體驗(yàn)設(shè)計(jì)。
移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展,使得我們手機(jī)的應(yīng)用越來(lái)越豐富。這種情況下,我們?cè)谠O(shè)計(jì)app的時(shí)候不僅要考慮到功能,還需要傾注更多的心思到用戶操作體驗(yàn)上。只有人性化的交互體驗(yàn)設(shè)計(jì),用戶才會(huì)長(zhǎng)期保持使用并且喜歡上你設(shè)計(jì)產(chǎn)品。
我們今天來(lái)聊一聊產(chǎn)品交互設(shè)計(jì)之一:彈窗。
彈窗是產(chǎn)品設(shè)計(jì)中經(jīng)常會(huì)用到的一控件,彈窗的作用就是告知用戶信息,提醒用戶操作,加強(qiáng)用戶互動(dòng)。
彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種 。
它們的區(qū)別是:模擬彈窗需要用戶回應(yīng),否則不能繼續(xù)操作;非模擬彈窗則會(huì)自動(dòng)消失,不需用戶回應(yīng)。
但我們今天從另一個(gè)角度:產(chǎn)品設(shè)計(jì)、視覺設(shè)計(jì)、體驗(yàn)設(shè)計(jì)來(lái)分析該如何更好的選擇和設(shè)計(jì)彈窗。
一、產(chǎn)品設(shè)計(jì)
1. 提醒-信息確認(rèn)
有一些重要編輯的時(shí)候,需要讓用戶自行確認(rèn),要用戶確認(rèn)過后才算生效。
例如:刪除,付款,卸載等等。
就好比我們?nèi)ャy行和機(jī)構(gòu)辦理業(yè)務(wù),都是需要本人簽字確認(rèn)。APP產(chǎn)品的設(shè)計(jì)也是一樣,需要用戶確認(rèn),避免用戶沒來(lái)及反應(yīng),操作就已經(jīng)完成。
2. 提醒-信息補(bǔ)充
一款A(yù)PP隨著產(chǎn)品的升級(jí)和功能的完善,在運(yùn)營(yíng)和設(shè)計(jì)上需要通過更多的用戶信息和數(shù)據(jù)來(lái)判斷新增需求??赡芤婚_始沒在意,但后面升級(jí)的每個(gè)設(shè)計(jì)和需求都需要精準(zhǔn),需要更準(zhǔn)確的用戶信息。
對(duì)于這類用戶的信息不完善,產(chǎn)品也會(huì)通過彈窗的方式來(lái)對(duì)用戶的信息在進(jìn)行手機(jī)和補(bǔ)充。
3. 提醒-信息選擇
我們生活中大部分事情都不是唯一的:有多種可能性和多種選擇。我們做產(chǎn)品設(shè)計(jì)也是,不能按開發(fā)設(shè)計(jì)者的喜好來(lái)讓用戶使用產(chǎn)品。
4. 提醒-信息告知,主動(dòng)推送
用戶使用產(chǎn)品,產(chǎn)品也需要和用戶進(jìn)行溝通。顯然,溝通是需要主動(dòng)性的。產(chǎn)品功能更新升級(jí),優(yōu)惠活動(dòng)我們都要做好信息推送,與用戶做好互動(dòng)。
二、視覺設(shè)計(jì)
1. 原生設(shè)計(jì)
這類彈窗是應(yīng)用自帶的效果,沒有經(jīng)過視覺設(shè)計(jì)師后期加工,表現(xiàn)較為簡(jiǎn)單和簡(jiǎn)潔;也沒有過多的情感色彩,中規(guī)中矩。
2. 氛圍設(shè)計(jì)
氛圍設(shè)計(jì)也叫情感化設(shè)計(jì)。氛圍設(shè)計(jì)的好處是代入感強(qiáng),可以讓用戶深深的感受到主題氛圍。多一份用心,用戶也就多一份親近和喜愛。
例如:節(jié)日設(shè)計(jì),氛圍對(duì)了,感覺就對(duì)了。
3. 呼應(yīng)UI主題設(shè)計(jì)
我們?cè)O(shè)計(jì)是自帶設(shè)計(jì)效果,比較平淡,沒有情感。但是,有些彈窗又不適合做氛圍設(shè)計(jì),那怎么辦呢?
設(shè)計(jì)師們會(huì)和產(chǎn)品最初的UI設(shè)計(jì)做呼應(yīng),提取產(chǎn)品的元素做統(tǒng)一。
如:提取UI設(shè)計(jì)的主色調(diào)來(lái)修飾,這樣的處理方式既不會(huì)使得太單調(diào)又能和主題相呼應(yīng),細(xì)節(jié)和整體都能做到統(tǒng)一。
三、體驗(yàn)設(shè)計(jì)
1. 干擾程度:五星
主要出現(xiàn)在屏幕中間位置和底部,一般背景會(huì)有遮罩,彈窗內(nèi)容占比屏幕區(qū)域較大。
有突發(fā)感,可分為:
1. 無(wú)連續(xù)性層級(jí)操作:回應(yīng)當(dāng)前即消失。
2. 有多層級(jí)連續(xù)性操作:需校對(duì)當(dāng)前信息是否合適,如有誤,可進(jìn)行編輯更改。
優(yōu)點(diǎn):提示程度高,醒目
缺點(diǎn):強(qiáng)干擾,打斷用戶
2. 干擾程度:三星
有聯(lián)系的提醒、善意的提醒,用戶的反感較小。
就好比說(shuō)我們走路,路上碰到好心人提醒。其中一位告訴我們說(shuō)到達(dá)目的地還有xx公里;而另一位則告訴我們,你走錯(cuò)路了。顯然要第一位的提醒對(duì)我們產(chǎn)生的干擾比較小。
1. 局部提醒
提醒面積小。能讓知道當(dāng)前操作的情況,屬于順著用戶的提醒。用戶接受度較好。
2. 氣泡彈窗
適用于首頁(yè)常規(guī)操作的多功能快捷入口。
能夠很好歸納和整理常規(guī)操作功能:有時(shí)候用戶高頻使用的快捷功能比較多,但是全部設(shè)計(jì)的核心區(qū)域又擁擠。這時(shí)候氣泡彈窗就合適了,就像一個(gè)文件夾很好起到重要的收納作用。
優(yōu)點(diǎn):無(wú)需占領(lǐng)太多屏幕,平衡提醒和打擾之間的矛盾
缺點(diǎn):中度干擾
3. 干擾程度:一星
完成一個(gè)任務(wù),提交一個(gè)信息,用戶關(guān)心的操作,我們需要給用戶反饋,讓用戶獲得安全感。
優(yōu)點(diǎn):提醒輕,打斷小,無(wú)需操作,自動(dòng)消失
缺點(diǎn):一閃而過,易忽略
四、關(guān)于關(guān)閉按鈕的設(shè)計(jì)
1. 右上角關(guān)閉
適用場(chǎng)景:解除強(qiáng)制性的操作,滿足用戶有關(guān)閉彈窗的權(quán)利。
突出彈窗內(nèi)容和引導(dǎo)按鈕操作,弱化關(guān)閉。
從體驗(yàn)設(shè)計(jì)來(lái)說(shuō),我們要給用戶關(guān)閉的權(quán)利。
2. 底部關(guān)閉
適用場(chǎng)景:優(yōu)化,大屏單手操作,觸碰不準(zhǔn)確的痛點(diǎn)。
隨著手機(jī)越來(lái)越大,單手操作靈活性下降。
底部的關(guān)閉按鈕會(huì)比右上角手指的操作更輕松:底部關(guān)閉設(shè)計(jì)能很好解決右上角觸碰區(qū)域小,需要多次觸碰的麻煩。
3. 內(nèi)容區(qū)關(guān)閉
適用場(chǎng)景:彈窗內(nèi)容本身引導(dǎo)傾向不強(qiáng),可直接設(shè)計(jì)按鈕。
用戶在接收到操作完畢反應(yīng)需要經(jīng)過四個(gè)步驟:
當(dāng)用戶做出判斷是關(guān)閉時(shí),將關(guān)閉設(shè)計(jì)在內(nèi)容區(qū)域,可以減少尋找關(guān)閉按鈕的行為成本,快速做出反應(yīng),將彈窗關(guān)閉。
五、小結(jié)
設(shè)計(jì)的方法和形式多種多樣,很多我們覺得不需要過多講究的產(chǎn)品,其實(shí)包含著設(shè)計(jì)者的良苦用心和精心安排。
好的設(shè)計(jì)有時(shí)候不需要很華麗,只要將人性化的操作恰到好處的安排到合適的地方就很好。
本文由 @我是廣告班 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
很多嚴(yán)格來(lái)說(shuō)都不算彈窗,就是算響應(yīng)式控件,很多還算是toast。
彈窗分類太多了
“模擬彈窗需要用戶回應(yīng),否則不能繼續(xù)操作;非模擬彈窗則會(huì)自動(dòng)消失,不需用戶回應(yīng)?!边@句話不對(duì)吧,是模態(tài)彈窗哎,而且區(qū)別也不對(duì)啊,啊,啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊?。。。。。?!
…………
感謝作者的收集和對(duì)比分析,謝謝。
看完了我感覺我也可以做設(shè)計(jì)。。。
這篇文章算文章???????算設(shè)計(jì)文章????????????????????????