2021年UI/UX设计流行趋势

在经历了全球疫情大流行检疫与隔离之后，2021的到来，虽然疫情还远未结束，但我们依然满怀希望与乐观。事实上一些设计流行趋势被疫情大流行所影响，并且它所创造的需求几乎涉及每一个领域。这些影响在2020年第三季度开始显现并在今年逐渐显现，对于设计流行趋势，每年的改版方向，视觉风格研究是必不可少的环节。

一、2021年设计主要流行趋势—3D

3D每一个设计细分领域都有它的身影，新奇的是它开始在扁平化所主导的UI领域被应用，由于我们拥有触手可及的新软件，这些软件易用，甚至有一些是免费的，例如Figma对自由职业者免费，且拥有方便制作3D效果的插件，当我们打开传统的C4D，3Dmax，Rhino及Maya等传统3D软件时，大部分设计师会感到无助，但现在有了Figma、Dimensions CC这样的软件，任何一个3D初学者设计师都能学会制作精美漂亮的3D作品。

苹果新操作系统Apple's Big Sur的发布将如何影响设计界？苹果公司展示了预览版本关于新的Mac界面会是什么样，设计中最重要的改变就是3D元素icon的应用，抛弃了灰色阴影，应用透明效果。

二、 UI&ID design 

a、App与Mobile web

为了更好的客户体验与交流，线上商店，社交媒体平台，交易平台等都会选择把客户迁移到App。研究显示，对于客户来说，移动端网站和APP比起来，用户更喜欢移动App。那些把重心放在网站服务等平台，会发现不论是向用户展现自身还是发展方面都处于劣势。根据Forbes.com显示，移动用户在App花费了90%的时间，而在浏览器和移动网站的时间花费仅仅为10%，当然App同样有劣势，例如研发和维护成本都更高。

b、色彩与留白

色彩是我们UI设计中最重要的视觉表现元素，能强调内容和加强品牌识别度，一个色彩主题它应该是和谐的，它能帮助UI元素和外观很容易彼此区分开。

外观包括标题、卡片、表单以及置于背景层上的元素这些卡片通常是白色的且有柔和的阴影过渡，创造一种悬浮效果，背景通常是白色或是浅灰色的。

c、组件大小

iOS14带来了一些新改变将影响整个UI设计，组件有大中小三个尺寸，如果要迅速的在app图标之间排布，设计师必须设计三种尺寸风格的组件，用户才能随意的选择其中一种使用。每一种尺寸呈现的信息量是不一样的，所以我们要准确清晰的展现内容，更大的组件能呈现更多的信息和数据。

d、动画与交互

动效是app设计和用户体验中的重要部分，如今，如果一个设计只是静态的没有相应的动效，似乎就是一个半成品。动效软件插件越来越流行，有很多方法可以制作动画，JSON能将图片和动画渲染成代码，它的优势相对于GIF它更小且支持全透明。

几年前，Airbnb创造了Lottie，这个工具制作小动画非常容易，能实时渲染动画，对于安卓，IOS，RN都是开源的，可以去尝试一下。

e、3D图标

3D是设计的重要部分，在Ui设计被扁平化主宰了近十年，如今3D对UI设计的影响超过以往任何时候，新拟物化、毛玻璃质感在2020年就已开始兴起，21年预计将会更流行。

三、插画设计

a、细轮廓插画风

2020年插画被这种风格所主导，直到2021年上半年，这种趋势似乎蔚然成风，所以2021年这种风格还将持续流行

b、3D风格插画

近几年，3D在设计中风起云涌，改变了很多，光滑立体的外观形象留下深刻印象。色彩表现力强，小清新，根据视觉所要传达的信息进行运用，与以往不同的是，受到简洁的扁平化设计所影响，3D插画形象更小。

四、动效与交互

a、随着短视频的流行，大公司用短视频内容形式做市场营销策略，随着Ins Reels的发布，大公司开始用这个工具为自己做宣传并扩大影响。短视频在年轻人中越来越流行并占据重要地位，动效越来越重要。

b、动效logo

动效logo已经出现很多年，现在非常流行并且用尽一切传达品牌，今年也该是很流行的。logo融合流畅自然的动效，使得任何一个公司都能深入人心难以忘却。

综上所述，UI界面的设计趋势呢？

一、少量的渐变

今年比起以往大面积的渐变设计，更加理性与克制，将渐变色运用到关键功能上，突出强调重要信息。

在机票选购中，将渐变色运用到头部位置去降调功能

运用在功能卡片上，突出重点信息

如上两图，设计上同样只讲渐变色运用在背景上，其他地方基本没有渐变色

二、包豪斯风格图形

几何图形设计是目前运用较多的一个设计手法，今年一些抽象艺术化的包豪斯风格几何图形在UI界面中被广泛使用，记忆性强，应用广，它不仅可以品牌包装，品牌图形延展，还可以用在UI设计中。

卡片设计采用一些具有意向符号的图形来表达功能的设计，形成记忆点

品牌设计上，也是可以运用的，将logo元素提取，进行包豪斯风格化设计，重复运用在设计中。

三、有深度的界面

大量3D运用在界面设计中，2D、2.5D已经不在满足当前设计需要，设计师探索更多维与UI界面设计融合，形成一种全新的视觉感官。

Uber概念官网，通过3D来呈现，表达功能亮点

将二维世界三维甚至多维化，将是2021年重要的趋势。目前国内外线上有一些产品，开始在部分功能模块使用这样设计手法，如Naver，支付宝等。

四、毛玻璃效果

可以说是趋势轮回，毛玻璃的效果又回来了，新的毛玻璃效果更加去注重功能说明，用在视觉强调的地方。

用在顶部关键信息上，这样可以减少其他色彩使用，又不显得色彩单调，还可以对功能信息进行强调

毛玻璃用在个人中心，人物头像位置，进行设计强调

运用毛玻璃效果去包装UI界面，还可以提升品质感与神秘感

五，沉浸式界面

将功能与场景融合设计，视觉效果冲击力强，用户在使用产品过程中，能产生更多情景体验感触。

场景中关键人物与设计巧妙结合

人物与酒店场景结合

制作材料与产品结合

拟真植物元素与土地进行巧妙结合，在视觉上达到逼真效果

六、界面排版杂志化

杂志化设计风格鲜明，强化记忆点，可以不受网格约束，使用大字体排版，更加个性，在做产品概念探索前期，可以尝试这种风格。

七、拟物化图标

这种风格也不能大面积运用在界面中，我们可以运用在一些关键功能入口设计上。拟物图标又回来了，apple新版本的Big Sur系统，就采用拟态图标，这也是一个新的尝试，当然也是一个开始，有必要时刻关注这个趋势，未来将会在更多设计中看到拟物化图标的出现。

在天气上的运用，相对之前扁平化设计，目前具有空间的拟物化设计，增加了真实感

八、圆形的运用

亲和力强，场景覆盖广，几乎任何设计都能去用圆形

星巴克Web端UI概念设计

九、新拟态界面

大量使用了柔和的阴影和微弱渐变，使设计既具有未来感又具有现实感，并且为熟悉的界面带来了新的感觉。相对之前大面积浓厚阴影而言，目前新的简化拟态界面，会克制使用这些元素。

2021年拟态界面，更注重功能与体验。拟态效果会使用在关键功能上，如仪表、按钮，又或者需要重点强调的地方，避免了大面积使用这种设计手法。

题图来自Unsplash，基于CC0协议