2021年UI / UX设计趋势

我们知道，每年都会出现一些UI / UX设计趋势列表，就像潮流一样。当大多数参与者开始遵循这种趋势时，它不可避免地会因为过度饱和而变得无效。因此，设计师的出路是时不时的看看他们，不时为客户提供一些新的东西，而对于企业主来说，这是他们品牌发展的一个思想来源。

我们拥有10多年的Web和移动应用程序设计经验，知道如何使用UI / UX趋势来设计适用于任何行业的视觉愉悦且有效的数字产品。因此，我们准备了一份2021年UI / UX设计趋势清单，以及可能面临的挑战。充分利用UI和UX设计的最佳实践，并创建强大而有能力的产品。

1 所有事物都是远程和虚拟的

2020年我们经历了从在家工作到虚拟现实的新潮流，所有远程方面都是2020年的主要设计趋势，而且在未来将一直如此。AR和VR出于必要性已经在2020年初突飞猛进地进入到了医疗、教育和艺术领域。事实上，过去很多公司都曾尝试过，但都以失败告终，但事实是，它从未像我们想象的那样。

据悉，Zoom的股价在一年内上涨了600％。随着类似工具的出现，现在它的需求量很大，这些东西将进一步大规模发展，从而形成成熟的“虚拟办公室”生态系统。我们将很快在VR中看到更多的企业会议。你甚至不需要耳机和护目镜来参与。下面，我们来看看虚拟现实工作空间是如何启动的:

在过去的15年左右的时间里，世界已经在朝着一个遥远的方向发展。尤其是在疫情期间，它把原本需要10年时间完成的事情在6个月内完成了。

Youtube上有大量为VR制作的内容。Facebook也对VR和AR越来越重视，目前有交互式VR旅行应用程序，用于创建三维艺术应用、室内设计和博物馆的AR应用、教育性VR游戏等。

AR- Pegah Na vid的博物馆指南

越来越多的公司正在考虑将VR和AR集成到其数字产品中，如果新的VR浪潮开始，我们将看到一个相当令人兴奋的时代，设计师们很快将有全新的机会来营销产品和服务。

同时…

由于这种设计趋势还是一种新的感觉，因此在某种程度上增强和虚拟现实的设计和开发标准还存在一定的不足，这些标准仍在建设中。而且由于缺少一种通用语言，会使开发过程变得非常缓慢，这也是造成不同AR / VR项目兼容性挑战的原因。但是，这只是一个时间的问题。

2 AI和其他救援工具

一般来说，所有现代界面设计和开发工具都侧重于几个重要方面：

• 与常规作斗争

• 连接设计人员和开发人员

• 熟悉设计系统

• 远程在线协作工作

以上所有这些形成了用户界面设计的一个趋势——在现代工具和技术的帮助下简化设计师的工作流程。例如，Adobe在10月宣布了他们对Photoshop 22.0版本的更新，其中包括许多来自Nvidia的人工智能功能，其中包括一套Adobe称之为“神经过滤器”的图像编辑工具。颜色变量和组件视图是Sketch App中的新功能。它们使保持颜色一致性和使用组件更加容易。Figma为分布式团队添加了新的功能，包括模板和虚拟会议功能，这些新功能使远程协作更加轻松。图形编辑器Pixelmator的最新更新提供了增强的机器学习和gpu支持的图像编辑功能。

生成设计是另一个潜在的有希望的UX / UI趋势。它可以分析大量相似的数据，找到其定义特征和特征，然后根据所提供的数据创建新的特征和特性。

几年来，分析公司Gartner一直在发布一份名为《Hype Cycle For Emerging Technologies》的报告，在报告中，该公司的员工讲述了哪些技术在未来几年具有最大的发展潜力，以及为什么投资者会被这些技术所吸引。今年，有很多关于人工智能的内容，包括生成设计。我想到的此类AI的第一个示例是Deepfake。根据Gartner的预测，在不久的将来，生成型AI将迅速发展。

在UI / UX设计中，已经有数十种算法驱动的设计工具可供你以更实际的方式使用：创建布局和市场营销材料，检查基本规则的所有可能原理，选择视觉样式以及生成演示模型和小小的设计细节已完全从设计中消失了，部分原因是极简主义的流行，部分原因是设计师希望避免给自己增加负担（或者更有可能是因为希望更快、更便宜地做事），可访问性检查等等，从本质上讲，任务要花费很多时间，而创造力却很少。实际上，设计人员成为神经网络设置结果的控制器。这是由俄罗斯互联网公司Mail.ru集团的设计总监Yury Vetrov收集的令人惊叹的人工智能设计工具列表。

