赞助商
立即赞助

腾讯设计师:减少页面跳转的10个方法总结

UI设计3年前 (2021)更新 流光
2.5K 0 0

我们在进设计时候,往往遇到以下场景:

腾讯设计师:减少页面跳转的10个方法总结

这是信息限性和手屏幕有限性矛盾,如何把信息合理展示用户,需要我们新信息进组织分类,使信息能更高效有序地被用户认知。在进信息设计时候,我们会经常遇到「扁平化设计」这个词,在我理解看来,扁平化设计可以理解为:「精简交互步骤,用户用最少步骤完成任务」。层级太多了用户会看不懂;即使看懂,层级多了用起来也麻烦。此手上能不跳转不跳转。那我们来看看有没有办法减少跳转。

列表型、宫格型入口架构改为tab形式,跳转页面改为滑动页面

我们页承载信息少,并不展示个模块级内容时候,我们可以采取列表型、宫格型导航设计,这样可以帮助用户快速定位到相应页,是信息获取时,需要击跳转到另个页。个模块都需要展示部分内容时候,假如采用列表导航设计时,往往会导致页高度过长,用户需要滑动好几屏才能浏览完信息,这样导致信息获取效率大打折扣。此时我们考虑采用 tab 导航,把不类型内容形过 tab 形展示出来,这样做有两个好处:

  • 用户能快速掌握局内容类型;
  • 能快速切换定位目标内容进信息获取。

腾讯设计师:减少页面跳转的10个方法总结

关于全民K歌的改版思 → 《如何好型视觉改版?看全民K歌5.0 的改版验总结!》

针对用户核心路径优化,页面中露出内容、便捷入口

比如腾讯动漫APP,旧版本用户追、继续阅读时,通过点击书架,然后再次点击作品行阅读。观察用户行时,我们发用户持续阅读的行时远于浏览寻找新作品的行时,了让用户方便行追与持续阅读,我们首页出了近看的作品,让用户能速行阅读,同时采用横封的形式,以保证该栏目不会过高。

TIPS:

  • 采用这方法通常观察用户的行数据,分析用户的行径,同时也与产品沟通确好优先级与产品策略。
  • 采用种方式时,通常是结合左右滑动的手势露出更的品。

腾讯设计师:减少页面跳转的10个方法总结

内容显性化,列表内容外露显示

工具容显性设计,户见即得,快速明确的解到工具供的核心功和务;有效地减户与工具供的核心务之间的交互步骤和流程,户在当前工具的容区成与工具的核心交互。

比如淘APP中,「的淘」页面就采用了大量内容显性化的计,用户在当前页面就能快速掌握核心息。

腾讯设计师:减少页面跳转的10个方法总结

先露出一部分,滑动露出更多

在Y轴上,通过页面覆盖的形式,我们可在当前页面露一分信息,当户有兴趣时,可通过滑浏览更多信息。

比如虾音播放页,默认评论只露出标题让用户可以发现有该栏目,当用户上滑,采用动效的形式将评论页面在当前展开。

比如每日优鲜「我的页面」,用户了解会员什么权益时,可以滑动页面查看多会员信息,无需跳转入会员权益页。

腾讯设计师:减少页面跳转的10个方法总结

△ 每日优鲜

页面半覆盖

当需承载内信息时,我们往往使用「多」的形式跳转到一新的页面。那么对于「多」,一不用跳转的解决办法呢?我们可以使用页面半覆盖的形式,当点击下拉时,新的内页面展覆盖当页面。比如虾米音乐的看点页面,点击「多分类」时,下拉页面半屏覆盖,展示多的筛选条件。比如优酷视频,视频详页,点击简介或选集时,新内从下方滑出半页面覆盖。

腾讯设计师:减少页面跳转的10个方法总结

△ 虾米音乐点击多分类

腾讯设计师:减少页面跳转的10个方法总结

△ 优酷播页点击简介

键盘联动

键盘联动,如赶集屋发布,58创建简历。

