2022 年 20 大网页设计趋势

实验性导航、滚动效果和动态排版只是 2022 年主导的网页设计趋势中的一小部分。

查看包含 2022 年最佳网站设计示例的完整列表，以获取灵感来解决您今年的网页设计项目。

这些趋势中的一个共同主题是运动设计。 经验丰富的 UI/UX 设计师和前端开发人员 Gary Simon 认为，运动设计将在 2022 年无处不在。要查看使用基于滚动的动画、视差效果、动画 SVG 等的网站的几个示例，请查看他的视频：

1. 实验导航

我们喜欢什么：实验性导航可以帮助吸引和引导访问者以特定方式浏览网站。

实验性导航是指颠覆传统模式的导航模式（所有大写导航在屏幕顶部，无衬线字体）。 这些实验模式可以帮助创造兴趣并引导用户以特定方式在网站上移动。

以 Kim Kneipp 的投资组合网站为例。 如果您单击主页右上角的菜单按钮，则会从屏幕底部滑入一个菜单，该菜单看起来像书中的目录。 每页都有编号，以建议阅读顺序。 在右侧，项目也按类型和颜色编号和分类。

2.滚动效果

我们喜欢什么：滚动效果可以刺激访问者并鼓励他们继续滚动。

滚动效果——由滚动动作触发的动画——可以创造更多动态的网络体验。 这些越来越多地用于交互式网站，以吸引读者继续滚动，表示内容的中断，并创建三维体验。

Engineered Floors 使用水平和垂直滚动以及其他效果的组合来做到这一点。 例如，当用户登陆主页时，他们会看到右侧似乎是一把椅子的图像。 当用户滚动时，该图像会缩小以显示起居室，该起居室逐渐被地毯覆盖。 这种 3D 体验令人愉悦且内容丰富。

3. 动力学排版

我们喜欢什么：动态排版可以取悦访问者并帮助他们消化您的内容。

动态排版（或移动文本）是一种动画技术，自 60 年代故事片开始使用动画开场标题以来就一直存在。 它可以用于网站设计中的类似目的，以在访问者登陆主页后立即吸引访问者的注意力。

它也可以用来突出重要部分，引导访问者滚动，并逐渐显示信息，例如在 Arcadia 上。

4.拖动交互

我们喜欢什么：拖动交互可以为用户提供对他们体验的控制感。

拖动交互旨在模仿实际的物理动作。 它们本质上允许网站访问者在屏幕上拾取和移动对象。 这种类型的手势交互正在更多的网站上实施，尤其是电子商务和投资组合网站。

以 Robin Mastromarino 的投资组合网站为例。 除了点击主页滑块的控件，您还可以拖放不同的幻灯片来浏览他的特色项目。 页面过渡和动画基于拖动速度，为用户提供对这些效果的控制感。

5. 复古排版

我们喜欢什么：复古字体可以激发网站访问者的怀旧感和感伤感。

越来越多的公司正在使用带有复古感的大而大胆的排版作为其主页的标题。 这种风格最适合简短的单词，页面的其余部分保持最小和干净。

这是标有“新风格”的更大趋势的一部分。 在其 2022 年字体趋势报告中，铸造和技术公司 Monotype 将 Neue Nouveau 描述为对新艺术运动的一种扭曲，该运动的特点是装饰性设计、装饰笔触结尾以及对角线和三角形字符形状。 报告称，我们可以在今天的排版中看到其中一些相同的特征——比如有机形式和华丽。

这是法国餐厅 Picky Joe 的一个例子。 如右图所示，迷幻的标题与餐厅的复古内饰相匹配。

您可以在此处查看其他餐厅网站设计。

6. 电影摄影

我们喜欢什么：即使在最复杂的布局中，Cinemagraphs 也可以帮助吸引访问者的视线。

Cinemagraphs——在流畅、连续循环上运行的高质量视频或 GIF——已经成为一种流行的方式，可以为原本静态的页面添加运动和视觉趣味。

虽然全屏循环在过去很流行，但今年你会看到更小的电影图像被整合到复杂的布局中，以帮助吸引眼球并让读者保持滚动，就像设计和技术工作室 Grafik 的这个例子一样。

7. 野蛮主义

我们喜欢什么：粗野主义优先考虑简单性和功能性，这是用户体验的支柱。

为了在整洁有序的网站海洋中脱颖而出，一些设计师选择了更不拘一格、打破常规的结构。 虽然一开始看起来很不协调，但许多受欢迎的品牌现在正在将这些激进的替代设计元素融入他们的网站，比如彭博社。

粗野主义是对日益标准化的网页设计的一种反应，其特征通常是鲜明、不对称、不墨守成规的视觉效果，以及明显缺乏层次和秩序。 换句话说，它很难描述，但当你看到它时你就知道了——就像下面来自 Chrissie Abbott 的例子。

8. 单色渐变

我们喜欢什么：单色渐变在视觉上很有趣，但不会分散注意力。

渐变色这几年已经遍布网络，到了2022年还是很常见的。今年很多网站背景都是渐变色，既单色又柔和。

Red Ventures 的视觉设计师 Kendra Pembroke 说：“我看到了很多渐变，尤其是单色渐变，它们给人一种深度感和视觉趣味，同时又不会让人分心。”

Creative Studio Better Half 展示了如何使这种效果看起来清新现代的完美示例。 它结合了大胆的排版和悬停动画与单色、柔和的黄色渐变背景。

9.分层

我们喜欢什么：分层可以帮助增加网站的深度并讲述品牌的故事。

