交互这个概念我们经常提及，是指以反映系统状态或者帮助用户防错的方式给予用户反馈。因此，页面跳转方式也属于微交互的范畴。笔者为我们讲述了常见的几种页面跳转方式，以及使用原因。

开始正文之前，请大家站在开发的角度，先了解一个基础概念：移动端开发目前会有两种常用方式，即Native App与Web App，也就是我们通常提到的“原生页面与H5页面”。

原生页面：使用原生系统内核开发，直接在系统上操作。

优点：可灵活实现多种交互与视觉设置；响应速度快用户不会有跳出感；需要调用相机或指纹功能等机能操作时，原生有其不可替代性；便于维护用户数据和粘度等。

缺点： iOS迭代周期严重受限（提交官方应用商店审核）；Android兼容性差；用户使用成本相对高（这也是推出小程序的初衷之一）；开发成本相对高等。

H5页面：HTML5的简称，它是一种高级网页标准。

优点：迭代速度快；兼容性强；易于传播且使用成本低；开发成本低等。

缺点：受限于屏幕及浏览器尺寸，单屏展示空间有限；通过远程服务器获取数据，页面响应耗时长；无法满足个性化的交互设置等。

一、移动端APP页面跳转方式

今天讨论的主题是移动端APP中原生页面的跳转方式。

从交互角度定义这个概念：“在当前页面，触发某个交互动作之后，页面之间是如何转换的”。

需要明确的是：自然的跳转与承接方式、整个应用内类似场景的跳转一致性，既可以帮助用户更好的建立对产品的认知，也有利于降低用户的使用成本。

一个应用内可能包含有多种不同的跳转方式，设计师在设计考量时需要把握好两点：

1. 区分主辅：主要的页面跳转方式，以及辅助型页面跳转方式。
2. 区分场景：明确跳转前后页面之间的关系。

二、常见的页面跳转方式

1. 水平方向跳转

可以细分为两种具体的跳转方式：左右平移和覆盖平移。

（1）目前绝大多数应用，页面在水平方向切换，采用“左右平移和覆盖平移结合的方式”。

下图示例：淘宝APP，由列表页进入详情页的页面转换。仔细观察会发现页面跳转过程中：背景页面在水平方向只移动了部分距离，之后被新页面覆盖替换。

（2）也有部分应用，页面跳转主要方式是：完全的覆盖平移。

下图示例：网易严选APP，商品列表展示页面跳转至商品详情页的过程中，背景页面并未在水平方向移动，新页面滑入后覆盖在背景页面之上。

2. 竖直方向跳转

（1）如果跳转前后的页面存在比较紧密的强关联性，不想让用户感知到前后页面有明显的隔离感。适合采用“当前页面给出浮层展示新页面”的方式。

下图示例：轻芒杂志APP，在文章详情页查看本篇文章的全部评论时，文章详情页以遮盖浮层的形式展示用户的全部评论。

（2）若用户在未跳转前的页面执行了某个操作，触发的新页面目的是执行重要且临时性的操作，适合采用“在未跳转前的页面，从下至上弹出新页面，且完全遮盖”。

下图示例：印象笔记APP，创建是工具类应用的核心功能，若未完成新建笔记，则无法查看其他页面。

3. 页面收缩转换

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

4. 页面渐变消失/出现

这种方式是在原有页面上渐变出现或消失，不存在某个方向的移动，使界面操作轻量化，为用户建立一种缓压的心智。

下图示例：腾讯视频APP，在首页点击导航栏右侧“更多分类”按钮，全部频道页面在首页之上渐变出现，点击全部频道页面的关闭按钮，页面渐变消失。

5. 翻页效果

在一些读书类、电子杂志、电子报刊等移动应用中，浏览翻页可以设置为模仿现实生活中纸张翻页的效果。

如下图示例：掌阅APP，阅读书籍时页面切换的翻页效果。

6. 页面转场动效

目前很多应用中加入了操作流畅的微动效，页面之间不再是直观的某个方向滑动，而是使用动效引导用户的视线聚焦。使用动效的目的是锦上添花，在应用满足可用性和易用性的条件下，巧妙使用微交互中的动效，既可以无形中更好的引导用户操作，又可以给用户带来愉悦的使用体验。

