减少页面跳转的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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容