我们走过疫情混乱的2021，即将迎来新的一年。回顾这一年，看看全球设计师在UI&UX领域里创造了哪些吸引眼球的网站和移动应用吧。他们的创造力似乎如泉水一样奔流不息。

多图预警，建议在wifi下阅读，全文5700字。

设计师都知道，当宅在家里时，会创造出更多的东西来，而且有时间观察和反思已有的东西。无聊是设计师最大的敌人，他们会不辞疲惫来打破无聊的现状，激发自己的创造力，让生活变得有趣。

2022 年的 UX/UI 设计趋势是什么？从目前来看，我们已经可以针对2021大部分行业所做的来进行预测了。

通过本文的阅读，你会发现：

如果你不去为设计比赛做好准备，你可能会失去 3D 设计师的工作即使对于没有准备的读者，设计师也可以使复杂的数据变得有趣由于你的网站设计没有针对移动设备进行适配，而错过了多少新的潜在客户“滚动叙述Scrollytelling”将如何统治世界，并在 2022 年提高转化率

“滚动”已死，未来是属于scrollytelling的

滚动是一种基础的浏览方式，已经越发变得无聊。如果你想吸引注意力，则需要实现scrollytelling。

纽约时报是最早在他们的文章“Snow Fall”中使用滚动讲述的人之一

这是一种可以在页面和应用程序中呈现的内容叙述形式。想象一下，当你制作一个网站，每个插图、字体、文本片段和其他元素都开始栩栩如生地滚动。你会很想看到这个故事的结局。

这个故事就像电子游戏一样，带你穿越符号迷宫。你不能影响它的进程，但你觉得自己是屏幕上内容的参与者。

2022 年，几乎每个热门网站上都会使用 Scrollytelling，因为用户已经厌倦了塞满他们不需要的信息的页面。

比方说，你想去健身房。您可以找到当地健身房的网站：

单击它，你会看到诸如“与我们一起健身！”之类的标语。

滚动，看到非常有趣和新颖的内容，然后出现“by the way”；

向下滚动会看到团队的所有传记、健身价值观、使命……

这种设计太普遍了，用户甚至不再注意到内容。

我需要翻过 4 个屏幕才能获得相关信息——这太麻烦了

另一方面，滚动讲述是让用户真正阅读的原因。你可以用动态文本让他们兴奋，比如谷歌，他们的团队知道如何使内容友好展现：

谷歌网站浏览方式

Scrollytelling 在用户向下滚动时被激活，因此得名。没有点击，无需选择，不会弹窗。似乎你停留在一个地方，但通过滚动，屏幕上的内容就会展开。这不仅需要设计师创造酷炫的视觉效果。你需要真正想出一个你想讲的故事：情节，以及你告诉的客户，最好的网站不可能在 2 天内建成。

滚动格式的项目通常需要大量的时间和精力。不过，结果是值得的。页面变得“生动”。每一秒都有新的事情发生，所以阅读时很难感到无聊。

那么移动应用程序呢？Pure是一款约会应用程序，它创建了一个我想称之为“tappytelling”的故事（当您第一次点击并打开应用程序时它会被激活）：

Scrollytelling 是为用户创建的，他们喜欢它。他们不需要去任何其他页面来阅读整个故事。相反，网页设计的整个叙述都是事先考虑好并以最有趣的方式构建的。

用户喜欢数据，让数据变得可爱

“我是一个苦苦挣扎的演员，但如果陌生人问我做什么

我通常最终会撒谎，因为有太多的事情要解决”

— Rocky Paterra “我是一名会计师”

2022年如何做一个体面的企业网站？你不想告诉用户你是“___领域公认的领导者，是该领域的佼佼者之一”。这个标准的广告传达没有传达任何有效的信息。

最好去掉形容词并展示事实：你有多少家分支机构，在哪些城市，你的客户是谁，以及你如何帮助他们。抽象信息是不可靠的。但是，如果您有大量数据要共享，则需要使其不仅简单，而且要有趣。

Shakuro 让股市变化数据变得简单

