目录

   模态(Modality)

    基本概念

        - 模态的定义

        - 模态的作用

    模态类型

        - 卡片模态sheet

        - 全屏模态Fullscreen 

    设计指南

        - 有必要时才使用模态

        - 弹窗提供重要且理想的可操作信息

        - 模态任务应简短且重点突出

        - 始终保留一个用于关闭模态的按钮

        - 必要时，在关闭模态之前进行二次确认来避免数据丢失

        - 不要在弹出式气泡popover上显示sheet

        - 通常情况下标明模态任务的标题

        - 模态的视觉应与APP的整体保持协调

        -  选择在您的APP中有意义的模态转场过渡

        

----------------------------------------------

模态(Modality)

模态的定义

模态是以一种临时模式来呈现内容，该模式与用户先前的页面是分开的，并且需要明确的操作才能退出。

// 一个封闭的、独立的流程分支,  具体表现可以是一个弹窗(alert), 一个卡片(sheet), 或者是全屏(fullscreen).

//举个例子: 

发微博流程属于fullscreen[模态],  点击发布按钮进入编辑页, 视图全部覆盖, 打断原先刷微博的浏览状态, 需要成功发布或者明确退出编辑才能结束此流程. 该流程下的添加图片、@人、添加话题、选择可见范围等都是与发微博紧密相关的一系列选项. 

而浏览他人主页、刷微博则属于[非模态]页面. 用户行为为四处浏览, 没有遵循明确的次序,  不需要明确的退出操作.

模态的作用

- 帮助人们专注于一个独立的任务或一组紧密相关的选项  //eg. 支付流程

- 确保人们收到重要信息，并在需要时采取行动  //   警示弹窗

卡片模态sheet

- 样式: sheet卡片覆盖了底部的内容，未覆盖的区域变暗以防止与它们交互。父视图或上一张卡片的顶部边缘在当前卡片后面可见，以帮助人们记住他们在打开卡片时暂停的任务。

- 应用范围: 完成非复杂任务的非沉浸式模式。

- 如何关闭: 从屏幕顶部向下滑动; sheet卡片滚动到顶部时，可以从屏幕上的任意位置向下滑动; 点击按钮完成操作;

全屏模态Fullscreen

- 样式: Fullscreen把上一页面全部盖住，从而最大程度地减少视觉干扰。

- 如何关闭: 需要通过点击按钮来关闭Fullscreen视图。//有些也能下拉关闭

- 应用范围: 沉浸式浏览（如视频照片或相机视图），或演示复杂任务（例如标记文档或编辑照片）, 适合使用Fullscreen. //eg. 微博发布流程

💡 如果在分屏模式、弹窗或其他非全屏视图中显示模态内容，由于屏幕空间有限，应改用sheet卡片模态。

设计指南

- 有必要时才使用模态

仅有为了让用户的注意力集中在「做出选择」或「执行与当前任务不同的关键任务」时，才能使用模态。 模态体验会使人们脱离当前环境，需要采取行动才能关闭，因此只有意义明显的情况下，才有使用模态的必要。

- 弹窗提供重要且理想的可操作信息

使用弹窗一般是因为报错。 由于弹窗会中断浏览并需要轻触才能关闭，所以使用弹窗必须有充分的正当理由。 

- 模态任务应简短且重点突出

不要在APP内创建APP。 如果模态任务太复杂，当用户进入模态后可能会忘记之前暂停的任务。尤其要谨慎地创建涉及页面层次结构的模态任务，因为人们可能会迷路而忘记了如何追溯其步骤。 如果模态任务必须包含子页面，请使得「层次结构的子路径」和「完成任务的主干路径」保持清晰明确。 除了完成任务外，避免将“完成”按钮用于其他任何事情。

 - 始终保留一个用于关闭模态的按钮

例如，您可以使用“完成”或“取消”。 保留按钮确保无障碍辅助技术可以访问模态，并提供手势的替代方法。

- 必要时，在关闭模态之前进行二次确认来避免数据丢失

无论人们是使用关闭手势还是按钮，如果该动作可能导致用户生成的内容丢失，请提供一个说明情况的action sheet并为人们提供解决方法。//丢失性毁灭性操作进行二次确认, 容错性设计

- 不要在弹出式气泡popover上显示卡片模态sheet

popover的上面不应显示任何内容（除了弹窗).  在极少数情况下，当人们在popover中执行操作后需要显示sheet时，请关闭popover后再显示sheet.

- 通常情况下标明模态任务的标题

当人们进入模态任务时，他们需要从先前任务中切换出来，因此，最好使新的上下文清晰明了。 您也可以在视图的其他部分提供文本，以更完整地描述任务或提供指导。

- 模态的视觉应与APP的整体保持协调

例如，当模式视图包含导航栏时，其外观应与应用程序中的导航栏相同。

-  选择在您的APP中有意义的模态转场过渡

使用与您的APP相协调的转场过渡，并增强对临时上下文转移的意识。 默认过渡会在模态从屏幕底部垂直向上滑动，并在关闭时向下滑动。 在整个APP中使用一致的模态过渡样式。