2020年网站首屏设计：最佳实践和案例

首屏在网站的设计中起着十分关键的作用，它确立了网站整体的基调。特别是时尚主义兴起的这个时代，各种花里胡哨的东西通常不被看好。所以有时没有其它东西可以打动眼球，网站首屏设计就显得更加重要。

考虑到成就性和制造力，网页设计师在设计网站的这一部分时付出了长期的尽力。因为消费者对品牌的了解就从此处开始。但据谷歌统计，消费者对一个网站的意见只需50毫秒才能产生，甚至有的只需17毫秒。

要知道怎样设计一个有效的网站首屏，以及它必须包含那些元素，请看下边的举例。

“生活是第一印象。你只有一次机会。让它记住你”―J.R.Rim

什么是网站首屏？

什么是网页的首屏（header）？过去，人们一般把LOGO，按钮，联系信息共同组成的一行窄窄的区域称作首屏。在现代设计中，主页的第一屏区域都可以觉得是首屏。

成为他们在加载网站时第1秒看到的图标部分，首屏就非常于邀请函。它需要提供一个网站的基本信息，以便客户无法在几秒钟内对网站有个初步知道。

一些设计师会为网站的各个个别制作单独的首屏。例如，你可以为主页制作一个大首屏，而在其它页面留下一个小条。但前提是，要维持一致。一个较好的网站设计实践是将内页的首屏设计为主页面首屏的缩写版本。

网站首屏包括哪些？

首屏的任务是为用户提问基本难题：代表哪个品牌，提供何种商品和服务，如何与公司人员获得联系，是否有任何当前的交易等等。

除此之外，它还代表了网站的质量或者身份。如果首屏唤起了良好的感情共鸣，观众认为它有价值，那时你的首屏才终于满足了基本的设计要求。

网站首屏的主要元素一般是：

●LOGO或品牌标识

●行动呼吁按钮

●文字或提要

●导航元素

●搜索符

但你不必一下子把他们都加上去。你必须在信息的丰富与其和谐的安排之间找到平衡。只使用必须的数据，无论所有的链接看上去如此重要，过度的首屏没有益处。

首屏留白太多也不是一个好方法。如果一个用户在几秒钟内能够弄明白您的界面，就很可能会依然放弃你。一个糟糕的首屏可以把访问者推到另外内容低劣的网站去。

在时尚首屏的设计中，只显示到网站主要部分和公司标识的链接。这种方式在设计登陆页面时非常有用。

最佳首屏设计实践

在设计首屏部分时，别限制你的成就力。网站的首屏是一个开放且带有广泛的造就性设计决策的领域，它需要值得纪念，简洁和有所区别。

让我们列举一下要点。

首屏的大小

网站首屏图像需要有很大，其实没有明确的答案。有些人进而提供一套具体的数字来完善它，但目前网站建设最困难的方面之一是推动每个屏幕大小的有效性。即使两个屏幕大小相近，分辨率也或许不同，因此用户不会发现同样的效果。

然而不要专注在准确的像素概念上，遵循简单的知识规则就好。

首屏的高度最好不要干扰对内容的认知。对于信息类资源，小首屏将是一个较好的选取，而针对类似登陆界面，首屏大一点更好。

在长期首屏的状况下，最好在折叠以下留下一些空间，这样用户就可以瞥一眼就明白页面的下一个内容并起初滚动。

视觉层次

尼尔森·诺曼集团(NielsenNormanGroup)在2006年首次在F-shapedpatternofreadingontheweb提出了人们的理论，这理论在现在依然受到推崇。

如果访客在一个陌生网站，他总是偏向于从屏幕的左上角起初扫视。如果它们在哪里找不到预期的信息，那么页面将自动被觉得是棘手且不标准的，他们会认为无法理解而离开。

●logo。另一个由NN/g进行的研究证实，与中心或两侧的位置相比，用户更易于记住这些logo放在前面的品牌。

但即使是一个圆形的标志，其实也可以把它放到屏幕的中心，尽管它的效果依然没有放在前面好。

