前言

由于全球疫情的大流行，使得时间似乎停在了这么一个特殊的年份，2021年的设计趋势依旧延续自2020年，没有巨大的变化。但是疫情对于设计影响是潜移默化的，深入了每一个领域。任何一个新事物的出现，都有可能对我们的行业造成巨大的冲击。我们能做的是，在趋势刚刚出现的时候，寻找到它，赶在趋势到来之前思考未来的方向，在变化降临之前先拥抱变化。

(注:图片来自网络，已标明作者，部分未知作者未标注，如有侵权请告知删除)

*阅读全文大概需要18分钟

随着高效且易用的3d软件工具的出现，3D 元素已经开始变得越来越受欢迎。所以毫无疑问，3D绝对是2021年的设计趋势，在每一个设计细分领域都能看到3D所带来的改变，并且在现在扁平化所主导的UI领域中风靡一时。目前也有许多团队或个人推出了3D预设元素，帮助3D小白更快地搭建出具有冲击力的视觉组合。

(3D设计工具 Spline)

3D图标的应用，以2020年苹果发布的macOS Big Sur系统中应用3D效果图标为节点，将又要引领一波设计趋势。新拟态风格的3D图标与之前的强拟物风格不同，它在保留了主体元素的基础上去除了大量繁琐的的细节，整体更加轻量化，降低了视觉负重。

(Big Sur系统图标)

目前各大厂已经开始尝试在产品中加入3D元素，主要以主视觉3D化、IP形象3D化为主，通过更加立体的视觉形象突破传统的视觉冲击力加深用户对品牌印象，给用户营造一种时刻建立品牌认知的习惯，加深用户对品牌的记忆点。

（来自设计师Mike）

（来自支付宝花呗屏闪）

二.玻璃拟物化

这是UI设计的最新趋势，它主要基于一种叫做背景模糊的效果，它基本上创造了元素的“穿透玻璃”的效果。它先是在WindowsVista中被引入，后来又在iOS7中出现，在这里停留了一段时间后以全新的形式出现！

 INEXTURE Solutions LLPMark Vlasov

而再次兴起则是因为MKBHD（油管博主） 首先提到了风格Glassmorphism （玻璃拟物化）是 Glass（玻璃）和 Skeumorphism（拟物化）的结合，也确实在2020成为了流行视觉元素，并且这个潮流延续到了2021年。

总的来说毛玻璃拟物化可以提升界面的：层次感、品质感、用户的惊喜感、更好的表达用户当前的位置。

玻璃拟物化的在UI中应用可以大致分为3类，分别是：卡片、图标、背景

利用磨砂玻璃的效果强化卡片的层次和质感，相交处加以渐变描边来模拟玻璃的边框，使玻璃层从背景中分离出来。

图标采用渐变+玻璃拟物化的效果，使图标出现通透的层次效果，更加精致，有效的提升视觉表现力。

背景经过玻璃层的处理显得非常柔和，同时位于背景前的文本、UI控件等保持着良好的可读性。

Dhika Endi Astowo

动效的意思理解起来是界面之间点击或跳转会产生丰富有趣的动画效果给到用户一种即可反馈的效果。近年来动效设计的使用越发流畅，动效在界面的使用上显得更有生命力，提升了用户与界面之间的交互体验。

人的视觉感官较为发达，对肉眼可见即时反馈的东西往往会更容易有带入感，现在许多产品都加入了或多或少的一些动效设计，大体可分为两种：一、功能型动效，主要是页面空间的转换，视觉信息的即时反馈；二、趣味型动效，加入品牌元素，增强趣味化；动效在界面使用上摘下了枯燥乏味的标签，新颖生动有趣的动效更容易拉近产品与用户的关系，同时也可以通过趣味化动效做好运营气氛的烘托。

社交产品上的表情包，例如：微信，最新版本的官方小表情【炸弹】【烟花】······ 上线后圈粉不少，一度在聊天框中霸屏，趣味表情包，在用户使用时带来趣味性，增强了互动性。再例如：头条、微博的点赞功能，连续点赞会触发拇指发射的小动效，当用户触发到此功能时会产生惊喜感，等同与KANO 模型中的魅力型需求，不会被用户过分期望的需求，一旦得到满足，即使表现并不完善，用户表现出的满意状况则也是非常高的。

