移动端弹窗的分类与介绍

一、分类

主要分为 模态弹窗 和 非模态弹窗 两大类

1. 模态弹窗————用户必须进行操作回应

2. 非模态弹窗————几秒后自动消失

模态弹窗包括:

1 Dialog/Alerts （警告框、对话框）

2 Action bar、Action Sheets、Activity View（动作栏、操作列表、活动视图）

3 Popover/Popup（弹出框、浮层）

非模态弹窗包括:

1 Toast/HUD(提示框)

2 Snackbar(底部弹窗)

二、介绍

1 Dialog/Alerts(安卓中被称为DIialog,ios中被称为Alerts)

用户需对弹窗进行回应,一般会有1-3个按钮,背后有黑色半透明蒙层,以便使弹窗更加突出

2 Action bar、Action Sheets、Activity View

位于屏幕底部,提供至少两个功能选项,一般会有取消按钮,点击“取消”或弹窗外区域即可关闭弹窗.如分享功能/ios相册删除照片的提醒

Actoinbar比Dialog拥有更多的功能按钮，提供给用户更多的功能选择.

当功能按钮数量很多的时候，文字列表的形式不适合显示，此时可以用图形加文字描述排列的形式来进行展示(如微信分享微信公众号文章时)

3 Popover/Popup(浮层):如微信首页点击右上角加号后出现的浮层/QQ右上角.    用于折叠页面多余信息或一些功能的入口

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

尺寸较小,几秒钟即消失.在整个App中,Toast 出现的位置需保持一致,使用户形成统一的认知习惯

5 Snackbar

用于向用户反馈信息,介于Dialog与Tosat之间,用户可以点击按钮进行交互(如:截图分享…)

三、总结

模态弹窗:用于重要消息提示,用户需进行操作,会打断用户当前操作

非模态弹窗:非重要消息提示,会自动消失,对用户打扰程度低,不适于承载过多文案,因为停留时间短,用户可能会看不清