2021-2022 年 UI/UX 设计趋势：动效篇

本篇结合当下最佳盛行设计与实例，浅析 2021 年动效趋势，期望能够 You guys 带来一些灵感~全篇多动图与视频，可口易咀嚼~请放心服用

（(⊙_⊙)温馨提示：因内含视频可提早将音量调理至静音，动图需加载等候）

前语

动效设计在 UI 的运用除了其五彩斑斓的表面( 花里胡哨 ），也有硬核的心里。对产品和用户影响相得益彰，动效作用能够体现在 ——

1. 运用动效使产品达到层级传达的作用，让用户快速清晰页面的层级结构，削减用户的认知本钱

2. 能够将一些引导操作以动效的方式出现，吸引用户的留意，互动方式的动效反馈提高用户的操控感

3. 风趣的动效往往会使产品愈加生动形象，能够向用户传达出相应的心情，从而引发用户的共识，增强用户感官体会

目录

接下来环绕当时动效趋势，分享 3 招让你的动效更丰富——分别是 P1 虚拟现实 · P2 轻量风格 · P3 粗暴主义

虚拟现实

首先来看动效趋势中的榜首式 ——虚拟现实

静态或扁平的设计在 App 与网页中我们已经习以为常，增加 3D 或 AR 等立体元素让平淡的页面愈加生动，让用户在虚拟国际感受现实国际的逼真

1. 3D 动效

3D 动效是虚拟现实的根底，越来越多的 3D 设计被用于 App 中，所以 3D 立体元素运用到互联网产品中是一种不行忽视的趋势，结合上 3D 动效后会使得产品愈加生动风趣

3D 元素十分多样，如 3D 人物、大火的 Big sur 图标、手势实物等

动图

我们看下微软最新的 3D 表情事例视频来感受一下

2. 新拟态

新拟态在本年的概念稿中让我们眼前一亮，经过渐变与光影打造一种伪 3D 的作用，在 mac OS 的 Big sur 体系中有所涉略——比方开关按钮等将投影和高光作用更为细化了

但是辨认性差是这种风格的坏处，所以广泛运用前需进行更深入的研讨，提高其辨识度

这些图模拟光影改变实现伪 3D 立体感，类似于浮雕的作用，介于扁平和投影之间。

图标设计上相同也能够运用到新拟态作用，结合了新拟态与多彩作用不再单一难辨认。

3. 实景再现

运用动效进行复原实在场景，或许最新的一些实时热门，提高趣味性的一起也让用户取得更多的体会。

左面是腾讯最新的动效表情 yyds、又菜又狗等活泼可爱热词，右边调理温度背景色的调整与动态气流似乎真的能够体会温度改变。

能够看到一下视频中，动态 AR 在视频运用上越来越广泛，人脸辨认跟从动效这类实在场景集成到设计中。

轻量风格

接下来，教授第二式 —— 轻量风格

何为轻量风格？运用液态、梦幻颜色打造清透的质感，含糊的透气性使得全体设计更轻质灵动。

1. 极光液态

轻量风格的榜首内容，极光液态。它的运用早在微软体系中就有体现，交织的流光与液态感赋予了产品灵气，为设计提高了呼吸感。

UXDC 的液态宣讲会我们都有形象了。当今液态的运用如 iOS 14 设计、或概念稿中结合极光背景和点击后的液态柔软触感都很风趣。

欣赏一下微软发布极光液态动效的视频更为直观，用色挑选以及液态运用十分舒适。

2. 玻璃含糊

轻量风格的第二内容，玻璃含糊作用。玻璃含糊作用的出现给设计范畴带来了更多的设计可能性，轻量的原料改变提高了视觉美感

腾讯的图标、网页设计运用、苹果图标的玻璃质感都让设计有了新的冲击。

优酷在本年的品牌设计中大胆运用了轻量风格，液态结合极光撞色，柔软清透却不失冲击力，玻璃质感的装点更为画龙点睛。

粗暴主义

招式不用多，第三招终极大招——粗暴主义

常规以为设计是精美的，但结合跳动性的质感给人们带来更影响的愉悦感，不太规则的质感、酷炫极致的风格统称为粗暴主义。

1. 酸性 & Y2K

酸性 & Y2K 的出现可谓是带来了一股复古风潮，是一种腐蚀性感观，实际上代表着幻彩搭配给人以迷幻的作用。

它是类千禧年的潮流风，给用户一种未来感，科技感，复古虚幻。

能够看到致幻的酸性风格与复古的 Y2K 风格图，特别又极致。

经过一段视频了解一下酸性与动效的结合。

2. 加粗字体

加粗的字体如何让它变得个性化？并非狭义上的粗体，而是广义上让用户更直观的看到文字表达，特殊排版加上复古元素让你的文字动效时尚吸睛。

字体事例，加粗字体、重复式、毛病风、文字扭曲或环状文字都让其充满趣味和律动。

本年奥运会海报相同也将字体结合国潮、酸性等潮流元素。

3. 实在原料

粗狂风格不止于一些虚无的感觉，大块几许结合实在原料或仿真原料进行设计，如积木、软陶等能够使设计更具有立异质感。

左面的插画人物身体都是由几许积木拼接，右边是一款记账软件用软陶的花朵表示数量多少。

运用几许积木拼接人物造型。

小彩蛋

快速制造 3D 图形软件——Spline

对于 3D 设计有许多软件可运用，最常见无疑是 C4D，但是学习本钱较高，对于想要快速制造 3D 图形的小伙伴—— Spline 无疑是绝佳的挑选，操作简略易上手，界面同 Sketch 与 PS 学习本钱低，从设计到建模可直接在Spline中实现。

下载地址： https://spline.design/

能够花一分钟来小小了解一下运用视频：

写在最后

经过以上三个动效招式，期望经过粗浅介绍，让我们了解 2021 动效部分趋势，也让我们的设计有更多的可能性和趣味性~

谢谢我们~(๑•ω•๑)

欢迎重视作者微信大众号：「UED粽一了」