为什么iOS交互中，有的二级页面是横向切页，有的是纵向切页？

最近用手机发现一个很有意思的交互，可以看下面的GIF图。iOS中，有的二级页面是横向切页，有的是纵向切页。于是乎很想知道它们的区别，花了一晚上求助Google，有了初步的答案，跟大家分享。

iOS交互Gif

一、结论

• 纵向切页：这个不是二级页面，而是模态视图，默认使用从下至上切入。

• 横向切页：这个是常规的二级页面切换。

  
  为什么iOS交互中，有的二级页面是横向切页，有的是纵向切页？

二、模态视图（Model View）

下面引用苹果iOS 11人机交互规范来解释模态视图。

模态视图的最主要用途，是防止用户在完成必要的任务之前去做其他事情。简而言之，就是在一个用户流程中，如果有必要的任务加进来，那就要弹出模态视图，做完了再回到原有的正常流程中。

所以我们可以看到很多这样的例子。比如系统设置中，首页与Touch ID设置页，分别是上下级页面的关系，但是在进入Touch ID设置页前，先要验证密码。所以验证密码这步，就交给了模态视图。验证完了，再让你回到原有的流程中。还有我们很熟悉的淘宝，在浏览宝贝时突然来了卖家的消息，这时点进IM界面，就是用模态视图承载的，跟卖家聊完了，退出模态视图，你继续逛。下图是苹果官方用作模态视图介绍的例图。

模态视图

模态视图主要的形态有Action Sheet、Alerts、Activity View等。当模态视图出现在屏幕上时，用户必须通过点击相应按钮或者退出模态来做出选择。模态视图可以占据整个屏幕，就像一整个父试图（原文是Parent View，有交互的同学可以告诉我有没有更好的翻译），比如Popover或者部分弹出窗口。模态视图通常包括完成和取消按钮。

模态视图设计要点：

• 尽量减少使用。通常来说，用户喜欢用非线性方式与应用程序交互。当某些任务必须要完成、保存某些数据或者放弃的时候才能继续使用app的时候，你可以考虑设计一个模态视图来吸引用户的注意力。
• 提供一个明显且安全的方式来退出模态视图。确保用户退出模态视图的时候，他们能很清楚的知道自己下一步的结果。
• 确保模态视图任务简单、快速、集中注意力。不要使用模态视图在你的app中再造一个app，如果一个模态视图任务太复杂，人们在进入模态视图的时候就会丢失刚才之前进行的任务。对于创建涉及到试图层次结构的模态任务，要特别小心，因为用户很可能会忘了刚才自己在干嘛。如果一个模态任务必须包含子视图，则提供一个通过层次结构展现的单一路径和一个清晰的完成路径。不要随便使用完成按钮，除非模态任务结束了。
• 显示指定任务的标题，如果合适的话。你还可以在视图的其他部分提供更全面描述任务或指导的文本。
• 为一些关键或紧急的信息保留Alerts模式。一个Alert会打断用户流程，并且需要用户多一次点击去忽略提醒。所以一定要让用户觉得这个打断是重要且必要的。
• 尊重用户的通知设置。用户会在应用程序设置中配置来自你的应用程序的通知。你需要尊重用户的设置，不要把用户逼到去关闭系统通知。
• 不要在Popover上显示模态视图。除了Alerts外，任何东西都不能出现在Popover中。在极少数的情况下，如果你需要在Popover中触发行为后显示模态视图，你应该在模态视图显示之前关闭Popover。
• 模态视图的样式要和你的主应用和谐一致。比如，如果你的模态视图还包含导航栏，你最好保持和主应用程序相同的导航栏视觉设计。

• 选择一个合适的模态视图样式。比如下面这几种。

  
  四种模态视图
  • 全屏。覆盖整个屏幕，可以在模态视图中完成复杂的任务。
  • Page Sheet。在大屏设备上，可以覆盖大面积的底层内容。所有没被覆盖的区域都会被调暗，免得用户发生误交互。如果是在小屏设备上，那就是覆盖全屏了，而且是纵向覆盖。用于在模态视图中完成复杂任务。
  • Form Sheet。对于大屏设备，显示在屏幕中心，如果键盘处于激活状态，可以重新定位。所有没激活的区域将调暗，免得用户发生误交互。在小屏设备上，那就是覆盖全屏。主要用于收集信息。
  • 当前环境。与它的父视图相同大小。仅用于大屏设备的分屏视图、Popover或其它非全屏视图中。
• 选择适当的过度样式。使用与App和谐一致的动画切换风格，增强用户对临时环境转换的感知。默认的切换动画是垂直从屏幕底部至上切入，并在退出模态视图后原图切回。翻转式动画切换一般用于横屏切换。从视觉上看，模态视图看起来像当前视图的反面。一旦结束就会切回来。在整个App中呈现一致的动画切换风格。

三、导航

导航的设计应该是自然且“隐于无形”，除非用户觉得不符合他们的使用预期，否则他们是不会在意导航是怎么设计的。PM的工作就是需要设计一套合理的导航系统，用以支撑你的App的架构以及产品目标，而且要符合用户的使用习惯。导航应该让用户觉得自然且亲切，而且不能喧宾夺主。在iOS中，有三种导航样式，在我们这次提到的两种“切页方式”中，除了模态视图的“纵向切页”外，剩下的横向切页就是其中一种树形导航结构，又叫阶层式导航。

很好理解，用户从顶层出发，在每一层做出一个选择，直到用户想要的最终结果。如果需要改到另外一个最终页面，则需要原路返回，到合适的节点，重新做出选择，前往下一个通路。在iOS中，设置与邮件使用这种导航样式。

树形导航

• 始终提供清晰的路径结构。用户需要始终清楚他们在你的App中处于什么位置，并需要知道怎么到达他们想要的下一个目标页面。暂且不管你的导航样式，你的导航路径必须是有逻辑的、可预测的、容易跟踪的。大体上，每一屏上只给用户一条路径。如果他们需要在一屏上看到多样化的内容，可以考虑使用Action Sheet、Alerts、Popover或者模态视图。
• 设计足够简洁迅速的信息结构。让用户尽快能通过导航得到内容，最好是最少的点击、最少的操作、最少的页面层级
• 巧妙使用手势操作。用好手势操作可以使你的交互效率大大提高。比如，你可以让用户从屏幕边缘滑动回上一页。
• 使用标准导航控件。无论何时，你都要使用标准的导航控制控件，比如页面控制、Tab按键、切分控件、表格控件、集合视图、分屏视图。用户们对这些东西都很熟悉了，有助于降低用户的学习门槛。
• 使用导航条来遍历数据的层级结构。导航条的标题可以告诉用户当前页面在导航系统中的层级，返回按钮可以很轻松的让用户回到上一级。