分层图像、颜色、形状、动画和其他元素为没有大量文本的站点增加了深度和纹理。 下面是歌手兼词曲作者SIRUP 的一个时尚示例。

10.纯文本

我们喜欢什么：这种极简主义的方法确保访问者只获得最重要的信息。

一些网站完全删除了图像和突出的导航部分，依靠几行简单的文本来告知访问者他们的公司。

例如，丹麦机构 B14 使用其主页的英雄部分来简单地描述其使命宣言。 这是一种现代、整洁的信息呈现方式，与使用电影、悬停动画和动画光标效果的投资组合部分形成鲜明对比。

11. 动画插图

我们喜欢什么：动画插图有助于传达复杂的想法并为网站增添一些个性。

越来越多的公司正在转向插画家和图形艺术家为其网站创建定制插图。 “插图可以很好地传达生活方式照片并不总是能够捕捉到的更复杂的想法，”彭布罗克解释道。

在今年的网站设计中，这些插图通常是动画以增加交互性。

例如，如果您将鼠标悬停在NewActon 网站（由澳大利亚数字机构 ED 设计）上的一幅插图上，该插图和周边区域的插图将会摆动。 然后，只有您悬停的插图会继续在一个小圆圈中移动。 这种设计也很实用：每个插图代表右侧导航菜单中的一个类别。

12. 极简主义

我们喜欢什么：极简主义可以对用户体验和网站性能产生积极影响。

将经典极简主义推向极致，一些设计师正在挑战网站外观的惯例，只展示绝对的必需品。 这种被称为“极简主义”的趋势对于用户体验和加载时间非常有用。

设计师 Mathieu Boulet 的网站以一些指向其社交资料和信息的选择链接为中心。

13.混合水平和垂直文本

我们喜欢什么：混合水平和垂直文本违反惯例，因此可以取悦和吸引一些用户。

将文本从通常的水平对齐中解放出来并将其垂直放置在页面上会增加一些令人耳目一新的维度。 以动作体育视频制作人 Prime Park Sessions 为例，它在最小页面上结合了水平和垂直文本对齐方式。

14. 几何形状和图案

我们喜欢什么：几何形状和图案可以将访问者的注意力引导到某些产品或 CTA 上。

异想天开的图案和形状在网站上出现的频率越来越高，为原本由平面和材料设计所统治的景观增添了一些风情。 加拿大设计工作室 MSDS 在其主页上使用了大胆的图案字母。

15.细衬线字体

我们喜欢什么：这种趋势为品牌增加了一定程度的复杂性。

由于屏幕分辨率的限制和整体缺乏在线字体支持，设计师多年来一直避免使用衬线字体，以保持网站的清晰和干净。 随着最近的改进，衬线字体在 2021 年迎来了重要时刻。

根据 Monotype 的 2022 年字体趋势报告，虽然去年是大而粗的衬线，但 2022 年将迎来更薄、更轻的衬线。

正如在 The Sill 上所见，细长的衬线标题增添了一丝精致和风格。

16.重叠的文本和图像

我们喜欢什么：重叠的文本和图像可以最大化页面上的空间。

与随附图像略有重叠的文本已成为博客和作品集的流行效果。 自由艺术总监和前端开发人员 Thibault Pailloux 使他们的重叠文本在每个标题下方都带有彩色下划线。

17. 破碎的网格

我们喜欢什么：这种违反约定的技术可以使标准的网站页面或部分更有趣。

虽然网格仍然是在网站上显示文本和图像的最常见和最有效的方式之一，但破碎的网格继续进入主流网站，并提供了一种与规范不同的变化。 例如，查看 HealHaus 的网站。 它的主页以重叠的图像和文本块为特色。

18.有机形状

我们喜欢什么：有机形状在不分散内容的情况下增加个性。

严格的网格布局和锋利的边缘的日子已经一去不复返了——现在一切都是关于曲线和柔软、有机的形状。

“有机形状可以帮助增加一些趣味性，而不会影响信息的显示方式，”彭布罗克说。

在下面来自 Spring Invest 的示例中，英雄部分中的有机形状不仅具有装饰性，而且具有功能性。 黄点就像一个光标，画出形成公司标志的泪滴。 这些形状不仅增加了愉悦的时刻——它们还有助于强化品牌的身份和价值主张，以“塑造商业的未来”。

19. 网页纹理

我们喜欢什么： Web 纹理将注意力吸引到网站上的特定部分。

Web 纹理是在视觉上类似于 3D 表面的背景图像。 如果做得好，纹理可以通过吸引触觉让观众沉浸在网站中，正如 Color Of Change 所证明的那样——背景唤起了类似胶带的纹理。

20. 网格线

我们喜欢什么：这种趋势强调网格是一种组织原则。

最近几个月，网格线开始出现越来越多，这是有充分理由的。 网格线以一种易于阅读和理解的方式构建内容——但它也增加了现代美感。 在Foundations for a Better Oregon 网站上，网格线用于创建看起来具有未来感的清晰布局。

您可以在您的网站上使用的设计趋势

当然，你不需要结合所有这些趋势来构建 2022 年最好的网站设计之一——我们怀疑这甚至是可能的。 但是，即使添加几个作为突出的组件或更细微的细节也可以显着改善您网站的用户体验，从而提高参与度、更多的 CTA 点击，并为您的在线业务带来更好的结果。

编者注：这篇文章最初发表于 2018 年 1 月，为了全面性而进行了更新。