前言

临近年底啦，又会有许多关于明年趋势的预测文章，我在Medium上看到一篇文章，让我比较感兴趣的点是他提到了虚拟现实（Virtual Reality），无代码（No Code），交互原型（Interactive Prototypes）方面。所以我也一时兴起翻译过来，想分享给大家也看看。有些语句我会尽量贴合中文的使用语境，一些我认为原文的意思更丰富一些的，我会先贴出原文，再附上我理解的翻译。

（注：XXX ）这种格式的是我加的额外备注信息。

由于水平有限，有些地方可能会不尽如人意，所以有兴趣的也建议看看原文对较，欢迎指正。

正文

是时候为即将到来的2022年做一个预测了。如果你是设计师的话，希望本文的预测可以帮助你学习一些可能会成行业标准的技术和趋势。

Let’s prepare for new things!  磨刀霍霍向牛羊！

什么是不会发生的

在过去四、五年，我在许多博客上看过预测类的文章，他们文章中的一些内容在几年里面都是重复再重复。在我这里的话，这种事情是不会发生的~

1. 暗黑模式（Dark mode）将不再是一个趋势

暗黑模式已经存在好几年了。如果你现在还阅读到有人预测这还会是下一年的趋势的话，那他可能至少已经被冰冻了3年了。

暗黑主题是移动端平台（iOS 和 Android）操作系统运行的趋势。但是现在它应该已经是你设计的一个标准了，而不再是新的东西了。

2. 3D illustration is not a thing  3D插画还是个弟弟

插画有许许多多的风格，但如何去选择一种风格使用应该是取决于服务的品牌本身。得益于 Spline（超级顶呱呱的工具！—— 注：Spline - 轻量3D设计软件）的流行，创建3D作品越来越容易，因此2021年我本来期望看到更多的3D插画作品，但并没有。所以说呢，在今年这种情况下，3D插画可能不会成为主流趋势。

3. 设计系统/组件库（Design Systems）在2022年也不会有什么创新

如果你还没有机会在你的项目中创建或者使用设计系统或者说的话，那么你有点落后了。创建规范、可复用的组件库，并且为其提供逻辑清晰、阅读性强的规范文档在今天已经是必要的了。所以呢，如果还没了解和使用过组件库，那就得快点去学，因为这些已经很成熟并且普遍使用很多年了，在未来也基本不会有太大的变化。

2022 UX/UI 设计预测🎉

好了，重头戏来了。准备好了吗？拎起你最爱的咖啡杯，让我开始吧！

虚拟现实（Virtual Reality）

在过去几年里，我们已经听说虚拟现实或者说混合现实（Mixed Reality）是未来。现在Facebook已经改名为Meta，并描绘了他们对未来的愿景 — 虚拟现实可能会成为一个十分重要的趋势。

作为一个设计师，你应该更多的了解虚拟现实以及如何为其创造出色的体验。当然它可能会大大区别于今天的网页设计和移动端设计的方式。

得益于Meta推出的触觉手套（haptic gloves）和对应的原型，用户也能够感受到数字化带来的体验！

Meta的虚拟现实想象

更重要的是，还有传言说苹果很快将推出他们的混合现实设备，我们都听说过Apple Glasses或iGlasses（注：AR眼镜），有预测说它们会在2022年发布。即使Apple推迟发布新类别的设备（在谷歌眼镜（Google Glasses）失败的前车之鉴下，他们也必须更加小心翼翼），iOS的增强现实（Augmented Reality）设备运行稳定，也许会更容易适应一些新的用途。

作为设计师，我们应该在未来投入更多关注在这一趋势上。这可能是自从手机彻底改变了人们使用的应用程序和彼此联系的方式以来最重大的事情了。

怎么去做呢？首先，找到真正想去钻研虚拟现实技术的公司 —— 你可以去看看Mate，Apple和Google正在做的事情。然后学习当前的设计指南（design guidelines）并尝试使用一些工具。我预计未来在这方面会有很多变化（工具会逐渐适应新的可能性和设备），但提前拥有关于虚拟现实的设计基础是件好事。

无代码（No Code）会成为一个标准

无代码化是近几年我观察到的一个趋势。我喜欢乔老爷（Steve Jobs）说的 design is not how it looks like. It is how the solution works.（设计不仅是它的外观和感觉。设计就是它的工作原理。） 我为了让我的设计方案按预期执行，而去学习了一些编程语言（甚至作为开发人员工作了几年）。但这并不是许多设计师会选择的方式。幸运的是，越来越多的解决方案和产品可以提供帮助。

如果你是一个设计师的话，第一个值得关注的就是Webflow（注：是针对专业的网页设计师的网站创建工具)。使用Webflow，你可以创建各式各样的网站，比如从着陆页（Landing pages）、到博客和公司网站，再到商店和更复杂的平台等。我在为我的 UX/UI 资源 制作的所有着陆页都是使用Webflow构建的，我很高兴看到这些解决方案（或者说产品）是如何发展的。

Webflow的强大之处在于它的易用性，你使用和开发人员相同的参数和功能，但是是可视化的。使用可视化操作，你能够产出非常流畅的交互和动画。你有能力操纵几乎所有的东西并测试它运行的过程和结果。

   Webflow 用户界面

