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

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

PART-1.1

动效设计带来的作用与价值

动态能激发用户的情绪，为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态，能让你的产品展现与众不同的魅力。

另一方面，动态有助于支持可用性，通过自然流畅的物理运动，突显元素在过渡时的关联性与状态变化，增强用户对产品功能的感知。

PART-1.2

动效设计的方向有哪些？

植基于UI和UX设计而发展的第三维度，动态设计的趋势自然与两者密不可分。作为UI和UX设计中重要的组成部分，动态设计从三个层面发挥影响力：1.提高连贯性（IncreaseContinuity），2.连接场景（ConnectScenes）、3.视觉吸引（VisuallyAppealing）

综观近年，多数作品巧妙地运用绚丽的动态图像（MotionGraphics）与动效设计，让新的视觉手法得以表现更为出彩。

PART-2.1

变形类动效设计趋势

动画插图AnimatedIllustrations

年看到许多有趣、吸引人的插图，而更多的设计师开始为静态图像添加动态，也让GIF和动画插图越来越受欢迎。

byLobster

通过动画插图来呈现同一系列的转变，有利于延续外形上的特征，让不同的物体具有连接性。

byGracefulillustrations

流体动态LiquidMotion

动态的有机形状，包括流体、烟雾和火焰等粒子效果，能够极大地增强视觉效果。

byantonmishin

流体动态运用到网站设计所营造的视觉冲击力更为惊艳，能为用户带来独特、新鲜的视觉感受，使得流体动态深受风格前卫的设计师喜爱。

byGillesTossoukpé

动态渐变DynamicGradients

扁平化设计缺少现实质感的元素，搭配渐变色能有效缓解不足，为设计创造深度与层次。变化中的渐变色同时带有动感与舒缓，充满活力却又平静。

byPixelzStudio

微交互MicroInteractions

在用户体验设计中微交互变得日益重要，而动态设计正是微交互的灵*所在，即使只是微小的视觉提示或反馈，都是人机交互易于使用的关键。

byИльяБабушкин

从经典案例来看，微交互的动画细节必须带有明确的目的性，让用户获得实时反馈，指导用户进行下一步。

byGoogle

动画商标AnimatedLogos

过去几年动画商标是 的动画趋势之一，通过各种视觉效果，设计师能创造出不同类型的动画商标，许多企业开始采用动画商标作为吸引注意力的手段。

byYuliaK.

多数情况下，商标是进入网站时 看到的东西，因此商标应该令人难忘、引人入胜，并使用符号或排版来揭示品牌个性。

byMeta

PART-2.2

动态文字型设计趋势

动态文字是使用移动文本来吸引注意力的动画技术，许多卓越的品牌在网页设计中使用动态文字，为网站外观增添动感和视觉冲击力，是近年UI动画的趋势之一。

byHOLOGRAPHIK

byHrvojeGrubisic

PART-2.3

背景动画设计趋势

背景动画深获大众喜爱，它能让用户在进入登录页或网站首页时，轻易地了解更多有关公司或产品的信息。

byCarloSoleri

byKirillZhukovsky

PART-3.1

遮罩型动画设计趋势

遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物，等同于舞台幕布设计，能在界面元素进场或退场时创造连续性效果。

切换场景Scene-Switching

这种表现手法简洁高效，是最常见的过渡动画之一。

byintent

byMinhPham

状态变换StateTransformation

另一种遮罩的表现形式，较无明显的场景过渡，而是利用遮罩来表现景物的状态变化，界面元素和布局基本保持一致。

byDanielTan

byOutcrowd

PART-3.2

视差动画设计趋势

视差是利用不同的界面元素以不同的速率移动，创造前后景深的分离效果，借此在平面中塑造空间层次，已成为网站首页最为普遍的表现形式。

byStudioVR

byStudioVR

PART-4.1

3D动态图形设计趋势

近年来，结合3D动态图形的界面设计呈现爆炸式增长，虽然创建3D动画需要更多的时间、技巧与协作，但不可否认的，3D动画比2D图形更加逼真，从而提供更具吸引力和互

更生动的表情LivelyEmoji

动画的吸引力在于能够创建各种角色，并为无数生命物体注入生命力，表情符号就是一个很好的例子。

byOutcrowd

营造空间感SpatialAwareness

3D动态图形为平面设计建构了空间叙事框架，在扁平化界面中展现立体感，从而表达空间中元素的位置与层级关系。

byUI8

byBrunoOrtolland

拟人动画AnthropomorphicAnimations

由于人们容易被以人类行事的事物所吸引，越来越多设计师在界面中添加拟人元素，利用这种效果让画面更加生动有趣，增强用户体验的愉悦感。

byGregoryRiaguzov

PART-4.3

摄像机运动设计趋势

在动态设计中，摄像机运动是最自由、灵活的一种表现形式，能让画面过渡更有张力，突破2D平面在视角上的限制，创造一个无界线的立体空间。

推进/拉出DollyIn/DollyOut

推镜头是指被拍摄的对象不动，摄像机由远而近，朝着对象不断推进，用来突出人或物的主体。

byMichaelCrawford

byAliZafarIqbal

水平/垂直移动Truck/Pedestal

水平向左或向右，垂直向上或向下移动摄像机，使画面不断变化，让用户跟随镜头视角一起移动，产生一种置身其中的感觉。

byNetguru

byMinhPham

结合多种运镜MultipleCameraMovements

运用多种摄像机运动相当普遍，既能扩大视野，又有很强的空间感，可以更加自由与多样地展示不同视角和情景。

byGregoryRiaguzov

byPaulIlnitski

一镜到底OneShot

在电影中为了不将观众的情感和注意力割裂，使用一个镜头来完成全片的场景刻画和叙事，这种拍摄手法被称作一镜到底或长镜头。

byOrizon:UI/UXDesignAgency

byMinhPham

动态设计作为近年热门的创作形式，广泛应用到各个领域，逐渐成为设计的主流趋势。本文归纳的设计趋势，有助于启发设计师对动态设计的想象，激发更多创作灵感，为静态界面赋予灵*，打造令人难忘的视觉体验和品牌形象。