页面的切换方向尝试性分析

为什么有些页面是从下往上弹出,而有些是从右往左切换的呢?切换方向与什么有关?本文将带你系统了解一下。

横向切换

目前最多的切换方式是横向切换,新页面从屏幕右侧向左滑入,覆盖当前页面,通过点击导航栏后退按钮(Back button)进行返回,或者通过页面右滑返回,返回过程中页面从左往右退出。

横向切换适用于几乎所有方式,一方面它有很强的页面指示元素(列表中的>,导航栏中的返回按钮)来暗指页面的跳转方向,另一方面,右滑退出在大屏手机中的普遍运用也使页面更佳趋向于横向切换。

横向切换优势在于有很强的视觉延续性和逻辑性。

视觉延续性。列表中通过页面在跳转的时候,暗示箭头(disclosure indicator)指示页面的跳转方向,并表明点击此行会跳转到子页面。状态栏一般保持颜色不变,导航栏内容发生改变,页面元素切换成父集选项中的子集。

逻辑性。通常应用的一个功能会有很多子集页面,通过横向页面的切换告知是不同页面。一步一步根据导航栏上的指示,可以退回最初页面。

横向切换最主要的形式是列表视图(Table view)。

列表(Table View)

In a hierarchical app, users navigate by making one choice per screen until they reach their destination. To navigate to another destination, users must retrace some of their steps—or start over from the beginning—and make different choices. Settings and Mail are good examples of apps that use a hierarchical structure.

页面的切换方向尝试性分析_第1张图片
层级切换.gif

列表往往是同一概念层级的集合,通过点击列表,页面不断进行深入。

Display hierarchical information. The plain table style is well suited for displaying a hierarchy of information. Each list item can lead to a different subset of information displayed in another list. Users follow a path through the hierarchy by selecting one item in each successive list. The disclosure indicator tells users that tapping anywhere in the row reveals the subset of information in a new list.

列表中每一行都可以传递到不同的子页面,暗示箭头(disclosure indicator)指示页面的跳转方向,并表明点击此行会跳转到子页面。


指示箭头

纵向切换

纵向切换的特点

  • 自下而上,通常是点击页面导航栏中(页面上方)的元素,并吸附到元素当前位置,显的更加有关联性。
  • 纵向切换运动轨迹比横向切换更长,更容易引起用户的注意力。
  • 纵向切换页面会覆盖页面底部的tab bar,页面不能够跳转,只能在完成当前页面之后才可以进行其它动作。
  • 纵向切换一般只能通过点击顶栏的按钮进行退出,退出成本比右滑退出高,更容易让用户集中在当前页面。
  • 纵向页面更强调动作的即时性。通常是通过点击一个icon,呼出一个即时任务,任务内容一般不复杂,页面结构没有层级上的深入。
页面的切换方向尝试性分析_第2张图片
纵向切换

iOS中相同于页面上滑的效果的还有Action Sheet与Modal View

页面的切换方向尝试性分析_第3张图片
Paste_Image.png

Action Sheet 相当于是最为简短的任务,完成这个任务只需要通过点击不同的选项。

Use an action sheet to:
Provide alternative ways to complete a task. An action sheet lets you to provide a range of choices that make sense in the context of the current task, without giving these choices a permanent place in the UI.

Action Sheet的作用

  • 提供一系列完成任务的可选项
  • 上滑的页面并没有盖住全部底部页面,对当前的任务有更好的情景感知
  • 完成这些任务并不需要复杂的工作,所以不需要给它们跳转额外的页面,只需在当前页面中以上滑列表的形式展现,保持在页面当前的任务流中
  • 点击可选项中的任何一项,action sheet消失或者跳转页面

Modal View
A modal view—that is, a view presented modally—provides self-contained functionality in the context of the current task or workflow.

个人理解,模态页面是一个提供完成父集页面中一个子任务的页面。

Use a modal view when you need to offer the ability to accomplish a self-contained task related to your app’s primary function.
A modal view is especially appropriate for a multistep subtask that requires UI elements that don’t belong in the main app UI all the time.

当需要提供完成一个能够单独完成任务的时候,可以使用模态页面。
模态页面特别适合与当前app中UI元素不同的多层级子任务。

模态页面相比较action sheet,页面元素不受限制,可以完成较复杂的任务。
通常展现完成该任务或者取消该任务的按钮,以此来退出页面。

新建邮件

点击右下角新建邮件,新页面从下而上滑出,但不占满整个屏幕,表示这个页面从属于父集页面。

什么时候使用纵向滑动?

1、创建任务
任务内容属于父集页面,点击icon或button,呼出新页面。因为页面运动方向是从下而上,为了保持运动的一致性,页面中如果有子页面,一般运动方向也为纵向。通过点击页面顶端取消、完成退出页面,没有返回按钮,不能右滑退出。
新建任务的页面一般处于编辑状态,和原先浏览状态页面UI元素不同。

  • 新建问题
页面的切换方向尝试性分析_第4张图片
知乎

点击右上角+按钮,页面从下而上滑入,点击X,页面退出。

  • 新建回答


    quora-回答问题

点击回答问题,页面从底部弹出,并完成页面加载,页面覆盖整个父集页面,点击取消,页面向下滑出。

  • 发起群聊
页面的切换方向尝试性分析_第5张图片
群聊
  • 微博扫一扫功能、

2、和本页其他其他内容不一样,通过使用不同页面切换方向进行切换更加强调页面跳转后内容的区别性。

twitter2.gif

3、强调页面的关注度

页面的切换方向尝试性分析_第6张图片
twitter

Twitter在聊天页面使用了页面上滑动作,退出只能通过点击cancel。整个屏幕都被聊天内容占满,导航栏也被覆盖。

你可能感兴趣的:(页面的切换方向尝试性分析)