浅析APP控件:模态弹窗与非模态弹窗

简介: 浅析APP控件:模态弹窗与非模态弹窗 在手机app应用中各种格式的弹窗效果相信大家都看过,此次分享就来谈谈关于app弹窗设计以及弹窗的适用情景。 一、弹窗的定义 1、弹窗作用 弹窗是为了让用户回应,需要用户与之交互的窗口。

浅析APP控件:模态弹窗与非模态弹窗

在手机app应用中各种格式的弹窗效果相信大家都看过,此次分享就来谈谈关于app弹窗设计以及弹窗的适用情景。

一、弹窗的定义

1、弹窗作用

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

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

2、模态弹窗

会打断用户的操作行为,强制用户必须进行操作,否则不可以进行其他操作。
(Alerts/dialog,Actionbar,Popover)

3、非模态弹窗

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

二、弹窗分类

以下将以各类弹窗的含义、作用、适用来进行浅析

Alerts/Dialog:警告框与对话框

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

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

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

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

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

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

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

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

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

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

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

Aciton Sheets(动作菜单/动作面板/行动列表)和Activity Views是iOS上特有的交互形式,其特性如下:

是由用户操作后触发的一种特定的模态弹出框 ,呈现一组与当前情境相关的两个或多个选项。用户可以使用Action Sheet启动某个任务,或者确认是否开始执行某个可能具有破坏性的操作。Action Sheet属于iOS规范,近年来Android平台也出现了类似功能的控件。

actionbar

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

适用:如分享功能
action_sheet_style

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

含义:意为弹出窗口,像气泡一样浮动于顶层窗口

剖析:当用户点击某个控件或者某个区域时浮出的半透明或者不透明的弹窗窗口,不会对用户所在位置进行跳转。

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

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

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

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

剖析:提示框属于一种轻量级的弹窗反馈形式,常以小弹框的形式出现,持续1-2秒自动消失,可以出现在屏幕任意位置。

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

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

Android正统的规范中Toast:

出现在屏幕底部。

只能放文字不能带图标,文字要精简不宜太长。

不是模态的,可以透过Toast对其他控件进行操作。

短时间后会自动消失。

不能对Toast进行交互。

优先适用于系统提示,不能手动操作让Toast主动消失。

(以上为今日头条、微博、即刻)

HUD与Toast的区别:

HUD只出现在屏幕的中央,Toast则在底部;

HUD可以包含icon,Toast只能纯文字;

HUD一般是毛玻璃透明,Toast一般是灰黑或者黑色半透明;

HUD中内容可以变化(如调节音量时),Toast中内容不可变化

HUD_TOAST

作用:

优点:

  1. 占用屏幕空间小。
  2. 不会打断用户操作。
  3. 使用简单适用范围广

缺点:

  1. 出现时间短,在碎片化时代注意力不集中容易错过Toast提示。
  2. 遮盖其他控件,但不能对Toast进行交互。

适用:提示不需要的反馈信息,如刷新后的成功状态。

Snackbar:底部弹窗

Android特有的交互形式,在Google的MD规范中,将Toast和Snackbars归为一类。有些时候也有应用在iOS系统中,也可以理解为加强版的Toast。

含义:译为快餐、小吃。

剖析:Snackbars与toast一样是从屏幕底部向上出现,但是Snackbar不同的是可以经过用户进行其他操作而消失。

适用:较多适用于撤销操作。
snackbar

三、总结

通过此次分享,希望能够帮助QA同学更好的了解我们产品内的控件。通过分析和了解弹窗的类别、适用范围,才能更好地在日常测试工作中了解RD描述App控件的专业术语、能够在提交bug时描述的更为专业和清楚。

相关文章
|
6月前
|
测试技术 UED Python
App自动化测试:高级控件交互技巧
Appium 的 Actions 类支持在移动应用自动化测试中模拟用户手势,如滑动、长按等,增强交互性测试。ActionChains 是 Selenium 的概念,用于网页交互,而 Actions 专注于移动端。在Python中,通过ActionChains和W3C Actions可以定义手势路径,例如在手势解锁场景中,先点击设置,然后定义触点移动路径执行滑动解锁,最后验证解锁后的元素状态。此功能对于确保应用在复杂交互下的稳定性至关重要。
134 5
|
6月前
|
XML Java Android开发
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
114 1
|
6月前
|
测试技术 Python
App自动化测试中,如何更好地处理弹窗?
在App自动化测试中,处理弹窗异常是保证测试稳定性和可靠性的重要环节。当遇到广告弹窗、升级提示等不定时出现的UI元素时,可以采用黑名单处理方法,如上述Python代码示例,通过尝试点击黑名单中的元素来避免干扰。同时,利用异常处理装饰器可以增强函数功能,保持代码整洁,当异常发生时记录日志、截图并保存页面源代码,便于问题排查。这两种策略能有效提升测试的效率和质量。
108 0
|
6月前
|
XML Java Android开发
Android Studio App开发中高级控件下拉列表Spinner的讲解及实战(附源码 超详细必看)
Android Studio App开发中高级控件下拉列表Spinner的讲解及实战(附源码 超详细必看)
264 0
|
机器学习/深度学习 人工智能 分布式计算
基于YOLOv5算法的APP弹窗检测方案
基于YOLOv5算法的APP弹窗检测方案
|
XML JavaScript 测试技术
软件测试|App自动化控件定位
软件测试|App自动化控件定位
100 0
软件测试|App自动化控件定位
|
XML 存储 缓存
Android 天气APP(三十一)每日提醒弹窗
Android 天气APP(三十一)每日提醒弹窗
146 0
Android 天气APP(三十一)每日提醒弹窗
|
XML JavaScript Java
app自动化测试(Android)--App 控件定位
app自动化测试(Android)--App 控件定位
174 0
app自动化测试(Android)--App 控件定位
安装APK时弹窗提示“Detected problems with app native libraries”
安装APK时弹窗提示“Detected problems with app native libraries”
141 0
|
存储 XML 缓存
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
205 0
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整

热门文章

最新文章