这四种大胆前卫的背景设计技巧,能让你的设计脱颖而出 - 优设网 - UISDC

这四种大胆前卫的背景设计技巧,能让你的设计脱颖而出

2016/11/03 20590评论区

4-modern-background-tricks-1

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

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

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

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

粒子动效

huub

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

除此之外,颗粒的动效变化也有很多变化??梢允窃谡鲆趁嬷兴婊⒉家贫牡?,也可以模仿雨滴和流星的运动轨迹,还能参考星座、星空和宇宙中行星的运动来设计。粒子动效还能和鼠标运动以及触发事件结合起来:可以让粒子避开光标,也能让粒子围绕这光标运动,甚至让运动轨迹紧跟光标运动,等等。

Huub 这个网站就是一个典型的案例,不同的点构成群组,点和点之间有细线连接,在黑色的背景上移动着形成自转的效果。当鼠标移动到附近的时候,光标所在处会形成新的点,与最近的光点连接。

小贴士:如果你想实现类似 Huub 这样的动态背景效果,不妨看看 Dominic Kolbe 所创建的名为Mouse Parallax Demo 的项目,它能给你带来近似的效果。如果你立刻马上想要一个高度可用的粒子特效背景的话,那么你应该看看 Vincent Garreau 所创建的 Particles.js 这个JS库。

波纹颗粒特效

stuurmen

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

StuurMen 这个网站就借助波纹粒子特效来制作欢迎页面。它看起来精致而极简,内容以一种毫无侵略性的方式进入用户的视野,而波动粒子特效则让整个项目的氛围显得平滑而稳定。

小贴士:你可以在这里看到ThreeJS的原始脚本,Deathfang 成功地改写了这个脚本,并且将它制作成一个名为 three.js canvas – particles – waves 的demo。

鼠标悬停视差效果

alex

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

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

Alexandre Rochet 的个人作品页就将视差效果玩的出神入化。视差特效让页面中的元素显得非常的醒目。

小贴士:用来生成视差特效的代码库和代码片段有很多,最受欢迎的应该是Matthew Wagerfield 所创造的一款插件,名为 Parallax.js 。如果你在实际运用中更注重排版,那么不妨试试 Frontnerd,它的特色在于生成鼠标可控的3D视差效果。

WebGL Experiments

solarin

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

Solarin 这个网站就是借助 WebGL Experiment 制造的3D效果以及各种尖端的功能和特性,其中透光的3D球体视觉效果相当的赞,还能随着鼠标移动而滚动,让人难以忘怀。

小贴士:虽然模仿MediaMonks的天才设计过于复杂,但是你总能在网络上找到各种项目和插件,帮你完善设计。你可以试试这个 WebGL API,以及这个来自 Yoichi Kobayashi 的名为“The Wriggle Sphere”的项目。

结语

远离平庸,就意味着你要花费更长的时间来构思、探索和实现,无论是采用哪种方式来实现特定的效果,实现了就是收获,让你的网站拥有一个全新的起点。

【Nick Babich 的用户体验设计经验之谈】

  1. 输入框设计:《讲真,你真的懂得文本输入框设计的那些潜规则么?》
  2. 表单设计:《抠细节!设计高效好用表单的10个技巧》
  3. 极简APP UI:《超赞!帮你打造极简风APP UI 的实用设计技巧》
  4. 前端开发:《有法可依!帮你衡量一个动效是否合格的六个核心因素》
  5. 面包屑:《并不简单!网页中为你指路的面包屑到底应当怎么使用?》
  6. 移动端页面:《跟着建议走!这样的移动端网站设计才对头》

原文地址:webdesignerdepot
原文作者:Nick Babich
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@www.jrqcfn630.cn】

================关于优设网================
“优设网www.ag88.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.jrqcfn630.cn

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.jrqcfn630.cn/4-modern-background-tricks

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 优设专访 设计师 扁平化设计 交互设计师 优设大课堂 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 AI教程 设计理论 平面设计 神器下载 字体下载 用户体验设计 设计趋势 psd下载 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里