2019-10-18 資深UI設(shè)計(jì)者
在手機(jī)app應(yīng)用中各種格式的彈窗效果相信大家都看過(guò),也可能反感過(guò)某些彈窗,本文就來(lái)談?wù)勱P(guān)于app彈窗設(shè)計(jì)以及彈窗的適用情景。
1. 彈窗作用
彈窗是為了讓用戶回應(yīng),需要用戶與之交互的窗口。
非模態(tài)彈窗一般被設(shè)計(jì)成用來(lái)告訴用戶信息內(nèi)容,而模態(tài)彈窗除了告訴用戶信息內(nèi)容外還需要用戶進(jìn)行功能操作。
2. 模態(tài)彈窗
會(huì)打斷用戶的操作行為,強(qiáng)制用戶必須進(jìn)行操作,否則不可以進(jìn)行其他操作。
(Alerts/dialog,Actionbar,Popover)
3. 非模態(tài)彈窗
不會(huì)影響用戶操作,用戶可以不與回應(yīng),通常有時(shí)間限制,出現(xiàn)一段時(shí)間就會(huì)自動(dòng)消失。
(Toast/HUD,Snackbar)
1. Alerts/Dialog:警告框與對(duì)話框
含義:英文意為警告、對(duì)話,跟彈窗屬性非常吻合,就是緊急狀況,打擾用戶的行為。
剖析:iOS中警告框稱之為Alerts,作用是用來(lái)傳達(dá)重要信息,并伴隨著需要用戶進(jìn)行操作。
iOS規(guī)范中,警告框包含的元素如下:標(biāo)題(必選)、描述信息(可選)、輸入框(可選)、按鈕(必選)。
必須包含標(biāo)題、包含一個(gè)或多個(gè)按鈕。
Android規(guī)范中,彈窗交互按鈕需結(jié)合實(shí)際情況,不用「是/否」原則進(jìn)行設(shè)計(jì)。
作用:告知用戶當(dāng)前發(fā)生的狀況,讓用戶主動(dòng)選擇回應(yīng)。
適用:重要性較高的操作時(shí),如退出、刪除、清空等。
2. Actionbar(Sheets、Acitivity View):操作欄、操作列表、活動(dòng)視圖
含義:英譯為工具欄、操作欄。
剖析:當(dāng)用戶激發(fā)一個(gè)操作的時(shí)候,出現(xiàn)此窗口。
一般會(huì)給用戶提供更多的功能選擇,一般可采用官方控件。
一般都設(shè)計(jì)有一個(gè)默認(rèn)的「取消」按鈕,點(diǎn)擊取消可以關(guān)閉彈窗。
Aciton Sheets和Activity Views是iOS上特有的交互形式。
特性是用戶觸發(fā)、包含兩個(gè)或以上的按鈕。
△ 以上為今日頭條、iOS系統(tǒng)相冊(cè)
作用:操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前任務(wù)的操作,而這樣的形式不會(huì)永久占用頁(yè)面UI的空間。
適用:如分享功能。
3. Popover/Popup:浮出框/浮層彈窗
含義:英意為彈出窗口,浮動(dòng)于頂層窗口,氣泡。
△ 以上為微博、qq、微信
剖析:當(dāng)用戶點(diǎn)擊某個(gè)控件或者某個(gè)區(qū)域時(shí)浮出的半透明或者不透明的彈窗窗口。
不會(huì)對(duì)用戶所在位置進(jìn)行跳轉(zhuǎn)。
作用:可以在當(dāng)前頁(yè)面進(jìn)行更多的操作行為,顯示/隱藏頁(yè)面中的折疊信息。
適用:首頁(yè)位置呈現(xiàn)一些常用操作的快捷入口。
4. Toast/HUD:提示框(iOS沒(méi)有Toast,只有HUD)
含義:Toast也被稱為吐司提示,Toast是安卓系統(tǒng)的一個(gè)控件名詞,現(xiàn)也應(yīng)用于iOS系統(tǒng)中。
剖析:提示框?qū)儆谝环N輕量級(jí)的彈窗反饋形式,常以小彈框的形式出現(xiàn),持續(xù)1-2秒自動(dòng)消失,可以出現(xiàn)在屏幕任意位置,但是建議同一款產(chǎn)品盡量使用相同位置,讓用戶產(chǎn)生統(tǒng)一認(rèn)知,成為習(xí)慣。
提示信息能給予用戶及時(shí)反饋,確保用戶知曉自己所處的狀態(tài),并可以做出相應(yīng)的措施。
iOS用戶更習(xí)慣于在頂部感知反饋信息,不干擾用戶瀏覽主體內(nèi)容。Toast出現(xiàn)在屏幕頂部不會(huì)遮擋主體內(nèi)容。(如花瓣、有道云筆記)
Android正統(tǒng)的規(guī)范中Toast:
△ 以上為今日頭條、微博、即刻
HUD與Toast的區(qū)別:
△ iOS音量調(diào)節(jié)
優(yōu)點(diǎn):
缺點(diǎn):
適用:提示不需要的反饋信息,如刷新后的成功狀態(tài)。
5. Snackbar:底部彈窗
Android特有的交互形式,在Google的MD規(guī)范中,將Toast和Snackbars歸為一類。有些時(shí)候也有應(yīng)用在iOS系統(tǒng)中,也可以理解為加強(qiáng)版的Toast。
含義:英譯為快餐、小吃。
剖析:Snackbars與toast一樣是從屏幕底部向上出現(xiàn),但是Snackbar不同的是可以經(jīng)過(guò)用戶進(jìn)行其他操作而消失。
適用:較多適用于撤銷操作。
通過(guò)分析和了解彈窗的類別、適用范圍,才能更好的在設(shè)計(jì)中進(jìn)行優(yōu)化與改變。用戶體驗(yàn)設(shè)計(jì)的重點(diǎn),是一步步了解用戶,然后設(shè)計(jì)出適合用戶體驗(yàn),滿足用戶心理需求的產(chǎn)品。把握好彈框設(shè)計(jì)規(guī)范,避免彈框設(shè)計(jì)的誤區(qū),能更好的幫助你完善產(chǎn)品。
但是,沒(méi)有十全十美的產(chǎn)品,所以要根據(jù)設(shè)計(jì)趨勢(shì)與用戶需求不斷地進(jìn)行更新迭代,通過(guò)用戶反饋,不斷地改良產(chǎn)品體驗(yàn),才是做出優(yōu)秀產(chǎn)品的前提。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn