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

发布时间:2020-01-14 09:51 | 浏览人次:浏览次数

更近牵涉到app改版的项目,针对过往的设计误区做出修正,归纳了设计规范中的弹窗规范。在手机应用程序中各种格式的弹窗成效相信大家都看过,也许抵触过某些弹窗,本文就来谈谈关于app应用弹窗设计以及弹窗的适用情景。
浅析APP应用控件:模态弹窗与非模态弹窗

一、弹窗的定义

1、弹窗作用

弹窗是为了让会员回应,需求会员与之交互的窗口。

非模态弹窗普遍被设计成用来告诉会员信息内容,而模态弹窗除了告诉会员信息内容外还需求会员进行功能操作。

2、模态弹窗

会打断会员的操作行为,强制会员必须进行操作,否则不应该进行其他操作。

(Alerts/dialog,Actionbar,Popover)

3、非模态弹窗

不会影响会员操作,会员能够不与回应,通常偶尔间限制,出现一段时间就会自动消失。

(Toast/HUD,Snackbar)

二、弹窗分类

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

Alerts/Dialog:警告框与对话框

含义:英语意为警告、对话,跟弹窗属性非常吻合,就是紧急状况,打搅会员的行为。

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

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

必须涵盖标题、涵盖1个或数个按钮。

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

作用:告知会员当前发生的状况,让会员积极选择回应。

适用:主要性较高的操作时,如退出、卸载、清空等

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

含义:英译成工具栏、操作栏

剖析:当会员激起1个操作的同时,出现此窗口。

普遍会给会员提供更多的功可选择,普遍能选用官方控件。

普遍都设计有1个默认的“取消”按钮,点击取消能够关掉弹窗。

Aciton Sheets和Activity Views是iOS上独特的交互方式。

特点是会员触发、涵盖2个或以上的按钮。

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

作用:操作列表提供一连串在当前情景下能够完结当前任务的操作,而这样的方式不会永久占用页面UI的空间。

适用:如共享功能

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

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

(以上为微博、qq、微信)

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

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

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

适用:主页位置展现一些常用操作的便捷入口。

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

含义:Toast也被称作吐司提醒,Toast是安卓系统的1个控件名词,现也软件于iOS系统中

剖析:提醒框属于一种轻量级的弹窗反馈方式,常以小弹框的方式出现,连续1-2秒自动消失,能够出目前屏幕任意位置,可是建议同一款产品尽可能采取一样位置,让会员产生统一认知,变成习惯。

提醒信息能赋予会员实时反馈,确保会员了解自己所处的状态,并能够做出相应的举措。

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

Android正统的规范中Toast:

超出目前屏幕底端。

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

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

短时间后会自动消失。

不能对Toast进行交互。

优先适用作系统提醒,不能手动操作让Toast积极消失。

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

HUD与Toast的区别:

HUD只出目前屏幕的中央,Toast则在底端;

HUD能够涵盖icon,Toast只能纯文字;

HUD普遍是毛玻璃透明,Toast普遍是灰黑或许黑色半透明;

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

(iOS音量调节)

作用:

优势:

占用屏幕空间小。

不会打断会员操作。

采取简单适用范畴广

弊端:

出现时间短,在碎片化时代留意力不聚集容易错失Toast提醒。

遮盖其他控件,但不能对Toast进行交互。

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

Snackbar:底端弹窗

Android独特的交互方式,在Google的MD规范中,将Toast和Snackbars归为一类。有些同时也有软件在iOS系统中。也可以够领会为增强版的Toast。

含义:英译成快餐、小吃。

剖析:Snackbars与toast相同是从屏幕底端向上出现,可是Snackbar不一样的是能够经过会员进行其他操作而消失。

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

三、归纳

通过探讨和了解弹窗的类别、适用范畴,才能更好地在设计中进行优化与变动,用户体验设计的关键,是一步步了解会员,然后设计出合适用户体验,达到会员心理需要的产品。把握好弹框设计规范,以免弹框设计的误区,能更好地协助你改进产品。

可是,没有十全十美的产品,所以要依据设计趋向与会员需要不断地进行更新迭代,通过会员反馈不断地改良产品体验,才是做出出色产品的前提。

通过几天的学习借鉴,写出这篇文章,期望对于大家有所协助,欢迎沟通。

上述内容就是小编今天为您带来的关于《浅析APP应用控件:模态弹窗与非模态弹窗》的全部内容,希望能对您有所帮助,我们是一家成立于北京的IT外包公司,如果您有app软件或者微信小程序需要定制开发,不妨联系我们。
免责声明:本站部分文章转载自网络,不代表本站的观点和立场,不以盈利为目的。如有侵犯公司或个人权益,本站会第一时间删除文章。我们是一家北京app开发公司,欢迎咨询免费获取思维导图!

本文地址:https://appbj.cn/article/2966/

网友热评

暂无更多评论
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

我们积累了丰富的移动互联网开发和运营经验,在开发中为客户提供更多帮助!
咨询热线:18612209195