推广

设计趋势:网站设计中的液态动画。

iseeyu3年前 (2023-12-18)推广131

令人愉悦的重点可能是产生意外的用户体验并使访客吸引您的网站的原因之一。一个趋势技术就是在网站设计中使用液体动画。他的趋势的创意之处在于,您可以通过多种方式使用它来创建适合您的内容的网站设计界面。

在这里,我们将看一下这种趋势的各种例子,以及如何让它为您服务。

什么是液体动画?

液体动画是屏幕上的运动,有一种水一样的感觉。这些动画通常有一个缓慢的,流动的运动,可能波动或潮起潮落。(这就是它工作的原因;液体动画必须感觉真实。)

液体动画可以作为悬停状态或视频或滚动动画的一部分发挥作用。您甚至可以在卷轴上激活一个液体动画。

这项技术已经开始迅速流行起来,主要是因为计算机和较小的web设备以及浏览器能够有效地呈现这项技术。

这种趋势的根源可以追溯到在动画设计中使用斑点形状。去年相当流行的许多设计(包括上面的Fleava)都带有某种液态动画元素。

液体层

液体动画是一个流行的技术与组合网站和创意机构,可能因为这是一个地方,许多网站设计师感到舒适的测试和玩新的设计概念。

液体动画的工作与其他趋势,如分层效果。(您还将在这里的大多数示例中看到其他趋势。)

Ilya Kulbachny以两种不同的方式使用了两层液体动画,为简单的设计增加了很多视觉效果。顶层包括以不受用户交互影响的液体动画和速度移动的文本。

背景层似乎是一个图像,但当您悬停在图片的边缘移动在液体流动。图像随着鼠标移动而移动,并像水一样悬浮。

液体悬停动作

液体悬停动画状态可能是这种趋势最流行的应用之一,没有任何东西可以提示您进入液体动画,直到鼠标以动画悬停状态移动到项目上。

这是一个简单又讨人喜欢的工具,可以吸引用户。

关于流动动画的事情是运动是如此真实和流动,它实际上鼓励人们不断地玩它来看看运动是如何发生和工作的。

液体"滚动"

液体动画是一个创意的"滚动"或导航工具。(您肯定想点击上面的例子。)

通过在屏幕上拖动和拖动鼠标,图像的移动感觉就像在水族箱中旋转。您可以看到所有的元素在您周围移动而不移动。

然后,当您停下来的时候,就会有一小段动画,随着您的动作而来的波纹和速度似乎都在屏幕上定格了。

运动感觉难以置信的真实,并把用户带到设计的空间。

液体背景/前景

液体动画可以作为设计的背景或前景的设计元素,在没有用户交互的情况下"运行"。

在《欲望的革命》之外,还有一个背景/前景元素,就是这样做的。这些小斑点在屏幕上移动,甚至相互连接。当鼠标处于额外的悬停状态时,它们会进一步产生动画和变形。

这个指针也有一种液体的感觉,以博客作为光标,在屏幕上的运动有一种真实的感觉。blob指针几乎变慢以匹配其他元素的运动。

液体电影

电影图像作为一种趋势来了又去,然后随着更流畅的动画重新出现。

这些设计包括静态和动态图像的组合——通常在背景中——有一些流动的运动。

在上面1-1的例子中,由于裙子的运动,图片中的女子看起来像是在水下。它很简单,但在视觉上很吸引人。网站设计使用了各种各样的其他动画技术下滚动,以及。

水下运动

在上面的例子中有暗示-水下风格的运动-这里它是主要的动画效果。

水下运动,一种缓慢的,流动的运动是使用这项技术的一种流行方式。Les Animals使用了一个动画插图,看起来像在水下移动的植物。形状在一种舒缓、缓慢的模式中移动和流动。

如果您与设计互动,有一个额外的液体动画状态鼠标移动。它是微妙的,完全适合其余的界面设计。

液体印刷

我们已经看到了一点,但是液体动画效果也可以应用到排版上。

使这种技术在字母上工作的诀窍是保持单词的可读性。如果在任何时候文本被拉伸或拉到不可读的程度,则表示动画走得太远了。

这可能是一种相当微妙的平衡,但如果做得好,看着和互动会很有趣。文本元素上的液体动画可以自己运行,比如上面Myles Ng的例子,也可以作为悬停状态运行。

结论

液体动画是一种主流的设计技术。动态可以让用户对您的网站设计更感兴趣,并提供更多与内容互动的理由。

这个网站设计技巧应该看起来简单和现实。动作太快或看起来是被迫的,不会有同样的令人愉快的吸引力,您期望从一个液体动画中细微的运动。

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://www.0291.com.cn/post/115429.html

相关文章

小编教你文章怎么更新对seo搜索排名有帮助。

小编教你文章怎么更新对seo搜索排名有帮助。

在seo优化中,网站内容一直都是很关键的一步,SEO在网上听很多人都说网站内容很重要,内容更新一定要有价值,一定要对用户有帮助等等这样话,但是很多小伙伴就很费解了,到底什么样的内容才是有价值的呢?用户到底需要什么样的内容呢?今天小编为大家介绍一下吧! 行业里面最近的观点内容整合...

刘润对谈吴军:每个人都一定要有数学思维

作者 | 刘润,润米咨询创始人。 整理 | 由之 来源 | 刘润公众号,一个洞察商业本质的公众号。好玩的数学获授权转载,在此感谢! 吴军老师是我特别敬佩的老师。 他是计算机科学家,是自然语言处理技术的先驱者,是谷歌公司的智能搜索...

淘宝店铺开直通车完整数据在哪看(淘宝综合直通车在哪里)

淘宝店铺开直通车完整数据在哪看(淘宝综合直通车在哪里)

进入卖家中心——点击我要推广——直通车——报表,可以查看到直通车一天甚至是一个月的数据。在页面中可以选择指数对比,也可以选择,看到推广计划、创意计划、地域。也可以查看、数据占比,计算机占比或者移动,可以查看关键词访客数。...

声明:魏则西事件一年后反转 百度的态度让人心寒

Hi 知乎站方&知乎网友,我于4月13日晚 发表在贝壳青年 - 知乎专栏的文章《魏则西去世一年了,但百度的医疗竞价还在“杀人”》,在知乎内小范围传播,但4月14号早上8点多收到截图私信,百度方面列举我文中5点“过错”,并为百度在魏则西事件和张瑞跳楼事件中的责任开脱,...

网络SEO优化周期要如何判断呢。

网络SEO优化周期要如何判断呢。

对于很多从事网站推广的站长们来说,尤其是行业资深的优化人员,对关键词排名优化的周期都十分了解。在优化过程中,很多人都会发展,很多网站一个月就可以出好的排名,而很多网站6个月就难以看见收录。那网络SEO优化周期要如何判断呢? 一、网站优化周期分哪些阶段? 1、优化前期:新站期 新站期:网站上线1...

如何做好营销和营销管理?

如何做好营销和营销管理?

归纳法和演绎法 一切科学的真理都是归纳和演绎辩证统一的产物。人类认识活动,总是先接触到个别事物,而后推及一般,又从一般推及个别,如此循环往复。归纳就是从个别到一般,演绎就是从一般到个别。归纳法举例:从地球有人类以来,至今未发现长生不死之人,所以,可以归纳出,人都会死。演绎法...

现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片