作為一枚小白設(shè)計獅??,作為一枚有著強烈獵奇心理的設(shè)計獅??锨天,所以在好奇心驅(qū)使下,我用了一天看了很多規(guī)范和資料,終于縷清楚了彈窗家族的那些事兒~
傳說【彈窗家族】壟斷了智能手機所有信息通知的渠道嗜闻,比如:APP升級啦~跪求好評、您的網(wǎng)絡(luò)暫時被隔壁老王偷老婆的時候順走了桅锄、您的購物車已被懂事的男票清空了 …… ?等等這一系列的通知都需要拜托彈窗家族的不同成員來呈現(xiàn)的琉雳。
彈窗類型大匯總
首先說說【模態(tài)式彈窗派】的兄弟們吧~ 敲黑板!劃知識點了哈友瘤!
1. 模態(tài)式彈窗(Modal Dialogue Box)
所謂模態(tài)式彈窗翠肘,就是以 [打斷用戶當(dāng)前操作并強行登場以博取眼球] 的招數(shù)聞名江湖的一群搗蛋鬼。用戶如果碰到他們辫秧,就只能處理完彈窗上的信息再繼續(xù)剛才進行的操作咯~
1.1 模態(tài)派掌門人Dialog(HUD)
在安卓大大的控件庫中被稱為Dialog對話框束倍,不過在蘋果爸爸那就被稱為HUD,其實都一樣盟戏,就是我們平時見得最多的彈窗形式绪妹。
“話不多說,直接看東西” ?—— 一個不想當(dāng)工匠的胖子柿究,不是個好的產(chǎn)品經(jīng)理說過邮旷。
這類型對話框的通常被拿來承載:通知類信息(比如提示用戶操作成功或失敗的信息)、升級類信息(升級成功或需要更新)蝇摸、二次確認(rèn)的信息(比如是否要刪除廊移?是否要退出)等。
1.2 模態(tài)派大師兄Actionbar
Actionbar是可操作功能的一個集合探入,不同于Dialog的一點是狡孔,Dialog一般可選擇的按鈕最多就兩個,而且是對立的蜂嗽,要么 [確認(rèn)] 要么 [取消]苗膝,可是Actionbar的功能都是同級的
而且隨著大屏手機越來越大!把選項放在屏幕下方植旧,在用戶操作的熱區(qū)范圍內(nèi)辱揭,更便于用戶操作离唐。
栗子??舉完啦域庇,來總結(jié)一下模態(tài)派的技能值爆點和弱點:
優(yōu)勢:
1. 保持焦點嵌戈。因為使用了模態(tài)式彈窗,以帶透明度的黑色蒙層為底听皿,使彈窗以最頂層的形式出現(xiàn)熟呛,并且大面積的信息承載區(qū)域,自然很容易吸引到用戶的注意力尉姨。
2. 層級分明庵朝。圖中很清晰可以看到模態(tài)式彈窗承載的信息與后面的頁面是兩個層級,用戶可以更清晰當(dāng)前操作又厉,不會與后面信息混為一談九府。劣勢:
1. 帶來中斷感。它們的出場往往都是被迫用戶停止當(dāng)前任務(wù)覆致,專注于對話內(nèi)容侄旬,所以一定程度上會給用戶體驗帶來中斷感。
2. 無法同時操作篷朵。在模態(tài)式彈窗出現(xiàn)之后勾怒,往往要求用戶采取了相應(yīng)操作才能消失婆排,用戶無法在操作同時瀏覽頁面內(nèi)容声旺。
所以在使用模態(tài)式彈窗的時候要謹(jǐn)慎,不要在一個產(chǎn)品中頻繁使用段只,不然腮猖。。赞枕。澈缺。“跟著我長按再點右上的叉叉炕婶,果斷卸載一點沒在怕~~~”
2. 非模態(tài)式彈窗(Nonmodal Dialogue Box)
2.1 非模態(tài)派大姐大Toast
一看這名兒就知道是個吃貨哈~ 據(jù)說Toast這名兒的來歷呢也是很因吹斯聽?interesting呢~??
據(jù)說是在微軟工作的一哥們兒正開發(fā)著MSN Messenger呢姐赡,覺得MSN彈出通知方式的樣子很像一塊從烤面包機里烤熟了的面包一樣duang duang duang彈出來,估計也是餓了柠掂,這哥們兒就很任性的把這種提示方式命名為Toast项滑,神轉(zhuǎn)折是后來這哥們兒帶著這命名習(xí)慣跳槽到Google了,所以大家可以留意看涯贞,現(xiàn)在google的所有產(chǎn)品消息提示除了Dialog就是Toast枪狂,就那一蹦一蹦的小面包危喉。
Toast有幾個特點:
1. 適合承載特別短小精煉的信息辜限;
2. 出現(xiàn)時間是短暫的,大概3-5秒就會消失严蓖,不會迫使用戶停下當(dāng)前操作薄嫡;
3. 多條Toast的出場方式是層疊的,第二條會覆蓋掉第一條谈飒,不會出現(xiàn)同時兩條Toast的情況岂座;
2.2 非模態(tài)派萌妹紙Snackbar
御姐愛吐司,那么萌妹肯定愛小吃啦~ 發(fā)現(xiàn)安卓家起名兒的一定是個吃貨杭措,不管是系統(tǒng)還是控件都喜歡叫吃的费什,這簡直就是在撩一個沒吃夜宵、深夜還在碼字的女紙嘛????
之所以把她們定位成姐姐妹妹的組合手素,其實也是為了讓你們好記鸳址。
第一,Snackbar是Toast的升級版泉懦。那一般妹妹都是吃著姐姐攢下的經(jīng)驗值成長的稿黍,那級數(shù)蹭蹭升的可不比老姐快么?
第二崩哩,Snackbar可帶選擇項供用戶選擇巡球。不像Toast只能自帶純文字,這也好解釋啊邓嘹,一般御姐哪會問你意見啊酣栈,直接"晚上農(nóng)藥開黑走起!愛來來汹押,不來滾"矿筝。只有萌妹才會問問“歐巴,倫家想開一局農(nóng)藥棚贾,你陪不陪倫家玩呀窖维?同意請扣1,不同意請滾”妙痹。
So铸史,我這個方法有沒有很好記?怯伊?琳轿?大聲告訴我有沒有??利赋?
有K馈!媚送!(好中燥,我聽見了~愛你們哈哈哈哈)
至于手機的截圖,我用的蘋果啊塘偎,我疗涉。。吟秩。我咱扣。。涵防。找不到闹伪。。壮池。偏瓤。所以機智的我在網(wǎng)上找了一張!椰憋!等著厅克!你給我等著!橙依!
這兩姐妹還有個特點就是窗骑,在安卓系統(tǒng)的APP中女责,如果有右下方的 [創(chuàng)建] button的,那么Toast和Snackbar都不能遮擋住按鈕慧域,必須以從下方把按鈕頂上去的形式出現(xiàn)~ 看來兩姐妹還是對兒美少女壯士呢哈哈哈哈鲤竹!
栗子??竟然又舉完啦浪读,繼續(xù)盤點她倆攻擊值和弱點:
優(yōu)勢:
1. 不會給用戶帶來中斷感昔榴。因為他不會大面積出現(xiàn),就起到提示用戶的作用就消失碘橘,所謂的“點到為止”互订,揮一揮衣袖,不帶走一片云彩~~
2. 占用屏幕空間小痘拆。可以讓用戶在看到他們的時候依舊可以看到界面的其他信息仰禽。
3.使用簡單,適用范圍廣。劣勢:
1. 戲份太少吐葵,可能會錯過规揪。因為出場時間往往3-5秒,很容易一個不留神温峭,比如注意看地鐵上的某個帥哥的功夫猛铅,我就不知道提示的信息是啥了?
2. 會在一定程度影響用戶當(dāng)前操作凤藏。雖然是非模態(tài)奸忽,可是形式還是可優(yōu)化,比如上圖QQ注冊界面和Same的清除緩存頁面的Toast就設(shè)計的很棒揖庄,一改它黑乎乎的形象栗菜,而且沒有讓他擋住用戶實現(xiàn)的中心部分,也能起到提示作用蹄梢,可以學(xué)習(xí)哈疙筹!
3. 編外人員二人組
為啥說人家是編外人員啊,因為這倆貨其實是沒被正式歸納于彈窗中的禁炒,可是我覺得他們的形態(tài)也是懸浮狀啊腌歉,而且他們的出現(xiàn)方式也算是非模態(tài)式啊,那為啥就因為人家沒考上就不能讓他倆當(dāng)個實習(xí)生進到模態(tài)派呢齐苛。翘盖。。(好吧凹蜂,以上BB都是我個人特主觀的想法馍驯!如有雷同,那就雷同著吧玛痊!)
3.1 精瘦男Menus
之所以叫他精瘦男汰瘫,因為。擂煞。混弥。他真的身材好細長啊对省!而且會隨著版本不斷迭代更蝗拿。。長蒿涎。哀托。
3.2 矮子樂Tooltips
Tooltips就是哪里不會點哪里~So easy~ (不過不用真的點哦,就鼠標(biāo)懸浮就好劳秋!或者在手機端就是長按情況下就會觸發(fā)啦仓手,一觸即發(fā)胖齐!)
來個總結(jié),裝一下專業(yè)哈哈:
Menus和Tooltips呢嗽冒,
我覺得他們也是以懸浮狀態(tài)出現(xiàn)呀伙,并且對其操作的同時,就沒辦法對其他功能進行操作了添坊,這點像極了模態(tài)派区匠;
不過他們又不一定需要用黑不溜秋的蒙層去區(qū)分層次,這點又很像非模態(tài)派帅腌。
所以驰弄,與其讓這么專業(yè)負責(zé)可愛善良的我放棄這兩個知識點,還不如主觀讓他倆自成一派速客!
以上就是幾乎所有以彈窗形式出現(xiàn)的控件的介紹啦F莞荨!
額溺职。岔擂。。因為是第一次發(fā)文浪耘,也不知道排版合不合理乱灵?好不好看?我也沒找到有預(yù)覽的功能七冲,所以如果有理解錯或者忽略的部分大家可以大方慷慨地告訴我??共同進步嘛痛倚!
最后,不要因為我每一秒都是戲就不愛我好不好澜躺?蝉稳?
好!>虮伞T牌荨!操漠!(謝謝~ 我又一次聽到了大家自發(fā)的掌聲和歡呼聲哈哈哈哈~ 我會繼續(xù)努力噠收津!)