模态

模态是一种信息呈现状态,能以一种临时的、与用户当前情景隔离开的模式呈现内容,并且需要一个明确的操作才能退出。通过模态呈现内容可以:

  • 帮助用户专注于一个独立的任务或一组密切相关的选项。
  • 确保用户接收到关键信息,并在必要时对其进行操作。

Jietu20220409-024329-1

iOS 提供了 Alerts、Activity Views、Share Sheets 以及 Action Sheets 来实现各种系统定义的模态体验。在应用程序中呈现自定义模态内容,可以使用以下样式呈现:

  • 自动

    使用默认的样式,通常是一个选择菜单(sheet)。

  • 全屏

    覆盖上一个视图,并需要通过按钮操作来解除模态。

  • 弹窗

    在横向空间充足的常规场景下使用弹窗样式,在空间紧凑的场景下使用操作列表样式。

  • 页面菜单和表格菜单

  • 当前场景的内容

  • 其他自定义内容

    使用自定义动画在自定义的容器中呈现内容。

提示:如果在拆分视图窗格、弹出式窗口或其他非全屏视图的紧凑场景中呈现模态内容时,请使用选择菜单(sheet)的样式来展现。

使用模态时请注意以下几个方面:

  • 必要时才使用模态

    只有当用户的注意力集中在做出关键选择或执行与当前任务不同的任务时,才使用模态。

    模态使用户脱离当前的情景并需要手动关闭,因此必须在使用这个模态能带来明显效益时才使用它。

  • 为提供必要且可操作的信息保留警告弹窗

    由于警告弹窗会中断操作体验,并需要点击才能关闭,因此很重要的一点是:让用户认为这种侵入式的中断是有道理的。

  • 保持模态任务的简单、简短和专注

    如果一个模态任务太复杂,用户可能会忽略他们在进入模态环境之前暂停的任务。

    避免在应用中创建一个复杂的、功能类似于又一个应用的模态任务。

    当创建一个包含多层级视图的模态框时,请格外谨慎,因为用户可能不知道如何返回原先的步骤。

    如果模态框必须含有子视图,请提供单一的跳转路径以及明确的 “完成” 路径,避免在完成任务之外的地方使用 “完成” 按钮。

  • 为沉浸式内容或复杂的任务使用全屏模态样式

    全屏模态样式的体验可以最大限度地减少干扰,它可以很好地呈现视频、照片或相机视图,展现多步骤的任务,如标记文档或编辑照片。

  • 始终保留模态框的“关闭”按钮

    例如,可以使用“完成”或“取消”字样的按钮。

    “关闭”按钮可以确保辅助技术对模式视图的可及性,并提供一个替代解雇的手势。

  • 必要时,在关闭模态框之前让用户获得确认,以避免数据丢失

    无论用户使用手势还是按钮来关闭视图,如果操作可能导致用户生成的内容丢失,请提供一个解释当前情况的动作菜单,为用户提供解决方法 。

  • 让模态任务的内容变得更易识别

    当用户进入模态任务时,他们会从之前的使用场景中离开,并且可能不会立即返回。

    因此,提供一个清晰易懂的模态任务标题或指导性的描述文字,可以帮助用户在应用中保持清晰的定位。

  • 让模态框的视觉风格与应用相符

    例如,当模态视图包含导航栏时,它应该使用与应用程序中导航栏相同的外观样式。

  • 选择合适的过渡动画显示模态框

    使用与应用风格相符的过渡动画,,增强用户对临时情景切换的感知。

    默认过渡动画为模态框从屏幕底部垂直向上滑出,当它被关闭时向下滑动消失。

    在整个应用中统一过渡动画效果。

网页快照 https://cubox.pro/share/HukVpN