为您的网站设计杀手级“第一屏”的 7 种方法

2023/12/29

是时候谈谈首屏设计了。第一个屏幕是用户进入您的网站的第一印象。无论用户是从台式机、平板电脑还是移动设备访问网站，它都是滚动上方的所有内容。

您在此“第一屏幕”上包含的信息是网站成功的关键。该设计可以吸引并保持用户点击，或迫使他们离开页面。用户开始滚动之前屏幕上需要显示什么？让我们来看看。

1. 创建一个独特的第一个屏幕

它从第一印象开始。您的网站应该创建一个具有影响力的网站。

利用视觉效果——照片、视频或插图——来立即吸引观众。图像应该是人们无法停止观看的东西。它应该完全属于您，与任何其他网站不同。

将该图像与一些关键词配对，告诉用户他们为什么在那里以及您的网站必须提供什么。（这是您销售点击网站带来的好处的最佳机会。）

这是将所有内容结合在一起的事情：第一个屏幕必须精确地适合第一个屏幕。内容需要根据设备进行响应式缩放，以便整个图像和所有关联的副本清晰可见，而无需滚动。

导航必须在侧边栏或屏幕顶部运行页面高度的日子已经一去不复返了。隐藏和弹出导航样式已经变得如此流行（部分归功于移动设备），以至于所有网站设计都可以接受。

但不要隐藏导航或使其难以使用。不管你喜欢与否，汉堡式导航菜单已经成为隐藏导航的最主要用途。用户已经学会了如何使用它，并且可以轻松地在页面上查找内容。

确保将堆叠图标放置在易于找到的位置 - 您可以使其比典型图标更大 - 并确保单击后导航功能齐全。上面的 Uve 在这方面做得很好，它有一个突出的汉堡菜单图标，可以扩展到全屏菜单选项列表。最重要的是，用户不必猜测如何使用它。

当您在单个画布（例如第一个屏幕）上工作时，创建单个焦点或消息非常重要。用户有意或无意地访问了您的网站，并且需要了解网站的全部内容。

单一的视觉概念可以帮助用户了解你是谁以及你是谁。这可以通过多种不同方式通过图像或文本来实现。

虽然复杂的风格也可以发挥作用，但首先要从简单的角度思考。极简主义既时尚又有效地帮助传达信息。

将第一个屏幕视为书籍封面，而不是小说的第一页。

它应该包含足够的副本来帮助用户参与。一个简单的标题和小的文案块通常足以做到这一点。虽然言语不多，但这可能是一个需要大量工作的过程。撰写简洁、清晰的文案可能具有挑战性。

将您的网站目标视为指导方针。用户为何来到这里？你想让他们做什么？使用文案建立联系并开始讲述您的故事。请记住向用户推销您网站的好处。

虽然网站提供独特的视觉体验，但它们也需要为用户留下来提供理由。您的第一个屏幕需要为用户提供一些事情可做。

这些行动可以包括：

您的第一个屏幕不仅应该包含其中一个操作，还应该完全清楚该操作是什么以及用户应该做什么。设计应该足够吸引他们，让他们觉得有必要这样做。

上面的《大空头》电影网站为用户提供了大量的活动。视频片段足以让你对电影产生兴趣，并且有一个观看预告片的按钮。对这个真实的故事感兴趣吗？有一个按钮可以与专家会面。您已经看过并想分享您的想法吗？有社交媒体按钮。从一开始就有很多方法可以与网站进行交互。

如果您不知道网站属于谁，那么它就不会发挥多大作用。第一个屏幕至少应包含徽标或与网站背后的品牌的连接。

品牌或公司名称创造合法性和可信度。它使该网站看起来更加“真实”。（这对于包含任何类型的金融或个人交易的网站尤其重要，以便用户知道谁在获取他们的信息。）

较大的品牌可以在第一个屏幕上使用较小的品牌，因为很可能很多人已经认识它们。（你知道谁不会认出象征麦当劳的金色拱门？）对于较小的品牌来说，清晰地展示徽标和风格对于创建用户可以关联和信任的身份非常重要。

不要让用户在第一个屏幕上查看或处理太多内容。它应该简单、精简且重点突出。

如果您有很多内容，请将其分布在多个屏幕上。（这可以促进参与并防止网站结构混乱或无序。）

梅兰妮·达维德（Melanie DaVeid）以简单的美学完成了出色的工作，让您对她的其他作品感兴趣。通过简单的动画、色彩和漂亮的字体，第一个屏幕为用户创造了独特的感觉、焦点和行动过程。

虽然卷轴重新流行起来，但我们设计它的方式也发生了变化。最好的网站设计使用响应式设计和滚动功能（例如视差）来为用户创建基于屏幕的体验。

第一个屏幕是最重要的。确保创建有趣、可读且独特的视觉效果，以吸引用户进入您的网站。