本篇结合当下最佳盛行设计与实例,浅析 2021 年动效趋势,期望能够 You guys 带来一些灵感~全篇多动图与视频,可口易咀嚼~请放心服用
((⊙_⊙)温馨提示:因内含视频可提早将音量调理至静音,动图需加载等候)
动效设计在 UI 的运用除了其五彩斑斓的表面( 花里胡哨 ),也有硬核的心里。对产品和用户影响相得益彰,动效作用能够体现在 ——
1. 运用动效使产品达到层级传达的作用,让用户快速清晰页面的层级结构,削减用户的认知本钱
2. 能够将一些引导操作以动效的方式出现,吸引用户的留意,互动方式的动效反馈提高用户的操控感
3. 风趣的动效往往会使产品愈加生动形象,能够向用户传达出相应的心情,从而引发用户的共识,增强用户感官体会
接下来环绕当时动效趋势,分享 3 招让你的动效更丰富——分别是 P1 虚拟现实 · P2 轻量风格 · P3 粗暴主义
2021-2022 年 UI/UX 设计趋势:动效篇
首先来看动效趋势中的榜首式 ——虚拟现实
静态或扁平的设计在 App 与网页中我们已经习以为常,增加 3D 或 AR 等立体元素让平淡的页面愈加生动,让用户在虚拟国际感受现实国际的逼真
1. 3D 动效
3D 动效是虚拟现实的根底,越来越多的 3D 设计被用于 App 中,所以 3D 立体元素运用到互联网产品中是一种不行忽视的趋势,结合上 3D 动效后会使得产品愈加生动风趣
2021-2022 年 UI/UX 设计趋势:动效篇
3D 元素十分多样,如 3D 人物、大火的 Big sur 图标、手势实物等
2021-2022 年 UI/UX 设计趋势:动效篇
动图
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
我们看下微软最新的 3D 表情事例视频来感受一下
2. 新拟态
新拟态在本年的概念稿中让我们眼前一亮,经过渐变与光影打造一种伪 3D 的作用,在 mac OS 的 Big sur 体系中有所涉略——比方开关按钮等将投影和高光作用更为细化了
2020 年最火的新拟物化设计趋势,快来了解下!
@布莱恩臣 :日前,在网上盛行起了一种叫 Neumorphism 的新风格,也有人称为 Soft UI,这是一种类似于浮雕的作用。这种风格的出现,给现在盛行的扁平化设计增加了一种新的设计方式,很多媒体乃至还将这个风格列为 2020 的设计趋势,三星 Galaxy 系列的发布会宣传海报也运用了这种风格,可见这个风格的火热程度。
阅览文章 >>
但是辨认性差是这种风格的坏处,所以广泛运用前需进行更深入的研讨,提高其辨识度
2021-2022 年 UI/UX 设计趋势:动效篇
这些图模拟光影改变实现伪 3D 立体感,类似于浮雕的作用,介于扁平和投影之间。
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
图标设计上相同也能够运用到新拟态作用,结合了新拟态与多彩作用不再单一难辨认。
3. 实景再现
运用动效进行复原实在场景,或许最新的一些实时热门,提高趣味性的一起也让用户取得更多的体会。
2021-2022 年 UI/UX 设计趋势:动效篇
左面是腾讯最新的动效表情 yyds、又菜又狗等活泼可爱热词,右边调理温度背景色的调整与动态气流似乎真的能够体会温度改变。
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
能够看到一下视频中,动态 AR 在视频运用上越来越广泛,人脸辨认跟从动效这类实在场景集成到设计中。
接下来,教授第二式 —— 轻量风格
何为轻量风格?运用液态、梦幻颜色打造清透的质感,含糊的透气性使得全体设计更轻质灵动。
1. 极光液态
轻量风格的榜首内容,极光液态。它的运用早在微软体系中就有体现,交织的流光与液态感赋予了产品灵气,为设计提高了呼吸感。
2021-2022 年 UI/UX 设计趋势:动效篇
UXDC 的液态宣讲会我们都有形象了。当今液态的运用如 iOS 14 设计、或概念稿中结合极光背景和点击后的液态柔软触感都很风趣。
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
欣赏一下微软发布极光液态动效的视频更为直观,用色挑选以及液态运用十分舒适。
2. 玻璃含糊
轻量风格的第二内容,玻璃含糊作用。玻璃含糊作用的出现给设计范畴带来了更多的设计可能性,轻量的原料改变提高了视觉美感
「新拟物化」过期了!此刻你最应该拥抱的是「玻璃拟物化」!
还记得本年年初我们追捧的 新拟物化(Neumorphism)风格嘛?这种风格开端在社交媒体上风靡,很大程度上,来源于资深设计师 Michal Malewicz 的文章《Neumorphism in user interfaces》,这篇文章透过 Medium 平台,开端在各个设计师社区当中发酵,随后被不少平台猜测为 2020 年会逐渐盛行的一种视觉设计风格。
阅览文章 >>
2021-2022 年 UI/UX 设计趋势:动效篇
腾讯的图标、网页设计运用、苹果图标的玻璃质感都让设计有了新的冲击。
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
优酷在本年的品牌设计中大胆运用了轻量风格,液态结合极光撞色,柔软清透却不失冲击力,玻璃质感的装点更为画龙点睛。
招式不用多,第三招终极大招——粗暴主义
常规以为设计是精美的,但结合跳动性的质感给人们带来更影响的愉悦感,不太规则的质感、酷炫极致的风格统称为粗暴主义。
1. 酸性 & Y2K
酸性 & Y2K 的出现可谓是带来了一股复古风潮,是一种腐蚀性感观,实际上代表着幻彩搭配给人以迷幻的作用。
超级潮!酸性设计风格的由来、风格特点和运用科普
酸性设计的由来
酸性风格来源于迷幻艺术Psychedelia,在英文中称为Acid Graphics。其中(Acid)一词原指一种致幻剂LSD。
阅览文章 >>
它是类千禧年的潮流风,给用户一种未来感,科技感,复古虚幻。
2021-2022 年 UI/UX 设计趋势:动效篇
能够看到致幻的酸性风格与复古的 Y2K 风格图,特别又极致。
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
经过一段视频了解一下酸性与动效的结合。
2. 加粗字体
加粗的字体如何让它变得个性化?并非狭义上的粗体,而是广义上让用户更直观的看到文字表达,特殊排版加上复古元素让你的文字动效时尚吸睛。
2021-2022 年 UI/UX 设计趋势:动效篇
字体事例,加粗字体、重复式、毛病风、文字扭曲或环状文字都让其充满趣味和律动。
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
本年奥运会海报相同也将字体结合国潮、酸性等潮流元素。
3. 实在原料
粗狂风格不止于一些虚无的感觉,大块几许结合实在原料或仿真原料进行设计,如积木、软陶等能够使设计更具有立异质感。
2021-2022 年 UI/UX 设计趋势:动效篇
左面的插画人物身体都是由几许积木拼接,右边是一款记账软件用软陶的花朵表示数量多少。
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
2021-2022 年 UI/UX 设计趋势:动效篇
运用几许积木拼接人物造型。
2021-2022 年 UI/UX 设计趋势:动效篇
快速制造 3D 图形软件——Spline
对于 3D 设计有许多软件可运用,最常见无疑是 C4D,但是学习本钱较高,对于想要快速制造 3D 图形的小伙伴—— Spline 无疑是绝佳的挑选,操作简略易上手,界面同 Sketch 与 PS 学习本钱低,从设计到建模可直接在Spline中实现。
下载地址: https://spline.design/
2021-2022 年 UI/UX 设计趋势:动效篇
能够花一分钟来小小了解一下运用视频:
这7个素材网站,帮你搞定3D设计!
编辑搜罗全网,为我们整理了 7 个 3D 素材网站,让我们来看看吧~
彻底免费版:
[link https://www.uisdc.com/7-commercially-available-3d-material]
教程:
[link https://www.uisdc.com/3d-self-study]
Wannathis
Wannathis 提供了 200 多个设计素材,包含了人物、图形、电子设备等多种分类,提供 Png、Figma、Bleder 格式文件,还有一组静态和…
阅览文章 >>
经过以上三个动效招式,期望经过粗浅介绍,让我们了解 2021 动效部分趋势,也让我们的设计有更多的可能性和趣味性~
谢谢我们~(๑•ω•๑)
从五大方面,盘点2021年中UI/UX设计趋势
前几天发布一个 UI/UX 的趋势剖析视频,今天把视频内容整理成了文字版,便利我们阅览。
往往巨大的事业都是从七月开端的、我用一个设计师的视角,来盘点一下 UI/UX 职业这半年的设计风格走势。
阅览文章 >>
欢迎重视作者微信大众号:「UED粽一了」
2021-2022 年 UI/UX 设计趋势:动效篇