6个产品细节剖析,看看高手是如何做设计的!

本期我们将再次看看别的产品在交互体验上有哪些有意思的设计吧!

更多产品细节

案例分享

1. 自如简洁趣味 banner

自如首页经过改版后,头部 Banner 采用了大面积白色底和小动效的形式,以实现简洁而富有品质感的效果。

提升用户体验:通过采用大面积白色底减弱 Banner 的营销感,提升整体页面的品质感和氛围感,同时可以降低用户对广告/活动的抵触情绪,提升信息的传递效率。

引导用户视觉焦点:在减弱 Banner 的营销感的同时,通过简单而有趣的小动效,提升头部的氛围感,吸引用户的视线,引导用户进行点击和转化。

6个产品细节剖析,看看高手是如何做设计的!

2. 盒马-顶部 banner

盒马 app 尝新页顶部 banner 采用线描动画结合实物图的风格表现,线描 ip 小人生动有趣的表现和商品实物图结合令人眼前一亮。

传递正向情绪价值:线描小人表情生动有趣,结合期待搓手、挥手打招呼等动作,展示对推荐美食的向往,传递正向情绪价值,激发用户的好奇心和探索欲。

提高用户点击欲:轮播/手动切换时,背景变化的交互动效与星形的主视觉结合,自然有趣的互动元素,令人眼前一亮。引人注目,激发用户的点击欲。

6个产品细节剖析,看看高手是如何做设计的!

3. 美团外卖

美团外卖的首页下拉动画与膨胀神券的结合,为用户带来了生动有趣的体验。

增强用户体验:随着用户下拉页面,红包金额逐渐增大,最终进入到领取红包的页面。这种交互设计不仅顺滑方便,还增强了用户的参与感和体验感。

提升用户对红包的感知:用户越往下拉,红包的金额越大,这种设计让用户能够直观地感受到红包的价值。同时,进入到领取红包的页面也增加了用户对红包的期待和兴奋感。

6个产品细节剖析,看看高手是如何做设计的!

4. 滴滴打车评价体验创新设计

滴滴打车为了提升用户体验,对司机评价的设计进行了精心扩展。通过这些设计细节的引入,使得滴滴打车的评价界面更加生动有趣,让用户在评价司机的同时也能享受到更愉悦的体验。

引入动态表情,丰富情绪表达的方式:在评价界面的浮层顶部,滴滴打车引入了表情动画,通过放大的动画效果,增强了用户的情绪感受。这样的设计不仅丰富了情绪表达的方式,还为用户带来了更多趣味性。

呈现惊喜动画,增强评价过程的趣味性:当用户点击满意按钮后,如果选择进一步提供详细的评价,滴滴打车还特意加入了放礼花的动效。这样的动效不仅在丰富用户的情绪表达的同时,也增强了整个评价过程的趣味性。

6个产品细节剖析,看看高手是如何做设计的!

5. 闲鱼-海鲜市场

「闲鱼」App 的海鲜市场板块头部的图标入口插画增加了点击交互动效,这一举措极大地提升了用户的互动性和趣味性。

对于用户来说:通过动效的设计,「闲鱼」App 成功地将用户的操作与应用的反馈相结合,让用户在使用过程中感受到更加自然和流畅的交互体验。

对于平台来说:让用户在使用过程中感受到更加愉悦的心情,从而进一步提高用户的使用频率和留存率。

6个产品细节剖析,看看高手是如何做设计的!

6. 大众点评-隐藏二楼,划出惊喜

大众点评首页下划超 1/4 屏即可呼唤出二楼空间。通过下滑操作的交互,用户可以快速访问更多相关内容,而无需进行额外的点击或搜索。不仅能够提高用户的操作效率,还能够增加页面的可用性和吸引力。

多样化的流量入口:在屏效比十分紧张的首页,通过下划的方式增加了一个新的多样化流量入口。

渐进式露出的惊喜:在下划过程中,“下拉刷新”的文案随之变为“松手进入二楼”,并通过强眼的主视觉吸引用户注意,在交互的过程中巧妙地激起了用户的惊喜。

6个产品细节剖析,看看高手是如何做设计的!

最后要说的话

本期的设计分享就到这里啦。

文章中的案例与思考来自于智行 UED 同学的日常分享。

后续我们将持续深度体验产品,挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到智行 APP 后续的产品设计中。

愿我们的努力为你带来更好的体验。

欢迎关注作者微信公众号:「智行ZXD设计中心」

6个产品细节剖析,看看高手是如何做设计的!

收藏 52
点赞 38

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。