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

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

横向切换

目前最多的切换方式是横向切换,新页面从屏幕右侧向左滑入,覆盖当前页面,通过点击导航栏后退按钮(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.

层级切换.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,呼出一个即时任务,任务内容一般不复杂,页面结构没有层级上的深入。
纵向切换

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

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元素不同。

  • 新建问题
知乎

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

  • 新建回答


    quora-回答问题

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

  • 发起群聊
群聊
  • 微博扫一扫功能、

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

twitter2.gif

3、强调页面的关注度

twitter

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容