前面简述了PC时代产生的和沿用至今的三种基本弹窗类型,在移动互联网迅速发展的今天,这几种基本类型的原生形态的使用场景逐渐弱化,而衍生和扩展出的其他类型弹窗形式层出不穷。但万变不离其宗,我们在见到这些弹窗的时候,还是可以很容易地把它们归类到那三种基本类型里,但移动端用户界面已经不会再简单按照这种方式进行分类了。
1. 移动端的显示界面特点决定了很多原来在PC端不需要弹窗显示的控件,在移动端囿于分辨率和物理尺寸局限性而不能沿X轴和Y轴横向扩展,只能在Z轴纵向扩展,异化为弹窗展示。
![](https://img.haomeiwen.com/i8354347/d411eaa56fc92bc2.jpg)
如PC端的排序和筛选控件,在空间足够的前提下,最早是侧边栏显示的控件,后来伴随着UI风格的演化,部分出现在列表上方折叠/展开显示,但在移动端有限的空间里,只能采用侧边滑出弹窗的方式来展示。
![](https://img.haomeiwen.com/i8354347/f62db1b9e2eacc88.jpg)
2. 弹窗在移动端的具体分类方式也因操作系统不同而有不同的分类方法。
在移动端的不同的操作系统上,弹窗有不同的分类方式,有些甚至连命名都已经完全改变。
在iOS操作系统上,在组件层级上,弹窗被归为“Alerts(警示)”,而苹果是这样解释的:
Alerts convey important information related to the state of your app or the device, and often request feedback. An alert consists of a title, an optional message, one or more buttons, and optional text fields for gathering input. Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.
![](https://img.haomeiwen.com/i8354347/fb9fa6b7414341d9.jpg)
其中Confirm的多按钮,Prompt的输入框都变成了Alert弹窗的可选元素,三种弹窗形式都合并入“Alert”弹窗,可谓是“三分归晋,天下一统”了。
当然苹果也意识到了仅从表现层(View)定义Alert弹窗还不够,还从结构层(App Architecture)上定义了模态(Modality)的表现形式,这个是比较贴近我们所说的广义的“弹窗”概念的。
Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view. Action sheets, alerts, and activity views provide modal experiences. When a modal view appears onscreen, the user must make a choice by tapping a button or otherwise exiting the modal experience. Some apps implement modal views, such as while editing an event in Calendar or choosing a bookmark in Safari. A modal view can occupy the entire screen, an entire parent view, such as a popover, or a portion of the screen. A modal view typically includes completion and cancel buttons that exit the view.
![](https://img.haomeiwen.com/i8354347/49a223bc78f5957e.jpg)
这种分类形式,基本上就涵盖了所有的弹窗形式,跟本文所阐释的“弹窗”涵盖范围基本上一致,即“仅限于模态的Z轴上的不同视觉层级”,所以并不包括气泡和Tooltips、Toast、Snackbar等虽然Z轴方向上层级不同,但并非模态显示的那些控件。
![](https://img.haomeiwen.com/i8354347/98a48ee96937ddac.jpg)
而安卓系统的Material Design关于弹窗的定义在展现层上更加细碎,Material Design把主要的弹窗展示类型归入“Dialogs”控件,但又有很多特例归入了其他的控件形式如抽屉式导航、Sheets:Bottom、Sheets:side、等其他控件。
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
![](https://img.haomeiwen.com/i8354347/99412c7a7e028bfc.jpg)
可以看到,这种定义比较暧昧,非常笼统且缺少指导意义。
而在更高的交互层级描述中,Material Design把这些弹窗控件归入了“Confirmation”部分,当然Confirmation部分基本对应了iOS系统的模态分类,但Material Design基本没提模态交互这回事。
When a UI requests confirmation from a user, it asks if they want to proceed with the action they just took. It may be paired with a warning or critical information related to that action.Confirmation isn’t necessary when the consequences of an action are reversible or negligible. For example, if a check mark shows an image has been selected, further confirmation is unnecessary.
![](https://img.haomeiwen.com/i8354347/a0a2d0988bd78edd.jpg)
所以总体来看,iOS和安卓操作系统对弹窗都从交互层面和展现层面来进行了定义,但相较而言,iOS的关于弹窗的定义则更清晰明确,更有指导意义一些。
网友评论