课程咨询 :186 8716 1620      qq:2066486918

昆明UI培训

昆明UI培训 > 达内新闻 > 背景设计也要跟上潮流
  • 背景设计也要跟上潮流

    发布:昆明UI培训      来源:优设网      时间:2016-11-04

  • 在很长一段时间里面,网页中的背景图片元素,一直都生活在CSS、JS甚至视频的阴影当中,它的“参与感”并不强烈。不过随着审美和用户需求的逐步变化,背景图片在网页装饰上,开始发挥着越来越重要的作用。

    当然,从总体上来看,变化并不明显,但是在绝大多数的情况下,背景图片开始作为主要的视觉驱动力而存在。

    传统意义上的背景主要是使用图片,近几年开始流行视频背景了。而这些主要还是集中在网站的页头、Banner等位置,大多用来欢迎用户,推荐内容。许多网站都采取了相似的策略,让用户有所期待。

    随着动效的流行,现在越来越多的设计师开始试图将CSS3、HTML5和JS等技术融入到背景设计中来,寻求全新的解决方案。事实上,现在已经有四种不同类型的动态背景设计方案,它们风格都非常符合时下流行的趋势,且都具备不俗的发展潜力,今天我们聊聊这四种风格前卫大气的背景设计。

    粒子动效

    粒子动效是目前最流行的选择之一,很大程度上是因为这种方案对于目前的网站和浏览器而言,负载并不大,并且足够优雅。它可以很好地同纯色背景、插画、矢量素材甚至照片结合起来使用。

    除此之外,颗粒的动效变化也有很多变化。可以是在整个页面中随机散布移动的点,也可以模仿雨滴和流星的运动轨迹,还能参考星座、星空和宇宙中行星的运动来设计。粒子动效还能和鼠标运动以及触发事件结合起来:可以让粒子避开光标,也能让粒子围绕这光标运动,甚至让运动轨迹紧跟光标运动,等等。

    波纹颗粒特效

    达内昆明UI培训前面的案例中,粒子特效能够通过HTML5和CSS3以及JS代码来实现,而波纹粒子特效这个效果则是借由Three.js来实现的。它让粒子构成平滑的波纹,然后上下波动产生呼吸的画布一样的效果。你还可以借助鼠标光标让它向着不同的方向旋转,你可以探索各种不同的玩法。

    鼠标悬停视差效果

    视差特效也一直是热门的设计趋势。在深色背景上,搭配粒子特效的视差特效几乎能够立马创造出3D的视觉效果。视差特效伟大的地方在于,你无需特别精准地选取特定的图片,就能营造出良好的视差效果。

    当你需要让你的标题、LOGO和场景拥有真实的质感的时候,一个视差特效能够快速的给你以提升。当然,视差特效同样适用于各种抽象的动画。当触发鼠标悬停事件的时候,对应元素会增加一个维度,用就可以移动鼠标与之进行互动。

    WebGL Experiments

    WebGL Experiments包含一系列给进阶的开发者和经验丰富的客户所准备的特性,能够切实地节省开发预算。这些特性能够为你带来辉煌、夸张甚至诡异的效果,不过达内昆明UI培训觉得你应该记住,WebGL Experiments带来的强大效果是有代价的:它极其消耗资源,而且还需要你考虑浏览器兼容性的问题。

    推荐文章

上一篇:UI设计师,产品开发也要懂敏捷

下一篇:底部导航设计的3个关键点

最新开班日期  |  更多

UID培训免费训练营

UID培训免费训练营

开班日期:01/20

UID培训全日制班

UID培训全日制班

开班日期:01/20

UID培训周末班

UID培训周末班

开班日期:01/20

UID培训高级进阶UED培训

UID培训高级进阶UED培训

开班日期:01/20

  • 网址:http://km.ui.tedu.cn      地址:昆明市五华区五一路如安街如安三号二楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56