页面流引发的思考

692 阅读6分钟

场景


在我们开发单页应用时,一定会遇到一个页面栈的问题,当我们不断的进行页面跳转,于是我们的页面变堆成了一个具有若干访问历史页面的页面栈。

这看似没有问题,因为我们pc端就是如此做的,然后可以不断的返回和前进。在上一个页面中,我们会清楚的知道这属于历史页面,状态需要刷新页面才知道是正确的。并且为了可以同时访问多个页面,我们可以把一个页面地址多次复制然后多个标签页打开(只要你的业务允许这样,语雀的同文章编辑就不允许)。

但移动端的页面访问好像没有这么舒服????本文娓娓道来

问题来了


但是,这一切到移动端变成了灾难,因为移动端没有用户可以方便或者准确的复制某些页面地址,更不清楚哪些页面可以单独访问。

而移动端更常见的业务形态是单页,或者具有一个不可逆流程的页面流。比如我们的某个答题的页面是这样:活动主页 -- 活动专场页 -- 答题 -- 结果页 ,然后结果页可分支跳转活动专场或者排行榜页 ,这里已经出现了第一个页面的回流。因为从活动主页开始,我们都是新打开页面,因此可以一直push,一直到成绩页,因为成绩页的跳转发现可以用两种方式达到想要的效果:1 push活动专场页 2 history.go(-2)

回流方式跳转


假设我们先用回流的方式,也就是说历史页面中有相应的页面,我们只要精准的后退指定页就可以了。比如成绩页跳转到活动专场页,history.go(-2) ,

这样有没有后续副作用影响呢?当然是有的,因为你用的history.go(-2),所以当你在此时的活动专场页再点返回的时候,页面栈已经没有答题页和成绩页,只能挑战活动主页。

想一想你的产品体验是不是期望这样的,如果是的,ok,这种逻辑以及体验是有效的

局限性:依赖于历史页面已经渲染过,可以直接进行页面后退回流;那么如果历史页面没有这个页面,那么就走不通。
优点:思路简单,可以重置到某个访问状态,不需要传递额外参数
缺点:丢失了中间跳过的某些页面,直接从页面历史栈进行了删除,这部分会不可逆。

push方式跳转


相比上者,我们更多习惯的是不断的push操作,比如我要跳转到活动专场页,那么我就需要知道活动专场页的信息,好在在我们的页面流中这个信息一直是请求接口所需要的,可以一直线性传递。

那么我们就push到了这个活动专场页面,然后活动专场页面的返回返回到哪里呢?如果没有定制的话,那么返回上一个页面,也就是重新回到了成绩页。

咦?好像有些不对的地方,比如下面的几条都很重要:
1 因为当你一步步返回的时候,发现竟然可以又回到了答题页?而答题的这个页面显然是不可以重复访问的,比如在有次数和时间限制的情况下。

2 发现我们的产品流程断了?为什么这么说,因为我发现我无法回到我的初始页,也就是没有办法快速查看活动页信息了,那你会怎么做?你需要连续返回4次,前提是你记得请,你push了4次,或者确认你要返回的页面就是初始页,然后返回history.go(-history.length),有些时候并没有这么幸运,我们可能就会写一些魔法数字,比如history.go(-2), what? 这是什么鬼?新来的同学一脸懵逼,为啥是-2 ?

3 也因为不断的push的原因,我们的应用会陷入过长的页面返回,无法跳出这个页面栈,谁来救救我??5555

特殊场景的不允许回退


比如我们从答题页到成绩页,而成绩页是不允许直接返回到答题页,这是不允许的!!!!

那怎么做呢?他毕竟是历史页面栈中,好在api为我们提供了replace方法,我们可以用成绩页替代答题页。问题能这么愉快的决定么?

如果你的答题页结束之后是一个新页面,而不是历史页。当然可以先算解决了;但是如果你的产品设计是答题之后,可以在专场查看更新之后的成绩呢?好像又是go(-1) 了,然后你还需要做的事情是在这个页面记得更新你的数据显示,因为对用户来说这不是页面后退,而是答题之后的结果反馈页。

方案来了

主动管理的应用跳转


相对上面灵活不可控的页面流,我们可以通过分析产品的页面流来定制每个页面的来和去。

这样的好处是,我们每个页面都清楚返回是跳转哪里,而且可以方便的进行页面的操作,比如我不管你从哪个页面过来,活动专场页的返回就是返回活动主页,活动主页的返回就是跳出结束这个流程,这样就不会有复杂难定的页面流分析是push还是go(-1),也不会陷入无限返回历史页面的繁琐甚至错误操作中。

方案要点:
1 每个页面的跳转都是追加push
2 每个页面的返回都明确定义返回地址
3 必要的多来源情况下,记录来源信息,并在返回时读取返回其来源页面

局限:
手机的手势以及案件返回还是用的历史栈的返回,对此也有两种应对方案:
1 禁用相关的操作,比如手势
2 针对返回增加监听,执行自己的返回;或者return false ,禁止其浏览器默认行为。

页面死循环无法跳出的解决


这个在微信以及app内,一般都会提供关闭的按钮 ,这个关闭就是当你不想使用这个页面,或者想重进的时候,关闭再进即可。

跳转到指定页面的方案


在多页面的流转中,我们很可能期望用户在使用过程中可以方便的跳转到某个流程中的初始或者主页或者节点页,怎么操作呢?你可以通过头部设置主页按钮,固定跳转;也可以设置悬浮,悬浮按钮也是固定跳转某些页面。

更多


你有这方面的页面跳转困扰么?还是说你目前的页面停留在三个页面内以内单向流,没有互相跳转或者回流的情况。

语雀连接:www.yuque.com/robinson/fe…