现代网页设计的8个要素(及网页设计趋势)

每年，我们都能看到网站设计中涌现出新的元素和风格。

一些元素——如果经过深思熟虑——有助于讲述故事和解释你的公司。raybet电子竞技其他元素的作用是改善内容在特定设备上的外观。虽然没有必要将网站上出现的所有趋势都包括在内，但它们中的许多都有可能改善访问者的体验。

但是有这么多的选项可供选择，决定哪些是有挑战性的真的值得考虑。为了帮助你缩小你的关注范围，我们详细介绍了现代网站设计的8个重要元素，你可以包括这些元素来提高网站的性能。

8现代网站设计元素和趋势

1.独特的&大字体

大多数公司有一个特定的字体或排版，他们使用，以帮助他们的客户立即识别他们与他们的竞争对手。近年来，设计师们有了更多的字体可供选择，这使得品牌更容易通过排版更准确地表达自己。

例如,纽约人通过他们使用独特的字体即时识别，Adobe Caslon Pro。虽然更具独特的字体，例如Blokletters-Balpen，但已经开始使用初创公司和技术公司使用零。

为什么它有用?

排版在整个网站中使用一种设计趋势来引导读者到页面的不同部分。例如,纽约人网站引导访客从一个部分到另一个基于排版和字体大小。

在创建公司品牌时，你对字体的选择可以微raybet电子竞技妙地暗示出你是谁。你是认真的还是有趣的?功能或信息?无论您选择什么字体，请确保您的设计人员考虑了它在浏览器和计算机上的适用性。选择一种普通浏览器和电脑不支持的字体可能意味着你的网站在不同的设备上显示起来很尴尬。

2.大型和响应英雄图像

您不必远远超出流行的发布网站媒体以查看一个大英雄图像的示例：

大的图片如这个摒弃“上下折叠”的概念。通过专注于文字图像，而不是CTA或社交按钮，Medium创造了一个强大的视觉体验，鼓励你向下滚动阅读更多。

大型英雄图像也经常被放置在背景中，文本和其他内容覆盖在顶部，就像超级网站一样。无论您使用的方法如何，大图像都可以帮助在视觉上讲述您的故事，而无需依赖于文本。

为什么它有用?

你的客户来自世界各地，对你有很高的期望。你可能不确定他们是通过手机、平板电脑还是台式电脑找到你的网站。Medium上面使用的图像非常强大，但是如果它只能在桌面电脑上看到，很多人可能会错过它。

也就是说，确保您的图像响应性有助于提供良好的用户体验。网站访问者可以查看不同的图片——无论是背景图片还是产品图片——无论他们来自什么设备，都能够获得相同的体验。

3.背景视频

在后台自动播放的视频可以为页面添加很多内容。它们可以用来讲述一个故事，并显著减少解释业务所需的其他内容的数量。

让我们来巫婆例如，微软的网站。当你登陆到他们的主页时，一个大视频自动开始在背景中播放，点击播放按钮，你就能更深入地了解Wistia:

这个背景视频用作让访客订婚以点击主视频的辉煌方式。

为什么它有用?

背景视频的重点是从访问者进入你的页面的那一刻起就吸引他们。这个视频可以让你的访问者不需要阅读一行文字就能理解你公司的关键点。raybet电子竞技

另外，对视频进行处理快60000倍通过大脑和文本的对比。当人们常常不愿意阅读大量的文本时，视频看起来毫不费力，而且可以很快消耗掉。网络连接速度的提高和移动设备尺寸的增加也有助于提供更好的视频体验。

4.半扁平设计

2013年，苹果从根本上转向了平面设计。简单地说，平面设计是任何不包含或不给予三维感觉的元素，如阴影。扁平化设计不仅让用户更容易理解，而且在没有复杂或过度技术元素的网站上加载速度更快。