数据的可视化有助于以引人入胜的方式传达正确的信息。它还与滚动讲述直接相关。这是 IAmBinadam 显示数据的方式：

团队设计网站，通过消除数据集的复杂性，使读者更容易理解信息。

不同级别的不同大小的数据，让用户知道首先看哪里

读者可以通过图片迅速注意到作者试图得出的结论。考虑到人们如今使用的大量数据，分散在混乱中的数字会产生歧义。

图中表达三文鱼产量和水量的关系

有些图表乍一看甚至不像图表……这使它们更具戏剧性

还有一种现象叫做“新冠后遗症”。这是新冠对公司及其员工的长期影响。根据英国国家统计局的数据，2018 年的压力和焦虑得分平均约为 2.7/10。自从新冠发生以来，分数已增加到 4.0/10，并且很少低于该点。同样因为大流行，工作量在过去两年中增加了 4 个小时。人们压力太大，太累了，无法查看复杂的数据。但设计师们知道如何让大流行变得不那么戏剧化。

设计师还可视化数据以保持人们的注意力。请记住，复杂的信息通常会被忽略，因为读者试图节省时间并且更有可能使用滚动按钮。

各国平均每人每年花在看牙医上的时间分布

以下是我们建议用于表示数据的一些选项：

图表和图形插图（包括带有手写短语的插图）静态信息图表交互式信息图表

墨水厂插图

如何使信息图表看起来不错？

一个伟大的图表，或任何其他形式的数据可视化，应该具有爱德华·塔夫特 (Edward Tufte) 的“定量信息的可视化显示”中描述的一组特征。在他的书中，塔夫特通过图表解释了真正讲故事的 3 条原则。

1. 显示数据的图形元素与图形元素总数的比例应趋于 1。简单来说，你不应该被装饰图表冲昏头脑，一定要删除不必要的东西！

Hootsuite 的图表

2. 使用最大的展示空间。也就是说，您需要紧密、紧凑地排列数据。

Hootsuite 的图表

3.假数据的影响：你需要客观地描绘数据。不要使用夸张的图形，并提供诚实的统计数据。数据的可视化需要看起来很酷，但诚实总是更重要的。

移动应用被高估？

根据We Are Social 的数据，2021 年将有 52.2 亿人使用手机——约占世界人口的 66%。自 2020 年 1 月以来，独立移动用户数量增长了 1.8%（9300 万），而移动连接总数增加了 7200 万（0.9%），到 2021 年初达到了 80.2 亿。

Lady Gaga 更喜欢手机而不是固话

社交媒体用户数量在过去一年中增长了 13% 以上。到 2021 年初，近 10 亿新用户在社交网络上注册。据App Annie 称，Android 用户每天花在手机上的时间超过 4 小时。2020 年，Android 人群在网上冲浪的时间超过 3.5 万亿小时。

在 2022 年，适用于你的产品的应用程序将成为下一个必备品，不是吗？如何知道你的企业明年是否真的需要一款应用？如果出现以下情况，您可能需要开始为它积累预算：

用户通过移动设备访问你的网站

这是你应该了解的重要数据。客户与你在一起的时间越长，你就越有机会与他们互动，了解他们的习惯，并为他们提供他们想要的东西。

你需要使你的内部业务流程更有效

如果你想提高员工的工作效率、改进工作流程或增加利润，可以开发帮助你管理业务流程的移动应用。如今，这类应用程序使企业可以执行越来越复杂和多样化的任务。加快重复性日常操作和文档管理。创建有助于复杂决策的算法，监控您的员工的工作方式和工作。

你想实现一些网站上没有的新功能

如果你认为你的应用程序为受众开辟了新的接触点并使用户体验更加成功，那么值得考虑开发它。问问自己移动应用程序可以提供哪些新的商机。例如，随着大流行的到来，许多人转向健康和健身应用程序在家锻炼；反而对于处理照片或室内设计的机构来说，应用程序几乎毫无用处。像这样的公司需要作品集，从移动设备上查看大图并不是很方便。

你的竞争对手使用移动应用程序