娱乐视频产品，例如：爱奇艺，优酷，在特殊节日，例如春节、国庆等，播放视频会有烟花小动效的浮现，但又不影响视频观看，给人营造一种，视频都在庆祝节日的感觉，无意触碰到便是一朵烟花的绽放，给用户一种惊喜感，使用产品的愉悦感油然而生。

四.VR实景

因为疫情的特殊原因，逐渐催生出了“宅生活”“云经济”。随着各行各业被“赶上云端”，VR展示全面融入人们的生活，并广受大众喜爱。而个各式各样的VR图形设计软件其实也早已问世，并且已经有了相对成熟的技术，例如Ottifox，Ottifox是一款灵活的设计应用程序，它可以帮助你创建在浏览器中运行的VR和AR原型，而无需编写代码。

（来自https://www.ui.cn/detail/328690.html）

目前国内的房产售卖租赁和装修类的线上产品，大部分都采用了这种VR实景技术，让用户足不出户就可以直接查看到在售卖租赁的房源实景，还加入了VR语音带看技术极大的程度上给用户便利，VR实景的技术可以实现在手机上360度看房实景比单纯的房源照片带入感更强，在某种程度上也提高了看房率。

AR增强现实(Augmented Reality)技术是一种将虚拟信息与真实世界巧妙融合的技术，广泛运用了多媒体、三维建模、实时跟踪及注册、智能交互、传感等多种技术手段，将计算机生成的文字、图像、三维模型、音乐、视频等虚拟信息模拟仿真后，应用到真实世界中，两种信息互为补充，从而实现对真实世界的“增强”。

AR应用越来越广泛目前 AR 的应用已融入到了工业制造的交互、营销、设计、采购、房屋租购、物流和服务等各个环节，利用基于5G的AR远程协助，更快捷和现实结合直观的提供用户更好的体验。AR与商品的结合，产品详情页提供入口，将AR作为展示功能的延伸，弥补仅靠图片和视频展示的不足，如得物试鞋、天猫京东等大平台的AR试妆、家装AR等。

AR结合生活，AR增强现实技术与VR虚拟现实技术已经逐渐在我们生活中越来越多了的场景出现。在导航方面其中高德地图AR实景结合。掏出手机对准实景，就有箭头指示方向，让用户在使用的时候与现实结合更直观的使用导航到达目的地。

AR浏览展览馆，如今在游览特定的展馆，如博物馆、科技馆、项目窗口展示馆等，或者景区景点过多等情况下，在无法接触展品或观看景点时。多数的展馆会使用语音讲解，当AR运用在博物馆讲解时，可以进行实景导航。将讲解和现场画面进行很好的匹配、融合，沉浸式体验博物馆讲解。只要抬起手机就能识别当前位置，选择感兴趣的展品，可直观地在实时图像上呈现导航讲解，提高游览者的参观游览体验。

VUI不是新概念，它的前身是IVR（Interactive Voice Response，交互式语音应答），诞生于20世纪70年代。语音用户界面是一种允许人们使用其语音与设备进行交互的技术；被认为是人工智能时代下的人机交互代表。使用者依靠声音发出指令，用户就能够与设备进行沟通，并在短短几分钟内达成目的，让产品用得更贴心。

在过去的一年中，我们能看到了越来越多的“语音交互”模块在上线产品中出现，所以大胆预测一下：2021年，我们将看到更多语音指令的落地化设计，VUI作为与技术交互的媒介也将变得更加重要。

夸克浏览器（用半屏展示的案例）

（使用全屏聚焦展示的案例）

七.全屏流的使用

全屏流这种交互方式从视频类的app开始兴起，再逐渐运用在各种app中。全屏能给用户带来更多沉浸式的用户体验。简洁的设计和信息可以让用户聚焦在当前的页面信息中。全凭流的信息介绍，用于商品页面，放大商品细节，全屏流的交互方式可以减少页面过多别的信息干扰，将展示的关键信息更明了。

全屏流的菜单交互会比较灵活易变，能够提升而非破坏用户体验。新颖的交互方式带来了更多的数据呈现方式，整洁地排布文字与多媒体内容。交易界面展示的信息一目了然。

插画作为现代设计的一种重要的视觉设计传达形式，以其直观的形象性，真实的生活感和美的感染力，在现代设计中占有特定的地位。发展至今二十一世纪，已被广泛用于社会的各个领域，在ui设计中，引导页，banner，营销视觉等多处都会使用到插画。对于2021年ui插画的趋势，我们总结为以下几点：

• 01、3D插画

