×
天晴创艺网站建设公司。主要为北京天津全国各地提供网站建设与网页设计制作服务,欢迎大家咨询。您的IP地址是:18.232.53.231。今天是:2019年08月20日,星期二,农历己亥年(猪),七月二十,现在是:23:25:01,该休息了,祝您晚上做个好梦!

网站与APP移动端页面跳转常见设计方式

作者:天晴创艺发布时间:2019-4-1 20:50:31浏览次数:10196文章出处:北京网站设计公司

今天讨论的主题是网站与APP移动端原生页面的跳转方式。从交互角度定义这个概念:“在当前页面,触发某个交互动作之后,页面之间是如何转换的”。
需要明确的是:自然的跳转与承接方式、以及整个应用内类似场景的跳转一致性,既可以帮助用户更好的建立对产品的认知,也有利于降低用户的使用成本。
一个应用内可能包含有多种不同的跳转方式,设计师在设计考量时需要把握好两点:区分主辅(主要的页面跳转方式,以及辅助型页面跳转方式);区分场景(明确跳转前后页面之间的关系)。
常见的页面跳转方式:
1.水平方向跳转
可以细分为两种具体的跳转方式:左右平移和覆盖平移。目前绝大多数应用,页面在水平方向切换,采用“左右平移和覆盖平移结合的方式”,下图示例-淘宝APP,由列表页进入详情页的页面转换。仔细观察会发现页面跳转过程中:背景页面在水平方向只移动了部分距离,之后被新页面覆盖替换。

APP移动端页面跳转

水平方向跳转

也有部分应用,页面跳转主要方式是:完全的覆盖平移。下图示例-网易严选APP,商品列表展示页面跳转至商品详情页的过程中,背景页面并未在水平方向移动,新页面滑入后覆盖在背景页面之上。

APP移动端页面跳转

水平方向跳转

2.竖直方向跳转
(1)如果跳转前后的页面存在比较紧密的强关联性,不想让用户感知到前后页面有明显的隔离感。适合采用“当前页面给出浮层展示新页面”的方式。下图示例-轻芒杂志APP,在文章详情页查看本篇文章的全部评论时,文章详情页以遮盖浮层的形式展示用户的全部评论。

APP移动端页面跳转

竖直方向跳转

(2)若用户在未跳转前的页面执行了某个操作,触发的新页面目的是执行重要且临时性的操作,适合采用“在未跳转前的页面,从下至上弹出新页面,且完全遮盖”。下图示例-印象笔记APP,创建是工具类应用的核心功能唯有你商贸,若未完成新建笔记,则无法查看其他页面。

APP移动端页面跳转

竖直方向跳转

3.页面收缩转换
这种页面转换方式类似于Material design的悬浮按钮,点击后由一个点放大到覆盖原有页面,在新页面点击关闭,页面缩小恢复至前一个页面的默认状态。这句话解释起来有点绕口,以下图微信APP的浮窗功能示例说明。

APP移动端页面跳转

页面收缩转换

4.页面渐变消失/出现

这种方式是在原有页面上渐变出现或消失,不存在某个方向的移动。使界面操作轻量化,为用户建立一种缓压的心智。下图示例-腾讯视频APP,在首页点击导航栏右侧“更多分类”按钮,全部频道页面在首页之上渐变出现,点击全部频道页面的关闭按钮百度云,页面渐变消失。

APP移动端页面跳转

页面渐变消失/出现

5.翻页效果
在一些读书类、电子杂志、电子报刊等移动应用中,浏览翻页可以设置为模仿现实生活中纸张翻页的效果。如下图示例-掌阅APP,阅读书籍时页面切换的翻页效果。

APP移动端页面跳转

翻页效果

6.页面转场动效
目前很多应用中加入了操作流畅的微动效,页面之间不再是直观的某个方向滑动商城小程序,而是使用动效引导用户的视线聚焦。

APP移动端页面跳转

页面转场动效

使用动效的目的是锦上添花,在应用满足可用性和易用性的条件下,巧妙使用微交互中的动效,既可以无形中更好的引导用户操作,又可以给用户带来愉悦的使用体验。下图示例-最美应用APP页面切换的动效。
(郑重声明:本文版权归原作者Viksea所有,转载文章仅为传播更多信息之目的,如有侵权,请联系我们删除;如作者信息标记有误,请联系我们修改。)

文章来源:北京网站设计公司

文章标题:网站与APP移动端页面跳转常见设计方式

文本地址:https://www.bjtqcy.com/info_1272.html

收藏本页】【打印】【关闭

本文章Word文档下载:word文档下载 网站与APP移动端页面跳转常见设计方式

用户评论

客户评价

专业的网站建设、响应式、手机站微信公众号开发

© 2010-2019 bjtqcy.com 版权所有 京ICP备16050845号

关注公众号 关注公众号

进入手机版 进入手机版