# 2022年顶级网页设计和UI趋势 By [Ganyt0x](https://paragraph.com/@ganyt0x) · 2022-05-18 --- 哪些网页[设计趋势](http://05plus.com/design-trends/)将主导 2022 年？您应该熟悉哪些风格和技术，以便您的[作品](http://05plus.com/portfolio/)全年保持新鲜和现代感？ [设计趋势](http://05plus.com/design-trends/)可以塑造一切，从设计师的创作方式到用户界面设计，再到从网站到包装设计的一切未来迭代。它们还可以快速放大或淡出，因此关注现在的流行趋势很重要，这样您的设计就不会很快过时。 让我们深入探讨**2022 年的**一些**顶级网页**[**设计趋势**](http://05plus.com/design-trends/)。我们将着眼于 2021 年末开始出现的趋势，这些趋势是来年奠定基础的明确候选者，以及一些即将流行的趋势设计。 ### 有趣、乐观的设计 ![时髦的形状、颜色，甚至面孔都可以带来很多乐趣。设计师正在使用网页设计趋势，为从投资组合网站（如上面的示例）到电子商务的所有内容提供有趣、乐观的设计。这些设计的共同点是它们为世界注入了一点额外的快乐。](https://storage.googleapis.com/papyrus_images/58dd36817491012b22230d0307c3caf1910819ebbe41f20e5857f35b834bd3b7.png) 时髦的形状、颜色，甚至面孔都可以带来很多乐趣。设计师正在使用网页设计趋势，为从投资组合网站（如上面的示例）到电子商务的所有内容提供有趣、乐观的设计。这些设计的共同点是它们为世界注入了一点额外的快乐。 ![没有什么比笑脸更能表达乐观了。正确的图像是描绘这种氛围并利用这种网站设计趋势的简单方法。注意摄影和整体图像，并寻找与虚拟观众相关的面孔，例如来自 LegalSuper 的示例。](https://storage.googleapis.com/papyrus_images/47ed3a7bd1bfc21130605881ffb9d8de2131e28907f299028412463a34a5d432.png) 没有什么比笑脸更能表达乐观了。正确的图像是描绘这种氛围并利用这种网站设计趋势的简单方法。注意摄影和整体图像，并寻找与虚拟观众相关的面孔，例如来自 LegalSuper 的示例。 ### 黑白配色方案 ![黑色和白色配色方案是今年最鲜明、最美丽的设计趋势。没有颜色，你真的必须在限制范围内思考和设计。虽然这听起来有点吓人，但它可以释放并帮助激发创造力。另外，结果绝对是惊人的。](https://storage.googleapis.com/papyrus_images/2e9258ba30cbf30b09682fa63b4a33211d4e53a80a6752623dd593125eeddc50.png) 黑色和白色配色方案是今年最鲜明、最美丽的设计趋势。没有颜色，你真的必须在限制范围内思考和设计。虽然这听起来有点吓人，但它可以释放并帮助激发创造力。另外，结果绝对是惊人的。 ![也许在世界大事的另一个迹象中，黑白配色几乎无处不在。这种鲜明的审美表明有多少设计师可能会关注简单和鲜明。使黑白配色方案既清新又现代的关键在于应用正确的效果和技术。 在上面的例子中，悬停时有一个微妙的、流动的动画以及超大的鼠标指针来增强交互性。](https://storage.googleapis.com/papyrus_images/9dff6d502dd23c65d0373d227d9fd0e642e5d4bd1e0b82e8c576e3fba77b9a20.png) 也许在世界大事的另一个迹象中，黑白配色几乎无处不在。这种鲜明的审美表明有多少设计师可能会关注简单和鲜明。使黑白配色方案既清新又现代的关键在于应用正确的效果和技术。 在上面的例子中，悬停时有一个微妙的、流动的动画以及超大的鼠标指针来增强交互性。 大胆的排版 ----- ![在 2022 年，没有错误的字体排版方式。大粗体——甚至是衬线——无处不在。他们看起来棒极了。在玩弄这种网站设计趋势时，请考虑字体将如何响应（在移动屏幕上一切看起来都不同）以及如何最大限度地对访问者产生影响。许多实验性字体不仅设计有天赋，还包括动画或 flex 选项等元素。](https://storage.googleapis.com/papyrus_images/2ba249cef89f06249be3c5b50161e095b9d5ea29618379b432adff3ff7b993a0.png) 在 2022 年，没有错误的字体排版方式。大粗体——甚至是衬线——无处不在。他们看起来棒极了。在玩弄这种网站设计趋势时，请考虑字体将如何响应（在移动屏幕上一切看起来都不同）以及如何最大限度地对访问者产生影响。许多实验性字体不仅设计有天赋，还包括动画或 flex 选项等元素。 ![从轮廓到彩色字体，再到不断变化的形状和填充，粗体和实验性字体选项在网站设计中占据主导地位。谈到今天的网络排版，真的没有规则，设计师们在玩弄一切。 Garcia Salmeron 的设计在主页上使用了多种字体效果来体现这一趋势：混合和匹配主标题中的字符、有点实验性的字体选择以及带有图像和背景的彩色填充层。](https://storage.googleapis.com/papyrus_images/49eff5f04e48576832d17981d4dcac4c38d1d41699fad903479a374491de2639.png) 从轮廓到彩色字体，再到不断变化的形状和填充，粗体和实验性字体选项在网站设计中占据主导地位。谈到今天的网络排版，真的没有规则，设计师们在玩弄一切。 Garcia Salmeron 的设计在主页上使用了多种字体效果来体现这一趋势：混合和匹配主标题中的字符、有点实验性的字体选择以及带有图像和背景的彩色填充层。 超大指针 ---- !\[这是一种设计趋势，如果您点击浏览，您会在此处的许多示例中看​​到，但在您尝试参与网站设计之前根本看不到：超大指针或鼠标悬停。 这个用户界面元素无处不在。最常见的例子和用法是 Jade Sheng 的例子，它的圆形指针在屏幕上移动，甚至在穿过可点击元素时扩展或改变颜色。 这种 UI 设计趋势的伟大之处在于，它为网站访问者提供了有价值的可用性信息，并帮助他们更好地参与设计。 \]([https://images.mirror-media.xyz/publication-images/xaZoJ5L5sQPcrH2Vaq0kO.png?height=869&width=1500](https://images.mirror-media.xyz/publication-images/xaZoJ5L5sQPcrH2Vaq0kO.png?height=869&width=1500)) 三维设计元素 ------ 虽然 2020 年和 2021 年有很多设计师为完整的网站进行全面的 3D 设计，但新兴趋势是将 3D 元素与更扁平的整体美感结合起来。 具有 3D 风格的元素可能包括用于创建深度和维度的阴影、动画或图层效果。 --- *Originally published on [Ganyt0x](https://paragraph.com/@ganyt0x/2022-ui)*