F0526e713a41f049c3b6c7a9d4876eec
iOS · App 架构|模态

本来以为两篇文章能写完 App 架构,但在整理「模态」这部分时,发现。。。其实。。。大多数设计师都不是很懂这个概念。因此基于原文翻译,又补充了一些内容,将「模态」写成了单独的一篇。

模态(Modality)

模态是一种用于临时呈现内容的设计技巧,它与用户原来的上下文不同,需要明确的操作才能退出。以模态呈现内容可以:

  • 帮人们专注于一个独立的任务或一组紧密相关的选项

  • 确保人们获取关键信息,在必要时采取行动

iOS 为 app 提供了特定情况下使用的警示窗、活动视图(或共享菜单)和操作菜单。为了让你的 app 可自定义模态内容,iOS 13 及更高版本支持以下的呈现样式。

表单样式

表单样式就像一张卡片,覆盖在原来的内容上。未覆盖的区域变暗,以防用户与弹窗下的元素进行交互。为了帮用户记住他们在打开卡片时暂停的任务,在当前卡片后面会显示父视图或上一张卡片的顶部边缘。用户可以通过以下方式关掉卡片:

  • 从屏幕顶部向下滑动

  • 当卡片上的内容滚动到顶部时,可以从屏幕上的任意位置向下滑动

  • 轻击一个按钮

表单样式用于呈现无法实现复杂任务的非沉浸式模态内容。

表单模态示例:

全屏样式

全屏样式覆盖了整个屏幕。由于先前的视图已完全被覆盖,所以最大程度地减少了视觉干扰。用户通过点击按钮来关闭全屏模式视图。

全屏样式用于呈现沉浸式内容(例如视频、照片或相机视图),或用于适合全屏演示的复杂任务(例如标记文档或编辑照片)。

全屏模态示例:

tip:
如果要用当前页面的模态样式展示拆分视图窗格、弹窗或其他非全屏视图中的模态内容,那么在屏幕空间紧凑时,应切换为表单样式。

在这里要插一句了,到底什么是模态?是不是所有弹窗都是模态?怎么区分普通页面和全屏模态呢?

上图说明了模态和非模态弹窗的区别,最重要的一点就是模态出现时,页面的其他位置所有交互控件均不可用,非模态则不阻塞这些交互。非模态示例:

全屏模态基本是从屏幕底部弹起,没有复杂的层级结构(一般没有导航栏),专注于当下的页面内容和操作,比如上面举例的 Apple Music 音乐播放界面。

  • 合理使用模态。仅在需要将用户的注意力集中在做选择或执行与当前不同的任务上时创建模态。模态会让用户脱离当前的环境,而且需要操作才能关闭,所以应当在这样做有明显好处或必要时使用。 <br>
  • 为重要的信息、期望的行为保留警示窗。通常我们在出现问题时会使用警示窗。因为警示窗会中断用户体验,而且需要按一下才能将其消除,所以需要让用户感受到其合理性。相关的指导,请参阅警报。 <br>
  • 模态任务应简单、简短、重点突出。不要在你的 app 内再创建一个 app。如果模态太复杂,那么用户进入时,可能看不到他们暂停的任务。尤其要谨慎地创建包含视图层次结构的模态,因为用户可能会迷路而忘记了之前的步骤。如果模态中必须包含子视图,请提供包含层次结构的单一路径和可明确完成的路径。除非任务真的完成了,否则不要把 “完成” 按钮用于其他任务上。

    如果模态页面中包含了需要再弹出模态的选项入口,需要考虑是 直接叠加弹窗(下图一) 还是 先收起原模态弹窗,再弹出新的弹窗(下图二)。


    如果模态弹窗包含跳转到其他页面的入口,也需要考虑从其他页面回来之后,模态是不是仍然保留。

  • 始终保留一个可以退出模态视图的按钮。比如可以用 “完成” 或 “取消”。包含按钮能确保模态视图支持系统辅助功能,同时提供必要的移除手势作为可选交互操作。
    <br>

  • 必要时,在关闭模式视图之前进行确认,避免用户丢失数据。不管用户是使用关闭手势还是按钮来关闭视图,如果该操作可能导致用户生成的内容丢失,请提供一个操作菜单说明情况,并告诉用户恢复方法。
    <br>

  • 弹窗顶部不要出现卡片。尽管在弹窗中可以出现卡片,但弹窗顶部不应出现任何内容(除可能会出现警示窗外)。极少数情况下,需要在用户对弹窗进行操作后显示一个卡片,在那之前需先关闭弹窗。
    <br>

  • 通常需要展示定义模态任务的标题。用户进入模态时,会离开先前的上下文,因此最好明确新的内容。为了更完整地描述任务或提供指导,也可以在视图的其他部分用文字提示。
    <br>

  • 协调 app 和模态视图的设计。例如,当模式视图包含导航栏时,其外观应与 app 内的导航栏相同。
    <br>

  • 选择在 app 中有价值的模态过渡样式。使用与 app 协调的过渡样式,增强用户转换内容的意识。模态视图默认的过渡方式是从屏幕底部垂直向上滑动,关闭时则将其向下滑动。在整个应用中使用一致的模态过渡样式。

有关的开发人员指导,请参见 UIViewControllerUIPresentationController

By the way

新创建了一个知识星球:「日游所思」(目前免费)。我在这颗星球上,发布自己关于设计、产品、读书的见闻和思考,欢迎加入~

© 著作权归作者所有
这个作品真棒,我要支持一下!
核心内容:梳理总结交互设计从入门到进化的知识体系,对照体系解锁每一项技能 适合读者:零基础学交互的每个人
0条评论
top Created with Sketch.