小程序页面层级与跳转逻辑的设计

　　文章与大家分享一下关于小程序页面层级与跳转逻辑的设计，一起来看看
　　阅读前声明：本文作者与文中所涉及到的各小程序与APP仅有参考关系，无实际利益关系
　　前段时间，负责公司的一个小程序的产品实现，几天前正式上线。过程中遇到了小程序页面层级与跳转的问题，因此特撰此文，对该小程序实现过程中遇到的该问题做一个简单的复盘。
　　在我们的小程序中，涉及到的关键交互页面主要有三个：首页、内容详情页以及收藏页面。其中，三个页面之间构成互相跳转的关系，具体的跳转逻辑如下所示（其中，首页和收藏页面作为底部栏中的图标出现）
　　三个页面之间的跳转逻辑
　　刚开始在做页面的时候，考虑到的是“页面之间的跳转逻辑有没有遗漏？”，反复确认没问题之后，就开心地跑去和开发提需求。
　　但是在开发过程中，开发反馈了一个问题：首页详情页收藏页首页（路径为1351）构成了一个闭环，如果循环打开到10个页面的时候，出现再次点击却出现了再也点不动的情况（无法打开新的页面）。原因是当前微信小程序页面最多支持10个层级（可以理解为这是一个最多可以放10个元素的栈，每新打开一个页面相当于入栈操作，返回上一个页面则相当于出栈）。
　　考虑到小程序一旦对外，我们就无法把控用户的行为。一旦用户确实打开了10个页面而导致其无法继续操作，肯定会造成用户的困扰，导致其体验不好，最终导致流失。其次，该种交互方式存在另外一个问题：如果用户打开了大于5个页面（小于10个），需要连续按多次“返回”按钮才可以退出小程序，导致用户的体验也相当地不好。
　　所以，最好的方式就是将流程优化。
　　先分析问题发生的根源：出现了一个死循环，但是要求是总步数不超过10步。
　　方案
　　经过分析，这个时候我们提出了几个方案：
　　方案一：这三个页面互相跳转的时候，调用小程序的相关方法，将之前的所有页面全部关闭之后跳转其他页面（可以理解为清空栈后在入栈）
　　评估之后该方案被否决了，会出现两个异常场景：
　　在三个页面中点击返回按钮时，都会直接退出小程序，用户体验不够好。
　　在用户在进入内容详情页时，点击返回时，潜意识会认为会返回到前一个页面，如果直接退出，用户的体验就不够好。
　　PS：（只会在安卓手机上出现此第一个场景，苹果手机无返回的按钮，因此不存在此场景。但第二个场景在苹果和安卓上均会出现体验问题）
　　方案二：使用中间页的方式，在页面数量达到5层之后，使用中间页进行页面的标记，从而协助支持更多的跳转（就是在微信的栈之外另外建一个栈来记录）。
　　但是该方案也被否决了，因为该项目要求尽快上线，开发反馈实现这个方案开发来不及。此外，依旧没有解决多次返回的问题。
　　方案三：到达第8页之后，新打开页面点击返回都会直接重定向到第8页，这样就避免了10层的限制（部分电商小程序采用了该方案，但是使用场景与我们不同）。
　　评估之后，依旧被否决了，因为如果第8页为收藏页，跳转到首页（第9页）之后，用户点击某个内容后跳转到了详情页（第10页），这时，用户点击返回，直接定向到了收藏页，和用户的预期（首页）不符，会对用户造成使用上的困扰。所以，该方案也被否决了。
　　经过思考和调研一些电商小程序（因为电商小程序的购物路径有时会突破10层的限制，这里的逻辑主要借鉴参考了某电商小程序中的首页商品详情页购物车的跳转逻辑）之后，我们意识到，其实出现返回的场景主要集中在内容详情页，所以提出了方案四：
　　在跳转到非内容详情页的时候，使用清空栈后再跳转的方案（此时再按返回就会退出小程序，涉及到首页和收藏页）。当跳转到内容详情页时，允许进行返回的操作（即出栈的操作）。
　　此时，虽然整体逻辑路径仍然和之前一致，但是在5，6步骤的时候，已经将之前所有的页面均进行了关闭。此时，最长的路径为首页商品详情页收藏页面，也就不存在超过10层的问题，同时解决了之前我们所讨论的两个问题。
　　实现过程中的注意事项
　　其实在产品设计的过程中，我们不应该忽略的点是收藏和首页按钮一样，是作为底部栏的按钮出现的，二者的地位是平等的（类似电商小程序中的购物车功能），所以才用了方案四的处理方式。
　　如果收藏页面比首页的地位低（不在底部栏而在首页上），那么用户从首页点击进入收藏页面后，潜意识认为，点击返回后进入的就会是首页，如果此时退出小程序，给用户就会造成困扰，此时也就不能用方案四的实现方式了。
　　注意，一定要注意这里的使用场景。
　　总结
　　一是在竞对分析的时候，除了要关注宏观功能点之外，还要多关注细节的处理逻辑，很多时候大方向没错的时候，细节往往会有不少忽略的地方。细节才是用户体验的主阵地，也能体现一个产品经理的功力（大佬如是说）
　　二是要多和开发测试沟通，很多时候大家在思考问题的角度不同，所以一定要学会站在对方的角度去换位思考，在确定好最终的目标与方向不变的前提下，求同存异。