同时…

人工智能及其在UI和UX中的功能仍处于发展初期。AI需要进行微调才能生效。机器可以相互学习，但是他们仍然不能独自思考并在品味问题上与人类竞争，并决定什么是适当的和什么是不适当的。AI的目的是帮助和协助人们完成已经取得的巨大成就的任务。

3 高级个性化

个性化设计是指公司或品牌根据用户提供的信息（包括出生日期、婚姻状况、查看和订购历史等）为每个用户创建个性化内容和推荐的方法。个性化设计的主要目标是使用户感到满意。专门为他们创建内容，并以此方式提高转换率，这是所有商业网站所有者所追求的。

个性化既是用户体验的趋势，又是当今的最佳实践之一。Google和Apple继续为其生态系统开发个性化助手，现在可以通过语音、面部识别或指纹了解谁正在与他们进行交互。将来，界面将变得更加个性化，并且眨眼间即可改变其外观、元素的位置、色调和行为。

AI在用户体验中扮演着重要的角色，而大多数用户甚至没有意识到这一点。考虑一下Spotify上的个性化音乐建议。YouTube或Netflix推荐影片中的推荐影片。亚马逊、淘宝会根据每个客户的购物习惯、愿望清单和购物车为其创建个性化主页。通过生成与用户相关的内容，可以使界面对用户更具个性。

图片：netflixtechblog.com

图片：netflixtechblog.com

同时…

个性化并不是一种易于遵循的设计趋势。这并不是要让用户在明暗主题之间切换（更多是自定义）。网站可能会错误地收集和分析数据，从而导致不良结果。用错误的名字给用户打电话，或者提出一些会冒犯他们的建议，而你将永远失去他们。建立一个个性化的网站是非常昂贵的。你必须收集和分析信息，开发配置文件和个人帐户，并确保算法的工作来创建单独的界面。很多用户觉得网站知道他们的具体信息很吓人，所以个性化也需要更好的安全性和改进的用户体验编写来说服用户提供他们的个人信息，等等。

4 非接触式交互

疫情之后，又出现了另一种UI和UX趋势。我们正在谈论与设备交互而不实际接触设备的各种方法，例如VUI（语音用户界面）和空中手势控制。

甚至在疫情发生之前，就已经很明显，语音交互是未来几年主要的UI / UX趋势之一（我们将语音UI列为2019年的设计趋势之一）。在设计中添加语音用户界面可以扩大其范围。例如，你可以使用语音聊天机器人使访客使用语音命令进行通信，虚拟助手也是如此。在未来几年中，许多公司将创建完整的语音用户界面。

安排会议— Denislav Jeliazkov的VOICE

空气手势控制是一种技术，它将随着触摸屏的出现而引入的各种手势控制机制提升到一个新的水平。空气中的运动可以让设备工作。例如，最近欧洲豪华汽车品牌DS汽车展示了他们的新型非接触式控制系统，通过空中触觉反馈和手势，声称该系统的精确度是触摸屏的三倍。

同时…

语音搜索不同于通常的语音搜索，有时，用户对所要搜索的内容不够清楚。语言上的细微差别，因未完成任务而造成的内容保留丢失、语音障碍，无法一目了然地理解语音接口的全部功能，所有这些都会影响VUI设计。

至于空中手势控制，手机涉及一些挑战。有时，它比通常的方法更难、更慢、不便、不够私密。但是，你会发现在开车或使用食谱应用程序烹饪时，在电视上使用它非常有用。去年八月，苹果获得了一项专利，该专利描述了我们在未来的AirPods Pro机型中可以看到的一些炫酷功能，包括能够通过“空中手势”控制无线耳塞的功能。

5 3D和沉浸式体验

3D设计多年来一直吸引着用户，所以无论在网络还是移动设备上，你都很难将其称为一种新颖的设计趋势。但今年，设计师们对3D组件和界面上的整个3D场景的兴趣将会更高。

苹果公司将3D设计纳入了他们最近发布的macOS更新中，从而使3D设计有了新的提升。macOS BigSur拥有一组经过改进的图标，其中一些看上去有些像3D风格：

图片：reddit.com

同样改变的是，在3D元素在实际应用中并不多样化，因为它们通常会在用户机器上卸下非常重的负载，并且没有这样的需求，现代的前端框架和库能够显著减少页面加载时间，从而使3D对象变得更加详细和更大。

