破洛洛首页

破洛洛论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 247|回复: 0

[转载] 页面跳转方式,如何设计更合理?

[复制链接]

628

主题

633

帖子

1777

积分

高级会员

Rank: 4

发表于 2019-3-8 09:16:21 | 显示全部楼层 |阅读模式

[color=rgba(0, 0, 0, 0.8)]

[color=rgba(0, 0, 0, 0.8)]页面跳转在APP中属于最常见,也是最基础的一个交互细节点。

[color=rgba(0, 0, 0, 0.8)]我们常见的跳转方式:直接跳转、左右跳转、上下跳转、翻转、联动;其它酷炫的效果我们看过很多,但是现实中能做到的又有几个呢?

先讲一下:视觉顺序

[color=rgba(0, 0, 0, 0.8)]首先我们看一下,我们的视觉顺序「阅读顺序」是:左→右,上→下。因此延伸出目前APP最常见的两种页面跳转方式:左右跳转,上下跳转。

[color=rgba(0, 0, 0, 0.8)]

直接跳转

[color=rgba(0, 0, 0, 0.8)]最原始、最简单的跳转方式,web端常见,在APP中出现较少,标签切换常见,这个比较简单,没什么讲的。

[color=rgba(0, 0, 0, 0.8)]常用于快速开发,Android中常用。

[color=rgba(0, 0, 0, 0.8)]实现难度:无;

[color=rgba(0, 0, 0, 0.8)]维护成本:无。

左右跳转

[color=rgba(0, 0, 0, 0.8)]最常见的跳转方式。(ios原生效果)

[color=rgba(0, 0, 0, 0.8)]

[color=rgba(0, 0, 0, 0.8)]实现难度:简单 ;

[color=rgba(0, 0, 0, 0.8)]维护成本:低;

[color=rgba(0, 0, 0, 0.8)]运用场景:夫级→子级→子子级,依次类推。

[color=rgba(0, 0, 0, 0.8)]常用场景:

  • 对应功能的展开:常以导航形式的存在,如美团首页的美食、电影、住店等分流入口。
  • 对于内容的展开:如聊天列表>聊天窗;文章列表>到文章详情。
  • 对于活动广告的展开:banner图广告、弹窗广告等,比较常见。

[color=rgba(0, 0, 0, 0.8)]这里有个细节要注意,就是我们的返回键在左上角,也就养成了用户一种习惯,左上角的键,与点击之后的效果,往往就应该是页面从右侧退出的样子,与进入时反向的效果。

[color=rgba(0, 0, 0, 0.8)]这也是为什么大部分APP不会把入口按钮放在左上角的原因。

[color=rgba(0, 0, 0, 0.8)]

[color=rgba(0, 0, 0, 0.8)]那么左上角这个位置,除了给返回键当做固有的位置外。还常常用于抽屉式导航,因为抽屉式导航的方向,与返回时的移动方向是一致的。常见抽屉式导航APP如:滴滴打车、摩拜单车等。

上下跳转

[color=rgba(0, 0, 0, 0.8)]相对于左右跳转,上下跳转就比较难理解了。

[color=rgba(0, 0, 0, 0.8)]

[color=rgba(0, 0, 0, 0.8)]实现难度:简单 ;

[color=rgba(0, 0, 0, 0.8)]维护成本:低。

[color=rgba(0, 0, 0, 0.8)]这种跳转方式也很常见,但是大部分人不清楚什么时候用,这里我们简单分析下。

[color=rgba(0, 0, 0, 0.8)]运用场景:

[color=rgba(0, 0, 0, 0.8)]1. 对当前页面创建新的条目时;

[color=rgba(0, 0, 0, 0.8)]2. 独立启动的一个子内容。(如小程序:微信/支付宝等)

[color=rgba(0, 0, 0, 0.8)]比如我们在微信聊天页,发起一个聊天的时候:

[color=rgba(0, 0, 0, 0.8)]

[color=rgba(0, 0, 0, 0.8)]还有我们新添加群人员时,新建笔记本时,新建地址时等。




阅读全文

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|破洛洛 ( 黔ICP备14000367号  |版权声明

GMT+8, 2019-5-23 09:06 , Processed in 0.176974 second(s), 25 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表