© NANA UX DESIGN 努力周更原创干货与资源分享
2020年 第 34 篇原创分享
开篇先讲个故事:
上周偶然一次和开发对对碰视觉规范的时候,一位开发问了个问题:这个对话框是做成模态还是非模态的?
老实说那一瞬间我突然有点蒙,一时半会在那里想是哪种呢?后来突然反应过来:特喵这种警示对话框99.99%不都是模态的么,怎么会有这种问题!?
那种丢人的直觉告诉我,我应该不是一个人,为了更多的铁汁未来第一时间不丢人,我打算写着一篇给大家详解几个常被搞混的一些控件与大家盲区中的一些设计规范。
![5064fc6f73a5c9a8bef9ed7cc5c1a5f8.png](https://img-blog.csdnimg.cn/img_convert/5064fc6f73a5c9a8bef9ed7cc5c1a5f8.png)
模态与非模态
先给一个最精简的定义:
模态 Modal:模态控件要求必须进行操作(关闭or确认)之后才可以进行其他界面操作。
非模态 Modeless:非模态控件的出现不影响用户继续界面操作。
它们之间最大的区别就在于用户阻断,与以下无关:
1.是不是会弹出透明遮罩层
2.控件外区域是否可点击消失
3.上面有没有操作项
然后我们来看具体的应用例子:
最常见的模态与非模态的应用就是弹窗Dialog/操作栏action sheet/浮层框Popover以及提示框toast了,接下来咱们来挨个细说。
![202dd5d3bdd449a5c07b12c44efe91f2.png](https://img-blog.csdnimg.cn/img_convert/202dd5d3bdd449a5c07b12c44efe91f2.png)
弹窗99.99%(对就是这么严谨)都属于模态,因为它的出现视觉比重较大,通常都用在必须用户进行重视的操作提示中。点击控件外区域,控件不消失。
![4a88647d494f458ac53844ecca60fd69.png](https://img-blog.csdnimg.cn/img_convert/4a88647d494f458ac53844ecca60fd69.png)
操作栏与浮层框同理,99.99%属于模态,虽然它不强行要求用户进行操作,但它的出现也阻断了用户进行别的操作。点击控件外区域,控件消失(限iOS