什么是模态窗?

用户头像
北京/UI设计师/5年前/930浏览
什么是模态窗?
用户头像
田园园

模态与非模态之间最大的区别就在于用户阻断


很多人在设计中会分不清楚模态和非模态是什么区别?笔者也曾有这样的疑惑,于是查阅了网上多篇文章,总结以下笔记:

先从两者的定义来看吧~

模态 Modal:模态控件要求必须进行操作(关闭or确认)之后才可以进行其他界面操作。

非模态 Modeless:非模态控件的出现不影响用户继续界面操作。


说白了它们之间最大的区别就在于用户阻断,与以下无关:

1.是不是会弹出透明遮罩层

2.控件外区域是否可点击消失

3.上面有没有操作项


然后我们来看具体的应用例子:

最常见的模态应用就是弹窗Dialog/操作栏action sheet以及浮层框Popover了,接下来咱们来挨个细说。


模态1. 弹窗Dialog


弹窗99.99%(对就是这么严谨)都属于模态,因为它的出现视觉比重较大,通常都用在必须用户进行重视的操作提示中。点击控件外区域,控件不消失。(也叫重提示并需要点击操作)



模态2.操作栏action sheet




模态3. 浮层框Popover


操作栏与浮层框同理,99.99%属于模态,虽然它不强行要求用户进行操作,但它的出现也阻断了用户进行别的操作。点击控件外区域,控件消失(限iOS,安卓可定制)。



而非模态就是我们熟悉的:提示框toast。

对,提示框100%属于非模态,非模态,非模态(分不清的事情说三遍啊),ios叫HUD,安卓叫toast和snackbar。都是安安静静地弹它的信息,用户可以选择忽略它,控件通常伴随2-3s的自动消失or滑动隐藏等交互。



另外在此想提一下,由ios专属控件演变而来的“模态卡片”,

模态卡片早在ios13的时候就被正式写入到 iOS 设计指南中。演变后可以更好同时适配安卓和ios同时使用的模态卡片,增加了滑动和隐藏的交互功能。






2
举报
|
5
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
新能源APP应用UIKit
【新年UI图标】钱包icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
智能家居中心 简约 UI设计组件库
3D渐变流体抽象矢量UI背景图
【新年UI图标】礼物/活动icon
【新年UI图标】会员icon
3D卡通UI界面图标可爱插画免扣素
高级表盘系列UI源文件
手表表盘UI系列
钱包ui模板
我的钱包-UI界面设计-app
高级感金属拟物 UI设计组件库
UI通用设计素材1
UI 登录界面设计模板包
【新年UI图标】秒杀icon
UI界面 组件
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】汽车icon
拟物风质感写实UI卡片合集源文件
科技医疗透明柜UI界面设计
【新年UI图标】旅行icon
【新年UI图标】体育icon
你可能喜欢
相关收藏夹
大家都在看
登录注册