彼得·塔卡（Peter Tarka）设计工厂

在2021年，3D只会继续变得越来越流行，尤其是看到VR和AR技术的日益普及。很酷的抽象、不寻常的角度，你可以在3D中完成所有这些操作而无需使用真实对象，例如，当你需要展示昂贵的汽车或一座不寻常的房子时，这通常可以节省金钱。3D吸引了人们的注意力，并使网站更具吸引力，使用户在页面上停留的时间更长，会话时间也增加了。

adidaschile20.com

流行的three.js JavaScript库用于该网站的3D渲染和UI交互：

weedensenteret.no

同时…

技术不断发展，但3D的主要缺点仍然存在。图形越复杂，它们在用户计算机上执行的负载就越大。如果你确信网站已经过优化足以显示沉重的3D动画，则必须使用此工具，否则，用户将遇到滞后和页面冻结的问题。这一趋势正在如火如荼地进行，并将在稍晚的时候完全形成。所以理想的情况下，最好是从那些知道如何为你的目的优化他们的设计师定制图形。

6 用户喜欢的动作

各个年龄段和年龄段的用户都喜欢看动画故事，并与动画屏幕互动。将简约的界面与大胆有趣的元素结合在一起，既可以吸引用户，又可以使信息清晰明了。

到2021年，动画将越来越多。无论是界面动画（按钮和过渡的微型动画），还是大型营销动画（包括3D），现在看来技术终于发展到了将滞后现象减少到最低限度。

Clint- Yoann Baunach的新网站

互动概念| Eddie Luong的AI营养追踪

与静态图像或纯文本相比，任何运动效果都可以更好地讲述品牌故事。借助它的帮助，你可以为最严肃的主题网站添加轻松的元素，释放用户的紧张感，为处理大量严肃的专业信息做好准备。例如，如今有更多的运动元素与用户的滚动条或光标相关联：

julieguzal.fr

你还可以在移动应用程序中使用“刷新”动画来招待访客：

奥列格•托塔洛夫(Oleg Toptalov)的《圣诞拉动刷新》(Christmas Pull to Refresh)

微交互值得一提。如今，要用大型动画给某人惊喜是比较困难的，因此，现在更建议使用小型动画元素来鼓励用户。它们显示状态更改并帮助用户导航。微交互用于：

• 应用程序不同状态的颜色变化

• 网站加载可视化

• 页面之间过渡的动画

• 按按钮的反应。

期望在2021年看到更多的动画按钮。

Shakuro的播放/暂停按钮动画概念

同时…

设计中的动画应该具有目的性和意义，即不仅令人赏心悦目，而且可以解决问题。动画的最重要目的是解释、简化和加快交互过程，只有这样，才能创造出所谓的“wow特效”。界面动画解决方案应出于可用性的原因而实施，而不是纯粹的装饰和娱乐性。

7 物理性和现实纹理

这一点的标题也可能类似于“Attempting to go away from the Flat”的东西。扁平化设计最流行的时候是2012年，尽管它与极简主义一起，但它仍然是塑造现代UI设计的要素。与此同时，即使只是在图形设计方面，许多设计师也开始感到需要一些新颖的东西。

尽管平滑渐变和平坦物体的设计已如火如荼，但试图打破这种相同性的一种趋势是，通过其不均匀的纹理来增加一些真实感。看看爱沙尼亚插画家和平面设计师Eiko Ojala的这本书封面插图：

图片：ploom.tv

尽管纽曼主义的尝试没有成功（从一开始就没有很多粉丝），但很多设计师都触及了有形的美学，给人以更真实的感觉和真诚。

秋天的图案。瓦莱里亚·施密特（Valeria Schmidt）

参观者给人的印象是，他们几乎可以用手触摸到产品，感谢现实的纹理。这在客户和产品之间创造了一种联系的感觉。这种添加真实感纹理和轮廓的趋势在现代UI设计中也非常普遍，并且在2021年有很大的发展潜力，它被用于照片和多媒体。

elemis.com

同时…

整个品牌渴望在其网页上使用工艺元素的愿望，无论是图形、特殊字体、纹理还是粒状效果都是可以理解的。界面变得更加人性化，这有助于提升希望强调关注人的公司。然而，尽管这种物理性对于传达物理对象的感觉非常重要，但对于设计师而言，不要过分使用以至于分散用户的主要目标（进行购买）很重要。

8 从完美到独特

