APP中弹窗类型

一、弹窗定义

1.弹窗的作用

需要用户回应或给与用户相关信息提示等与之交互的窗口

2.app弹窗分类

模态弹窗 非模态弹窗
Alerts/Dialog Toast/HUD
Actionbar/Action Sheets/Activity Views Snackbar
Popover/Popup -

3.模态窗口

会打断用户的操作行为,强制用户进行操作,否则不能进行其他操作

4.非模态窗口

不影响用户操作,通常有时间限制,出现一段时间后自动消失

二、弹窗分类

1.Alerts/Dialog:警告框与对话框

作用:告知用户当前发生的状况,让用户主动作出回应
适用场景:重要性较高的操作,如退出、删除、清空
出现位置:屏幕中央
iOS规范中(Alerts):警告框包含元素如下:标题(必选)、描述信息(可选)、输入框(可选)、按钮(必选,一个或多个)

2.Actionbar(Sheets、Activity Views ,为iOS特有的交互设计):操作栏、操作列表、活动视图

作用:提供一系列在当前情景下可以完成当前任务的操作,而且这样的形式不会永久占用页面的UI空间
适用场景:如iOS的分享功能、系统相册功能
出现位置:屏幕下方
特性:用户触发,包含两个及两个以上按钮。一般都设计有一个默认的取消按钮,放在最下位置与其他按钮做一定的区分

3.Popover/Popup:浮出框/浮层弹框

作用:可以在当前页面进行更多的操作行为,显示/隐藏页面中的折叠信息
适用场景:首页位置呈现一些常用操作的快捷入口,如微信的➕图标按钮展开
出现位置:一般出现在首页位置,当用户点击某个控件或某个区域时浮出的半透明的或者不透明的弹窗窗口

4.Toast/HUD:提示框,HUD只用于iOS

作用:提示信息给与用户及时的反馈,确保用户知晓当前状态
适用场景:轻量级的弹框反馈形式,持续1-2s自动消失
出现位置:可以出现在屏幕任意位置,显示在屏幕所有层的最上方,建议同一款产品尽量使用相同的位置,让用户形成统一认知,iOS用户习惯于顶部感知反馈信息,Android多出现在屏幕底部
特性:只有文字且精简,段时间后会主动消失,不能对Toast进行交互

HUD与Toast的区别:

  • HUD只出现在屏幕中央,Toast主要在底部
  • HUD可以包含icon,Toast只能纯文字
  • HUD一般为毛玻璃透明,Toast一般为灰黑或者黑色半透明
  • HUD内容可以变化,Toast中内容不可变
    HUD如iOS的音量调节键

5.Snackbar:底部弹框

作用:可以理解为加强版的Toast
适用场景:较多适用于撤销操作
出现位置:显示在屏幕所有层的最上方
特性:可以通过用户进行其他操作而消失

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容

  • 2014年5月8日 我特意洗了个澡 只为小区东边走两步再往左拐的一片寂寞荒地 那里聚集着一群衣着暴露的美人儿 她们...
    唐晟艺阅读 190评论 0 1
  • 之前由于都是在群里看各位的简书,或者听各位朋友在实际生活遇到的困难。一直没能够找出大段的时间系统的学习锦明老...
    hai_海阔天空阅读 288评论 3 2
  • 《清平乐》 蝶翻蜂闹, 几处莺声巧。 曲径通幽行人少。 雀儿林间飞跃。 清晨我是第一, 虫虫懒睏无食。 喜看花繁堆...
    相山雨晨阅读 494评论 8 24
  • MultiDex的具体实现过程 一、代码示例 1、Gradle修改 修改Gradle的配置,支持multidex:...
    墨留痕阅读 339评论 0 0