手机端iOS&Android模态界面对比【2019新版】

在日常工作中，偶尔会谈及到“模态”和“非模态”，因此做了一些调研和思考 ，分享给大家。

Part1 如何理解“模态”和“非模态”？

先看一下维基百科对于“模态窗口” (Modal window)的解释：

“在计算机应用程序的用户界面设计中，模态窗口是从属于主窗口的图形控制元素。它创建一种样式，使主窗口禁用但保持可见，模态窗口作为子窗口展示在其上方。用户必须与模态窗口进行交互，才能返回父应用程序。这可以避免中断主窗口的工作流程。模态窗口有时被称为重窗口或者模态对话框，因为他们通常显示为对话框。”

“模态的反义是非模态的，非模态对话框不会锁定主窗口，用户可以在他们中间切换焦点。”

原文地址：https://en.wikipedia.org/wiki/Modal_window

再看一下iOS对于模态（modality）的定义:

“模态是一种设计方式，以临时出现的方式呈现内容，不显示在原有上下文中，并且需要明确的退出操作。以模态方式呈现内容可以：

·帮助用户专注一个独立任务或一组密切相关的选项

·确保用户接收到关键信息，必要时进行操作”

原文地址：

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

暂且总结手机端中，“模态界面”简单的判断方法为：在主界面基础上出现的界面，且必须操作（包括关闭、取消等）后才可返回主界面。本次，我把iOS和Android的模态界面找出来，做一下对比。

Part2 iOS的模态界面

iOS的模态界面主要包含：警告框Alerts、操作列Action sheets、活动视图Activity views/share sheets、弹出层Popovers，以及iOS13及更高版本会支持自定义模态界面Modal view，主要为：层Sheets或全屏Fullscreen。

1.警告框（Alerts）

提示框用来传达系统、设备、app等相关的重要信息，一般会请求用户反馈。

详细见官网地址：

https://developer.apple.com/design/human-interface-guidelines/ios/views/alerts/

2.操作列（Action sheets）

操作列是一种特殊形式的提示框，在响应一个动作或控件是显示，并提供一组与前文相关的两个或多个选项。让用户启用任务，或在执行潜在破坏性任务前再次确认。

详细见官网地址：

https://developer.apple.com/design/human-interface-guidelines/ios/views/action-sheets/

3.活动视图（Activity view）

活动是对当前内容有用的任务，如复制、喜欢、查找。点击活动可以立即执行任务，或在执行前请求更多信息。活动视图用来管理活动，根据不同的设备和场景，可以以层（sheets）或弹出气泡（popover）实现。

详细见官网地址：

https://developer.apple.com/design/human-interface-guidelines/ios/views/activity-views/

4.弹出层（Popovers）

弹出气泡是短暂视图，当你点击控件或区域是，出现在屏幕其他内容的上方。通常有一个箭头，指向其出现的位置。

注：官方指导建议不要在手机端使用此样式，在手机中使用全屏模态视图（full-screen modal view）。

详细见官网地址：

https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/

5.自定义模态界面（Modal view）

iOS13及更高版本会支持自定义模态界面，主要为：层（sheets）或全屏(Fullscreen)。

层（Sheets）

层展示为覆盖部分基础内容的卡片，并将未覆盖区域变暗，防止与其交互。

全屏(Fullscreen)

全屏样式覆盖整个屏幕，最大限度减少视觉干扰。用户需要点击一个按钮来关闭全屏模态视图。

详细见官网地址：

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

Part3 Android的模态界面

Android的模态界面主要包含：：对话框Dialog、背景Backdrop、菜单Menus、模态底部层Modal bottom sheet、侧边层Sheets:side。

1.对话框（Dialog）

出现在应用内容的上方，提供关键信息或要求作出决定。出现时，禁用所有应用功能，直到确认、解除或执行必要操作后解散。包含警告对话框 Alert dialog、简单对话框Simple dialog、确认对话框Confirmation dialog、全屏对话框Full-screen dialog。

详细见官网地址：

https://material.io/design/components/dialogs.html#

2.背景（Backdrop）

背景在APP中显示在所有内容的最下面，展示上下文和可操作内容。

背景的展开模式，为模态。可以用于导航或筛选。

官方地址：

https://material.io/design/components/backdrop.html

3.菜单（menus）

菜单是在页面上的一个临时界面展示一系列选项。

官方地址：

https://material.io/design/components/menus.html

4.模态底部层（Modal bottom sheet）

模态底部层提供了一系列选项，同时禁用了界面其余部分。可在移动设备上替代关联菜单和简单对话框。为内容、图标和动作提供了更大的空间。仅用在APP。

官方地址：

https://material.io/design/components/sheets-bottom.html#modal-bottom-sheet

5.侧边层（Sheets:side）

侧边层固定在屏幕左侧或者右侧，用于展示一些当前界面相关的额外内容。在移动端显示为模态，可用于筛选或导航等。

官方地址：

https://material.io/design/components/sheets-side.html#

Part4 同样的功能在2个系统中的界面对比

1.提示

2.单选操作

3.需确认的单选/多选操作

4.日期选择

5.复杂表单填写

6.分享or更多操作

7.筛选

整体对比如下：

不同点：

1.Android更喜欢在当前页面上弹出模态界面。Android组件中包含居中，居下、居左、居右、背景5种模态界面，而iOS只有居中和居下2种；

2.iOS的日期选择为非模态方式，其他单选使用页面方式；

3.iOS的模态界面都有明确的取消操作，Android的很多模态界面没有明确的取消操作，而是点击蒙层区域解散。

4.iOS的系统APP内，未找到复杂的筛选，主要以搜索来查找内容。Android筛选推荐使用背景（Backdrop）、侧边层（Sheets:side）

共同点：

1.警告框都使用居中弹窗形式，但iOS有些场景为避免过于打扰，会选择Action sheets的形式；

2.对于复杂编辑态，两者都选择使用全屏界面展示。

 

最后还有一个比较不常见的iOS模态界面，在iOS中较少出现居中弹窗。对比右侧的分享至Messenger（全页面形式）。

以上内容均为本人整理，如有遗漏，请留言提醒。

THANKS！

本篇文章来源于微信公众号: TripDesign