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

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

Google

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

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

细节描述

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

9.514人评分
收藏
分享细节海报

发表评论

{{ moreBtnTxt }}

你可能还爱看

「闲鱼」也会哭?不能错过IP形象的可爱表情
闲鱼

动效「闲鱼」也会哭?不能错过IP形象的可爱表情

猎人 - 龙爪槐守望者9.0

当你在闲鱼的等级经验值减少时,系统会及时弹出提示,提醒你通过完成任务来恢复经验值。这一弹窗不仅实用,还伴随一只可爱的闲鱼IP形象,做出哭唧唧的表情,非常可爱,让人忍俊不禁。

查看详情

#IP形象#任务#动效

谷歌文档的操作可预知设计,带给我们的启示
Google

用户体验谷歌文档的操作可预知设计,带给我们的启示

猎人 - AmberDu小白8.3

作为一款在线协作文档编辑工具,Google Docs(谷歌文档)的设计简洁但易用性很强,从很多小的细节都可以看出团队在产品设计方面的用心。比如,在「格式」选项栏列表可以直接选...

查看详情

#Google#人性化#操作可预知

如何用动效打造低压力的语言学习界面?Monspeak有话说
Monspeak

动效设计如何用动效打造低压力的语言学习界面?Monspeak有话说

猎人 - 要爆炸的张老三9.2

在 Monspeak 这款聚焦对话练习的英语学习 App 中,首页设计采用了一种特别的卡片式滑动交互:一组组「对话练习对象」以视觉层叠方式横向排列,配合角度缩放动画,让用户通...

查看详情

#Picker#动效#单选