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

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

今天介绍三个控件。前两者是MaterialDesign(简称MD，下同)规范中的确认对话框和全屏对话框，后者是iOS规范中的模态视图。先说两个MD吧。

谷歌材料设计指南

确认d出框是一个d出窗口，要求用户明确选择一个选项。比如设置铃声，会要求你选择铃声，如下图:

确认项目符号框示例

如果点击“取消”按钮，或者点击安卓的“返回”按钮，d出框会消失，修改的内容不会保存；只有点击确定，修改后的内容才会被保存。因为这个保存修改内容的功能，“取消”按钮就显得尤为重要:如果不添加“取消”按钮，用户就不知道修改内容是否已经保存，比如下面这个反例:

这个项目框只有一个“完成”按钮。这就让Android系统的“返回”按钮的功能变得模糊了:“返回”按钮是“取消”的功能吗？还是表示“确认”修改？

还有一点需要特别注意:在确认框中，不要设计会d出简单框或简单菜单的按钮，因为这样会增加其复杂性。如果您必须使用这些项目符号框，请考虑使用全屏项目符号框(如下所述)。

确认框的形式，除了刚才说的设置铃声列表，可以有很多种风格:

所有的确认框都有一个共同点:在框中只能选择一个值。例如，上图左侧的日期选择器只选择日期，而不是同时选择日期和时间。

以上是MD中确认d框的介绍，下面来说说全屏d框。

全屏项目符号框示例

全屏d框承载了一组任务，在用户点击“保存”或“取消”(没错，就是捆绑销售的意思)后才会自行生效。在全屏d匣里，各种d匣都可以d开。全屏子d盒是所有子d盒上都允许有子d盒的唯一情况；一般来说，除非是警告框，否则所有的项目符号框都不能出现在其他项目符号框的上面。

至于什么时候用全屏的子d框，有以下几个标准:

必填项框包含要输入的条目，如输入框或日期选择周期；更改不是实时保存，而是点击“保存”按钮后打包保存在一起；应用中没有实时保存草稿的功能；当你需要进行一系列 *** 作或者设置，然后提交(其实和第二种差不多)。

全屏d框有一点需要注意:顶部 *** 作栏。在动作栏的顶部，左上角必须放置一个表示“取消”而不是“返回”的按钮；一定要放在右上角，表示“保存”而不是“关闭”。

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

由于用户的 *** 作不会立即生效，当点击左上角的“X”时，如果用户已经进行了一些 *** 作，应该会d出一个警告框提示用户:

当用户设置了一些选项后，点击X时，会d出一个警告框，提示用户放弃更改。

全屏子d框右上角的按钮表达了“保存”的意思。可以根据场景选择不同的文案，但最好使用动词，如“保存、发送、分享、更新、创建”等。不要使用“完成”、“好”(确认d匣可以使用后，全屏d匣不可以使用)、“关闭”等模糊的词语。以下是反例:

右上角的“关闭”按钮对 *** 作结果有歧义。

关于全屏d框的标题，MD也给出建议:标题要短。如果要使用随使用场景变化的文案作为标题(例如创建活动时以“活动名称”作为标题)，那么如果不断变化的文案会很长，可以考虑将变化后的文案放在全屏d出框的内容部分，比如下面这个例子:

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

左边是正确的例子，标题用“新约会”；右边是错误的情况，因为标题用的是“车辆责任险”，是具体预约的名称。这个名字会随着不同的约会而改变。本例中名称长度过长，放在下面的内容区比较合适。

以上是MD中全屏d框的内容。

iOS人机界面指南

在iOS中，苹果用“模态视图”来指代那些插入当前页面的“浮动页面”。模态视图有以下形式:

模式视图的几种形式

模态视图的一个典型案例是iOS中日历应用右上角的“+”号:“创建新事件”。点击后，自下而上出现以下页面:

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

关于模态视图，iOS规范指出有以下几点需要注意:

提供一个明显且安全的出口。确保用户理解他们在模态视图中的 *** 作会导致什么结果。让你的模态视图中的任务简单、简短、有重点。如果你想在模态视图中创建多级关系的任务，一定要小心！因为用户很容易忘记自己 *** 作的来龙去脉。在模式视图中显示任务的标题。它可以在标题栏或其他地方。简而言之，能清楚地描述任务就好。考虑仅在显示重要提示信息时使用警告框。理想情况下，警告框将允许用户采取行动。警告框对用户的打扰更大，要让用户觉得这种打扰是值得的。

以上是iOS设计规范中对模态视图的解释。实际上，“模式”是一个有趣的概念。下次再介绍给你(先卖个锁，嘻嘻嘻)。

总结

综上所述，今天的文章比较了MD中的确认d框(提供单值d框)和全屏d框(允许用户完成一组任务，其他d框可以出现在d框上)，以及iOS中的模态视图(允许用户完成聚焦任务，或者提供一些列选项，比如全屏播放器中从侧面展开的 *** 作栏)。

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

#关于作者#

新设计青年，微信微信官方账号:新设计青年。爱奇艺高级交互设计师。一个德国海龟，曾就职于腾讯微生活、网易、宜信等公司。

文章作者是@新设计青年。未经许可，禁止复制。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/780492.html