新的一年带来了新的和改进的网站设计方法。 2023 年将为我们带来有趣的网站趋势组合——解决更大规模场景和可访问性、用户体验和响应能力等问题的趋势。
在下面的帖子中，我们将了解 5 个最新的网页设计趋势以及 10 个来自BeTheme的预建网站，这些网站演示了如何执行它们。
BeTheme 是世界上最受欢迎和评价最高的 WordPress 主题之一，销售额超过 268,000，星级评分为 4.83/5。
2023 年 5 种新的网页设计趋势
为了创造更愉快的数字体验，网页设计师需要更广泛地思考是什么影响（正面和负面）这些体验。 2023 年的以下网页设计趋势将解决这些更大的问题：
1. 可悬停的图标
网页设计的主要优先事项之一是创建非常直观的界面，任何人都可以与之交互。然而，网页设计中使用的一些快捷方式——尤其是在图标设计方面——可能会给某些用户造成障碍并抑制可访问性。
一些图标具有无可争辩的解释。例如，网站标题中使用的图标变得如此普遍，以至于大多数（如果不是全部）用户都知道它们的目的是什么，以及当他们点击它们时会发生什么。
例如，在BeBiker 4网站上，左侧有三个图标：
- 购物袋/手推车
- 搜索
- 帐户
只要站点之间使用相同的图标，用户就不会怀疑如何使用网站标题的这一部分。
然而，当涉及到其他不太常用的图标时，您必须考虑用户的多样性以及他们如何以不同方式解释它们。为了提高用户在 2023 年与网站图标交互时的信心，网页设计师将在需要时开始在图标上包含悬停触发的帮助文本。
您可以在BeJeweler 2网站上看到这种趋势的示例：
除了在用户将鼠标悬停在产品图标上时显示帮助文本外，当用户将鼠标悬停在变体样本上时，该文本也会出现。这没有留下任何解释的余地，并将确保每个用户都能自信地与未来的网站内容互动。
2.更多的社会证明
信任是建立关系的重要因素——无论是个人关系还是品牌与客户的专业关系。
由于网站通常是消费者与品牌之间的第一个接触点，因此需要从这里开始建立信任。到 2023 年，网页设计师将利用社会证明和信任标记来做到这一点。
有多种方法可以在网站上使用这些信任构建器。最常见的方法之一是在网站上包括一个页面和主页上的一个部分，专门用于真实的客户推荐和/或评论，就像BeDoctor网站所做的那样：
这个特定的例子展示了三种不同类型的内容，可以帮助建立网站访问者的信任：
- 总体客户满意度
- 客户评价
- 平均客户评级——可以链接到评级平台，如谷歌或 Yelp
对于某些企业而言，在游戏中产生大量社会证明可能还为时过早，因此您没有任何东西可以在网站上炫耀。如果是这样的话，信任标记是可行的方法。
信任标记可以以安全封条之类的形式出现——比如放置在“结帐”按钮旁边的图标，这样您就可以向访问者保证他们的交易是安全的。另一种提高可信度和信任度的方法是为网站声明添加上下文，如BeMarketing 2所示：
标题声明旁边的星号在下方展开。您可以使用此空间提供免责声明或添加指向提供声明证明的页面的链接。
3. 手机特有的功能
随着时间的流逝，响应式设计变得越来越容易，因为一般规则众所周知且易于遵循。此外，绝大多数 WordPress 主题都是响应式构建的，这为设计师减少了很多猜测。
然而，这导致了移动网页设计的一些停滞。虽然响应式网站提供了良好的用户体验，但并没有真正鼓励网页设计师想出创造性的解决方案来使它们变得更好。
到 2023 年，随着人们越来越关注移动体验，这种情况将会改变。具体而言，设计人员如何构建功能来解决特定于移动设备的摩擦和障碍。
我们将看到这种情况的一种方式是在导航设计中。以BeLanguage 4 预建网站为例：
来自常规非移动网站的页面链接都存在。但是，“致电我们”按钮出现在移动设备链接列表的顶部。在桌面上，它出现在最后。
当设计师评估他们拥有的关于用户习惯和他们使用的不同设备的目标的数据时，我们会看到导航等主要组件的设计方式存在细微差异。
到 2023 年，越来越多的网站也将采用类似移动应用程序的功能。 BeFurnitureStore做到了这一点。包含帐户、购物车和收藏链接的顶部栏现在显示为粘性底部栏，而不是保留桌面站点的多级标题设计：
改变和革新移动网络体验的网页设计师将能够在未来几年将他们的网站定位为卓越的产品。
4.形状纹理化
许多年前，拟物化将各种真实世界的纹理带到了我们的电脑和手机屏幕上。然而，那些带纹理的背景很快就被视为无关紧要且令人分心，因此设计趋势被搁置一旁。
仅仅因为一种网页设计趋势失宠并不能使数字纹理化的想法变得糟糕。
2023 年，网页设计师将尝试使用有机形状在他们的设计中添加小的、更重要的是战略性的纹理。您可以在BeRenovate 5网站上找到这样的示例：
圆形和线条出现在整个网站页面的背景中。它们使用户界面在视觉上很有趣，而不会压倒设计。
数字纹理化也可以是战略性的。 BeCoaching 3是一个很好的例子，说明如何将用户的注意力吸引到页面的某些区域：
在整个单页网站中使用了两种形状。这种纹理化的一致性将使访问者的眼睛更容易引导到您希望他们去的地方。
这些形状通常看起来更靠近页面的右边距。由于用户的眼睛通常会被左边距吸引，因此这些形状应该会增加用户看到和与之交互的内容量。
5.补充视频
当涉及到如何在线获取内容时，用户有不同的偏好。例如，博客非常适合那些想花时间阅读一些东西的人。另一方面，视频帖子或视频博客非常适合那些想要一起观看或收听的人。
也就是说，您无法为您放置在网页上的每一段内容提供视听替代品。对于初学者来说，当您尝试提供个性化的内容消费体验时，设计很容易失控。更重要的是，视频往往是大文件，当您添加更多视频时，它们很容易降低加载速度。
设计师将在 2023 年做的是仅在重要时添加替代视频或补充视频。
例如， BeBusiness 6网站主页的中间部分是一个全角视频部分。不容错过：
该视频部分可用于多种目的。炫耀视频推荐。总结之前的所有内容。为产品的技术特性提供易于理解的解释。等等。
补充视频也不需要占用太多空间才能有效。例如， BePregnancy英雄部分在视频所在的位置有一个小切口：
可立即识别的“播放”按钮让访问者知道那里有东西可以看（如果那是他们想看的）。同样，此内容可用于多种用途。
作为奖励，设计师可以通过有节制地、有策略地使用视频来帮助提高页面加载速度，同时远离自动播放视频背景和部分。
您如何看待这些网站设计趋势？
通常，网页设计趋势列表涵盖将在网站上发生的表面变化——有趣的色彩趋势、实验性排版使用、动画和特效等。然而，在 2023 年，网页设计师将花更多时间关注可以改进的趋势整个网络并导致更有意义的用户参与。
可访问性、响应能力、建立信任——这些都不是简单的事情。也就是说，当您使用BeTheme时 构建网站，他们会感觉很简单，因为它们已经在 WordPress 主题中包含的 650 多个预建网站中的许多网站中得到了考虑。
原文： https://tympanus.net/codrops/2022/12/06/5-upcoming-web-design-trends-for-2023/