2022 年网页设计趋势激发您的下一个网站项目

太时髦有什么问题吗？

我看到很多网站设计师迷失了方向——被“超级花哨”的设计所吸引，而牺牲了他们网站的可用性和功能性。

“大多数设计师生活在某种替代现实中，为彼此创造了不必要的东西。 然后它们成为趋势。” – Webflow 用户 Blazej

今天我们将介绍 2022 年的 3 个趋势——这不会让您牺牲网站项目的可用性，但会帮助您将其提升到一个新的水平。

2022 年网页设计趋势 #1 – 彩色背景的主题剪纸

让这个 2022 年网站趋势为您服务：

• 使用 ShapeDivider.app 之类的“形状制作器”应用程序- 如果您想要一个不错的快捷方式，可以帮助您创建这些自然形状。
• 选择完美的图片对这些人来说更为重要，因为互联网上有很多白色背景的图片很容易“库存照片”。

2022 年网页设计趋势 #2 – 单色作品

• 选择黑色和白色以外的另一种颜色可以使设计POP！
• 使用更少的颜色，实际上使设计这些类型的网站更容易！
• 使颜色适合您，将其用于按键以及您想要吸引眼球的东西。

2022 年网页设计趋势 #3 – 幻象设计元素

让这个 2022 年网页设计趋势为您服务：

• 融入一个你不一定想像拇指酸痛一样突出的元素。
• 利用这种微妙的外观创造更高端的美学。

往年网站趋势

我们喜欢漂亮的网站——专注于用户体验，并以时尚和永恒的方式构建。 关键是……在你说“视差动画”之前，不要以一种过时的方式变得太时髦。

• 不要抓住每一个新趋势。
• 一定要留意什么既时尚又有效。
• 下面的每一个特色趋势都会有一个关于它为什么时尚的摘录，以及一个单独的关于它为什么 - 或者是否 - 它有效的摘录。

2020 年三大网页设计趋势

1. 大字体

为什么时尚？ 在一个每个人都在他们的设计中塞入尽可能多的文本以满足 200 位利益相关者的世界中……如果您可以将其归结为一个超短的关键信息并使其变得巨大——您就赢了。

是否有效：它非常有效，因为人们知道要关注什么！ 每个文本的大小相同或只是彼此微小变化的问题当然是不清楚什么是最重要的部分。

2. 更小的英雄，更有影响力的英雄形象

为什么时尚？ 不掩饰自己的美图有多光荣？ 人们喜欢这个，因为它感觉有凝聚力，而且你不太可能遇到难以分层的问题（下一项中的示例。）

是否有效：当然可以——关键是图片要好，并真正帮助人们想象自己从您的产品或服务中受益。 如果没有好的图像，这可能看起来很俗气。

3.分层元素

为什么时尚？ 就像时尚一样，有意的分层是巧妙的——感觉是有意的，因此看起来非常漂亮。

是否有效：这真的取决于具体的项目。 如果它没有正确的照片、正确的支持元素、正确的对比度叠加或正确的排版（使用较重的字体效果更好），它真的不会有效。小心不要过度使用它——并使用它当您拥有可以协同工作的实体元素并且您“可以控制它们”时。 通常，客户可能会换入一个现在不起作用的图像——因此，当您知道它们不会经常更改时，使用正确的组件来完成是很重要的。

其他荣誉奖：

垂直排版——用于 UI 元素，可以在设计上给人一种更刻意的感觉。

Organic Shape Cutouts – 上面的 Pops Diabetes 示例也利用了这一趋势。

10% 偏移图像——上面的 Schaefco 项目也有这个特点——

Typographic Cutouts – 已经看到了一些很棒的例子。 一个大的粗体字母从空白处切出，有时后面还有一个视频——给人一种非常酷的分层效果。

每一页都有视频——如果你经常做视频——为什么不为你的每一个关键服务做一个视频，并将它们包括在内以增加“现场时间”？ 非常适合 SEO - 非常适合不想阅读的用户。 （提示：我们大多数人更喜欢看视频。）

