页面跳转方式，如何设计更合理？

页面跳转在 APP 中属最常见，也是最基础的一个互细节点。我们常见的跳转方式有直接跳转、左右跳转、上下跳转、翻转、联动。

它酷炫的效果我们看过很多，但是现实中做到的又有几个呢？在设计时需要考虑好中的联性，给最符合户心预期的过渡方式，从而做最合适的设计。

视觉顺序

首先看一，我们的视觉「阅读顺序」是：左→右，上→。因此延伸目前 APP 最见的两种页面跳转方式：左右跳转，上跳转。

直接跳转

直接跳转是最原始、最简单的跳转方式，web端常见，在APP中出现少，标签切换常见。

于快速开发，Android中。

• 现难度：无；
• 维护成本：无。

左右跳转

最常见的跳转方式。（ios生效果）

• 实难度：简单；
• 维护成本：低；
• 运用景：父→→，依次类推。

常用场景：

• 对应功能的展：常以导航形式存，如团首页的食、电影、住店分流入口。
• 于内容展开：如聊天列表>聊天窗；文章列表>到文章详情。
• 对于活动广告的展开：banner图广告、弹窗广告等，比较常见。

这里有个细节要注意，是我们返回键在左上，也养成了用户习惯，左上键，与击后效，往往应该是页从右侧退出，与进入时反效。

这也是为什大部 APP 不会把入按钮放在左上角的因。

那左上角这个位置，除了给返回键当做固有的位置外。还常常用于抽屉式导航，因为抽屉式导航的方向，返回的移动方向是一致的。常见抽屉式导航的 APP 如：滴滴车、摩拜车等。

上下跳转

相对于左右跳转，上下跳转就比较难理解了。

• 实难度：简单；
• 维护成本：低。

这种跳转方式也很常见，但部分人不清楚什么时候用，这里我们简单分析下。

运用场景：

• 对当页面创建新的条目时；
• 独立启动个子内容。（如微信/支付宝小程序等）

比如我们微信聊天页，发起一聊天的时候：

还新添加群人员，新建笔记本，新建址时。

我们用微信聊天页举例：击＋号离内容时，图片、照、位、红、收藏等，都是采用下到上呈现，为这些创都是前聊天窗口性生内容。

下我们看下百度设>地址管理>添加地址：左右>左右>上下。

翻转

• 现难度：中等；
• 维护成本：低；
• 运用场景：完全切换内，换到一全新的内集合里。

见的有平好医生中间的按钮，大姨妈APP中间的商城。

联动性

• 实现难度：高；
• 维护成本：高；
• 运用场：元素之间从上级到下级关联强。

如 APP store 日荐到介绍页。类似有 Behance APP 作品展示。国内APP 很少有这联动效，为旦页结构改变，个效基本法复用。

类似于这强联动，我们会在很多概念设计稿看到，是在实 APP 是很少见到。为开发成本/维护成本都很高。

搜索页打开

这里强调下搜索页。搜索页进入往往有两形。是 icon 做入口，另是搜索框做入口。

icon做入：更像是上下关系，常用左右跳转来实现。比如：抖音。

搜索框做口：点击就获取光标的感，是一个简单的联动渡效果。比：微信、云音乐。

其它方式

关于其它方式，基本上只有极个别的 APP 中可以。

其它的方式，要结合际的情况来考究。一定要注意关联。比微信新出的浮动展开效果，因为元素要浮动，为更加贴合所以有收缩的效果。

结语

页面跳转形式上其实就是上下左右内外。考虑好之间的关性，给出最符用户心理预期的过渡方式，就可以帮助找最适的计。

欢迎添加者微信：