数据正在读取中...

您的位置: 设计资讯 > 网站设计

网页ui设计新趋势:液体流动效果!

www.shejinet.com 2019-12-04 20:10 设计.世界 浏览(1760)

摘 要:在拟物化设计大行其道的时代,设计师在设计的时候会试图在数字界面中复刻现实世界中的元素和质感,大家戏称为「抄现实」。如今拟物化设计的热潮褪去,但是在设计UI和网页的时候依然在「抄现实」,只不过所「抄」的是更加深层的物理规则、运动特征和质感。
物理是一门相当古老的学科,但是并不是每个人都能理解其中的规则,但是几乎所有人都能本能地感知到它的存在,当某个动效运动不合理的时候,会很本能地感知到它「不自然」,因为日常生活已经教会我们所有人什么样的特征是「自然」的。

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

网页ui设计新趋势:液体流动效果!

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

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

网页ui设计新趋势:液体流动效果!

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

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

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

网页ui设计新趋势:液体流动效果!

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

数据正在读取中...

[优秀设计师] DESIGNERS

  • 红蚂蚁文化
    地区:天津 • 天津
    QQ:2284475163
    电话:qq2284475163
    邮箱:2284475163@qq.com
  • 博文
    地区:广东 • 深圳
    QQ:705434715
    电话:17875048743
    邮箱:705434715@qq.com
  • 久形设计
    地区:广东 • 佛山
    QQ:2926679497
    电话:18927776245
    邮箱:2926679497@qq.com
  • 蜂鸟创意
    地区:河北 • 石家庄
    QQ:2950464750
    电话:15930133486
    邮箱:2950464750@qq.com
  • 泉榕工作室
    地区:福建 • 福州
    QQ:5758429588
    电话:15980203576
    邮箱:5758429588@qq.com
  • 大巢设计
    地区:山西 • 晋中
    QQ:845183776
    电话:15536393968
    邮箱:845183776@qq.com
  • 邹剑
    地区:广东 • 广州
    QQ:810199288
    电话:18379067575
    邮箱:810199288@qq.com
  • 知鱼工作室
    地区:辽宁 • 沈阳
    QQ:1660150137
    电话:
    邮箱:1660150137@qq.com
  • 创龙轩设计
    地区:广东 • 广州
    QQ:1219427856
    电话:13790850808
    邮箱:1219427856@qq.com

[优秀设计公司] COMPANYS

联系我们| 免责声明| 设计师| 设计公司| 手机版| 设计知识