优秀的编程知识分享平台

网站首页 > 技术文章 正文

App弹窗类型汇总?产品经理/交互设计必知

nanyue 2024-09-29 15:07:02 技术文章 193 ℃


App有各种各样的弹窗,如果研发问你“你说这界面要加弹窗,是哪种?是模态还是非模态?”如果不清楚弹窗控件的叫法、用途、特性以及优缺点,将无法很顺(zhuang)畅(B)地和研发同事沟通,也可能无法选择最适合特定使用场景的弹窗。

下面进入正题


弹窗可以分为模态弹窗非模态弹窗,这两种最主要的区别是:前者需要用户与弹窗进行交互才能让弹窗消失,而后者会自动消失、用户无需与弹窗交互也可继续在app上进行操作。

1.模态弹窗,有3种:

1.1. 对话框/警告框-Alert/Dialog


1.1.1. 一般出现在屏幕中间,用户视线聚焦于弹窗,对界面的主要内容造成遮挡

1.1.2. 一般为1~2个按钮

1.1.3. 样式多样:

标题+按钮(如删除确认的弹窗)

标题+描述信息+按钮

标题+输入框+按钮(如输入邀请码的弹窗)

标题+描述信息+输入框+按钮

图片+按钮(如营销活动的弹窗)

1.2.动作列表/动作面板/行动菜单-Actionbar/Actionsheet/Actionview


1.2.1. 按钮一般多于2个、一般出现于界面下方(与Alert/Dialog的区别)

1.2.2.样式主要为两种

列表式

?选项较少可使用

?常见于文字形式表现选项

宫格式

?选项较多可使用

?常见于图标形式展现选项

?选项很多时,建议分组,一行为一组,可在屏幕右边缘露出部分图标,暗示可以横向滑动查看更多选项。

1.3.浮层弹窗/浮出框-Popover/Popup


1.3.1.一般出现在按钮旁边,故此种弹窗可出现在界面任意位置(与Actionbar的主要区别)

1.3.2. 按钮数可多可少

以上即是模态弹窗,Ta的特点:强制用户交互;

优点:进行重要的操作时获取用户聚焦;

缺点:打断用户的操作行为,若不与弹窗做交互则其余功能无法使用。

2. 非模态弹窗,有2种:

2.1.提示框Toast/Hud

2.1.1.Toast是安卓系统的一个控件名词,现也应用于iOS系统之中

2.1.2.iOS里有一个相类似于toast的是hud(如音量调节)

2.1.3.用以轻量级提示/展示文案,无交互,一般显示1~2秒自动消失,不能手动让其消失

2.1.4.出现的位置可以在顶部/中间/底部,app内的toast尽量使用相同位置

2.1.5.现实中的toast可以加icon、背景色可以自定义

2.2.底部弹窗Snackbar

2.2.1.Android特有的交互形式,有些时候也有应用在iOS系统中

2.2.2.由文案和按钮组成

2.2.3.一般出现在界面下方

2.2.4.会自动消失,也可以人为操作使其消失

2.2.5.是一个非模态弹窗,可以视为带有按钮的toast

2.2.6.多见于撤销操作,也有关注后提示并带有按钮”打开关注页“操作的等等

以上即为非模态弹窗,Ta的特点:不强制用户交互;

优点:轻量级,不打扰用户使用其他功能;

缺点:对有风险、不可逆的操作起不到聚焦作用;

感谢阅读,将持续发布产品经理相关文章~

#产品经理#产品设计#交互设计#用户体验#产品体验#app控件#产品分析#产品小白#交互#产品经理#

Tags:

猜你喜欢

最近发表
标签列表