UX用户体验设计 ·

H5页面跳转的交互设计方法

今年做了大量的H5项目,遇到了很多坑,有自家的也有第三方的,在这个过程中get到了一些之前不具备的知识,所以这一篇,就简单分享一下这方面的话题吧。

 

一、传统的MPA

首先,说一个比较古老的东西,叫做MPA。

MPA的全称是Multi-page Application,意思是整个应用(站点)由多个完整的html构成。用户在页面1点击跳转,需要向服务端请求页面2,请求成功后渲染。而用户返回时,相当于是点击了浏览器的返回,页面退回到之前的历史记录,并重新加载出来。

在这样的模式下,页面间切换慢、不流畅的问题比较突出,尤其是在移动端。

同时,它还产生了几个小问题:

• 跳转动画:页面间的跳转无法实现转场动画效果。

• 如果前一个页比较长,用户滑动到页面比较靠下方的位置后点击,返回时,页面无法默认停留在原位置。

• iOS右滑返产生问题,从页面1跳转到页面2,再从页面2跳转到页面3,右滑返回,会直接回到页面1再之前的页。

 

二、SPA

随着对移动端体验需求的提高以及技术的进步,另一种模式SPA(Single-page Application)逐渐成为主流。

SPA简单来说,就是原来在MPA中的多个html,现在被放在了一个html中,并被分成若干个片段。跳转、返回的本质变成了分段的“隐藏”与“显示”。跳转不需要反复对服务端进行请求,从而使得页面与页面之间切换更加快速流畅。

在这样的机制下,跳转与返回完全由代码控制,所以可以通过代码定义页面转场的效果、返回。

在设计转场动画时,我们需要留意的是导航栏是Native的还是H5的。如果导航栏是Native的,那H5页面不包括导航栏,它相当于是网页外的元素,不在转场效果的设计范围内。

 

三、WebView

说H5的跳转,就不得不说WebView。简单来说,WebView是在App中用于显示web内容的容器。 上文提到的MPA和SPA,都装在了这个叫做WebView的容器中。

用户点击页面中的元素进行跳转,除了前述的两种方式外,还有第三种:新打开WebView的方式。在这样的方式下,跳转的本质是H5“告诉”Native,由Native执行打开新WebView,并在新WebView中加载页面。

因为Native的机制,打开新WebView的同时,之前的WebView会被自然、完整的保留。所以这时,之前的几个问题就变为:

• 跳转动画:页面间的跳转动画由WebView之间的跳转动画来决定。

• 返回后页面停留在原位置:完美支持。

• iOS右滑返回:完美支持。

不过需要注意的地方是,打开新WebView是一个资源消耗比较大的操作。如果我们在设计一个流程时,需要比较多地连续使用这种方式,需要和研发同学进行充分的沟通。

 

四、比较特殊的Replace

前述的三种跳转,都会产生历史记录。MPA、SPA的历史记录是在H5中产生,新开WebView中的记录是在Native中产生。

在MPA或SPA中,如果跳转时使用Replace方法,它会用新页面替换之前的页面,历史记录中没有之前页面的记录。

这是一种特殊的跳转方式,在设计一些不可逆的流程时可考虑使用。

 

五、多页面回退

了解了上述的几种机制后,我们来看一个小的应用场景-多页面回退。

我们在实际业务中,经常会有这样的需求。假设我们有1、2、3三个页组成的一个流程,在页面3上有个"完成"按钮点击回到页面1。在不同的交互模式下,实现这样的跳转有着不同的机制:

1,SPA模式下的正常跳转

这种模式是3个页面都在一个WebView中。点击页面3中的“完成”按钮,回退-2,即回退2步历史记录,到页面1。

 

2, 新打开WebView

打开新WebView又分三种方式:

a,如果我们把3个页面,拆分到2个WebView中,如下图,点击完成按钮,即关闭自身所在的WebView。

b,同样是打开新的WebView,如果我们按如下图的方法拆分会稍微复杂。这时点击完成按钮,首先关闭自身所在的WebView,当页面2“意识”到自己重新被展现时,自动退回1步到页面1。

c,每次打开新的WebView,这时点击完成,回退的本质是H5“告诉”Native关闭多个WebView。需要特别注意的是,H5中实现这种方式不是天然具备的,它需要Native具有一次关闭多个WebView的能力。所以我们在设计方案时,需要了解清楚自家的Native是否有这样的能力。

 

小帖士

以上,简单说了几种H5的跳转方式。这些跳转方式,没有绝对的对与错,我们在设计方案时,需要根据实际的业务需求与技术的限制,来整体考虑解决方案。

根据个人经验,也有几点小帖士分享给大家:

• 前后逻辑交织不复杂的单个页面,可以考虑使用新WebView打开跳转。

• 如果是一个任务型的流程,可以考虑将一个任务流包在一个WebView中,在任务内使用SPA跳转。不同的任务使用不同的WebView。保持任务之间的关系清晰明了。

• 设计上需要着重表现页面间转场动画的效果,优先考虑使用SPA跳转。

• 为防止流程过于复杂,尽量不要自定义关闭、返回的行为。保持关闭为默认的关闭行为,保持返回为默认的返回行为。

 

 

 

作者:花生Design

公众号: 花生Design