动效设计不只是美,Material Design涟漪动效如何提升交互质量?

产品: Google猎人: 龙爪槐守望者观众: 5.5k人 时间: 2025-05-19

Google

与「Google」有关的细节还有 42查看全部

我也有新发现 我要投稿
不只是美,Material Design涟漪动效如何提升交互质量?不只是美,Material Design涟漪动效如何提升交互质量?

细节描述

龙爪槐守望者: Material Design 在发布之初就设计了涟漪动效(Ripple Effect)。当用户触摸界面元素时,就像往水中投入一颗石子,从接触点开始以圆形向外扩散至整个界面元素。这种设计让用户能直观感受到界面的响应,增强了操作的确认感和沉浸感。在界面元素较多或信息复杂的情况下,涟漪动效还能有效引导用户关注当前交互的元素,避免误操作或遗漏关键信息。 涟漪动效既然模拟水中投石产生的涟漪,那么老版本仅在用户点击的界面元素内扩散确实显得不够自然。在Material 3 Expressive中,当按住一个元素时,附近的其他通知也会随之产生波动,就像整个手机屏幕成为了一个水池——触碰任意一处产生的涟漪都会带动整个水面上的所有物体运动。界面变得更加流畅和直观,提升了交互的沉浸感。

9.518人评分
收藏 1
分享细节海报

发表评论

{{ moreBtnTxt }}

你可能还爱看

如何让标签既醒目又不突兀?Airbnb的视觉动效设计揭秘!
Airbnb

动效如何让标签既醒目又不突兀?Airbnb的视觉动效设计揭秘!

猎人 - Crystal雨婕9.3

Airbnb的抢手标签细节设计让人耳目一新。与常见的鲜艳颜色和复杂样式不同,Airbnb采用了独特的视觉动效来突出房源的抢手标签。当用户进入页面时,动效的呈现引导了注意力,随...

查看详情

#Tag#动效#标签

你有没有发现,今年妇女节的Google Logo有点「怪」?
Google

设计彩蛋你有没有发现,今年妇女节的Google Logo有点「怪」?

猎人 - 龙爪槐守望者9.7

当其他产品忙着用裙子、花朵这些女性熟悉的元素装点界面,讨好用户时,Google却反其道而行之——原子核、DNA、烧瓶、恐龙化石、宇航员,这些看似「冷门」的理工科技符号出现在了...

查看详情

#Doodles#Google#插画

当功能入口遇上轮播设计,阿里通义万相做出了1+1>2的体验
千问

微交互当功能入口遇上轮播设计,阿里通义万相做出了1+1>2的体验

猎人 - 龙爪槐守望者8.2

轮播图不是早就过时了吗?为什么大厂还在用?其实你误会了——传统的轮播图确实饱受诟病,但如果把它和功能入口巧妙结合,反而能创造出1+1>2的体验。

查看详情

#入口#动效#卡片