【学习笔记】模态与非模态弹窗1

一. 弹窗的定义


1. 弹窗作用

弹窗是为了让用户回应,需要用户与之交互的窗口。

非模态弹窗一般被设计成用来告诉用户信息内容,而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。


弹窗分类


2. 模态弹窗

会打断用户的操作行为,强制用户必须进行操作,否则不可以进行其他操作。

(Alerts/dialog,Actionbar,Popover)


3. 非模态弹窗

不会影响用户操作,用户可以不与回应,通常有时间限制,出现一段时间就会自动消失。

(Toast/HUD,Snackbar)

二. 弹窗分类


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

含义:英文意为警告、对话,跟弹窗属性非常吻合,就是紧急状况,打扰用户的行为。

剖析:iOS中警告框称之为Alerts,作用是用来传达重要信息,并伴随着需要用户进行操作。

iOS规范中,警告框包含的元素如下:标题(必选)、描述信息(可选)、输入框(可选)、按钮(必选)。

必须包含标题、包含一个或多个按钮。

Android规范中,弹窗交互按钮需结合实际情况,不用「是/否」原则进行设计。


作用:告知用户当前发生的状况,让用户主动选择回应。

适用:重要性较高的操作时,如退出、删除、清空等。


2. Actionbar(Sheets、Acitivity View):操作栏、操作列表、活动视图

含义:英译为工具栏、操作栏。

剖析:当用户激发一个操作的时候,出现此窗口。

一般会给用户提供更多的功能选择,一般可采用官方控件。

一般都设计有一个默认的「取消」按钮,点击取消可以关闭弹窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用户触发、包含两个或以上的按钮。


以上为今日头条、iOS系统相册

作用:操作列表提供一系列在当前情景下可以完成当前任务的操作,而这样的形式不会永久占用页面UI的空间。

适用:如分享功能。


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

含义:英意为弹出窗口,浮动于顶层窗口,气泡。


以上为微博、qq、微信

剖析:当用户点击某个控件或者某个区域时浮出的半透明或者不透明的弹窗窗口。

不会对用户所在位置进行跳转。

作用:可以在当前页面进行更多的操作行为,显示/隐藏页面中的折叠信息。

适用:首页位置呈现一些常用操作的快捷入口。


4. Toast/HUD:提示框(iOS没有Toast,只有HUD)

含义:Toast也被称为吐司提示,Toast是安卓系统的一个控件名词,现也应用于iOS系统中。


剖析:提示框属于一种轻量级的弹窗反馈形式,常以小弹框的形式出现,持续1-2秒自动消失,可以出现在屏幕任意位置,但是建议同一款产品尽量使用相同位置,让用户产生统一认知,成为习惯。

提示信息能给予用户及时反馈,确保用户知晓自己所处的状态,并可以做出相应的措施。

iOS用户更习惯于在顶部感知反馈信息,不干扰用户浏览主体内容。Toast出现在屏幕顶部不会遮挡主体内容。(如花瓣、有道云笔记)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容