重要的是要了解竞争对手在做什么，他们是否有移动应用程序，他们可以做什么，以及他们是否真的对买家有用。可以查看 App Store 和 Google Play 中的统计数据。

下载和评论的数量将告诉你客户如何使用竞争对手的应用程序。如果他们的服务真的很方便且必要，那么你将被超越，而不用开发具有相同或更好功能的应用程序，停止内卷。

重复销售是你的事

一个应用程序有助于留住那些习惯从你那里购买的人。您是否决定为普通客户推出促销活动？向他们发送带有号召性用语的推送通知。计划圣诞特卖？

给用户一个折扣的促销代码。在合适的时间提供的报价越有吸引力，人们购买它的可能性就越大。

出租车服务公司有重复销售，肯定需要一个应用程序

你有一个忠诚度系统

使用应用程序，你无需在实体卡的设计和生产上花钱，客户也无需随身携带塑料卡。将你的忠诚度计划集成到移动应用程序中，并以电子方式分享有用的促销、折扣和红包。

移动应用程序或移动友好的浏览器版本

与创建移动应用程序相比，开发移动网站所需的工作更少，从而可以降低整体推广成本。

这部分是由于响应式设计的出现，它允许你将站点适配设备的屏幕。至于应用程序，必须为许多移动平台保存和编写：Android、IOS、Windows 等。

还有一个小趋势将持续到 2022 年。那就是应用程序变得更加相似。同时，它们保留了一定程度的独特性。

一些设计师 认为“前端驱动的 Web 体验”是 2022 年的大好机会。

所有 3D 之母

我们没有把它放在第一位，因为很久以前设计领域就已经对 3D 图形和动画产生了影响。

3D 已经存在了 4 年，而且不会很快消失。此外，我们预测 3D 图形将变得更加多样化和包容性。在过去的几年里，3D 艺术和动画已经出现在来自各种媒体资源的众多 UI 设计趋势评论中。这意味着越来越多的设计师将它们集成到网站和登录页面中。3D 无疑是 2022 年的热门趋势和预测之一，因为与经典动画相比，逼真的 3D 形状与运动相结合总是引人注目。

Conzeptzilla 的卫星着陆页动画

“从技术上讲，通过 3D 传达能量、纹理和意义更容易，因为它比平面图片更接近我们的感知。3D 插图更深入、信息量更大、互动性更强。”

许多设计师将 3D 对象的样式无缝地“安置”在 2D 空间中。它可以让你创作更多有趣的作品，同时也是一种具有巨大潜力的出色工作方法。

乌克兰政府网站用3D手模仿黑客帝国

在集成 3D 图形等繁重内容之前，请确保你的应用程序具有高性能并快速加载所有元素。

元宇宙

— Facebook，你准备好上学了吗？

- 妈妈！我告诉过你，叫我Meta！！

Meta 的logo是它既不是 2D 也不是 3D。还是两者兼而有之？它受到了相当严厉的批评，因为你几乎可以称它为库存图片——logo就是这么简单。这是即将到来的 2022 年的莫比乌斯带和薛定谔的猫。

Meta 标志的 3D 变化

恶搞版本

Balenciaga x The Simpsons：2D 反击

时装屋 Balenciaga 与《辛普森一家》（油管搜索The Simpsons | Balenciaga）的创作者合作，在巴黎时装周上展示了该动画系列的新一集，以展示其 2022 年春夏新系列。在这一集中，经典的 2D 辛普森一家获得了一些以 3D 形式绘制的新细节。当然，其中之一是连衣裙。这一集得到了该系列粉丝的批评，但 Balenciaga 的信息是今年最强烈的信息之一。

动画或消失

越来越多的公司在网站和移动应用程序中使用动画来提高用户沉浸感和体验，使内容更有趣。

动画是 2022 年重要的网页设计趋势。明年，如果没有它，您的产品很可能会显得未完成和乏味。混合风格的动画越来越受欢迎：定格动画与 3D、2D 和 3D 动画的结合。设计师这样做是为了获得不寻常的风格解决方案，以及提高最终产品的质量。

