图文版 WWDC 设计分会：iOS 13 设计新特性（2）

​Hello 周三午安，热了哦。从小到大每到这种季节总会幻想被一缸冰镇酸梅汤从头浇到尾的样子，高兴了还张嘴喝几口，冰块稀里哗啦地碎了一地那样。

上周开始尝试通过全场译文及对应关键帧截屏的方式对 WWDC 期间一些重要的设计分会进行记录和解析。我个人还蛮喜欢这种形式，可以充分挖掘官方设计团队提供的重要信息，又可以图文并茂。

在第一期当中，我们跟随主持人 Mike Stern 了解了 iOS 13 深色模式的相关要点，包括语义化颜色、材质、控件新样式、SF Symbols 等，错过的同学不妨稍作回顾。今天继续，来了解新的卡片风格面板与情境化菜单。

卡片风格模态面板

模态视图通常被称作“面板”，因为它们向上滑出并覆盖屏幕的呈现方式会给人们带来这样的感知。这样的转场动效可以帮助人们理解当前状态切换的过程。

iOS 13 带来了新的卡片风格模态面板。作为新的默认模态面板样式，卡片将被运用到整个 iOS 系统当中。

卡片风格的好处在于，你可以瞥见面板下方的界面环境，这样你便可以意识到原本的任务流程或模式仍然在进行当中；而过去的全屏模态视图很容易使人们忘记之前的任务进程。

要关闭卡片面板，你可以在卡片上的任意位置向下轻扫。该手势通常会比点击导航栏中的关闭按钮更加轻松；与右滑回退类似，下拉手势在大屏设备当中也很易于通过单手实现。

说到这，或许你会有所疑问：“对于本身已经包含滚屏内容的面板来说，这个手势操作该如何实现呢？” 在这种情况下，向下轻扫首先会使内容回滚到顶部，然后继续下拉则会关闭整个卡片面板。

此外，在任何时候，你都可以从卡片顶部下拉来直接关闭面板，无论其中是否有滚屏内容。

然而，如果面板中包含需要通过纵向轻扫进行操作的控件，或是包含必须进行操作决策的逻辑，那么任何下拉关闭的操作都将被禁用，面板会自动弹回到默认的位置，譬如当我们必须通过点击“取消”或“添加”按钮来结束当前逻辑状态的时候。

此外，对于必须在结束模态之前完成操作决策的情况，你还可以通过呈现行动面板（action sheet）来禁止卡片的关闭，同时与用户进行操作确认；一举两得，非常方便。

然而，便捷的手势操作并不意味着我们不再需要为模态面板提供按钮。可视化的按钮可以一目了然地帮助人们意识到面板可以被关闭，同时对于可访问性（accessibility）设计原则来说也是必需的。此外，人们可能一时还无法习惯于通过手势来关闭面板，或是根本不想进行手势操作。对于包含滚屏内容的面板来说，直接点击按钮进行关闭确实会更加便捷；同时，明示着“确认”和“取消”逻辑的可视化按钮还可以帮助人们快速理解有哪些选项可供执行。

我们认为新的卡片面板很棒，因此会将其设置为 iOS 默认的模态视图形式。然而这并不意味着卡片面板在任何情况下都适用。例如，对于图片编辑或截屏标注一类的任务来说，你可能希望利用更多的屏幕空间进行显示，同时使视觉干扰降至最低。这种情况下，你仍然可以采用传统的全屏模态面板。

关于模态面板，还有一点需要强调：模态的用途是切换任务状态，不要仅因为喜欢它的样式和动效而使用。

譬如日历 app 当中有两种主要模式：在列表或日历网格中浏览日程，以及创建或编辑日程。你在日历中浏览所有的日程事项，选择其中的某一个来浏览详情；这是一个完整的”浏览“模式，父级视图用于呈现列表，子视图用于显示特定日程的详细信息。

当需要创建和编辑日程事项时，人们就会进入到另一个模式当中；因此我们需要用到模态面板，以便帮助人们意识到任务流程的变更。

几年前，随着 3D Touch 的引进，我们同时推出了预览弹出功能（Peek and Pop），该功能的主要目标在于对内容进行快速预览。同时，如果 app 进行了相应的支持，你还可以通过向上轻扫预览视图来唤出相关的操作选项。

而全新的情境菜单则重点关注于“行动”，相关操作菜单会即刻呈现，无需进一步操作。

情境菜单支持所有的 iOS 设备，而预览弹出功能仅支持 3D Touch，因此无法在一部分 iPad 和 iPhone 当中实现。长按或 3D Touch 均可唤出情境菜单，但 3D Touch 的速度会更快。

情境菜单由两个部分组成：针对目标内容的一组功能菜单，以及针对目标内容的预览视图；其中预览视图是可选项，可以提醒人们当前的一系列操作选项所针对的内容是什么。

情境菜单的外观会随着设备尺寸及屏幕方向的变化而动态调整。在 iPhone 的竖屏模式下，预览视图与功能菜单会纵向排列；在 iPad 当中，选项数量不超过三个的功能菜单也会与预览视图纵向排列；在其他状态下，预览视图与功能菜单将会横向并排呈现。通常，情境菜单会在目标内容上方或尽可能近的地方呈现。

与 macOS 中的情境菜单相仿，你可以为菜单当中的选项进行排序。尽可能将最为重要或是高频的菜单项置于顶端，以便用户快速发现和操作。此外，你还可以通过分隔线为选项进行分组，例如将“剪切”、“复制”、“粘贴”等高度相关的操作分为一组。

iOS 中的情境菜单同样具有层级属性，这意味着你可以为其中的某些选项提供二级菜单。

情境菜单当中还可以包含图标，以帮助用户更直观地理解选项。

同时，对于可能产生破坏性的操作项，你还可以使用红色进行警示强化。

建议你为 app 当中所有可能产生相关操作的内容对象添加情境菜单功能。在 macOS 中，用户会期望所有的内容对象都能提供情境菜单，这样既便于操作，同时也利于发现所有可以执行的功能。同理，支持情境菜单的 iOS app 越多，用户越会期望在所有的 app 当中都能使用到该功能，这里显然也包括你的 app。

最后再强调一点：情境菜单当中提供的功能也应该能够在界面当中的其他地方被访问到。情境菜单既强大又便捷，但我们不能假设人们始终会想到去用。

我个人非常期望看到各位接下来能够将深色模式、卡片风格面板及情境菜单有效地运用到自己的 app 当中。

要获取与今天的主题相关的设计资源，你可以访问 developer.apple.com/design，你会找到更新过的 SF 字体，新的 SF Symbols app，以及升级过的 iOS Design Resources Sketch 文件；后续我们还会带来 Adobe Photoshop 和 XD 版本的相关资源。

此外，建议深入阅读 Apple Human Interface Guidelines，从而了解更多关于本次主题相关的详细设计准则。

感谢各位的时间。

视频出处：WWDC 2019 “What's New in iOS Design”，主持人：Mike Stern。