交互设计网页页面跳转 第1篇
定义
页面跳转是指当用户操作后，刷新当前页面，展示新页面内容。
表现形式
页面跳转的方式有直接跳转、左右跳转和上下跳转，这需要UI/UX设计师针对不同的页面内容，设计出如何用户心理预期的过渡形式。
优缺势
优势：不影响用户的视觉注意力，更加顺畅的衔接到下个页面，体验感保持一致。
劣势：跳转页面之后，无法保留之前的内容。
适用场景
页面内容没有关联性，相对独立的内容，例如外部链接。
当前页面内容过多，单个页面无法独立展示，需要跳转至其他页面继续展示，例如tab页切换。
偏流程性的功能页面，前后操作存在关联和影响，例如下单—支付。
用户具有明确目的性的操作，当前页有利于锁定用户注意力，例如APP中的我的主页。
总结
页面跳转是一种非常常见的交互模式，实现难度和维护成本都很低，应用范围很广。需要注意的是不要过度使用页面跳转，在页面逻辑流畅的情况下适当使用跳转即可。还有就是在新页面中保留返回上级页面的按钮，让用户可以浏览完新页面后可以回到之前的页面。
弹窗、抽屉、页面跳转都是很常见的交互模式，日常使用中应用的也较多，对于UI/UX设计师来说，需要做到逻辑顺畅、应用合理、体验统一，都会提升用户体验。随着流行趋势的不断进步，越来越多的交互模式也应运而生。
交互设计网页页面跳转 第2篇
首先，说一个比较古老的东西，叫做MPA。
在这样的模式下，页面间切换慢、不流畅的问题比较突出，尤其是在移动端。
同时，它还产生了几个小问题：
• 跳转动画：页面间的跳转无法实现转场动画效果。
• iOS右滑返产生问题，从页面1跳转到页面2，再从页面2跳转到页面3，右滑返回，会直接回到页面1再之前的页。
二、SPA
随着对移动端体验需求的提高以及技术的进步，另一种模式SPA（Single-page Application）逐渐成为主流。
SPA简单来说，就是原来在MPA中的多个html，现在被放在了一个html中，并被分成若干个片段。跳转、返回的本质变成了分段的“隐藏”与“显示”。跳转不需要反复对服务端进行请求，从而使得页面与页面之间切换更加快速流畅。
在这样的机制下，跳转与返回完全由代码控制，所以可以通过代码定义页面转场的效果、返回。
在设计转场动画时，我们需要留意的是导航栏是Native的还是H5的。如果导航栏是Native的，那H5页面不包括导航栏，它相当于是网页外的元素，不在转场效果的设计范围内。
交互设计网页页面跳转 第3篇
定义
弹窗是一种模态对话框，用于提醒或解决某个任务。
表现形式
一般是在蒙版上置顶一个窗口，窗口中有一个主体及关闭按钮。
优劣势
优势：在当前页面上的衍生操作，之前内容不会丢失，用户可以完成弹窗后继续之前的操作。
劣势：弹窗页面一般较小，承载信息量较少，只适合简单指令。
适用场景
简单内容的展示，没有过多的复杂操作，例如外卖应用的修改配送地址。
需要连续性处理信息的场景，例如批量修改信息。
辅助说明，对当前页面内容的快速扩充，例如放大查看缩略图。
总结
弹窗多处理内容较少，相对独立的页面，在不丢失信息焦点的情况下，可以快速返回上级，适合处理一次性的操作内容。值得注意的是，一般弹窗上不可再增加弹窗，在弹出弹窗后，背景页面不可继续操作，确认和关闭按钮明确，避免打开弹窗无法关闭的情况。
例如在Pixso资源库中，就有当下十分流行的超大弹窗的设计，可以自适应页面宽高，在不丢失当前页面内容的情况下，呈现更多的信息量。
交互设计网页页面跳转 第4篇
打开新WebView又分三种方式：
小帖士
以上，简单说了几种H5的跳转方式。这些跳转方式，没有绝对的对与错，我们在设计方案时，需要根据实际的业务需求与技术的限制，来整体考虑解决方案。
根据个人经验，也有几点小帖士分享给大家：
• 前后逻辑交织不复杂的单个页面，可以考虑使用新WebView打开跳转。
• 如果是一个任务型的流程，可以考虑将一个任务流包在一个WebView中，在任务内使用SPA跳转。不同的任务使用不同的WebView。保持任务之间的关系清晰明了。
• 设计上需要着重表现页面间转场动画的效果，优先考虑使用SPA跳转。
• 为防止流程过于复杂，尽量不要自定义关闭、返回的行为。保持关闭为默认的关闭行为，保持返回为默认的返回行为。
交互设计网页页面跳转 第5篇
说H5的跳转，就不得不说WebView。简单来说，WebView是在App中用于显示web内容的容器。 上文提到的MPA和SPA，都装在了这个叫做WebView的容器中。
因为Native的机制，打开新WebView的同时，之前的WebView会被自然、完整的保留。所以这时，之前的几个问题就变为：
• 跳转动画：页面间的跳转动画由WebView之间的跳转动画来决定。
• 返回后页面停留在原位置：完美支持。
• iOS右滑返回：完美支持。
不过需要注意的地方是，打开新WebView是一个资源消耗比较大的操作。如果我们在设计一个流程时，需要比较多地连续使用这种方式，需要和研发同学进行充分的沟通。