动效设计如何在网页滑动中抓住眼球?这个液态玻璃动态视觉值得借鉴

产品: System Studio猎人: 龙爪槐守望者投稿: Daryl Ginn观众: 6.8k人 时间: 2026-06-11

System Studio

与「System Studio」有关的细节还有 1查看全部

我也有新发现 我要投稿
如何在网页滑动中抓住眼球?这个液态玻璃动态视觉值得借鉴如何在网页滑动中抓住眼球?这个液态玻璃动态视觉值得借鉴

细节描述

龙爪槐守望者: System Studio是一家澳大利亚设计咨询公司,他们似乎从液态玻璃设计风格中获得灵感,在他们网站滚动鼠标查看案例时,不仅采用横向滚动,而且图文从两侧滑出时会产生一种重力扭曲、拉伸和折射的透视效果。这种打破常规网格的动态视觉。 扭曲只发生在屏幕两侧的边缘,这是用户视线的边缘,也是内容即将离场的边缘。当内容滚动到屏幕中央的核心视觉区时,排版和画面会瞬间恢复到最规范、最易读的正常状态。它既保证了用户在阅读案例时的认知流畅性,又在滑动的间隙抓住了用户的眼球。

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

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

{{ moreBtnTxt }}

你可能还爱看

京东在首页标题栏的广告位能否兼顾用户体验?
京东

组件创新京东在首页标题栏的广告位能否兼顾用户体验?

猎人 - 龙爪槐守望者7.4

手机屏幕寸土寸金,每个App都希望在有限的屏幕上展示尽可能多的内容,尤其是电商平台,更是想方设法在每一个角落推销商品。原本首页的标题栏都用于显示Logo或者tab和主要操作按...

查看详情

#banner#动效#小程序

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

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

猎人 - 张老三9.2

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

查看详情

#Picker#动效#单选

被记住的瞬间最动人,多邻国回流动画是如何唤起用户正面情绪的?
Duolingo多邻国

拟人化设计被记住的瞬间最动人,多邻国回流动画是如何唤起用户正面情绪的?

猎人 - 张老三9.0

Duolingo 在用户重新下载并打开应用时,会播放duo从无聊等待到欢呼雀跃的情感过渡动画,以拟人化方式表达对回归用户的欢迎。运用 情绪唤起 与 拟人化设计 ,在首次回归场...

查看详情

#IP形象#动效#情感化设计