2022网页设计趋势

Inspiring web design trends 2022

1. 基于网络的寻宝游戏

网站的结构其实非常适合拼图和寻宝游戏。你可以在加载界面以及输入密码等一些环节，让访问者找到解锁下一页的线索。你可以用各种创造性的方式来隐藏和显示提示、线索和答案。在这种情况下，你可以巧妙地利用网页设计实力来创建一个趣味“寻宝游戏”。或许有以下几种方式可以给你带来一些灵感：在页面上找到隐藏的可点击元素、画一个形状、破解密码。如果你真的希望每个人都能坚持到最后，请记住给你的观众一些提示或解决方法。寻宝游戏可用于揭示产品发布、发布新视频或为观众提供隐藏的信息。

营销机构 ThreeSixtyEight 设计了一次“寻宝活动”，向其团队透露了其公司团建的位置(可以打开链接体验：https://lightthefirewithinus.webflow.io/)。它通过音乐和光标周围的不透明度调整创造了一种神秘的氛围，访问者可以在寻找线索时使用它来显示页面的选定部分。

2. 单页网站

有时，最有效的网站是最简单的网站。或许你已经注意到，单页网站越来越受欢迎，它放弃了菜单和导航，转而采用简单的滚动导航。单页网站在主题范围少时效果最佳，例如投资组合或单一想法的呈现。

这些网站就像人们拿着传单或阅读海报的感觉。你需要查看的所有信息都集中在一个地方，而不会分散你的注意力，去搜索多个页面。

这个 Indi Harris 网站（由 Jordan Hughes 建立）是一个线上简历。这使得普通观众更有可能阅读整个简历，因为他们想知道的一切都在面前。

3. 网站头部（heroes部分）少一些图片

今年，许多设计师都在设计相关的登陆页面，而不是依靠照片或插图。网站的这个部分能提供给用户巨大的视觉冲击，但有时消除醒目的图像的干扰,能将人们的注意力更多地放在你的内容上。

下面的网站截然不同，但每个网站都使用布局、排版、颜色和形状来传达强大而独特的品牌标识。放弃使用图像，其实也是在创造了一些神秘感，吸引用户看到其他内容。

4. 互动字体

更进一步地使用文本，一些设计师一直在寻找创造性的方法来让他们的文本随着用户的鼠标移动和播放。使文本具有交互性的一种简单方法是通过悬停状态产生变化。现在我们能通过使用无代码平台的服务，创建更精细的效果，比过去尝试手动编写这些交互更容易了。在字体上使用交互性时，重要的是要记住易读性，因为有些人会因移动字符而分心。

Dillinger 的网站（https://www.dillinger.tv/）使用的字体会在光标悬停在文本上时改变粗细。在黑色背景下缩小的文本使所选文本更加清晰，这是对可用性的一个很好的表达。夸张的光标大小也让网站感觉更加身临其境。

5. 线条

在某些方面感觉既现代又复古的趋势是线条。设计人员可以使用线条来描绘部分、标题、段落和产品画廊，或者为整个网页创建动态网格。添加线条插图（抽象或代表性）以进一步提升这种风格。对于这种类型的设计，线宽将对最终效果产生最大的影响。

‍Appart Agency 的网站（https://www.appart.agency/）使用超细线，让用户的鼠标可以与它互动。平面设计和橙色、黑色和灰褐色的选择让人想起 1960 年代的极简主义艺术运动。滚动上的水平线的运动也是一个很好的想法。

6. 页面速度优先级

在技术方面，页面速度已成为今年 Web 开发人员的首要考虑因素。谷歌 2021 年的算法更新使速度成为更重要的考虑因素。这也反映了用户对网站速度性能的更高期望，因为 53% 的用户会放弃加载时间超过 3 秒的页面。耐心等待加载屏幕的日子已经一去不复返了。

Google PageSpeed Insights 或 Lighthouse 是可用于评估页面速度优化的工具。限制你使用字体数量也对提升速度有所帮助。

7. 分屏网站

拆分设计的一种有趣方式是使用分屏布局。双重布局为你的设计提供对比度、视觉趣味和内容的自然分离。这也是玩颜色的好借口。

8. 超大尺寸字体

不寻常尺寸的排版是今年新鲜、大胆的设计趋势。在一定的大小下，文字变得更像是一个图形元素，而不仅仅是副本的一部分。这是一种方法，可以同样有效地用于极简主义或极简主义设计，并且可以适应许多不同的风格。

这个 Eva Habermann 的电影作品集网站（由 Daniel Spatzek 制作）将大文本叠加到一个移动的电影作品集卷轴上。文字部分遮挡了图像，让观众好奇地想看更多，两种颜色的无衬线字体提供了恰到好处的对比度，而不会难以辨认或难以辨认。

---

本文由WELLDESIGN独家原创，未经授权请勿转载