我们以整合表单的信息字段,将同类型的字段进行合并,同时结合输控件,设计联动式组件,让用户在表单输时更加高效,避免用户频繁的跳跳出相同类型的输项。

腾讯设计师:减少页面跳转的10个方法总结

△ 赶集网优化前控件反复跳出

腾讯设计师:减少页面跳转的10个方法总结

△ 优化联动式键盘

采用浮层,将全跳转改为半跳转(大趋势如此)

面对需要展示更信息或下一步操需要进行跳转时,目前越来越采用从下往上浮的形式,现与原场的衔接。

比如,腾讯动漫APP阅读券支付页,NOW APP播送礼,淘宝详情页查看参数、添加物等都用了浮层半跳转形。

腾讯设计师:减少页面跳转的10个方法总结

Z轴分层覆盖,同时展现

假同时展示种内容,但对某个内容有曝光需求,或者是想让用户触达到该内容,不希望因为页面内容长导致被忽略或难以找到,以考虑采用页面Z轴级覆盖的形式,给该内容一个曝光的口。采用Z轴级覆盖的架构形式,用户的主要操变为上拉、下拉来阅读信息,减少点击跳转一类的操。

如瓣fm,瓣详情页。

腾讯设计师:减少页面跳转的10个方法总结

△ 瓣详情页

利用3D TOUCH的处理,在当前页面进行更多信息的预览(iOS)

压敏屏幕所带来3D Touch 让iPhone 交互多了个全新维度,交互从此不再局限于2D平手势,按压操作使手交互进入了3D维度,我们可以不打开 app 或者进入详情页,也能接浏览内容或调用常用功能。

使用公共元素进行转场动效

我们在立不状态动效时,可以查看它们是否有任何公共元素,并将它们联系起来,过公共元素动画来立两个状态联系。这样可以使层级衔接关联性更大,减少层级跳转感。

如APP Store中的Today。

腾讯设计师:减少页面跳转的10个方法总结

△ 图片素材来源于上

腾讯设计师:减少页面跳转的10个方法总结

△ APP Store Today

总结

我们把当前的页面可想象成一个无限拓展的维世界,分为X轴,Y轴,与Z轴,在这个维上,可进行无限的拓展。减层级上的跳转,总结起来,就是在x轴、y轴、z轴上使手做适时的收纳与展现。

腾讯设计师:减少页面跳转的10个方法总结

△ 作者:way

欢迎关注「TCD计中心」公众号:

腾讯设计师:减少页面跳转的10个方法总结

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在线少儿教育的游戏化,已成为提升小朋友满意度和调动学习积极性的常用手段。本期我们请到少儿的交互设计师与大家聊聊, 流利...
交互设计
最近的工作一直在和筛选打交道,为公司 B 端系统做了一次设计调整,去解决目前系统中筛选功能交互繁琐的问题。 首先我们先从...
B端设计
本文从What和How两个部分阐述如何输出清晰有效的设计方案,为大家建立系统的设计思路提供帮助。 很多初入职场的设计师在审美...
腾讯ISUX
王M争:前几天在 b 站上看郭德纲的相声,在下面看到一个推荐视频就点了进去,看完之后点「返回」想继续看之前的相声,结果发...
交互控件
上篇内容笔者介绍了「交互设计七大定律」的前五个,接下来笔者将剩下两个定律为大家做个实例分析。 六. 复杂性守恒定律/泰思...
交互设计
在做交互文档之前,我们先要明白什么是交互文档、为什么要做以及做了给谁看。 什么是交互文档 交互文档,即交互设计说明文档...
交互文档
面对频繁迭代、业务线众多的产品,交互设计需求量大,无法靠设计师有限的人力输出所有稿件。所以部分需求是由产品经理、运营...
交互设计
在数字时代,传统的医疗行业也在互联网科技的发展下飞快转型升级,各种数字科技辅助医疗技术,如慢病管理,医学科普,医疗辅...
3D可视化