减少页面跳转的10个方法总结

遇到的问题场景：产品经理需要在页面上增加功能，设计觉得加不了。
本质：信息的无限性和手机屏幕的有限性之间的矛盾，如何把信息合理的展现给用户，作为设计师需要重新对信息进行组织分类，使信息能更高效有序地被用户认知。信息设计也需要“扁平化设计”：精简交互步骤，用户用最少的步骤就完成任务。层级多了用户会有一定几率看不懂，并且层级多了迷失导航的概率也会增加（*目前主流减少用户在单个页面操作的量，系统智能化进行页面跳转。前提是每个页面的信息已经被设计，页面间的逻辑跳转清楚直接，用户不迷失，可以起到方便用户的作用）

如何减少跳转

一、列表型、宫格型入口架构改为Tab形式，跳转页面改为滑动页面
如果页面承载信息少，并且不展示模块二级内容的时候，这时可以采取列表型、宫格型的导航设计，帮助用户快速定位到相应的页面。但是每次都需要点击跳转到另一个页面。所以列表型都会漏出部分重要信息（内容显性化），不宜太多，过多会导致页面高度过长，用户需要滑动好几屏才能浏览完信息，这样信息获取的效率大打折扣。设计可以考虑采用Tab的导航方式，把不同类型的内容通过tab的形式展示出来，这样做的好处：
1.用户能快速掌握全局内容类型；
2.能快速切换定位目标内容进行信息获取

image.png

二、针对用户核心路径优化，页面中露出内容、便捷入口
比如腾讯动漫APP，旧版本用户追更，继续阅读是通过点击书架，在此点击作品进行阅读。在观察用户行为数据（流程点的耗时）时，我们发现用户持续阅读的行为时长远大于浏览寻找新作品的行为时长。所以为了方便用户，我们在首页放出了最近看的作品，同时采用横封的形式，以保证该栏目不会过高。
*注意：
1.优化用户核心路径需要观察用户的行为数据，分析用户行为路径，同时也要与产品沟通确定好优先级和产品战略。

2.常结合左右滑动的手势漏出更多内容

image.png

3.内容显性化，列表内容外露显示
工具内容显性化设计，能让用户所见即所得，快速明确的理解到工具所提供的核心功能和服务；也能有效地减少用户与核心服务之间的交互步骤和流程，让用户在当前工具的内容区完成工具的核心交互。比如淘宝app的我的淘宝页面就采用了大量内容显性化的设计，用户在当前页面就能快速掌握到核心信息。

image.png

4.先露出一部分，滑动露出更多

在Y轴上，通过页面覆盖的形式，我们可以在当前页面露出一部分信息，当用户有兴趣时，可以通过滑动浏览更多信息。

比如58同城，每日优鲜的我的页面会员卡部分，用户想要了解更多，可以滑动页面查看更多会员信息，无需跳转进入会员权益页(这个功能一般为用户自行触发，藏着的信息不会多，附加一类。但可以当成用户在于app交互时的小惊喜点)。

每日优鲜

*注意：这类会员卡默认露出【立即续费】这样的转化口。滑动显示解决的并不只是方便用户浏览会员权益，更多是刺激推动用户的冲动购买转化。
5.页面半覆盖
当需要承载更多内容信息时，通常的处理方案是【更多按钮】跳转到详细页面，对于【更多】，如何不跳转？可以使用页面弹窗半覆盖的形式，当点击下拉时，新的内容页面展开覆盖当前页面。比如虾米音乐的看点页面，点击【更多分类按钮】，下拉页面扳平覆盖，展示更多的筛选条件。比如优酷视频，视频详情页，点击简介或选集时，新内容从下方滑出半页面覆

优酷播放详情页.gif

盖。

虾米看点.gif

6.键盘联动
表单输入时，可以整合表单的信息字段，将同类型的字段进行合并，同时结合输入控件，设计联动式组件，让用户在表单输入时更加高效，避免用户频繁的跳入跳出相同类型的输入项。
例如赶集网，58创建简历

优化前控件反复触发.gif

优化后联动式键盘.gif

7.采用浮层，将全跳改为半跳转（大趋势？？）

目前越来越多的采用了从下往上浮层的形式，实现与原场景的衔接。例如腾讯动漫APP的阅读券支付页，淘宝详情页查看参数、添加购物车都用了浮层半跳转的形式。

image.png

8.Z轴分层覆盖，同时展现
假如同时展现多种内容，但对某个内容有曝光需求，或者是想让用户触达到该位置，不希望因为页面内容过长导致被忽略或难以找到，可以考虑采用页面Z轴层级覆盖的形式，给该内容一个曝光的入口。采用Z轴层级覆盖的架构形式，用户的主要操作变为上拉、下拉来阅读信息，减少了点击跳转这一类的操作。

豆瓣详情页.gif

9.利用长按（3D Touch）功能，在当前页面进行更多信息的预览
3D Touch抑郁iphone11取消
10.使用公共元素进行转场动效
我们在建立不同状态之间的动效时，可以查看它们之间是否有任何公共元素，并将他们联系起来，通过公共元素的动画来建立两个状态之间的联系。这样可以使得层级之间的关联性更大，减少层级的跳跃感。

app store.gif

app store today.gif

总结

把页面想象成一个无限拓展的三维世界，分为X轴，Y轴，与Z轴，在这三个维度上，可以进行无限的拓展。减少层级上的跳转，总结起来就是在x轴、y轴、z轴上使用手段适时的收纳与展现

image.png