动效设计导航栏的「暴力美学」:京东如何用膨胀动画抢夺视线

产品: 京东猎人: 龙爪槐守望者观众: 4.6k人 时间: 2025-04-08

京东

与「京东」有关的细节还有 27查看全部

我也有新发现 我要投稿
导航栏的「暴力美学」:京东如何用膨胀动画抢夺视线导航栏的「暴力美学」:京东如何用膨胀动画抢夺视线

细节描述

龙爪槐守望者: Tabbar还能玩出什么花样?你可能早就看腻了那些红点提醒和图标闪烁。每天打开手机,所有App的底部导航栏都像复制粘贴——要么拼命加小红点,要么硬塞更多功能入口。这种设计就像把十个人塞进电梯,谁都想往前挤,结果谁都看不清。 京东这次搞了个「会呼吸的Tabbar」。当促销消息来临时,消息图标突然变身成商品实物图,像吹气球一样膨胀到原来的3倍大,硬生生把旁边四个图标挤开,腾出空间展示「爆款直降59元」这样的促销文案。这个会动的图标就像在一排安静站岗的士兵里,突然有个家伙跳出来挥旗呐喊,想不注意都难。 打破用户对导航栏的「视觉盲区」,动态膨胀的形式既不破坏原有布局,用动态变化激活注意力

8.833人评分
收藏 11
分享细节海报

发表评论 为下方 3 条评论点赞,解锁好运彩蛋

{{ moreBtnTxt }}

你可能还爱看

「高德地图」让人惊喜的出行方式动态图标
高德地图

微交互「高德地图」让人惊喜的出行方式动态图标

猎人 - AmberDu小白9.0

打开「高德地图」App,当顶部Tab栏被切换到某个出行方式选项时,会出现相应出行方式的微交互小动效。为执行搜索的过程增添了不少小乐趣,也让每个选项信息通过可视化的图像变得更加...

查看详情

#tab栏#信息呈现#动效

京东App与众不同的商品详情页轮播图
京东

信息呈现京东App与众不同的商品详情页轮播图

猎人 - 龙爪槐守望者8.2

「 京东」App的商品详情页轮播图的最后一张是商品的评价截图,这与其他同类型的电商App很不同。展示更多商品的细节与多角度图很重要,真实的评价同样也能帮助用户更全面的了解商品...

查看详情

#banner#京东#信息呈现

盒马尝新,原来Banner还能这么玩?
盒马

用户体验盒马尝新,原来Banner还能这么玩?

猎人 - Ginny Q8.7

「盒马」App最近上线了「盒马尝新」功能,主推上新品类。顶部Banner支持自动轮播和用户滑动切换,每个商品图都融入了动效小人,萌萌的表情让原本平庸无奇的食物看起来增添了一些...

查看详情

#banner#信息呈现#动效