在Apple的脚步之下，许多其他组织 - 都是大而小的 - 已经转移到平坦的设计。但是，像优步一样，通过添加微妙的阴影和尺寸，我们将自己的旋转放在风格上。正如您在下面的图像中看到的那样，盒子有一个深度与它们周围阴影的元素，而不会过于过度：

当你滚动到优步主页上的任何一个方框时，阴影就会消失，后面的图像就会显现出来。

为什么它有用?

平面设计有助于访问者更快地了解您的内容，并添加一些深度元素可以将其带到生机。无论您是使用平面设计完全设计您的网站，还是利用阴影和其他元素，在您的网站上都很重要。确保您的网站上的主页，产品页面和任何其他关键部分都使用相同的设计提示，以便访问者可以立即了解他们的观看。

5.汉堡的菜单

你接触到的大多数网站都有一个长长的选项菜单供你选择。这样做的好处是，菜单可以直接把游客带到他们想去的地方。然而，缺点是它们通常会占用大量有价值的屏幕空间。

隐藏或汉堡包，菜单更改了这一点。在进行之前，此菜单在Web应用程序中是常见的网页设计-甚至在谷歌Chrome你可以找到一个汉堡菜单的右手边。

来源:用户体验运动

想知道为什么它被称为汉堡菜单？

如果你用你的想象力，这三条线堆叠在一起看起来就像汉堡肉饼。明白了吗?

为什么它有用?

你的网站页面应该有一个清晰的路径给用户走。删除一个繁忙的导航使体验更干净和分心。这种改进的体验有助于提高用户找到所需信息以完成所需操作的可能性。

6.巨型产品图片

您可能已经注意到，许多B2B网站开始在其网站上显示大型产品图片，以突出显示产品的不同功能或部分。这并非巧合。

为了让您更好地了解我们正在讨论的内容，让我们看一下HUBSPOT网站平台:

在这个页面的顶部有一个大的特色图片，当你向下滚动页面时，会有更多深入的产品图片。图像也是响应性的，目的是确保来自不同设备的观众有一个优化的体验，正如我们之前提到的。

为什么它有用?

较大的产品图像可以帮助设计师更有效地突出产品的不同特点。

这种方法通过提供机会来强化特征的好处，以突出最有价值的作品。例如，在第二个图像中，您将注意到图像上有数字对应于某些功能的益处。

这些大图片也易于扫描。它们通过图像而不是文字来传达，帮助访问者对不同产品功能的作用有一个牢固的理解。

7.名片设计

随着Pinterest的崛起，设计师和营销人员都令人着迷。单个卡有助于以视觉方式分发信息，因此游客可以轻松消耗咬合的内容而不被淹没。

英国人+有限公司首页是卡片设计的一个很好的例子:

通过将不同的内容分解为卡，用户可以选择并选择他们想要扩展的文章。这有助于让主页感到干净和组织，而不依赖于大量文本。

为什么它有用?

卡设计在B2B和B2C网站上变得越来越受欢迎，因为它有助于为用户提供易于消化的信息块。在您的网站上使用此设计可以帮助突出突出多个产品或并排解决方案。

记住，你的卡片应该具有响应性。这意味着随着屏幕尺寸的变小或变大，所显示的卡片的数量和大小也应该相应地调整。

8.短产品或功能视频

除了背景视频外，公司还开始使用短产品或功能视频来突出显示特定用例。这些短片很好地将你的解决方案带到生活中，同时不会让游客带来长期经验，他们必须坐下来。

一个很好的例子来自于invision.。他们展示了这种简短的插图，通过直接在主页上拖放设计来使用它们的产品是多么容易：

为什么它有用?

根据公司。杂志， 92%的B2B客户观看在线视频，43%的B2B客户在为他们的业务研究产品和服务时观看在线视频。因此，B2B公司需要制作视频来解释他们的产品，因为这对买家的决策过程有影响。

这些短片允许您的前景快速理解价值而不观察真正的深入体验。当然，两者都有价值，但较​​短的视频允许快速了解最适合漏斗顶部。

编者按:本文最初发表于2018年8月，现已全面更新。