值得设计师关注的动感粒子动效设计趋势

2016-02-16 19:21 45 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的值得设计师关注的动感粒子动效设计趋势,希望大家看完后能赶快学习起来。

【 tulaoshi.com - 平面设计 】

现代风盛行的网页设计圈中,不少设计师会倾向于用动态、抽象的元素来为页面渲染出富有科技和未来感的氛围。在这其中,飘散的粒子动效是比较常见也颇受欢迎的一种元素,而今天我们要聊的就是这种设计元素。

有的网页会在页面背景上散乱分布着点或者小而简单的几何图形,配合着各不相同的背景,粒子动态效果所呈现出来的类型和样式非常之多。它们还可以是一大堆凌动的小球,扁平的圆环,还可以一组来回穿梭的小三角形,等等等等。在动效上,这些粒子的运动轨迹的差别也是千差万别的,它们有的可能会与用户的操作产生联动,随着鼠标指针运动,震颤,舞蹈。然而它们依然有很明显的共同点:通过这些粒子的动效来为整个页面营造出动态、活泼和科技感十足的氛围。

单调的语言不足以呈现这些粒子动效的独到之处,我们一起来看看案例吧。

Deutser

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

黑色的极简风背景是这些粒子动效的舞台,粒子每隔几秒会打散重组出新的图案,并且搭配上相应的文案,并且粒子本身会随着鼠标的移动而进行恰如其分的偏移,不仅让用户充满了参与感,而且动态的展示方式让信息的展现更有厚度。

Share the Force

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

这是一个星球大战主题相关的网站,意为分享原力。整个网站的设计非常贴合星战的主题,加入了许多宇宙相关的设计元素,背景中的粒子动效更是强化了这种环境的动感和气氛。

Seven Brief Lessons

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

开发者让移动的粒子构成了一个环形,并让它们顺滑地运动着,漂亮的渐变效果让整个背景加分不少。环形运动的粒子动效让用户将注意力集中到中间的文字上,这使得动效的功能性强化了不少。

Brandify

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

复杂的立体几何图形和运动的粒子组合到一起,充满了韵律感。整个动效丰富了页面的细节,让它看起来一点都不单调,也增强了趣味性。

NYCIG Marathon

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

这个壮丽而又专业的粒子动效将NYCIG 马拉松的逼格提升到了一个全新的高度,这种壮阔的场景会让用户非常难忘的。

Double Pi

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

粒子动效在这个网站中不仅充作背景,同时也是用户交互的对象,它会构成一个隧道随着鼠标光标移动。不过设计师很好地控制了动效的尺寸,不会喧宾夺主。

Sift Agent

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

作为一个以宇宙为主题的网站而言,粒子动效还是非常点题的。在这个页面中,粒子动效会模拟宇宙中星座的运行轨迹来运动,当你点击不同的区域的时候,能显示相关星球的图片。

Sony Experia

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

四处移动的小气泡会构建成不同的东西,让用户心情愉悦,当用户用鼠标点击气球的时候,这些移动着的气球会爆掉,非常好玩。不同的气球会链接到不同的图片。

Signature Art

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

大量的3D粒子会帮你创建签名,给人以优雅而精致的感觉,当最终生成签名的时候,你可以放大查看细节。

Citak

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

Citak 的网站将极简风格发挥到机制,用干净的色彩和大量的留白来营造出现代而时尚的感觉。设计师使用丰富多彩的粒子动效引导用户关注标题文案。

The Alkemistry

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

网站提供了更加个人化的粒子动效来提高整个网站的个性化体验,网站的设计和星座风格背景紧密关联,营造出统一而一致的浏览体验。

Think Less Love More

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

这个网站在交互设计上非常突出,同时在动效和简约风格之间找到了不错的平衡点。动态粒子构成的糖果构成了网站的主视觉,个性十足又充满魅力。

Decta

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

Decta 网页中的颗粒动效和网页闲适的风格相互呼应,按照一定韵律聚散的粒子让页面充满了呼吸感。

NodePlus

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

NodePlus 页面中三角形的粒子和它们的动效让整个网站呈现出强烈的个性,给人创造力十足的感觉。

Petar Stojakovic

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

这是 Petar Stojakovic 的作品展示页,作为欢迎界面,黑白分明的设计清晰简单,向中央收拢的粒子动效营造出一种深邃的效果,吸引用户的注意力。

VOID

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

Void 的网站为用户提供了近乎无可匹敌的抽象粒子动效,这些时尚又精致的粒子动效,展现出设计师的高超水平。

CloudNine

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

CloudNine 的网页是关于一个在宇宙环境中生存的超级英雄的,页面中这些微妙的动效让背景显得微妙又漂亮无比。

Treskon

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

同样是使用了经典的强对比的黑白色系来设计网页,Treskon 的设计师也倾向于借用粒子动效来强化页面质感,突出内容。

Fixed Group

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

细腻的粒子动效在这个网页中起到了支撑作用,完善了整个设计。动态的背景在动效支撑下显得更加富有美感。

Orion9

值得设计师关注的动感粒子动效设计趋势,PS教程,图老师教程网

Orion9 是一个独特的个人作品网站,乍一看可能有点单调,但是当粒子动效开始充塞页面的时候,那种枯燥的氛围会被一扫而空,这种打开体验范儿词不错。

结语

粒子动效的运用范畴非常广泛,动态,活泼,具有引导性,交互性,可以和色彩、图片、内容充分的组合,并且在美学上产生化学反应,微妙又让人期待,偶尔能给人一种意外,更多的时候又用独特的质感征服每一个访客。它能否在未来的一年中成为主流的设计趋势?让我们拭目以待吧。

来源:http://www.tulaoshi.com/n/20160216/1572105.html

延伸阅读
说到流动,大家一定想到的是水,随着移动设备硬件的升级,越来越多的App和Rom得以拥有了流水般的动效。那今天我们就来聊一聊移动的动效设计流动之美。 首先,为什么要有动效? 产品设计师经常说的一个词叫情感化设计,我们设计了漂亮的界面,整理了清晰的逻辑,除了这两样之外,我们还需要动效来把这些漂亮的设计衔接起来,界面、交互、动效构...
设计师的创造力和想象力不是无限的,任何一个案子都可能碰到奇葩需求,遭遇灵感枯竭,邂逅思维死胡同。在工作日,我们的大脑需要朝九晚五地解决每一个问题(加班那得另外算),在休息日,我们的思维还要坚持不懈地捕捉每一缕灵感,这真的一份7×24小时的工作。正如同AkaneLee老师在私底下说的,要想做好设计,灵感不竭,每天都要抽出时间...
下面的这10个技巧因该说更像是习惯,对于网页设计师来说设计时都会有一些适合自己的操作动作,主要针对Photoshoop软件来说,比如字体选择,颜色的安全性,图层的整理等。对于一个出色的设计师一定会将这些作为自己的职业习惯予以保留,这对于以后的自我提高也是有好处的。 1.尽可能的使用路径和形状图层. 这样你可以在后面想修改时,可以从...
标签: PS PS基础
本教程主要使用Photoshop设计绚丽的粒子光效制作教程,这种效果在淘宝的一些化妆品海报中使用非常的广泛,喜欢的朋友让我们一起来学习吧。 先看看教程需要的素材: 粒子光效详细制作教程PSD源文件
设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流。作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都极度敏感。通过过去一年的观察,我们可以总结出下面16大设计趋势。 1. 可用性设计 2016年,设计的大方向将继续向着用户倾斜...

经验教程

500

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部