流体效果是怎样赋予网站页面以生命力

发布时间:2021-06-30 18:10:35访问人数:0作者:腾皓

  在拟物化设计大行其道的时代,设计师在设计的时候会试图在数字界面中复刻现实世界中的元素和质感,大家戏称为「抄现实」。如今拟物化设计的热潮褪去,但是在设计UI和网页的时候依然在「抄现实」,只不过所「抄」的是更加深层的物理规则、运动特征和质感。

  物理是一门相当古老的学科,但是并不是每个人都能理解其中的规则,但是几乎所有人都能本能地感知到它的存在,当某个动效运动不合理的时候,会很本能地感知到它「不自然」,因为日常生活已经教会我们所有人什么样的特征是「自然」的。

  「自然」是安全的,是顺应我们习惯的,自然也是吸引人的。对于设计师而言,我们的生活和自然的规律是最好的老师。

  流动的质感!流体效果是怎样赋予页面以生命力

  怎么借鉴呢?不妨看看Kikk Festival和Wed’ze Goggles这两个网站的设计。

  Kikk Festival的首页设计相当的壮观,动态效果下的海洋场景近乎真实,而海岛和大猩猩的合成效果则巧妙地借助相似的形体创造出错位而双关式的视觉语言。水是整个设计中看起来最自然的东西,也是创造错位感的环境。

  相比之下,Wed’ze Goggles的页面设计就没有那么令人难忘了,但是它向我们展示了如何充分利用简单的元素来制造充满自然流体质感的视觉元素。他们的设计团队使用类似流体的斑点来装饰背景,巧妙地让原本简约空旷的页面显得不那么单调。

  借助WebGL、GSAP、Three.js等较为前卫的技术,将物理运动质感带入Web项目,在这些项目中得到了体现。虽然我们绝大多数人在享受这些效果的时候,硬件设备的CPU和GPU不可避免地更加消耗性能,但是这并不会带来矛盾,我们也无法阻止设计师和开发者实现这样的效果。合理地运用不同的代码技术和各种成熟的特效库,再惊人的效果都可以实现,以假乱真的质感,模拟现实的运动,这些都不成问题。



  接下来,我们看看三个令人难忘的案例:Julie Bonnemoy、Studio Gusto和Ibiza Music Artists这三个网站。出色的液体流动效果让这些网页足够出彩,接下来我们挨个看看。

  Julie Bonnemoy的页面当中加入了非常惊人的液态泡泡动画,作为动态背景来使用,加上温暖柔和的色调,整个页面给人非常诱人的感觉。

  Studio Gusto的首页上使用了类似的设计,不过泡泡的质感不像液体,更加接近于肥皂泡的感觉,轻盈随性。这个网站的设计是用于作品集展示的。

  最后一个网页是Ibiza Music Artists,网站并没有用水泡的设计,而是将页面背景设计成了俯视角度下的水面,整体质感简约,优雅,精致。

  • 项目经理.png

    扫描添加

    项目经理微信

    享受专业顾问服务

  • QQ群.png

    扫描二维码加入我们

    与腾皓一起征战天下

  • 分享:

    版权:【注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱:tenghaoyx@126.com,我们以便及时处理,可支付稿费。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ:1137946014】

    四川腾皓网络科技有限公司 Copyright © 2012-2021. 未经许可,不可拷贝或镜像 蜀ICP备2021011532号-3

  • QQ
  • 电话
  • 首页
  • 留言
  • 返回顶部
  • 恭喜您~
    留言提交成功o(∩_∩)o
    我们将快马加鞭与您取得联系。