页面跳转方式,如何设计更合理? - 优设网 - UISDC

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

2019/03/13 9914评论区

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

其它酷炫的效果我们看过很多,但是现实中能做到的又有几个呢?在设计时需要考虑好其中的关联性,给出最符合用户心理预期的过渡方式,从而做出最合适的设计。

视觉顺序

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

直接跳转

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

常用于快速开发,Android中常用。

  • 实现难度:无;
  • 维护成本:无。

左右跳转

最常见的跳转方式。(ios原生效果)

  • 实现难度:简单;
  • 维护成本:低;
  • 运用场景:父级→子级→子子级,依次类推。

常用场景:

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

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

这也是为什么大部分 APP 不会把入口按钮放在左上角的原因。

那么左上角这个位置,除了给返回键当做固有的位置外?;钩3S糜诔樘胧降己?,因为抽屉式导航的方向,与返回时的移动方向是一致的。常见抽屉式导航的 APP 如:滴滴打车、摩拜单车等。

上下跳转

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

  • 实现难度:简单;
  • 维护成本:低。

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

运用场景:

  • 对当前页面创建新的条目时;
  • 独立启动的一个子内容。(如微信/支付宝小程序等)

比如我们在微信聊天页,发起一个聊天的时候:

还有新添加群人员,新建笔记本,新建地址时等。

我们用微信聊天页面举例:点击+号离的内容时,图片、拍照、位置、红包、收藏等,都是采用下到上的方式呈现,因为这些创建都是对当前聊天窗口一次性产生内容。

下面我们看下百度的设置>地址管理>添加地址:左右>左右>上下。

翻转

  • 实现难度:中等;
  • 维护成本:低;
  • 运用场景:完全切换内容,换到一个全新的内容集合里。

常见的有平安好医生中间的按钮,大姨妈APP中间的商城。

联动性

  • 实现难度:高;
  • 维护成本:高;
  • 运用场景:元素之间从上级到下级关联性强。

如 APP store 每日推荐到介绍页。类似的还有 Behance APP 的作品展示。国内APP 很少有这种联动效果,因为一旦页面结构改变,整个效果基本无法复用。

类似于这种强联动,我们会在很多概念设计稿中看到,但是在实际的 APP 是很少见到的。因为开发成本/维护成本都很高。

搜索页面打开

这里强调一下搜索页面。搜索页面的进入往往有两种形式。一种是 icon 做入口,另一种是搜索框做入口。

icon做入口:更像是上下级关系,常用左右跳转来实现。比如:抖音。

搜索框做入口:点击就获取光标的感知,是一个简单的联动过渡效果。比如:微信、云音乐。

其它方式

关于其它方式,基本上只有极个别的 APP 中可以看到。

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

结语

页面跳转形式上其实就是上下左右内外??悸呛弥涞墓亓?,给出最符合用户心理预期的过渡方式,就可以帮助我们找到最合适的设计。

欢迎添加作者微信:

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址://www.35yjw.cn/page-jump-mode-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 设计师 扁平化设计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 设计师专访 字体下载 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

  • 习近平《在深入推动长江经济带发展座谈会上的讲话》单行本出版 2019-05-22
  • 科学家发明新型鼻腔喷剂 两小时内治愈感冒 2019-05-22
  • 蠢货!计划不是自下而上制订的。首先是国家战略计划,简称国家计划,其中与经济有关的,叫国民经济计划。5年计划,和一年一次的计划会议制订的计划,都是由国家计委主持制 2019-05-21
  • 廉洁勤政,不应只是挂在口头上;一味贪图享乐,对不起纳税民众. 2019-05-21
  • 政能亮政府服务,当好“店小二”而非“二大爷” 2019-05-21
  • 【在习近平新时代中国特色社会主义思想指引下——新时代 新作为 新篇章】牢记嘱托 打赢脱贫攻坚战 2019-05-21
  • 800万尾鱼苗放流天津蓟州于桥水库 2019-05-20
  • 爬窗户干瞪眼  云南文山一小区惊现倭蜂猴 2019-05-20
  • 为什么蚊子总喜欢亲你?招蚊子体质大揭秘 2019-05-20
  • 平安智慧城创新车险投保全程线上化 深圳司机开车已不用带保险单了 2019-05-19
  • 回复@张胜才2:蠢货!你当初开公司的钱是从哪来的? 2019-05-19
  • 和“看着就想笑”说说你的“8421” 2019-05-19
  • [大笑]精神心理科医生在等你…… 2019-05-18
  • 开放、变革、崛起,长城葡萄酒发展成改开40年标本葡萄酒 中国 2019-05-18
  • “音乐教父”罗大佑现身《朗读者》自曝曾因创作压力离台赴港 2019-05-18
  • 919| 303| 854| 899| 158| 606| 308| 671| 455| 395|