下图示例：最美应用APP页面切换的动效。

三、总结

文章结合案例阐述目前移动应用中，原生页面之间几种常用的跳转方式，并尝试简要说明使用的原因。很多应用会综合上面举例的多种跳转方式，判断使用的页面跳转方式是否恰当，要综合考量具体的跳转场景、以及整个应用规范的一致性。

未来随着折叠屏的普及、人工智能技术与场景的完善，移动应用页面之间的跳转方式也将不断迎来新的变化，例如：目前部分应用的3D/VR/AR技术的落地。需要设计师既能在现有资源和技术的框架下提出高效方案，又能不断探索突破应对未来的变化。

作者：Viksea，微信公众号：Viksea（ID：viksea-ux）

本文由 @Viksea 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

习html5从入门到精通，零基础新手也能看懂，无论你是唱歌，画画的艺术生，还是学习机械专业的工科生，或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些？

1. HTML5可以同时在多种设备上运行，这一点是其他方式都无法做到的；

2. 在互联网中随意被分享，并且搜索时可以及时被找到；有搜索扩展性。

3. HTML5应用可以使用交互式设计来提供最佳体验，而不需要更改代码。你可以从桌面到手机到平板电脑无缝进行切换，而无需重复安装不同的应用；

4. HTML5适用于多厂商标准，建立在协议之上，是众多公司努力的结果。

所以，只要你平时上网，你看完这篇文章之后，相信你一定能够对html5有一个基本的认识。

有小白会问html5是做什么的？

这里极其简单的概括：用于实现我们能够看到的所有网站，但是不涉及到数据层面（也就是负责将一张设计好的网页图片（设计师的工作），用代码实现出来，在一个地方放置个块，给一个块设置颜色，调整字体大小，让图片动起来等）。

html5的由来

不熟悉html5的人，可能会很熟悉一个2005年以前常用的词语——网页设计与制作。

随着行业的发展，网站的制作越来越受到了人们的重视，社会化分工越来越明细。在2005年，“web前端开发工程师”这个词语开始出现在各个一线城市。2008年，html5横空出世，2009年html5这个全新的词语在北京的一些顶尖级公司出现，2012年，逐渐的普及开来，2014年迅速发展。

1. HTML5有本地存储的特征，基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。

2. 利用HTML5非常方便的在网页上添加视频和音频，不需要很复杂的代码，就能打造一款功能齐全的HTML5播放器。

3. CSS3的使用可以提供更多的CSS属性，可以制作更加丰富的渲染效果。

除了以上基本知识点以外，还需要掌握：HTML5的前端技术也是必备的，其中包括：CSS、HTML、DOM、javascript、Ajax，jquery，Vue，jquery- mobile，zepto等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理以及存在的各种Bug。

上面讲的是HTML5主要一些特征。

html5的基本组成

html5 = html + cs+ java

html指的是结构

css指样式

js即java，指的是行为

关于结构、样式、行为的理解

结构——在整个网页中有标题，有列表，有图片等。

样式 —— 标题文字的字体大小、颜色、字体；图片的大小；某个块的背景色或背景图等。

行为——在网页上四处飘动的广告；图片滚动；浏览淘宝时鼠标移动到商品时，放大商品的效果等。

容易弄混的概念

html5移动端的功能和应用程序。

对于苹果手机中的应用程序，属于ios开发，语言是oc；对于其他安卓系统的手机，需要使用java语言进行开发。html5能够做的是移动端的网页以及微信平台中的移动端网页。

前端后台的区别

无论html5还是ios，在整个网页开发流程当中，前端（html5）开发工程师，主要负责的是“前台页面制作”，“网站测试”，“修改”三个部分。

html5 与 网页设计与制作 的区别

原有的网页设计与制作，主要针对pc平台，进行网页网站的设计与制作，相对会涉及一部分设计工作，并将美工图实现成网页。通常使用的工具是网页三剑客——photoshop、flash、dreamweaver。然而，行业的发展使得“网页设计与制作”这一职业逐渐遭到了淘汰，原因主要有四：

