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

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

2019/03/13 11608评论 5

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

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

视觉顺序

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

直接跳转

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

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

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

左右跳转

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

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

常用场景:

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

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

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

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

上下跳转

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

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

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

运用场景:

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

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

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

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

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

翻转

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

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

联动性

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

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

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

搜索页面打开

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

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

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

其它方式

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

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

结语

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

欢迎添加作者微信:

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

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

微信扫码

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

把好文章收藏到微信

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