本篇结合当下最佳流行设计与实例，浅析 2021 年动效趋势，希望可以 You guys 带来一些灵感~全篇多动图与视频，可口易咀嚼~请放心服用
（(⊙_⊙)温馨提示：因内含视频可提前将音量调节至静音，动图需加载等待）
动效设计在 UI 的使用除了其五彩斑斓的外表( 花里胡哨 ），也有# . [ b k硬核的内心。对产品和用户影响相辅相成，动效作用可I C \ | a S ! b W以体现在 ——
1. 使用动效使产品达到层级传达的效果，让用户快速清晰页面\ _ r : P / $ + [的层级结构，减少用户的认知成j q \本
2. 可以将一- 3 G \ $些引导操作以动效的形式呈现，吸引用户的注意，互动形式的动效反馈提升用户的操控感
3. 有趣的动效往往会使产品更加生动形象，可以向用户传达出相应的情绪，从而引发用户的共鸣，增强用户感官体验
接下来围绕当前动效趋势，分享 3 招让# e v r M x ,你的动效更丰富——分别是 P1 虚拟现实 P2 轻量风格 P+ 0 ] % t D o3 粗犷主义
首先来看动效趋势中的第一式 ——虚拟现实
静态或扁平的设计在 App 与网页中大家已经习以为常，增加 3D 或 AR 等立体元素让平淡的页面更加生动，让用户在虚拟世界感受现实世界的真切
1. 3D 动效
3D 动效是虚拟现实的基础，越来越多的 3D 设计被用于 App 中\ ^ K j r ~，所以 3D 立体元素应用到互联网产品中是一种不可忽视的趋势，结合上 3D 动效后会使得产品更加生动有趣
3D 元素非常多样，如 3D 人物、大火的 Big sur 图标、手势实物等
动图
我们看下微软最新的 3D 表情案例视频来感受一下
2. 新拟态
新拟态在今年的概念稿中让大家眼前一亮，通过渐D P . S变与光影打造一种伪 3D 的效果，在! Y ! | W } mac OS 的 Big sur 系统中有所涉略——比如开关按钮等将投影和高光效果更为细化了
但是识别性差是这种风格的弊端，所以广泛应用前需进行更深入的研究，提升其辨识度
这些图模拟光影变化实现伪 3D 立体感，类似于浮雕的效果，介于扁平和投影之间。
图标设计上g W l I _ @ p X E同样也可以使用到新拟态效果，结合了新拟态与多彩效果不再单一难识别。
3. 实景再现
使用动效进行还原真实场景，或者最新的一些实时热点，提升趣味性的同时也让用户获得更多的体验。
左边是腾讯最新的动效表情 yyds、又菜又狗等活泼可爱热词U l { ! [ ^ H，右边调节温度背景色的调整与动态气流似乎真的可以体验温度变化。
可以看到一下视频中，动态 AR 在视频运用~ ! R H { 0 p M上越来越广泛，人脸识别跟随动效这类真实场景集成到设计中。
接下z 1 Y =来，传授第二式 —— 轻量风格
何为轻量风格？利用液态、梦[ a 7 5 D @ ]幻色彩打造清透的质感，朦胧的透气性使得整体设计更轻质灵动。
1. 极光液态
轻量风格的第一内容，极光液态。它的使用早在P O v Y { R \ x微软系统中就有体现，交错的流光与液态感赋予了产品灵气，为设计提升了呼吸感。
UXDC 的液态宣讲会大家都有印象了。当今液态的运用如 iOS 14 设计、或概念稿中结合极光背景和点击后的液态柔软触感都很有趣。
欣赏一下微软发布极光液态动效的视频k = ! h [ j ! B m更为直观，用色选择以及液态运用非常舒适。
2. 玻璃模糊
轻量风格的第二内容，玻璃模糊效果。玻璃模糊效果的出现给设计领域带来了更多的设计可能性，轻量的材质变化提升了视觉美感
「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！
还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？
阅读文章 &gS * + Z N { M mt;
腾讯的图标、网页设计运用、苹果图标的玻璃质[ e 0 B感都让设计有了新的冲J 5 x ,击。
优酷在今年的品牌设计中大胆运用了轻量风格，液态结合极光撞色，柔和清透却不失冲击力，玻璃质感的点缀更为画龙点睛。
招式不用多，第三招终极大招\ C ; I Q——粗犷主义
常规认为设计是精致的h . G P V - a，但结合跳跃性的质感给人们带来更刺激的愉悦感，不太规矩的质感、酷炫极致的风格统称为粗犷主义。
1. 酸性 && 8 t d l + Vamp; Y2K
酸性 & Y2K 的e N n : 3出现可谓是带来了一股复古风潮，是一种腐蚀2 e Q p U 5 S m *性感观，实际上代表着幻彩搭配给人以迷幻的效果。
超级潮！酸性设计风格的由来、风格特点和应用科普
酸性设计的由来 酸性风格来源于迷幻艺术Psychedelia，在英文中称为Ax y [ g B Ocid Graphics。
阅读文章 >
它是类| = N F O + n x z千禧年的潮流风，给用户一种未来感，科技感，复古虚幻。
可以看到致幻的酸性风格与复古的 Y2K 风格图，特别又极致。
通过一段视频了解一下酸性与动效的结合。
2. 加粗字体
加粗的字体如何让它变得个性化？并非狭义上的粗体，而是广义上让用户更直观的看到文字* O Y H (表达，特殊排版加上复古元素让你的文字动效时尚吸睛。
字体案例，加粗字体、重复式、故障风、文字扭曲或环状文字都让其充满趣味和律动。
今年奥运会海报同样也! C ( 3 v B V将字体结合国潮、酸性等潮流元素。
3# a * 8. 真实材质
粗狂风格不止于一些虚无的感V & ^觉，大块几何结合真实材质或仿真材质进行设计Z + j * K ! X @，如积木、软陶等可以使设计更具有创新质感。
左边的插画人物身体都是由几何积木拼接，右边是一款记账软件用软陶的花朵表示数量多少。
利用几何积木拼接人物造型。
快速制作 3D 图形软件——Spline
对于 3D 设计有许多软件可使用，最常见无疑是 C4D，但是学习成本较高，对于想要快速制作 3D 图形的小伙伴—— Spline 无疑是绝佳的选择，操作简单易上手，界面同 Sketch 与 PS 学习成本低，从设计到建模可直接在Sp( t # k E j t Zline中实现。
下载地址： https://spline.d} % e ^ m 4 c nesign/
可以花一分钟来小小了解一下使用视频m t - f G Y H：
通过以上三个动效招式，希望通过粗浅介绍，让大家了解 2021 动效部分趋势，也让我们的设计有更多的可能性和趣味性~
谢谢大家~(๑••๑)
从五大方面，盘点2021年中UI/UX设计趋势
前几天( n /发布一个 UI/UX 的趋势分析视频，今天把视频内容整理成了文字版，方便大家阅读。
阅读文章 >
欢迎关注作者微信公众号：3 ; + ` e E「UED粽一了」
相关文章
