本文将介绍近来最流行的动态设计趋势,这些令人惊艳的动效表现手法,在不久的将来势必席卷所有人的目光。

文章案例部分图片较多,建议提前收藏,未来做动效或者作品练习的时候,就能参考上啦!

PART-1.1
  动效设计带来的作用与价值  
动态能激发用户的情绪,为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态,能让你的产品展现与众不同的魅力。
另一方面,动态有助于支持可用性,通过自然流畅的物理运动,突显元素在过渡时的关联性与状态变化,增强用户对产品功能的感知。
PART-1.2
  动效设计的方向有哪些?  
植基于UI和UX设计而发展的第三维度,动态设计的趋势自然与两者密不可分。作为UI和UX设计中重要的组成部分,动态设计从三个层面发挥影响力:1. 提高连贯性(Increase Continuity) ,2. 连接场景(Connect Scenes) 、 3. 视觉吸引(Visually Appealing) 
综观近年,多数作品巧妙地运用绚丽的动态图像(Motion Graphics)与动效设计,让新的视觉手法得以表现更为出彩。
PART-2.1
  变形类动效设计趋势  
动画插图 Animated Illustrations
2021年看到许多有趣、吸引人的插图,而更多的设计师开始为静态图像添加动态,也让GIF和动画插图越来越受欢迎。
by Lobster
通过动画插图来呈现同一系列的转变,有利于延续外形上的特徵,让不同的物体具有连结性。
by Graceful illustrations ™
流体动态 Liquid Motion
动态的有机形状,包括流体、烟雾和火焰等粒子效果,能够极大地增强视觉效果。
by ✞anton mishin✞
流体动态运用到网站设计所营造的视觉冲击力更为惊艳,能为用户带来独特、新鲜的视觉感受, 使得流体动态深受风格前卫的设计师喜爱。
by Gilles Tossoukpé
动态渐变 Dynamic Gradients
扁平化设计缺少现实质感的元素,搭配渐变色能有效缓解不足,为设计创造深度与层次。变化中的渐变色同时带有动感与舒缓,充满活力却又平静。
by Pixelz Studio
微交互 Micro Interactions
在用户体验设计中微交互变得日益重要,而动态设计正是微交互的灵魂所在,即使只是微小的视觉提示或反馈,都是人机交互易于使用的关键。
by Илья Бабушкин
从经典案例来看,微交互的动画细节必须带有明确的目的性,让用户获得实时反馈,指导用户进行下一步。
by Google
动画商标 Animated Logos
过去几年动画商标是最流行的动画趋势之一,通过各种视觉效果,设计师能创造出不同类型的动画商标,许多企业开始采用动画商标作为吸引注意力的手段。
by Yulia K.
多数情况下,商标是进入网站时最先看到的东西,因此商标应该令人难忘、引人入胜,并使用符号或排版来揭示品牌个性。
by Meta
PART-2.2
  动态文字型设计趋势  
动态文字是使用移动文本来吸引注意力的动画技术,许多卓越的品牌在网页设计中使用动态文字,为网站外观增添动感和视觉冲击力,是近年UI动画的趋势之一。
by HOLOGRAPHIK®
by Hrvoje Grubisic
PART-2.3
 背景动画设计趋势  
背景动画深获大众喜爱,它能让用户在进入登录页或网站首页时,轻易地了解更多有关公司或产品的信息。
by Carlo Soleri
by Kirill Zhukovsky
PART-3.1
 遮罩型动画设计趋势  
遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物,等同于舞台幕布设计,能在界面元素进场或退场时创造连续性效果。
切换场景 Scene-Switching
这种表现手法简洁高效,是最常见的过渡动画之一。
by intent
by Minh Pham ✪
状态变换 State Transformation
另一种遮罩的表现形式,较无明显的场景过渡,而是利用遮罩来表现景物的状态变化,界面元素和布局基本保持一致。
by Daniel Tan
by Outcrowd
PART-3.2
 视差动画设计趋势  
视差是利用不同的界面元素以不同的速率移动,创造前后景深的分离效果,借此在平面中塑造空间层次,已成为网站首页最为普遍的表现形式。
by Studio VØR
by Studio VØR
PART-4.1
 3D动态图形设计趋势  
近年来,结合3D动态图形的界面设计呈现爆炸式增长,虽然创建3D动画需要更多的时间、技巧与协作,但不可否认的,3D动画比2D图形更加逼真,从而提供更具吸引力和互
更生动的表情 Lively Emoji
动画的吸引力在于能够创建各种角色,并为无生命物体注入生命力,表情符号就是一个很好的例子。
by Outcrowd
营造空间感 Spatial Awareness
3D动态图形为平面设计建构了空间叙事框架,在扁平化界面中展现立体感,从而表达空间中元素的位置与层级关系。
by UI8
by Bruno Ortolland
拟人动画 Anthropomorphic Animations
由于人们容易被以人类行事的事物所吸引,越来越多设计师在界面中添加拟人元素,利用这种效果让画面更加生动有趣,增强用户体验的愉悦感。
by Gregory Riaguzov
PART-4.3
 摄像机运动设计趋势  
在动态设计中,摄像机运动是最自由、灵活的一种表现形式,能让画面过渡更有张力,突破2D平面在视角上的限制,创造一个无界线的立体空间。
推近/拉出 Dolly In/Dolly Out
推镜头是指被拍摄的对象不动,摄像机由远而近,朝着对象不断推进, 用来突出人或物的主体。
by Michael Crawford
by Ali Zafar Iqbal
水平/垂直移动 Truck/Pedestal
水平向左或向右,垂直向上或向下移动摄像机,使画面不断变化,让用户跟随镜头视角一起移动,产生一种置身其中的感觉。
by Netguru
by Minh Pham
结合多种运镜 Multiple Camera Movements
运用多种摄像机运动相当普遍,既能扩大视野,又有很强的空间感,可以更加自由与多样地展示不同视角和情景。
by Gregory Riaguzov
by Paul Ilnitski
一镜到底 One Shot
在电影中为了不将观众的情感和注意力割裂,使用一个镜头来完成全片的场景刻画和叙事,这种拍摄手法被称作一镜到底或长镜头。
by Orizon: UI/UX Design Agency
by Minh Pham ✪
动态设计作为近年热门的创作形式,广泛应用到各个领域,逐渐成为设计的主流趋势。本文归纳的设计趋势,有助于启发设计师对动态设计的想像,激发更多创作灵感,为静态界面赋予灵魂,打造令人难忘的视觉体验和品牌形象。
点亮『在看』,年薪百万↓