光互补动画——动画吸引眼球，尤其是当它们移动一点时，但要确保你把人们的眼睛吸引到正确的东西上。 或者确保动画真的很好/有一种真正赞美你的品牌的风格。

更多衬线字体- 衬线字体更易于阅读！ 我很高兴看到衬线字体在 2020 年及以后卷土重来！

其他设计师采用 2020 年网页设计趋势（众包。）

近来的网页设计服务专注于在用户浏览网站时为他们提供最佳体验。 因此，对于开发人员而言，确保他们相应地工作变得非常重要。
因此，这里列出了 2020 年 17 大网页设计和 UI 趋势。

1.开放多彩的极简主义
如今，如果您仍在考虑使用黑白背景进行极简设计，那么那些日子已经一去不复返了。 开放和多彩的极简主义是最新趋势，为网页设计带来凝聚力和引人注​​目的感觉。

2. 移动友好
随着手机使用的增加，设计师需要确保网站适合移动设备，以便每个用户都可以轻松地通过手机查看网站。 这正是响应式网页设计服务来拯救的地方。

3. 超大标题
近来，超大的标题和标题变得非常普遍，以吸引读者的注意力，因为他们花在网站上的时间要少得多。 因此，标题如此创建，以吸引读者的注意力。

4. 鲜艳的色彩、具有挑战性的渐变和深色背景
今天的网站专注于提供最佳的用户体验，因此网页设计服务特别关注这一点。 在 2019 年，使用更复杂的渐变以及梦幻般的深色背景颜色再现变得更加普遍。这三者的经典组合是趋势。

5. 网站加载速度
今天的客户总是很匆忙，因此用户只是跳过了加载缓慢的网站。 因此，网站的加载速度需要更高，这正是增强用户体验的最新趋势。

6.动画和下一级插图
用户总是期待新的东西。 这可以通过动画以及下一级插图轻松实现，这正是这些成为最新趋势的原因。

7. CSS 网格
CSS 网格仍然是最流行的网页设计趋势之一，它在使网页设计更容易方面发挥着至关重要的作用。 最近，它是一些具有现有功能的新工具的组合。 当今的现代 CSS 提供了全新水平的响应性、交互性和数据可视化。

8. 浅色和深色的配色方案
为了给用户创造一些令人兴奋的东西，使用浅色和深色配色方案实在是太好了。 这给用户留下了积极的印象，因此是有益的。

9. 身临其境的 3D 体验
3D 图像和图形对于网页设计服务来说无疑是太好了，因此可以创建有吸引力的网页设计，从而吸引用户的眼球。 身临其境的 3D 体验为您的网站带来生机，并为用户提供出色的体验。

10.粗野主义粗野主义是另一个正在兴起的主要趋势，这一点从越来越多的品牌更喜欢使用大胆、坚韧和傲慢的概念来拥抱他们内心叛逆的一面这一事实就可以看出。

11. 飞行和浮动元素
为了吸引用户的注意力，飞行和漂浮的视觉效果非常有效。

12.有机和几何形状
网页设计服务中几何和有机形状的使用已经相当稳固地占据了平面设计和破碎网格之间的位置。

13. 重叠的东西
重叠效果无疑是 2020 年最热门的趋势之一。重叠的东西会给某些特定类型的内容带来视觉上的兴趣。 这个概念是激发人们兴趣的一个很好的技巧，但需要在网页设计服务中小心翼翼地完成。

14.增加视频
更多视频的添加为网站带来了更多活力，并且它能够像其他形式的媒体一样吸引几乎所有人的注意力。 这无疑是2020年的趋势，并且会持续很长时间。

15. 不对称布局和破碎网格
网站的不对称布局以及在网页设计时使用破碎网格现在变得越来越普遍。