Webflow在2021年的无代码发布会上（2021 No Code Conference）宣布了许多新特性，清晰的阐明了该平台正在扩展许多可能性。这不仅仅是一个页面外观的可视化编辑器。你可以在这里设计整个工作流并连接自动化 —— 这是未来真正的无代码解决方案。

除此之外，还有很多服务不同的目标而精心设计的无代码解决方案。这里有几个例子：

• Glide  —— 允许构建数据驱动的应用程序（apps）和网站（websites）

• Adalo —— 创建真实的应用程序（apps），无需代码

• Bubble —— 帮助准备复杂的web应用程序，无需代码

• Voiceflow —— 提供原型和推出聊天和语音助手

  
  

作为一名设计师，你应该至少体验一下这些工具。你会感受你的设计和想法在和这些新产品结合之后产生的魅力，毕竟谁知道你的能力在未来会发展到什么程度呢。但有一件事是确定的，未来关于无代码工具的解决方案绝对会更佳完善和出色，因此绝对值得对这个领域给予大量关注。

Web solution that feels more native

网络应用（web 应用）会更像原生应用（本机应用）

(注：举例一下就很好理解，就像安装在电脑本地的sketch和在网页上运行的figma，sketch就属于本机应用，figma web就是web应用)

原生应用对于web应用之间的优势正在逐渐消失。我记得有一段时间，如果你想在移动端尽可能获得最好的体验，你就必须开发唯一的原生应用。现在就不一定了，很多网络和混合应用解决方案（产品）展示了优秀的设计和流畅的工作流。

更重要的是，在视觉外观方面，你可以用一些技巧来修改浏览器的顶部栏颜色来让你的网页更像本地应用。

这一招在安卓系统上已经有几年的历史了。通过iOS 15，你也可以在iPhone上实现类似的功能，并且实现起来十分容易 —— 点击这里查看

虽然从开发的视角来看，这只是一个小小的变化，但它对用户体验的影响是显而易见的。网页感觉更像是一个应用程序（app）。

网页导航栏看起来更像本地应用

交互原型（Interactive Prototypes）

一些设计师可能还没有准备好接受无代码的工具和产品。但实际上，是存在这么一种可能性的，无代码工具可以用更好的方式去模仿落地产品的真实操作和状态，而不再仅是只支持点击的展示原型。

我们可以看到今年在Figma中的关于交互式组件的介绍，并且已经是目前主要的设计工具了。这将会催发出更加精细和复杂的原型。如果你还没有机会看到交互式组件介绍的话，可以看下面这个教程：

Figma交互式组件——教程/Figma Interactive Components — Tutorial

这一趋势对设计师有什么好处呢？我认为可以更好的理解产品如何如何运行的。对于参与者来说当他们看到更贴近真实产品的点击按钮，会让可用性测试（Usability testing）变得更简单一些。

更重要的是，添加动画和交互也有助于交付设计时，让开发人员能够看到你完整的设计视觉和想法 —— 他们可以在编写代码的时候直接复制你的贝塞尔曲线，确保产品和你的设计保持一致。

总而言之，在不久的将来，人们会更加重视交互式原型，单纯只能点击的原型将会不怎么受欢迎和是失去吸引力。

玻璃拟物风格（Glassmorphism ）是一个新的标准（不再是趋势）

一年前，我预言玻璃拟物风格会越来越受欢迎。iOS，macOS都使用了，Windows则更加显而易见的在UI中使用了玻璃材质。

玻璃拟物化是一种标准

今年的玻璃拟物感觉就像是在设计中常常会使用到的标准材质之一。用户也乐意接受。如果你使用Webflow的话，可以十分轻易的制作出玻璃拟物的效果。

90年代风格（90s style）—— 新趋势？

在最近两年，我们已经看到80年代怀旧风格广泛的应用在各类型的设计之中。我认为这种趋势将会继续下去，并在结合90年代的风格后产生一些变化。

你可能已经在网站上看到过一些这类风格的海报作品。所以不妨多加关注一下，可能它很快就会开始影响你的工作了。

使用Webflow无代码化制作的90年代风格页面

总结

设计行业无疑是一直在快速变化和发展的。我们都需要紧跟流行趋势的步伐。它不是说需要让我们的作品去吸引客户，只是说我们也需要学习新的事物，为自己扩展新的可能性。

（下面是客套话啦，我就不翻译了）

Do you agree with the predictions mentioned above? What are the trends you expect to see in 2022? Let me know!

Thanks for reading!

If you would like to level up your UI Design skills, my book may be the thing you — 🔥 UI Design Tactics. No theory, only practical tips.

Boost your design workflow in Figma & Sketch: check out the🚀 Design Starter Kit and 🏎 User Flow Kit that I am creating for you.

This article was originally published on my blog.

虽然有些内容我不是很赞同，并且有一丢丢怀疑作者是不是在宣传webflow，但是翻译还是要翻译得齐齐整整些~

欢迎留言和指正。

英文原文地址：2022 UX/UI Design Trends

作者： Thalion