APP中的弹窗设计

2022-10-171433

弹窗是指当用户在页面操作后,系统会给予反馈、提示、引导用户的一种设计控件。在操作中,系统需要针对用户不同的操作场景给予合理的信息反馈,提示用户当前操作的一个结果是怎么样了,或是强制用户去做一些操作决定自己下一步是需要干嘛!下面介绍APP中的弹窗的构成和分类。

弹窗组件的构成

弹窗组件的样式很多,如浮层、对话框、下拉菜单、toast 等,且 iOS、Android 官方平台也都根据自身的规范对组件进行命名,不管如何称呼,其常见的弹窗组件绝大多数都是由以下元素组成:

弹窗体系分类

1.模态弹窗

用户在完成任务的过程中,界面会出现弹窗打断用户的操作行为,用户必须通过主动点击才可以进行下一步操作,这即是模态弹窗。

(1)对话框 Dialog/Alert

对话框是很常见的弹窗,主要在打断用户后并提供选项操作,对用户的干扰较大,通常会配备 1~3 个操作按钮,而且会把用户最期待的或产品最期待用户操作的按钮突出显示。

对话框类型的弹窗主要分为主动、被动两种触发类型,主动弹窗:信息的二次确认、输入内容、前置条件选择、风险警示等;被动弹窗:版本更新、运营宣传、消息通知、系统功能授权等。

(2)动作栏 Actionbar

动作栏是通过用户主动操作后弹出的内容信息,基本都是从底部弹出,屏幕占用比例根据内容量的多少比较随意,从小区域、半屏、再到全屏随处可见。

动作栏相比对话框则能承载更多、更丰富的功能信息,在用户清晰感知当前操作及反馈的情况下,比跳转到新的页面更有安全感。

(3)浮层 Popover/Popup

浮层是指用户操作某个功能/内容后,会在附近出现一个带有视觉引导性质的弹窗,最常见的浮层就是下拉菜单/弹窗等,浮动于顶层窗口并指向触发操作的位置。

例如很多社交娱乐类型的应用右上角有一个“+”入口,里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层,为了与页面信息更好的区分,会给浮层容器加上投影,避免与底部信息混淆。

2.非模态弹窗

相比模态弹窗,非模态弹窗属较为轻量,触发后以一种非阻碍的方式呈现,不会打断用户的当前操作,主要是给予用户即时反馈,让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作,根据反馈信息的重要程度及意愿,可在一定的时间内自动消失,也可等待用户操作后消失,常见的有以下几种:

(1)提示框 Toast/Hud

用于反馈用户操作成功、警告、错误等当前状态信息,可能出现在任何位置(底部/中间/顶部),在呈现样式上,相同等级的模块统一位置、风格即可,无需用户有任何操作,出现 2s 左右自动消失。

Toast 只有纯文字提示,例如格式错误、刷新成功、删除成功等;Hud 会使用文字+图标样式,例如添加到购物车、关注成功等。

(2)提示对话框 Snackbar

Snackbar 早期只是 Android 系统的一种弹窗控件,后在 iOS、Web 前端都会使用到,可以看作是 toast 的加强版。一般只出现在屏幕底部,存在的时间比 toast 长,提供 0~1 个操作入口,可自动消失,也可与用户产生交互后消失或者跳转至其他页面。

Snackbar 反馈的重要程度强于 toast,例如,某个应用今天有重要提醒,同时又不想影响用户的其他操作,会在用户首次进入时弹出提醒,并提供关闭操作入口,等待用户通过手动关闭(部分自动关闭),加强用户记忆。

(3)通知 Notice

最有代表性的就是消息通知、系统推送,在设备未锁屏的情况下,通常从顶部弹出,停留几秒后自动消失,锁屏后,不同设备弹出的位置也有所不同。Notice 的前提是需要在应用设置中打开消息通知开关,具备应用外推送功能的,需在设备系统设置中开启通知权限。

(4)透明指示层 HUD

HUD 是一种在透明元素上通过填充、反馈用户当前交互操作的指示层,实时生效,例如视频类产品中的调整音量、亮度、控制进度条等。

以上内容分享了APP中常见的弹窗,本文章仅作个人学习笔记,如需了解详情可移步到优设网查看@大漠飞鹰CYSJ原文章。

分享
点赞2
打赏
上一篇:浅谈瓶颈期
下一篇:色彩设计指南