16. 增强现实
仅屏幕界面对于当今世界来说是不够的，用户希望在现实世界中进行物理交互。 这就是网页设计师必须想出一些新东西来提供增强现实功能的地方。

17. 微交互
微交互的重要性不容忽视。 这些非常适合创建非常吸引人的活动，从而在 2020 年兴起。
现在，当您了解 2020 年的顶级网页设计和 UI 趋势时，不要浪费更多时间，而是将它们整合到您的网站中，为用户提供美妙的体验。

使用不当的常见网页设计趋势示例

您如何确定趋势是否使用不当？ 同理心和直觉。 咨询你内心的蟋蟀。 如果有人用他们的网站对你这样做，你会喜欢吗？ 如果答案是否定的，也许您应该放弃这 50 个弹出窗口，即使您“订阅了如此多的新闻通讯注册”以至于您可以在余生中向它们发送垃圾邮件。

它有效吗？ 恭喜你又转化了 5 人，又惹恼了 40 人，破坏了你的品牌认知度，让他们重新考虑再次点击你的自我祝贺内容。 所以，是的，你猜对了，我使用不佳的网页设计趋势的第一个例子是：

侵入性弹出窗口

侵入性弹出窗口以及您无法弄清楚如何关闭或迫使您回答荒谬问题的那种非常糟糕。

如何做得更好——当有人离开时赠送一些有价值的东西

与其试图将某人推入您的电子邮件列表，不如拉动。 如果你给了我一些有价值的东西，我不会因为你在我脸上放一个大的旧弹出窗口而感到不安，事实上，我可能有点感兴趣。 需要注意的是，内容是变量。 不要沾染一些糟糕的白皮书，建立伟大的东西——与团队合作建立伟大的东西——无论你必须做什么，然后把它作为核心。 将其与“退出意图”弹出窗口配对，不要强迫任何人做出决定 - 始终给出明确的方法来 x 弹出窗口。

无限滚动

我们不需要在结尾有明确的号召性用语，也不需要带有经过深思熟虑的导航的漂亮页脚

也许这是我愤世嫉俗的老人大脑的一个例子，因为我什至无法处理推特从星星变成心的时候——但如果我们在这里应用黄金法则，我讨厌完成一篇文章并让其他人做出选择我接下来想读什么文章。 使用 facebook 和 youtube 视频为他们做出决定可能会很愉快，因为嘿，这是视频，反正我只是在吃素——但对于你必须阅读的内容，我很抱歉，我认为你不会制作根据我完成的一篇文章或内容准确地决定我的偏好。

我要提醒一下，您正在浏览一系列项目的画廊类型/Pinterest 风格的网站似乎对这种类型的导航有一些好处，但它可能仅限于社交。 我们其他人需要对结论和更多导航感到满意。

如何做得更好——想想一个人在阅读了网站上的此类或此类内容后想要做什么。

网站上的每种类型的内容都可以有一个带有其他类似文章、导航元素的前页脚，理想情况下，还有几个针对他们刚刚完成的内容量身定制的明确后续步骤。 尽管我讨厌上面示例（Messages Home）中的“龙虾”字体，但我认为 Jared 仔细思考了人们在阅读完一页内容并以视觉方式分享这些内容后可能感兴趣的内容简单明了。 如果只有其他页脚那么幸运。 我承认，我有恋足癖。

3. 痛苦地分散视差，除了一毫秒的 oooh-ahhh 之外没有增加任何价值。

这种艺术和文化组织有运动，有深度——但它有意义吗？ 我无法想象后面的圆圈是如何添加任何有用的元素的，除了有一点是原创的，或者还没有做很多。 IE 一个噱头——但嘿，他们赢得了网站奖……所以该网站一定很好，对吧？

当高雅地实施时，运动和深度可能会很棒，不幸的是，大量的人冲进来实施视差，而没有深思熟虑它如何真正帮助游客和增加价值。 大尺寸的设计很漂亮，但如果你想深入了解网站内容并真正了解如何或为什么要与公司合作或购买产品 - 冗长的视差网站会错过重点。