【一】：网页设计与网页制作是两个完不同的领域，一个由美感主导，另一个则需要逻辑思维主导。对于开发人员来说，如果将宝贵的精力分散到两个不同的行业中，最后通常两方面都是半斤八两，没有实质的竞争力；

【二】：网页设计与制作，这一职业中的制作，指的是网页的结构与样式（即html+css），而当前网站中java已经占据了极大的比重，如果还停留在原有的结构和样式中，发展空间会变得很小；

【三】：网页设计与制作当中的结构实现，通常采用的是table布局；而web前端开发工程师、html5当中结构的实现，采用的是div+css方式的布局，因此，dreamweaver工具的使用也就没有什么必要性了，取而代之的是内存占用小，开发速度快的文本类编辑器。而flash，在与html5的大战当中战败，当前已经退出了移动端以及电视平台的市场争夺，在pc平台也越来越少。转言之，flash在网页制作的领域里已经江郎才尽~原来的网页三剑客只剩下一个ps，在前端工作的要求中，需要掌握基本的切图即可。

【四】移动互联网的飞速发展，也使得html5的地位迅速提升。移动设备有其特殊的开发要求，原有的网页设计与制作，早已无法满足开发的需要。

html5是移动互联网前端的主流开发语言，所以说，无论做手机网站还是在手机app应用，前端的样式都是html5开发。html5作为移动互联网主流前端开发语言，从事html5相关开发工作，就业前景真的是一片光明。在目前还没有一个前端的开发语言能取代html5的位置。

何成为一名优秀的程序员?一名程序员如何才能变得更加优秀?如果你想知道这两个问题的答案，那么很幸运你看到了这篇文章。其实我不懂技术，但是我知道一个300多万程序员都在学习的网站、都在用的App，它叫“慕课网”。

慕课网是干什么的?慕课网是“中国最大的IT实战学习平台”。简单的说，慕课网是学IT、学编程的网站，程序员新手入行、职场晋升必备!那么新手小白，如何利用慕课网学习才会更有效?技术大咖们又该如何使用慕课网?一张图告诉你打开慕课网的正确姿势!

首先，我们结合上图来详细说说新手小白们如何使用慕课网：

Step 1：请输入www.imooc.com，打开慕课网。

Step 2：请将目光锁定顶部导航栏——“课程”、“计划”。

普通小白同学，请选择进入“课程”界面。选择你要学习的技术语言，同时选择课程难度，符合需求的课程就全部展示出来了。入门学习、知识点学习，都可以在此解决。

有明确求职需求的小白同学，请选择“学习计划”。通过导航栏进入“计划”界面，web前端工程师、Android工程师、PHP工程师、Java工程师……选择心仪职位开始学习即可。系统的路径，让学习更省心、更高效。

Step 3：请将目光锁定顶部导航栏——“社区”。

在学习的过程中，小白同学们一定会遇到各种问题，这个时候，请进入“慕课社区”，在此提出问题，等待大神解答。

同时，小白们还可以在社区里与其他同学进行交流，互相促进，共同提升。

下面，我们来看看大牛们如何来使用慕课网：

Step 1：请输入www.imooc.com，打开慕课网。

Step 2：请将目光锁定顶部导航栏——“分享”、“社区”。

大牛的技术已经有了一定的积累，初级课程已经无法满足你了。那么，来看看慕课网与名企的合作课程吧!通过导航栏进入“分享”界面，阿里云、懒懒交流会、百度FEX团队、去哪儿、mongoDB……一流团队技术分享汇，大牛赶快来取经吧!

作为一名技术大牛，如果你爱分享，那么赶快进入“慕课社区”，解答小白疑惑、分享技术文章、与其他牛人一起交流经验!

如果你是一名超级技术大牛，可以直接忽略此图以及若干步骤，直接来慕课网应聘讲师吧!

慕课网能够为程序员提供什么?

上万个高质量IT视频教程，全部免费。汇集数百位互联网企业技术精英共同完成，内容涵盖前端开发、PHP、Html5、Android、IOS、Swift等IT前沿技术语言。慕课网为有志于从事IT行业和IT在职技能提升的需求人群，提供更多实战技能学习服务。