2022 年，动效设计将成为市场品牌定位的一个重要且深思熟虑的部分。想想公司的新视觉标识——动画标识。随着该领域专业人士数量的增加，实现新想法的机会也在增加。

2022年如何使用网页动画？

编故事

动画可以通过在界面和用户之间建立情感联系来传达某种信息。

小林洋一的加载动画

使加载变得有趣

客户不等人。除非加载屏幕很有趣。带有百分比的动画不仅可以娱乐用户，还可以告知用户加载页面需要多长时间。不喜欢百分比？使用进度条。或者你能想出的任何其他东西来展示时间的流逝。

用光标效果着迷

用户准确地注视光标所在的位置。通过添加对这个光标做出反馈的智能交互动画，让她或他浏览网站，这种效果在 2000 年代非常流行。总所周知，时尚往往每 20 年就会重演一次。

悬停动画

破坏动态排版

你有没有想过让字母跳舞？

Klim 加载动画

说到字母……你知道电影中的主要标题设计有艾美奖提名吗？查看《女王的开局》主标题（2021 年提名）的精彩动画：

动画插图以添加角色

据 Statista 统计，2020 年全球动画市场规模达到2700 亿美元。趋势是转向视频，而不是静态信息。全球品牌在社交网络上使用动画并制作广告。动画插图无疑的优势在于它们非常灵活多样。

宝马与马力的对比历史

此类作品常用于2种情况：

用于解说视频用于广告

动画展示的趋势出现在几年前。动画视频清楚地显示了单击的位置或公司项目的内容。普通视频无法展示不存在的东西。相反，在动画中，您可以想象的一切，都可以绘制。

在招聘或商业视频中，用户更喜欢观看绘制的人物而不是抽象的形状或物品。画出来的人物和活着的人一样能唤起友谊和同情心。

微交互、宏观影响

微交互是帮助用户浏览网站或应用程序的小界面更改。通常，这些是作为用户提示的视觉或声音效果：它们显示发生了什么、将导致什么操作、接下来需要做什么。

Awwwards 非常可爱的悬停效果

动画交互将为您的设计注入活力，并有助于保持用户的参与度。关注每一个细节是设计师工作的一个关键方面，因为关注设计中的所有元素可以带来积极的用户体验。

重要的是要达到元素的和谐，而不是将注意力分散到显示器的各个方面。微交互的一个重要部分是颜色。它们为界面元素带来了意义。最好在 2022 年之前搞清楚如何使用冷暖色调。

CTA动画

微交互应该有助于浏览页面或应用程序，解释它们的功能，并毫不费力地向它们介绍新用户。最重要的方面之一是加快和简化以前冗长的程序以实现特定操作。

交互可以通过游戏化的方式来改善用户体验。该品牌展示了一些用户体验操作的重要性，明确引导读者如何看待信息。

动画标志

2022 年不会取消名片、笔记本、钢笔和小册子：动画logo对印刷产品没有意义。但在线品牌面临新的挑战并寻求新的解决方案，动画logo设计就是其中之一。

动画标志有什么营销优势吗？

他们能吸引注意力，有助于提高品牌知名度。它们有助于改进 SEO。恰巧谷歌偏爱动态内容，而带有动态图形的页面会更快地吸引观众。它们在移动设备上看起来不错。吸引人的动画看起来比静态徽标更有趣。最重要的是他们展示了历史。静态标志背后的想法正在动画中发展。多亏了这一点，您可以在几秒钟内展示品牌的使命，甚至是其价值观！

洗衣机公司的标志

您可以为现有徽标设置动画——设计师可以根据源文件重新考虑其动态。您可以轻松制作带有字体的动画徽标：

Shabello, Bobby Voeten 的动画字体

总结

请记住，设计总是在变化。但设计的含义保持不变。如果您无法理解它是什么，那么关于趋势的文章将无法帮助你商业化。

声明:本文由"麦兜"发布，不代表"破站"立场，转载联系作者并注明出处：https://www.848586.cn/215499.html