如何做得更好——巧妙地实施以增加一些深度，并在适当的时候以一种为产品增加一点吸引力的方式谨慎使用。

到现在为止，也许你们中的许多人已经看过 2012 年发表的《纽约时报》雪落文章。这篇文章以一种几乎令人放松的方式使用视差和视频，因为它在当时是如此进步。

使这个网站工作得如此漂亮的关键？

• 强调内容——排版元素经过深思熟虑和可读性
• 标题处理给出了清晰的层次结构
• 所有这些都很好地结合在一起，因此视差方面不是中心舞台，而是更大画面的令人愉悦的微妙部分。

这正是视差在 2016 年如何被高雅地使用，而不会让人感觉像是一个噱头。

2019 年网页设计趋势

网页设计师与时装设计师没有什么不同，因为他们必须时刻关注地面，以了解来年网页设计的最新趋势。

一个聪明的网页设计师在创建网站布局时不仅要牢记品牌形象，还要考虑用户的可用性。 正因为如此，设计师每年都会剔除用户不喜欢的设计细节，并扩展用户喜欢的设计细节。

今年也不例外，这里列出了 2019 年网页设计的主要趋势。

视频背景

您可能已经看到大量包含大型视频背景以吸引用户的网站。 视频背景是让用户深入了解您的业务的好方法。

查看房地产开发公司Ditto 的网站，该网站重点介绍了人们在日常生活中的住宅开发，让用户能够以一种引人入胜的方式查看单元内部。

我们还与 Deneen Pottery 合作，帮助制作了一段关于他们的背景的视频，其中包含他们手工制作的陶器的实际镜头。

粒子背景

对于仍希望将运动融入其网站的企业来说，粒子背景是视频背景的绝佳替代品，特别是如果您担心较大背景视频的加载时间。 这些动画是 javascript，可创建自然且引人入胜的运动作为背景的一部分。

Heystack 为他们的网站使用了复杂的粒子背景，我们希望更多的设计师也这样做。

不对称布局

不对称网页设计的独特和独特方面使其在将您的网站与其他网站区分开来方面具有吸引力。 与几年来流行的极简风格相比，不对称设计更加繁忙，但如果做得好，仍然看起来同样干净和专业。

我们最近为可持续发展 9 推出了这个网站，它的特点是形状重叠，虽然看起来很平衡，但肯定有不对称的元素，增加了它的深度。

粗体字

选择正确的排版可能是跳出率低而不是高跳出率的区别。 选择粗体字体，尤其是大字体，可以真正吸引网站用户的注意力。

这两个网站主页由 Dribble 上的网页设计师创建，完美地体现了粗体字的简单和现代性质。

集成动画

集成动画正是它们听起来的样子：放置在整个网站上的动画，为网站增添了额外的活力、动感和参与感。 正如您所注意到的，运动是来年网页设计中寻找的一个重要主题。

30 Species in Pieces 是一个致力于对人们进行濒危动物教育的网站，它在其简单的网页设计中使用清晰且引人入胜的动画，使其栩栩如生。

动态渐变

正如我们之前提到的，颜色渐变开始卷土重来。 渐变允许使用您网站的颜色进行自定义，以创建真正体现您品牌的东西。

Apple 使用渐变作为字体颜色，以与新 iPhone X 广告的主题保持一致。

2018 年被低估的网页设计趋势

每年，网页设计趋势都在不断变化——所以几年前看起来“时尚”的东西可能不是今天的最佳选择。 因此，所有企业主都必须了解最新的网页设计趋势，以便销售他们的业务并保持访问者的注意力。 继续阅读以发现 2018 年被低估的六大网页设计趋势。

破碎的网格布局