●导航。一定注意不要令网站的导航部分更加杂乱。太多的链接会压倒访客。有时，对网站结构的整体调整或许是为最重要的类型腾出一些空间。

包括使访客容易知道它们在那里、如何找到更深层的内容，以及使用悬停效果来指导用户等。

●行动按钮(CTA)。视觉层次、结构必须遵守“CTA原则”。

固定导航栏

固定导航栏或一直粘在图标上面，无论你的页面是否滚动都能看到它。这即将变成一个网页设计标准。

在不违反整体设计概念的状况下，请固定导航栏。无论对桌面还是移动设计，这都是一个很高的想法：

由首屏传递的信息

在设计首屏之前，需要考量网站的整体风格以及主要目的。

如果它是一个以此展现产品的热卖网站，首屏的设计或许包括到主要区域的链接，结合高清主图，因为这种一个网站的主要目的是有效地展现产品。就电子商务或商业网站而言，情况或许有所不同。用户必须很容易地导航，了解最新的交易，如何迅速联系经理，以及在那里发现它们尚未下好的订单，因此在这些状况下，为了让位于其它类型，首屏可能更简单：

相关图像

首屏中的照片必须直接传达有关业务的信息。例如，如果它代表食品配送服务，那么图像可能会展现一个整洁的快递与简洁有吸引力的食物。一般来说，访客必须会在看过你的网站后想从你那边买东西。

视频或动画

不要把留意力集中在静态图像上。

添加视频是最有效的突出网站首屏的方法之一。如果可能，请尝试将主题视频材料添加到首屏中。许多网站使用它来引来网民，同时以尽可能好的方法展现她们的公司或产品。

另一种让你的设计更有打动力，更生动，更加印象深刻的方式是添加动画。它可以帮助你制作很酷的网站首屏。如果你正在寻求一个互动的网页来打动读者，动画是一个很高的选择。

精心设计的行动按钮

在设计网页首屏时，设计师在那里添加了一些动作元素的调用，如“注册”、“登录”、“联系”等。为了吸引用户的注意力，使其了解如何行动，按钮应该包括一个对客户来说可理解的甚至在其它内容中也很显眼的表述。

呼吁行动放置在一个带有战略意义的位置是一个完美的机会，能促使用户采取行动，从而减少您的转换率。

网站首屏的最佳字体

首先，客户需要能确立感知各版块名称及公司提供的信息：联系模式，有吸引力的优惠等…因此，您应该选用清晰、可读的字体，确保不会导致阅读困难，可以一眼就理解。

针对大型主页首屏，您可以使用一些粗体字体和充满想像力的元素来打动用户的切记力，否则，最好不要选择这些很难阅读的花哨字体。

简单的首屏设计

保持一个清晰和整洁的首屏，如果内容过多，访问者会认为你在用你的内容“绑架”他们。一个成就性的网站首屏也可以有一个特别简单的外观。

隐藏导航（汉堡菜单）

这是一种使用得愈发越多的网站设计解决方案。汉堡包菜单是三条黑色的小图标，点击时显示完整的菜单。当设计师必须专注于主屏幕时，它们就使用这些方式。

从网站可用性的视角来看，这是一个较好的选取。这样的菜单来自移动设计，用户早已很熟悉了。汉堡包菜单适用于促销网站，其中主要重点是使用图片或视频高品质地展现产品。对于在线商店，这个选项也许不太适合，因为针对消费者来说，有一个购物车、选定的产品和迅速访问的搜索字段是很重要的。

响应式的首屏设计

首屏除了应恰当显示在网站的桌面端，还应恰当显示在移动端上。因此，他需要是可响应式的，并无法较好地适配不同（型号）的移动设备。

移动设施的普及，使得桌面端的网页设计看上去也像是移动端的样式。例如，桌面端的主图和披萨包菜单的推动就起源于移动设计。

最后

首屏对于网站来说，就像一张另类的名片。因此，在设计网站时，要最大限度地加强首屏。

网站首屏设计的最终一个最佳实践：定期更改，以维持的网站和最新的设计时尚接轨。

学习工具，但不受限于某些工具。

译文地址：UI中国