彈窗家族的故事(自己對彈窗種類和運用規(guī)范的一些總結(jié))

作為一枚小白設(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)理說過邮旷。

Dialog對話框
安卓系統(tǒng)的Dialog?? ? ??蘋果系統(tǒng)的HUD

這類型對話框的通常被拿來承載:通知類信息(比如提示用戶操作成功或失敗的信息)、升級類信息(升級成功或需要更新)蝇摸、二次確認(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。州疾。


Google相冊的刪除提醒也是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)上找了一張!椰憋!等著厅克!你給我等著!橙依!

OK证舟,就是這樣!

這兩姐妹還有個特點就是窗骑,在安卓系統(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

之所以叫他精瘦男汰瘫,因為。擂煞。混弥。他真的身材好細長啊对省!而且會隨著版本不斷迭代更蝗拿。。長蒿涎。哀托。

安卓Menus?? ? ???蘋果Menus(額...我也不知道安卓機打開這功能是不是一樣的)


3.2 矮子樂Tooltips

這些在功能上起解釋性作用的小塊兒就是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ù)努力噠收津!)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市浊伙,隨后出現(xiàn)的幾起案子撞秋,更是在濱河造成了極大的恐慌,老刑警劉巖吧黄,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件部服,死亡現(xiàn)場離奇詭異唆姐,居然都是意外死亡拗慨,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赵抢,“玉大人剧蹂,你說我怎么就攤上這事》橙矗” “怎么了宠叼?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長其爵。 經(jīng)常有香客問我冒冬,道長,這世上最難降的妖魔是什么摩渺? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任简烤,我火速辦了婚禮,結(jié)果婚禮上摇幻,老公的妹妹穿的比我還像新娘横侦。我一直安慰自己,他們只是感情好绰姻,可當(dāng)我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布枉侧。 她就那樣靜靜地躺著,像睡著了一般狂芋。 火紅的嫁衣襯著肌膚如雪榨馁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天帜矾,我揣著相機與錄音辆影,去河邊找鬼。 笑死黍特,一個胖子當(dāng)著我的面吹牛蛙讥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播灭衷,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼次慢,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了翔曲?” 一聲冷哼從身側(cè)響起迫像,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎瞳遍,沒想到半個月后闻妓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡掠械,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年注祖,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片舔箭。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖箫章,靈堂內(nèi)的尸體忽然破棺而出炉抒,到底是詐尸還是另有隱情焰薄,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布野瘦,位于F島的核電站,受9級特大地震影響惰许,放射性物質(zhì)發(fā)生泄漏汹买。R本人自食惡果不足惜晦毙,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一甸陌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧遂庄,春花似錦、人聲如沸凛澎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽冷尉。三九已至,卻和暖如春雾棺,著一層夾襖步出監(jiān)牢的瞬間捌浩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留馋辈,地道東北人叉抡。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓洗搂,卻偏偏與公主長得像撵颊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子妻熊,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容