移動端彈窗的分類與介紹

一、分類

主要分為 模態(tài)彈窗 非模態(tài)彈窗 兩大類

1. 模態(tài)彈窗————用戶必須進行操作回應(yīng)

2. 非模態(tài)彈窗————幾秒后自動消失

模態(tài)彈窗包括:

1 Dialog/Alerts (警告框涧窒、對話框)

2 Action bar部凑、Action Sheets梢薪、Activity View(動作欄戒傻、操作列表友瘤、活動視圖)

3 Popover/Popup(彈出框挤土、浮層)

非模態(tài)彈窗包括:

1 Toast/HUD(提示框)

2 Snackbar(底部彈窗)


二、介紹

1 Dialog/Alerts(安卓中被稱為DIialog,ios中被稱為Alerts)

用戶需對彈窗進行回應(yīng),一般會有1-3個按鈕,背后有黑色半透明蒙層,以便使彈窗更加突出


2 Action bar肢扯、Action Sheets妒茬、Activity View

位于屏幕底部,提供至少兩個功能選項,一般會有取消按鈕,點擊“取消”或彈窗外區(qū)域即可關(guān)閉彈窗.如分享功能/ios相冊刪除照片的提醒

Actoinbar比Dialog擁有更多的功能按鈕,提供給用戶更多的功能選擇.

當功能按鈕數(shù)量很多的時候蔚晨,文字列表的形式不適合顯示乍钻,此時可以用圖形加文字描述排列的形式來進行展示(如微信分享微信公眾號文章時)

3 Popover/Popup(浮層):如微信首頁點擊右上角加號后出現(xiàn)的浮層/QQ右上角.? ? 用于折疊頁面多余信息或一些功能的入口

4 Toast/HUD(在安卓中叫Toast,在ios叫HUD)

尺寸較小,幾秒鐘即消失.在整個App中,Toast 出現(xiàn)的位置需保持一致,使用戶形成統(tǒng)一的認知習(xí)慣

5 Snackbar

用于向用戶反饋信息,介于Dialog與Tosat之間,用戶可以點擊按鈕進行交互(如:截圖分享…)


三、總結(jié)

模態(tài)彈窗:用于重要消息提示,用戶需進行操作,會打斷用戶當前操作

非模態(tài)彈窗:非重要消息提示,會自動消失,對用戶打擾程度低,不適于承載過多文案,因為停留時間短,用戶可能會看不清

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末铭腕,一起剝皮案震驚了整個濱河市银择,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌累舷,老刑警劉巖浩考,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異被盈,居然都是意外死亡析孽,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門只怎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來袜瞬,“玉大人,你說我怎么就攤上這事身堡⊥讨停” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵盾沫,是天一觀的道長。 經(jīng)常有香客問我殿漠,道長赴精,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任绞幌,我火速辦了婚禮蕾哟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘莲蜘。我一直安慰自己谭确,他們只是感情好,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布票渠。 她就那樣靜靜地躺著逐哈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪问顷。 梳的紋絲不亂的頭發(fā)上昂秃,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天禀梳,我揣著相機與錄音,去河邊找鬼肠骆。 笑死算途,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的蚀腿。 我是一名探鬼主播嘴瓤,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼莉钙!你這毒婦竟也來了廓脆?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤胆胰,失蹤者是張志新(化名)和其女友劉穎狞贱,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蜀涨,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡瞎嬉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了厚柳。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氧枣。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖别垮,靈堂內(nèi)的尸體忽然破棺而出便监,到底是詐尸還是另有隱情,我是刑警寧澤碳想,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布烧董,位于F島的核電站,受9級特大地震影響胧奔,放射性物質(zhì)發(fā)生泄漏逊移。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一龙填、第九天 我趴在偏房一處隱蔽的房頂上張望胳泉。 院中可真熱鬧,春花似錦岩遗、人聲如沸扇商。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽案铺。三九已至,卻和暖如春梆靖,著一層夾襖步出監(jiān)牢的瞬間红且,已是汗流浹背坝茎。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留暇番,地道東北人嗤放。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像壁酬,于是被迫代替她去往敵國和親次酌。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

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