近年来，许多网站的焦点一直放在完美的设计上，在这里，所有的东西都经过深思熟虑和精确。这种趋势很可能在2021年改变，因为独特的设计变得越来越重要。实际上，趋势是看起来“不完整”的设计，正如2020年向我们展示的那样。但是，主要思想是，设计师可以使这种不完整看起来更专业，并借助熟悉的元素（以不同的方式布置和呈现）来创造独特的吸引力。

非正统的布局

在UI / UX设计领域，对称主要代表经典和传统设计。这是帮助简化网站结构的好方法。然后，所有基于网格的站点看起来都非常相似。独特性的减少影响了网站在搜索引擎中的推广和从竞争对手中脱颖而出的能力。到2021年，非传统和有创意的布局将更加突出。这可以让你的网站更有个性和个性，并强调其特别重要的领域。

wakawaka.world

非正统滚动

它有助于使用新的、有趣的、非标准的解决方案和方法。创造性的导航技术包括水平导航幻灯片演示、滚动颜色淡出、水平和垂直滚动混合、滚动触发的动画、拖动探索等。此类解决方案特别适合于有关创意合作和活动的促销网站。

心灵— Anton Pecheritsa的回忆

颜色组合

不要回避霓虹色、复古美感和独特的设计，因为主要的事情是要完全区分自己的竞争与UI设计的帮助。

blastgalaxy.nl

goliath-entertainment.com

版式

为什么不尝试借助版式使你的设计变得独特呢？

charlielemaignan.com

同时…

需要注意的是，无论这些解决方案多么酷和独特，它们独特的原因还在于它们不适用于各种“务实”的项目。它们不适用于客户必须专注于重要数据的界面（例如工业设备界面），也不适用于针对非常广泛的受众的项目，例如常规的在线商店。仅当它在不打扰用户但可以引起用户兴趣、惊喜并引起赞赏时，它才适用。

9 超级技术登陆页面

还有一种趋势涉及与布局和动画特别复杂的工作。产品和过程的抽象表示形式是面向以技术和生产为导向的网站的完美解决方案，这些网站不能让失去无聊的访问者。这些技巧包括超逼真的复杂动画、渲染以及吸引、惊奇和令人着迷的立体插图。

结果可能是不同程度的“不可思议”。有时这些只是细节，时尚，而不是中立的例子，如这款MacBook Pro登陆页面:

www.apple.com

其他示例可能是非常炫酷的：

mav.farm

同时…

视觉效果非常震撼，他们确实是，在创建这些页面的工程和设计工作水平显而易见。但是，主要的挑战是，在最佳情况下，访问者获得的信息不会超过你试图通过网站传达的信息的60％。通过这些网站，他们获得了大约10％的收益。这种趋势使得设计师违背了传达信息的理念，而追求用令人瞠目的视觉效果来取悦你。找到中庸之道，在那里你可以同时带来惊喜和价值。

10 不寻常的插图和SVG

3D在插图中仍然很受欢迎，在2Ds中也有不同寻常的角度、实验的比例、超现实的情节、生动的或者相反的，柔和的色彩。如果说过去极简主义在插图中也占主导地位的话，那么现在基于怪异和真实与不真实的结合，怪诞风格也非常流行。

MTHSMNDS的TATU

另一个亮点是SVG（可伸缩矢量图形）格式的矢量插图，该插图使用XML定义基本属性，例如路径、形状、字体和颜色以及更高级的功能。

(.svg) Animated Icon Pack, Soon… by Huseyin

事实是，当提高显示分辨率时，PNG、GIF和JPEG会失去质量。这就是为什么你必须为每种类型的屏幕保留一个单独文件的原因。而SVGs则不存在这样的问题，矢量格式可以在不损失质量的情况下进行放大和缩小。

同时…

面对强大的信息流，只有库存照片内容似乎是一个相当困难的任务。因此，插画是吸引用户眼球、对抗主流市场背景的一个显而易见的解决方案。它可以成为你的风格。与此同时，这种风格的插图并不适用于任何地方。如果你知道你的读者宁愿被这样的实验所拖延而不愿被吸引，那么最好选择一些更安全的方法，并将你的rad想法保留到其他地方和用途。

11 进一步简化UX

有一个正在优化的一步行动，设计师的任务是将需要填写的元素和字段减少到最小。同样的道理也适用于用户为了达到预期的结果而必须采取的步骤数量。例如，最新的用户体验趋势之一是将整个结帐过程放在一个单一步骤中。