许多网站使用网格来确保文本、图像和导航按钮背后的结构。 网格不仅为设计师提供指导，而且还帮助访问者轻松浏览网站。 然而，今年看到的典型网格布局被打破。 不是遵循明确的规则，而是有机会对网页设计做一些不同的事情。 开发人员已经转向限制较少的破碎网格布局。 破碎的网格布局允许文本和图像更自由地进入和跨越页面。 当元素重叠时，这会创建一个和谐的网页设计，为访问者自然流动。 破碎的网格布局也可以通过使用图层、不寻常的定位和使页面更具吸引力的微妙接触来实现。

2. 聊天机器人

越来越多的网页设计师开始在网站中使用聊天机器人。 聊天机器人常见于位于屏幕右下角的商业网站上。 小弹出窗口使访问者有机会与业务人员交谈或获得任何查询的自动帮助。 在您的网页设计中添加聊天窗口意味着任何有问题的访问者都可以立即得到回答。 一些企业在让工作人员可以聊天时遇到了麻烦。 但是，可以对您的聊天机器人进行编程以回答最常见的问题，并提供有关在不知道问题答案时如何联系企业的详细信息。

定制插图

过去，网页设计图像主要由产品照片、GIF 和编辑照片组成，强调产品的特性、功能和人性化维度。 2018 年，这一点略有不同，插图现在主导了市场。 开发人员发现插图更具吸引力和吸引力。 他们有一个针对品牌定制的清晰而集中的信息。 插图通常使用非传统的颜色组合来完成，这些组合尝试各种对比，创造张力，同时保持网页设计的可读性。

页面转换

每当用户的体验被打断时，他们很有可能会离开网站。 当它们从一页更改为另一页时，也会发生这种情况。 一些网站加载时间过长，而另一些网站则将用户带离他们在新页面打开之前所处的环境。 因此，每个网页设计都必须在页面之间平滑高效地转换。 今年，越来越多的网站正在为其访问者引入有凝聚力的页面转换。 访问者无需导航到新页面，而是能够在同一页面上查看不同的信息。 这些更流畅的页面转换可以增强用户体验并促进与您的品牌的互动。

粗野主义

2018 年在网页设计中使用野蛮主义有所增加。 粗野主义正在开辟一个空间，让开发人员和设计师可以做他们想做的事，而不是他们应该做的事。 这种网页设计风格的灵感来自 1950 年代简单、经济且实用的建筑。 粗野主义网页设计是原始而迷人的。 主要关注的是内容，因为让访问者在视觉上令人愉悦是很重要的。 粗野主义网页设计通过暴露的结构、粗糙感和深思熟虑的过程表现出来。

视频内容

今年，网站上视频内容的使用也有所增加。 视频是以视觉格式传达复杂信息的好方法。 视频内容不仅使网站看起来更现代，而且还创造了一种静态图像无法简单做到的艺术感。 视频是一个强大的工具，因为它们可以无缝地融入您的网页设计中，并且仍然保持极高的质量，即使有大量的颜色、渐变和细节。 视频也可以循环播放，以确保副本的细节和视频的细节保持一致。 许多网站开发人员认为，当存在视频内容时，访问者会在网站上停留更长时间，访问者也更有可能注册或选择加入他们的产品和服务。从商业角度来看——2017 年网页设计的哪些趋势很重要？

移动针的网页设计趋势

1.每一页的联系表格

不要曲解——如果您的网站是一个潜在客户生成网站，您不想让联系表格很难找到。 如果您可以将它包含在每个页面上，那就更好了。

这似乎是一个简单的技巧，但最好的“技巧”是。

2. 永远存在的 CTA：持续强大的号召性用语按钮

您不必使用联系表来推动人们与您联系、获得演示、获得报价，或者您希望推动客户采取的任何主要行动。 相反，您可以一直在右上角包含一个大按钮。 当他们滚动时，将号召性用语按钮留在屏幕顶部，并带有跟随访问者的“粘性”标题。

3. 使用组织徽章和推荐信等信任因素使设计过载

