如何设计移动设备上的反向导航？本文总结了反向导航需要特别关注的5种场景以及相应的解决方案。

又到了月初了，又要和中国移动签合作协议了。但这个月在和一家世界500强企业续约的时候，发现了一些体验问题，有点不愉快。

流程是：在中国移动客户端充值页面选择金额，然后点击支付完成页面的“返回”按钮，返回充值页面。如下图：

有同学表示，支付成功后，充值任务已经完成，用户的期望应该是点击“返回”，回到APP首页，因为很少有人会不断的充值，这不是没有考虑产品需求，影响用户体验吗？

我们再来看一个页面跳转超出用户预期的例子。

从微信主页（A1）可以进入订阅号消息页（A2）和订阅号文章详情页（A3）。在A3页面点击订阅号名称后，并不是打开订阅号主页（A4），而是打开微信主页（A1），之后自动打开订阅号主页（A4）。如下图：

显然，用户在A3页面点击订阅号名，是想进入A4公众号首页的，微信为何违背用户预期，在跳转至目标页面前，自动打开一个“额外”的A1首页呢？

以上两个问题的答案就和我们今天要讨论的内容有关：移动产品的反向导航。

1.什么是反向导航？

文档将导航分为正向导航、水平导航、反向导航三种。正向导航和水平导航分别指页面的层级推进和水平推进，都是渐进式的页面导航。反向导航指按时间顺序或逐层向后打开页面。三者的结合为用户提供了完整的页面跳转控制能力。

应用以页面呈现内容。《用户体验要素》将应用分为五层，第三层“结构层”是指页面之间的结构关系。毫无疑问，无论是PC产品还是移动产品，页面流都是影响用户体验的重要方面。反向导航作为导航回页面的唯一方式，需要我们谨慎对待。

PC时代，用户通过页面的永久导航栏+面包屑+浏览器的后退键就可以轻松返回或者跳转。因此在设计产品时，只要设计好永久导航栏和面包屑，反向导航就不需要额外关注。

但在移动时代，反向导航只有一种形式：返回。没有了常驻导航栏和面包屑，如何让用户通过“返回”这个单一动作，在不同场景下“跳转”回不同的页面，往往需要精心设计。

如果依然保留PC时代的工作习惯，在设计前进流程页面后，未能梳理出反向导航的页面流，用户就会面临不断点击返回甚至“迷失”的困扰，比如前文提到的在中国移动客户端充值话费的体验。

2. 如何为移动设备设计反向导航？

下面总结了5种反向导航需要特别关注的场景，以及相应的解决方案。

1. 深层页面层次结构：使用公共页面隔离深层内容

如果微信在上述用户的操作中没有插入“首页”，那么从 A1 到 A4，再到 A4 订阅号首页点击文章，一共有 5 层级的页面。这就意味着，用户进入公众号看完文章后，至少要点击 4 次“返回”，才能回到首页聊天。如下图所示：

按照微信线上的解决方案，将最常使用的页面（即首页）插入到页面流中，页面结构改为3级。这样，从文章详情页返回首页聊天，只需要点击2次即可。如下图：

因此微信在进入订阅号主页前会自动打开主页，让用户在浏览订阅号文章的同时，轻松返回主页聊天。

使用主页隔离较深的页面是减少页面层级、方便用户快速“返回”的有效方法。

比如支付宝希望在用户扫码支付完成后，引导用户使用余额宝支付，也用同样的方式隔离层级过深的内容，让余额宝（B5）以后的页面可以快速返回首页。

2. 长任务链：分解为多个子任务

子流程的分段操作、分段保存，不仅方便用户中途退出任务后的二次操作，还减少了页面层级，避免了过多的“返回”操作。

某招聘产品的用户简历需要用户填写个人信息、几份工作经历、项目经历等，任务链比较长，如果采用一步到位的操作，不仅修改某一部分内容不方便，而且会造成页面层级过深。

单级表单任务：将页面设计成4级以上。如下图所示：

同一个任务被分解成多个子任务。如下图所示：

任务分解后，页面层级缩减为2级，每页都可以快速返回个人简历页面。同时，还可以选择子任务单独完成。（以上草图只是为了说明页面关系）

3. 对于内容驱动的产品，考虑使用内容详细信息页面同级淘汰

内容驱动型产品允许你通过内容自由跳转页面，或者围绕内容本身定义导航。这意味着你可以通过用户兴趣标签、搜索、内容分类、同一作者的内容列表等维度链接到特定内容。游戏、书籍等沉浸式应用经常使用这种导航风格。页面关系类似这样：

内容型产品的特点是同一个页面的入口可能会有很多，提供了“向上”的功能，可以返回上一级。但是“向上”进入的列表页很可能是用户从未点击过的，这会让用户感到意外。如果要使用“向上”跳转，产品必须围绕类目来组织内容。正是因为内容组织受到很大限制，几乎没有产品使用“向上”跳转。

在使用系统的“返回”按钮时，用户在跳转n次到详情页之后，还需要点击n次才能回到首页，中间出现的内容自己都已经看过了，所以不断的按返回键只会让用户很烦躁。

为了减少这种无意义的返回操作，其实可以在进入详情页 B 的时候判断来源，如果来源是其他内容的详情页 A，那么页面 A 就会被自动从页面堆栈中移除（可以认为是浏览历史）。这样就保证了页面堆栈中只有一个详情页。所以如果打开的页面流程是：首页 -> 详情页 A -> 详情页 B -> 详情页 C，在详情页 C 上点击返回，会直接返回到首页。

网易公开课就采用了这样的方式，有兴趣的可以尝试一下。

4.对于内容驱动的产品，使用弹出菜单、底部导航栏等实现反向导航

这是苹果人机界面指南推荐的做法。这里就不重复了，有兴趣的同学可以自己看指南。下面举两个例子来说明一下上面的方法。

（1）抽屉式/侧入式

点击左上角头像，向左滑动，进入功能入口。

（2）点集聚

单击一个门户即可将其展开并显示其中的功能门户。

5. 如果有独立的内容模块，至少要保证在浏览第二页后出现一个固定的关闭第三方模块的按钮

这里指的独立内容模块包括（如微信公众号、QQ看店等）、小程序、插件式第三方原生APP（支付宝里的淘票票）等。腾讯的QQ和微信已经完美解决了这个问题，但支付宝还没有给予足够的重视。

结论

任何产品信息都必须承载在页面，因此页面流是信息流的通道。在移动端，系统只提供了一个“返回”操作，这样很容易导致死角，迫使用户一步步点击“返回”才能回到主干道。

通过重新梳理页面流程、分解任务、合理使用导航栏、随时关闭子流程等方式，可以设计出比系统默认的“返回”更高效的反向导航，减少死角，或者缩短死角的长度。