iOS和Android规范解析——确认弹框、全屏弹框和模态视图

今天介绍三个控件，前两个是Material Design（简称MD，下同）规范中的确认弹框（Confirmation Dialog）和全屏弹框（Full-screen Dialog），后一个是iOS规范中的模态视图（Modal View）。下面先说MD中的两个。

Google Material Design Guideline

确认弹框，是需要用户明确地选择一个选项的弹窗。比如设定手机铃声时，会需要你选择一个铃声，如下图：

确认弹框示例

如果点击“取消”按钮，或者点击安卓系统的“返回”按钮，则该弹框消失，并且修改的内容不会保存；只有点击“好的（OK）”，才会保存修改的内容。因为有这个保存修改内容的功能，所以“取消”按钮就显得尤为重要：如果不加“取消”按钮，则用户会不清楚修改的内容是否被保存，比如下面这个反例：

这个弹框只有一个“完成”按钮。这使得安卓系统的“返回”按钮的功能变得模糊：“返回”按钮是“取消”的作用呢？还是“确认”修改的意思呢？

另外有一点需要格外注意：在确认弹框里，不要设计会弹出简易弹框或者简易菜单的按钮，因为这会增加它的复杂度。如果一定需要使用这些弹框，则请考虑使用全屏弹框（下面会介绍到）。

确认弹框的形式，除了刚刚提到的设定铃声的列表，还可以有很多样式：

所有的确认弹框都share一个共同点：弹框里只专注选择一个值。比如上图左侧的日期选择器，只选择日期，而不是既选择日期又选择时间。

上面是MD中对确认弹框的介绍。下面说说全屏弹框。

全屏弹框示例

全屏弹框承载了一组任务，这些任务在用户点击“保存”或者“取消”之前，都不会独自生效（对，就是捆绑式销售的意思 ）。在全屏弹框里，各种弹框都可以弹弹弹。全屏弹框是所有弹框中，唯一允许弹框上面有弹框的情况；一般情况下，除非是警告框，否则所有弹框都不能在别的弹框之上出现。

至于何时使用全屏弹框，有以下几个判断标准：

所需弹框包含需要输型入操作的入口，比如输入框，或者日期选择期；改动不是实时保存的，而是点击“保存”按钮之后一起打包保存；应用里没有实时保存草稿的功能；当需要进行一系列操作或设置，然后再提交它们时（其实和第二条比较相似）。

关于全屏弹框，有一个需要注意的点：顶部操作栏。顶部的操作栏，左上角一定要放置表达“取消”含义的按钮，而不是“返回”；右上角一定要放置表达“保存”的意思，而不是“关闭”。

先说左上角，下面的例子很好地说明了原因 ：

既然用户的操作不是立马生效，所以当点击左上角的“X”号，如果用户已经进行了一些操作，则应该弹出警告框提示用户：

当用户已经设置了一些选项，则点击X号时，弹出警告框提示用户将丢弃所做的更改

全屏弹框右上角表达“保存”含义的按钮，可根据场景选择不同的文案，但最好使用动词，比如“保存，发送，分享，更新，创建”等。不要使用模糊的词汇，像“完成”、“好的”（在确认弹框可以用，全屏弹框不能用）、“关闭”。下面是个反例：

右上角的“关闭”按钮对操作的结果表意模糊

关于全屏弹框的标题，MD也给出了建议：标题要简短。如果想要使用随使用场景变化而变化的文案作为标题（例如创建活动时“活动的名称”作为标题），那么如果不断变化的文案会出现长度很长的情况，则考虑把变化的文案放在全屏弹框的内容部分，比如下面这个例子：

左边的例子，把很长的文案“车辆责任保险”，移到了内容部分。PS：没想到MD规范中竟然出现了德语！之前在德国待了三年，竟然在这用上了德语！

左边是正确的例子，标题使用的是“新的预约”；而右边是错误的情况，因为标题使用的是“车辆责任保险”，是具体一个预约的名称，这个名称会随着不同预约而改变。在这个例子中，名称长度太长，因此放在下面内容区域更为妥当。

以上是MD中关于全屏弹框的内容。

iOS Human Interface Guideline

在iOS中，苹果使用“模态视图”来指那些在当前页插入的“浮层页面”。模态视图有下面几种形式：

模式视图的几种形式

模态视图的典型案例，是iOS中日历应用中右上角的“+”号：“创建新事件”。点击后，从下向上出现如下页面：

一般来说，模态视图包括一个“完成”按钮和“取消”按钮，但也不是100%一定。

关于模态视图，iOS规范中说有以下几点需要注意：

提供明显且安全的出口。保证用户明白他们在模态视图中的操作引起的结果是什么。让你的模态视图中的任务简单、简短、聚焦。如果要在模态视图中创建带有多层级关系的任务，一定要慎重！因为用户很容易忘记它们操作的来龙去脉。为你的任务在模态视图中展示一个标题。可以在标题栏的地方，也可以在别的地方。总之，可以清楚描述任务就好。只在展示很重要的提示信息时，才考虑使用警告框。最理想的情况是，警告框可以让用户采取行动。警告框比较打扰用户，所以有必要让用户觉得这种打扰是值得的。

以上是iOS设计规范中对模态视图的解释。其实，“模态”是个挺有趣儿的概念。下次的文章会跟大家来介绍一下（先卖个关子，嘻嘻嘻嘻）。

小结

总结一下，今天的文章，对比了MD中的确认弹框（提供选择单一值的弹框）和全屏弹框（可让用户完成一组任务，弹框上面可以出现别的弹框），以及iOS中的模态视图（让用户完成有聚焦的任务，或者提供一些列选项，比如全屏播放器中从侧边展开的操作栏）。

欢迎留言讨论。讨论会让我们更清楚这些控件。

#关于作者#

新设计青年，微信公众号：新设计青年。爱奇艺高级交互设计师。德国海龟一枚，曾任职于腾讯微生活、网易、宜信等公司。

文章作者系 @新设计青年 .