弹窗发展简史(四):移动操作系统弹窗定义

前面简述了PC时代产生的和沿用至今的三种基本弹窗类型,在移动互联网迅速发展的今天,这几种基本类型的原生形态的使用场景逐渐弱化,而衍生和扩展出的其他类型弹窗形式层出不穷。但万变不离其宗,我们在见到这些弹窗的时候,还是可以很容易地把它们归类到那三种基本类型里,但移动端用户界面已经不会再简单按照这种方式进行分类了。

1. 移动端的显示界面特点决定了很多原来在PC端不需要弹窗显示的控件,在移动端囿于分辨率和物理尺寸局限性而不能沿X轴和Y轴横向扩展,只能在Z轴纵向扩展,异化为弹窗展示。

移动端很多控件由于空间限制只能层级扩展

如PC端的排序和筛选控件,在空间足够的前提下,最早是侧边栏显示的控件,后来伴随着UI风格的演化,部分出现在列表上方折叠/展开显示,但在移动端有限的空间里,只能采用侧边滑出弹窗的方式来展示。

筛选排序UI控件在PC端的展示

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.

Alerts

其中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.

iOS的模态展示

这种分类形式,基本上就涵盖了所有的弹窗形式,跟本文所阐释的“弹窗”涵盖范围基本上一致,即“仅限于模态的Z轴上的不同视觉层级”,所以并不包括气泡和Tooltips、Toast、Snackbar等虽然Z轴方向上层级不同,但并非模态显示的那些控件。

弹窗三维解剖图

而安卓系统的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.

Material Design对Dialog的定义

可以看到,这种定义比较暧昧,非常笼统且缺少指导意义。

而在更高的交互层级描述中,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.

Material Design对Confirmation的定义

所以总体来看,iOS和安卓操作系统对弹窗都从交互层面和展现层面来进行了定义,但相较而言,iOS的关于弹窗的定义则更清晰明确,更有指导意义一些。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343