注册和登录过程正在变得简化，或者已成为用户流程中的一个次要步骤。在2021年，不要强迫用户记住密码。例如，在网上商店，用户的个人识别码可以是他们的电话号码或生物特征数据。

苹果公司推出了它的超级按钮，它替代了随机数据进行注册。在许多应用程序中，你现在只需一个按钮即可注册，而无需社交网络的参与。

图片：developer.apple.com

同时…

尊重用户的神经连接，他们准备好迎接新的简化流程了吗？

考虑到业务运营的利基市场和您的目标受众，首先测试你的想法。即使基本概念是正确的，你仍然可以通过听测试对象（尤其是经验不足的用户）来发现许多小缺陷。在注意力资源枯竭的时代，当大量的界面变成视觉上统一的“混乱”时，不寻常的UX可能会令人烦恼。

12 超级应用程序的时代

在过去的20年中，来自硅谷的模型一直是“单一目的”应用程序。但是今天，所谓的“超级应用程序”在中国和周边国家疯狂地流行。尽管如此，它们对于西方消费者来说还是很少见的。

超级应用程序结合了许多服务，并试图解决用户遇到的任何问题。这样的应用程序可以将诸如社交网络、通讯程序、游戏、约会、市场、汇款、货币兑换、保险、送餐、出租车、酒店预订等功能组合在一起。在中国，超级应用程序中最引人注目的例子是微信和支付宝，每个月都有十亿以上的人使用，实际上，这是该国人口的全部社交活动。

公司需要超级应用程序来竞争用户。他们努力创造一个能满足所有需求的生态系统，你根本不用离开。用户在应用上花费的时间越多，用户的忠诚度就越高，从而可以将其货币化。

东南亚日常应用探索-Danis抢购

去年夏天，俄罗斯领先的科技公司Yandex宣布推出Yandex Go，这是第一个将按需运输和交付结合在一起的欧洲超级应用程序。亚马逊、Facebook和Google在亚洲都有活跃的类似于超级应用的产品，可以与本地产品竞争。如果我国企业继续在科技领域发挥越来越大的影响力，未来几年我们的网络世界可能会大不相同。

同时…

当他们的应用程序中的功能太多时，很多人不会觉得它有用。在众多的服务中快速找到你现在需要的东西，这变得棘手和恼人。

另一件事是，亚洲人似乎不太愿意将提供程序或服务作为超级应用程序“软件包”的一部分强加给他们。同时，西方人更有可能在购买前探索几种选择，这就是为什么到目前为止他们更倾向于使用各种单一用途的应用程序的原因。

13 高级入门

在2020年，数百万人被迫安装和使用视频会议和类似的远程工作服务的时候，没有比这更好的时机了。充分体验良好的入门功能将是你的最佳选择。

入门培训的主要功能包括：

• 使用户熟悉应用程序的主要功能和用途

• 提供注册的机会

• 收集信息以改善个性化

现代的入门指南已将最重要的移动应用程序屏幕列表排除在界面元素的简单说明之外，还介绍了产品本身。

Shakuro的在线学校App入门

同时…

许多人认为，入门本质上是不良设计的标志。就是说，如果你必须解释一些东西，那么你在设计它时就做得不够好。另一方面，如果用户不了解你的应用，则不会使用它。有效的入门流程可确保访问者正确了解应用程序的功能，并从一开始就给用户留下深刻的印象。使用自定义图形可识别应用程序，并密切注意复制：使其清晰、简洁且易于阅读。

14 始终趋势：批判性思维和设计相关性

设计是周期性的，UI / UX设计的新趋势每年都会到来，因此会有很多重复，并且过去的很多的东西都会回来。就像一些人预测的，Bauhaus将在3-4年后回归。其他设计师和工作室正在寻找一种替代Flat的新方法。

上面已经说了这么多，仍然有必要突出UI / UX设计趋势，这种趋势永远不会过时——批判性思维和设计相关性。也就是说，如果某件事是设计趋势，那么它就有生存的权利，有自己的逻辑和发展的视角。设计是一种手段，而不是目的。这背后一定有什么原因。设计是一种视觉语言，你用它来传达产品的价值。当你掌握了一门语言，你就想用它创造一些有价值的东西，设计也是如此。

文中部分图片来自网络，如侵权，请联系删除

想要了解汽车更多内容，就留言联系我们吧！

来源：Kate Shokurova：2021 UI/UX Design Trends and How To Make Them Work For You

- 服务内容 -