我只坚持我所知道的最有效的事情，而我的一些观众以前可能没有意识到这一点。 信任因素是网页设计中的一切——除了干净、现代和美观的视觉设计之外，它们几乎是我所想到的。

让人们采取行动的唯一方法（大型号召性用语按钮和立即购买按钮等）是用这些元素围绕他们，这些元素解释并推动他们继续 - 因为信任在任何交易中都绝对至关重要。

你们有免费退货吗？ 你们有快速免费送货吗？ 你有保证吗？ 展示这些东西。

当地贸易集团的一部分？ 更好的商业局？ 您的在线商店有 SSL 证书吗？

为这些项目添加视觉表示，并考虑将它们标记为您网站的风格，以进一步增加信任。

大多数优质企业拥有的信任因素类别中最大的一项是在线评论和推荐。 我强烈建议在您的网站上以非常显眼的方式展示这些内容。 如果是推荐信，理想情况下，您应该拥有客户自己的照片，以使他们对您的产品或服务的评价更具可信度。

4. 有一段视频来展示你的关键价值主张

当我第一次设计 DeneenPottery.com 时，我使用了客户所拥有的东西——他们的高质量杯子的图像和一个在设计中隐藏起来的视频。 我们在这段视频中做了一个小亮点，毫无疑问地展示了他们杯子的手工制作特性，并让人们体验了他们的制作过程：

5. 极具吸引力的留白设计——考虑使用有意义的过渡、重叠的网格系统和拆分内容来画出二分法

白色空间是令人愉悦的设计元素，似乎让一切都感觉更“高端”：

在这个网站上，我决定利用摄影的自然开放性来营造一种宽敞颓废的感觉。

Apple 了解空格。 这并不意味着背景是白色的——它只是意味着设计中主要主题周围的开放空间。

这是Apple 在其网站中使用空格的一个非常高的示例：

有意义的过渡

谷歌多年来一直在他们的“材料设计”中使用有意义的过渡——但越来越多的网页设计师开始使用它来创建一种有效的方式，为用户在网站上执行的操作提供更多上下文。 查看下面按钮上的悬停状态，用户单击按钮时颜色的扩散，以及单击后模态/弹出窗口的增长方式：

在这个网站中使用材料设计让我让网站感觉非常互动和非常现代。 它还有助于通过使用 Material Design 的约定，您还可以巧妙地将自己与 Google.com 和 Google 的许多产品上的用户体验相关联——因为它们都匹配并使用这些约定。

重叠网格系统

网页设计中的盒子是传统的并排的，一个在另一个之上，但许多设计师正在使用一种非常 2017 年的风格，称为重叠网格系统或偏移网格系统。 这种风格将盒子和照片并置在一起，以获得更有机、自由流动的效果。

分割颜色或分割图像以画出二分法

二分法是将两件事分开——比如“冷热”或“善恶”。 通过使网站的两个方面彼此超级不同，它可以吸引访问者的注意力。

你可以用它来画出被反对的情感元素，或者大脑的两侧“情感和逻辑”，“创造性和系统导向”，或者只是用它来创造一些视觉吸引力，比如 Mateusz Koziorowski 的这个设计.

无论你做什么——不要随意跳入网页设计趋势

请务必首先考虑您的业务目标。 视觉设计趋势如果不考虑它会为您的收入带来什么，就什么都不是。

一个更好的网站指日可待
自第一个网站推出以来，我们已经走了很长一段路。 网页设计师正在变得更细致、更冒险，而且坦率地说，更好。 未来几年的网页设计将是挑战极限并尝试大胆的新想法。 在 Hook，我们喜欢利用您已经厌倦的旧网站，并将其转变为真正体现您品牌的前沿、独特性的东西。 如果您正在寻找建立一个新网站，该网站将吸引用户并带来更多转化，那么今天就联系 Hook Agency 安排一次会议，我们将讨论您的业务目标是什么以及我们如何实施他们进入你的新网站。