赞助商
立即赞助

腾讯设计师:减少页面跳转的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个方法总结

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

相关文章

Tubik :中国人常说,民以食为天,吃这件事情很重要。好食物往往带来好心情。人每天的一日三餐是驱动人每天做各种各样事情的...
App设计
我们在分析产品设计的时候,会去思考这些产品为什么这么设计?微信作为国内头号产品,经常会被当作分析的对象。那微信为什么...
交互设计
本文作者校招期间曾面试了阿里、京东等大厂,并最终顺利拿到了京东的 offer,本文是他对两家公司面试总体的回顾及总结。 首...
交互设计
推荐算法出现之前,寻找信息的主场景是通过搜索获取。 用户通过搜索框,输入目标的关键词进行查询。这一过程是用户的主动行...
交互设计
编者按:专业的设计流程是怎样的?本文从腾讯微保的实战案例出发,为你展现一个真实有效的设计过程,看高手是如何用设计做好...
保险类设计
金木水火土,合称五行,相生相克,中国古代哲学家用它来说明世界万物的形成和关系,这是一个框架。 当我们试图描述或解释一...
定性研究
声音设计长久以来一直在影视、音乐、游戏领域发展与发挥价值,作为在阿里巴巴的体验设计师,以前并没有太多的机会去以声音作...
AlibabaDesign
随着市场上游戏品类的不断丰富,卡牌、RPG、MOBA、大逃杀等游戏类型在游戏交互方面也有了更多的表现,随之而来是玩法与界面的...
交互设计