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

2022-02-18 点击量：

首屏在网站的设计中起着非常关键的作用，它奠定了网站整体的基调。 特别是极简主义盛行的这个时代，嘉瑞广告，各种花里胡哨的东西往往不被看好。所以有时没有其他东西可以吸引眼球，网站首屏设计就变得更加重要。

考虑到创造性和生产力，网页设计师在设计网站的这一部分时付出了大量的努力。因为消费者对品牌的认识就从这里开始。但据谷歌统计，消费者对一个网站的意见只需50毫秒就能形成，甚至有的只需17毫秒。

要了解如何设计一个有效的网站首屏，以及它应该包括哪些元素，请看下面的例子。

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

什么是网站首屏？

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

作为人们在加载网站时第一秒看到的界面部分，首屏就相当于邀请函。 它应该提供一个网站的基本信息，以便用户能够在几秒钟内对网站有个初步了解。

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

网站首屏包括什么？

首屏的任务是为用户回答基本问题：代表什么品牌，提供什么商品和服务，如何与公司员工取得联系，是否有任何当前的交易等等。

除此之外，它还代表了网站的质量甚至身份。 如果首屏唤起了良好的情感共鸣，观众觉得它有价值，那时你的首屏才已经满足了基本的设计要求。

网站首屏的主要元素通常是：

● LOGO或品牌标识

● 行动呼吁按钮

● 文字或提要

● 导航元素

● 搜索符

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

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

在极简首屏的设计中，只显示到网站主要部分和公司标志的链接。 这种方法在设计登陆页面时特别有用。

 最佳首屏设计实践

在设计首屏部分时，别限制你的创造力。 网站的首屏是一个开放且具有广泛的创造性设计决策的领域，它必须值得纪念，简洁和有所用处。

让我们列举一下要点。

首屏的大小

网站首屏图像应该有多大，其实没有明确的答案。 有些人试图提供一套准确的数字来规范它，但如今网站建设最困难的方面之一是确保每个屏幕大小的有效性。 即使两个屏幕大小相同，分辨率也可能不同，因此用户不会看到相同的效果。

所以不要专注在精确的像素概念上，遵循简单的常识规则就好。

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

在大量首屏的情况下，最好在折叠下面留下一些空间，这样用户就可以瞥一眼就知道页面的下一个内容并开始滚动。

视觉层次

尼尔森·诺曼集团(Nielsen Norman Group)在2006年首次在F-shaped pattern of reading on the web 提出了他们的理论，这理论在今天仍然得到推崇。

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

● logo。另一个由NN/g进行的研究表明，与中心或右侧的位置相比，用户更容易记住那些logo放在左边的品牌。

但如果是一个圆形的标志，其实也可以把它放在屏幕的中心，尽管它的效果仍然没有放在左边好。

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

比如使访客容易了解他们在哪里、如何找到更深层的内容，以及使用悬停效果来指导用户等。

● 行动按钮(CTA)。视觉层次、结构需要遵循“CTA原则”。

固定导航栏

固定导航栏或始终粘在界面上方，无论你的页面是否滚动都能看见它。这已经成为一个网页设计标准。

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

电子商务网站-购物车总是在用户面前。

服务网站-电话号码或CTA会持续显示。

固定首屏可以提升客户体验，保持用户导向，并给予他们更多的控制权。

由首屏传递的信息

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