近几年3d的大火在也蔓延到了插画方面，越来越多插画采用建模或用软件绘制出立体效果。应用至UI中的3D插画不追求过分逼真和拟物式的光泽感，一般采用磨砂质感，整体造型简约、具有设计感，画面颜色丰富明快，人物的造型通常也比较夸张。

(来自-智联招聘)

作为在插画方面风靡已久的风格，近几年依旧会是流行趋势。扁平化的造型中叠加颗粒感的笔刷效果，对提升画面细腻度，增强质感来说是一个简单又快捷的方式，因此在插画中运用范围十分广泛。

 (来自Lana Marandina)

(来自Uran)

线条描边风是一种极具表现力的形式。色块与线条相结合，简化轮廓细节，提炼出简洁主体加以夸张，搭配强烈的色彩，可以在视觉上呈现较大的冲击力与张力。如今线条的使用也不单单只在于描绘轮廓，对光影描绘和画面装饰都有多处的运用。

(来自ZeBang)

极具色彩冲击力的插画越来越受年轻群体的欢迎。高饱和度色系、撞色、对比色的大胆运用，再融入渐变色彩，让画面吸人眼球的同时对运营氛围的烘托起了重要作用。这种色彩风格对于想要营造造时尚、科技、炫酷的氛围有极佳的效果。

现纯粹的色块式扁平插画在大家对此审美疲劳的今天可能会显过于简单，这时扎根于绘画基础中的几何形状在造型中的作用越发重要，21年的插画造型会更加注重与几何形状相结合的夸张形态：可以打破原本扁平插画的单调感，也可让人物造型更具艺术感，让画面充满抽象、设计感的氛围。

（来自Alona Shostko）

(来自Tania Yakunova)

近几年，过渡柔和的轻量渐变越来越受欢迎，由于其简约、可用性高，兼顾美感的同时，可以创造出让人放松、温暖的氛围。因此对于期望传达轻松、治愈风格的产品，轻量渐变尤为贴合。

特点：饱和度低、明度高，邻近色系居多，过渡细腻柔和

（来自新版优酷）

在ui中，这种渐变可使用在背景、图标、瓷片区等设计中······

（来自Muhammad Shofiuddoula）

运营画面

界面背景图标、状态插画(来自新版优酷）

iOS11发布后，大标题导航栏设计风格兴起，随后被引入平台规范，因此大标题风格在UI设计中占有独特的地位，当然了这种设计风格也会延续到了2021年。虽然大标题风格占独特的地位，但是要落地到真正的产品中去，不是所有产品都可以适用的，要根据具体情况。大标题的在UI中可以分为是：大标题导航栏、tab栏大标题、模块化大标题 

02、改良版的大标题导航栏

iOS11大标题设计，会占用屏幕较高的空间，大大降低屏幕利用率，一般PM和老板都是不能接受的，因此在iOS11的大标题导航栏上进行了改良，隐去导航栏的分割线，缩小导航栏中的字体，使导航栏在视觉上显得更高，更有呼吸感

产品：陌陌、开言英语、QQ音乐

 03、Tab栏大标题

随着iOS11大标题风格的流行，tab栏切换样式也出现了大标题选中样式，这样能够迅速帮助用户辨识自己所在的位置。

产品：陌陌、keep、酷狗音乐

04、模块化大标题

模块化大标题常配合大留白在界面中使用，在界面上能够更好地区分层级。

产品：得到、开言英语、千聊

随着Material Design的流行，卡片式设计几乎成为当前界面设计的主流模式，不管是在移动端还是在web端，都可以随处可见卡片式设计，因此在2021年还会继续延续这个设计风格。卡片设计应用的场景实际上有很多，我们着重分析卡片流中的应用。

大卡片流在UI中应用

支付宝（消息）、滴滴出行（行程）、美团（订单）中，都采用以文字信息为主的卡片形式，并用固定的排版方式进行信息的展示。不同的是卡片中的操作按钮，在支付宝、滴滴出行中的按钮是用户进行查看的操作，不涉及产品的转化，因此使用的是视觉层级较弱的文字按钮；而在美团订单页面中的再来一单按钮具有转化的功能，因此在按钮中运用品牌色，突出并引导用户去选择。

虽然没有人知道2021年的趋势会如何脱颖而出，很快就会被遗忘，但是我们可以先行感知这些趋势，在变革到来之前，提前拥抱变化。

Powered by Froala Editor