Tired of
lengthy page building?
Try GemPages to create pages faster and smarter with AI-powered feature.
Back to Blog List
2024 年最值得参考的 10 多个最佳首屏示例
Updated:
13
minutes read
如果您的网站是一项数字资产，那么首屏部分就是该资产最有价值的部分之一。
这是网站访问者登陆您的网站时看到的第一件事。因此，它具有重要意义，尤其是在电子商务企业中。
但问题是——在创建首屏部分及其内容时应该考虑什么？
在这篇博文中，我们将带您了解一些最佳的首屏网站示例，并分享您在创建首屏内容和设计时可以实施的技巧和最佳实践。
网站中的“首屏”是什么意思？
“首屏”是网页的顶部部分，当您进入该部分时（在向下滚动页面之前）会立即出现。
电子商务商店主页的典型首屏部分可能包含品牌标识、公告栏、标题菜单、英雄图像或视频、标题和副标题副本、促销优惠、搜索栏、CTA（号召性用语）按钮等元素。
13 个最佳首屏网站示例
现在，让我们来看看在审查了超过一百个网站/ Shopify 商店之后，从电子商务领域收集到的最佳首屏或英雄横幅广告的示例。
1. 休埃尔
Huel是一个营养食品品牌，其产品由豌豆、大米、燕麦、椰子等植物性和可持续成分制成。
Huel 首屏部分的关键要点：
- 充分利用 CTA 按钮：
该品牌提供了两个不同的 CTA 按钮—— “购买 Huel”和“什么是 Huel？” ——以帮助两类不同类型的客户：1. 已经了解该品牌的客户和 2. 可能不了解该品牌或其产品的新客户。
- 展示社会认同：
该品牌强调了其曾出现在众多热门媒体平台上，例如《女性健康》、《男性健康》、CNN、Shape、Vox、《时代》、福克斯和《连线》。这有助于提升该品牌的可信度。
- 提及第三方客户评论：
该品牌做的另一件很棒的事情是他们展示了其 Trustpilot 评级（16,454 条评论中的 TrustScore 4.3）。这向客户表明，成千上万的客户已经使用过该品牌的产品。
2. Allbirds
Allbirds是 Shopify 最受欢迎的品牌之一，提供各种舒适的鞋子和服装产品。
Allbirds 首屏展示部分的关键要点：
- 简短但精彩的文案：
- Allbirds 的标题只有两句简短的句子，但仍然表达出了其产品如何有益的观点。
- 继续滚动的预告片：
- 在英雄形象部分的正下方，有标题“我们的最爱” ，让我们向下滚动即可查看这些产品。
- 侧边栏菜单的使用：
- 它以侧边栏菜单的形式提供精选集，让客户更轻松地进行导航。
3.Amazfit 智能手表
Amazfit是一个智能可穿戴设备品牌，提供智能手表、智能手环和配件。
Amazfit 首屏部分的要点：
- 引人注目的公告栏：
当登陆 Amazfit 网站时，其公告栏吸引了人们的注意，其中品牌提到了一些重要信息，例如免费送货、12 个月保修和 30 天退货政策。所有这些细节都可以帮助客户毫不犹豫地购买产品。
- 幻灯片的绝佳用法：
幻灯片重点介绍了该品牌提供的一些最佳产品。每张幻灯片都有“了解更多”按钮，客户可以点击图片上的任意位置，然后系统会将他们重定向到相应的产品页面。
- 使用令人惊叹的产品图像和功能：
Amazfit 的首屏部分展示了一些令人印象深刻的产品图片及其主要功能，可以让所有买家快速做出购买决定。
专业提示：
设计首屏部分时，请考虑所有不同类型的设备，尤其是移动设备。如果您使用GemPages设计网站，则可以轻松地在编辑器中切换不同类型的设备，并创建针对移动设备优化且响应迅速的首屏设计。
4.凯莉化妆品
Kylie Cosmetics是著名明星凯莉詹娜 (Kylie Jenner) 经营的化妆品品牌，是首屏设计精美的绝佳范例。
Allbirds 首屏展示部分的关键要点：
- 使用激动人心的优惠：
顾客喜欢获得免费赠品，Kylie Cosmetics 对此非常了解。该公司在其英雄版块中突出显示了“免费赠品”的诱人优惠。这使其成为引人注目的首屏版块。
- 漂亮简洁的设计：
Kylie Cosmetics 首屏部分的整体设计看起来很美观，颜色柔和，字体漂亮。
5. Cupshe
Cupshe是一个时尚品牌，为各种体型的女性提供价格实惠的时尚沙滩装、泳装、连身裤和连衣裙。
Cupshe 首屏部分的要点：
- 促销优惠展示：
在菜单部分的正下方，Cupshe 通过三个区块突出显示促销优惠 - “更快捷免费”、“全场 10% 折扣”和“额外 15% 折扣”。
- 使用两种不同的 CTA：
在黑色星期五前夕和订阅折扣优惠下，有两个不同的 CTA——“购买所有服装”和“购买清仓商品”。通过使用这些特定的 CTA，您可以让客户轻松探索任何特定的促销优惠。
- 公告栏：
除了英雄形象部分，Cupshe 还使用公告栏来宣传其不同的折扣优惠和免费购物优惠（针对一定的订单价值）。
6.防弹
Bulletproof是一个受欢迎的品牌，最初销售咖啡，现在提供各种其他产品，包括蛋白质棒和其他补充剂。
Bulletproof 首屏部分的要点如下：
- 美观的设计：
由于出色的配色方案和对色彩对比的适当使用，Bulletproof 主页的整体外观和感觉看起来非常优雅。
- 使用折扣优惠小部件：
20% 折扣优惠通过专用小部件进行推广。客户可以点击该小部件并解锁优惠。此小部件的另一个优点是它是一个粘性小部件。因此，即使您向下滚动，它也会显示在屏幕上。
- 吸引顾客探索更多：
英雄形象后的标题——“发现防弹功能性营养带来的更好感觉”——也是吸引访客在网站上进行更多探索的好方法。
7. Peak设计
Peak Design提供广泛的产品，包括日常包、包配件、手机壳和配件、摄影器材和三脚架。
Peak Design 首屏部分的关键要点：
- 展示不同的系列：
Peak Design 巧妙地利用了英雄形象部分，突出了三个不同的系列，每个系列都有单独的 CTA 按钮。这也可以帮助客户快速探索他们感兴趣的内容。
- 提高对原因的认识：
Peak Design 将其销售额的一小部分捐赠给非营利组织，并通过网站顶部的公告栏让客户了解这一情况，公告栏上写着“每笔销售额的 1% 都捐给了环境非营利组织”。
- 关于选项卡的使用：
Peak Design 首屏部分的另一个有趣之处是网站右上角的“关于”选项卡。展开该选项卡时，它会提供指向所有公司资源的链接。
8.威廉·佩恩特
William Painter为“冒险生活方式”提供采用优质耐用材料制成的太阳镜。
威廉·佩恩特 (William Painter) 首屏部分的主要内容如下：
- 在英雄部分使用视频：
英雄部分的视频展示了该产品（太阳镜）的优点以及如何将其用于各种类型的冒险。
- 辅助功能调整小部件：
我们在该品牌的首屏部分观察到的一个独特之处是用于调整可访问性的小部件。它提供了不同的设置，可根据个人需求调整网站的可访问性。
- 免费送货优惠：
该品牌对美国境内所有超过 100 美元的订单提供免费送货服务，并在公告栏中重点强调了此优惠。
了解更多： 如何在 Shopify 上享受免费送货？（+Evergreen Tips）
9. 炸弹
Bombas是一个袜子和服装品牌，其伟大使命是帮助有需要的人。该品牌为男士和女士打造舒适的袜子。
Bombas 首屏部分的要点：
- 特色藏品展示：
Bombas 的设计非常独特，主要系列就显示在菜单栏下方。这样可以帮助顾客轻松找到他们想要的东西。
- 彰显崇高事业：
在首屏部分，品牌通常会使用文案来宣传其产品优势或折扣优惠；但 Bombas 却有所不同。它提到了其“一次购买 = 一次捐赠”的倡议，并且该品牌已经完成了 1 亿次捐赠。
10. 人造景观
Manscaped是一个针对男性的生活方式消费品牌，提供胡须修饰套装、毛发修剪器、身体护理套装、除臭剂等基本美容产品，以及 T 恤和平角裤等服装。
Manscaped 首屏部分的关键要点：
- 精彩的产品展示：
Manscaped 将其产品放在了英雄形象部分的聚光灯下。凭借出色的色彩对比，其首屏部分的整体视觉吸引力看起来相当惊人。
- 使用可扩展公告栏：
有时，你可能要在公告栏中分享太多内容，但空间太小。Manscaped 创建了一个公告栏，可以展开以查看更多详细信息。在此部分，该品牌宣传其优惠，如免费赠品、免费送货、高峰卫生计划等。
11.无花果
Figs是一家医疗制服和服装品牌，提供舒适时尚的手术服、外套、家居服、分层必需品等。
Manscaped 首屏部分的关键要点：
- “按颜色购物”菜单：
标题菜单是首屏部分的关键元素之一。它可以帮助访问者轻松浏览网站，找到不同的收藏。然而，Figs 将其提升到了一个新的水平。
它允许访客按颜色浏览产品。许多客户对颜色的选择非常挑剔，而这个部分对他们来说可能非常有帮助。
- 生活方式图片的使用：
Figs 通过展示不同模特的生活方式图片来展示其不同产品在人们身上的效果。这使得网站的整体外观和感觉既美观又真实。
12.手工染鞋公司
顾名思义， Hand Dyed Shoe Co.提供定制手工鞋。该品牌使用 GemPages 来设计其商店。
首屏部分的要点：
- 使用高质量的产品视频：
Hand Dyed Shoe Co. 通过一段高质量视频展示了其成品的高端和优雅。我们必须说，这段视频是首屏部分的一大亮点。
- 品牌理念：
该品牌没有使用文案来解释产品及其功能/优点，而是专注于品牌理念。您可以看到创始人的名言： “重要的不是你穿着独特的鞋子做什么，而是你做这件事时的感受” 。
- 个性化的 CTA 按钮：
有两种不同的 CTA—— “立即设计您的”和“预约试穿” ——这让客户可以根据自己的需求轻松选择特定的 CTA。
13. Brooklinen
Brooklinen成立的宗旨是以实惠的价格提供高品质的家居必需品。该品牌销售的产品包括床单、毛巾、毯子、家居香水、墙面艺术品等。
Brooklinen 首屏内容部分的关键要点：
- 积分奖励推广：
Brooklinen 向其客户提供一项有趣的优惠，即让他们有机会在每次购买礼品指南时赚取四倍的积分。
- 推广电子邮件简讯的创新方法：
在标题部分，它有一个消息图标，吸引我们点击它。点击该图标后，会出现一个弹出窗口，提供注册新闻通讯的 15% 折扣。这是一种吸引电子邮件订阅者的创意方式。
想让您的商店变成摇钱树吗？
使用 GemPages 页面构建器，您可以创建引人注目的商店页面，让访客惊叹并将他们转化为买家。
为什么首屏内容很重要？
-
品牌印象：
第一印象至关重要，这也适用于网页设计。访客进入你的网站时首先注意到的是首屏部分。
这就是为什么利用首屏内容给人留下良好的第一印象如此重要。
专业提示：
使用GemPages创建整个网页，而不仅仅是字段上方的部分。您可以创建不同的页面，例如“关于”页面、“联系”页面和“博客”页面，其设计和风格与您的主页相似。
-
搜索引擎优化 (SEO):
您可能想知道首屏内容如何影响 SEO！
虽然这绝对不是 SEO 的直接因素，但考虑它仍然很重要。如果首屏内容很差，访问者可能会立即退出您的网站。这会增加跳出率，最终可能会影响您网站的 SEO。
优质的首屏内容可以让用户留在您的网站并探索更多内容。因此，它不仅可以降低跳出率，还有助于提高您的排名。
-
转化优化：
您网站的首屏内容在影响网站访问者方面起着至关重要的作用。它确实可以建立或破坏客户对您品牌的看法。
引人注目的首屏文案和 CTA 可以吸引访客转化为买家。一些品牌还利用此部分来突出和推广他们的最佳优惠。
首屏优化的最佳实践
使用页面构建器应用程序
设计是首屏部分最重要的方面之一。如果您正在使用 Shopify 并想知道如何完善您的网站设计， GemPages可以帮助您做到这一点。
GemPages 让您使用直观的拖放编辑器设计您的网站，并且您可以根据需要自定义设计。
GemPages 是 Shopify 应用商店中最受欢迎的页面构建器应用之一。更令人兴奋的是，GemPages 还具有 AI 驱动的图像到布局功能，可使设计过程更智能、更快捷。
保持标题部分的正确大小
我们发现很多商店都会犯的一个常见错误是，标题部分太长。结果，主标题部分的空间太小，无法按需要给人留下深刻印象。
尽量使标题部分的高度合理地短一些。此外，我们建议使用矩形徽标而不是方形徽标。方形徽标占用太多空间。
您的目标网页可能看起来像这样
免费试用 GemPages，为任何营销活动创建高转化率的登录页面。无需编码。
使用代表您品牌的标语
标题或标语的使用方式多种多样。许多品牌使用它来突出其业务的关键优势或 USP（独特卖点）。
有些品牌喜欢用标题文案来阐述品牌的使命。这能在您的品牌和客户之间建立起牢固的联系。
总而言之，请确保使用与您的品牌宗旨相符且让您在竞争中脱颖而出的标语。
文案要简洁
将您的首屏文案视为您品牌的快速介绍。它不必太长。理想情况下，您可以只写一行不超过 5-7 个字的标题文案。
然后，对于副标题，只需几行文字来简要扩展主标题。发挥创意，但要直奔主题。
使用个性化的 CTA
个性化 CTA 的转化率比基本 CTA 高 202% 。
通常，大多数在线商店都有一个常用的 CTA 按钮 — “立即购买” 。但是，您可以根据您的产品和客户更具体并创建更个性化的 CTA。
调整对比度
我们在许多网站中发现的另一个常见错误是背景太杂乱，难以阅读文字。它可以完全消除您的文案可能带来的积极影响。
因此，请通过调整背景图像或视频与文本的对比度来确保文本清晰可见。如果背景太杂乱，请使用图像叠加。
想让您的商店变成摇钱树吗？
使用 GemPages 页面构建器，您可以创建引人注目的商店页面，让访客惊叹并将他们转化为买家。
关于首屏的最终想法
首屏内容是营造良好第一印象的绝佳机会。不要错过这个机会。创建独特且引人注目的设计，向客户展示他们应该从您的品牌购买产品的原因。
此外，您必须定期更新和更改首屏内容。这就是为什么使用GemPages等页面构建器应用程序可以让您的工作更轻松、更快捷。
最后，无论何时创建或更改了首屏部分的设计，请务必在不同的设备上进行检查，以确保所有内容在所有类型的设备上看起来都完美无缺。
关于 Above the Fold 的常见问题解答
What is considered above the fold on a website?
“Above the fold” is the content that you see on a website before scrolling down. Elements like an announcement bar, header menu, hero image or video, heading and subheading copy, and CTA button are different elements of an above-the-fold section on a website.
Does the above-the-fold matter for SEO?
The short answer is, yes, it does matter for SEO. However, it’s not like a direct ranking factor. If your website has great above-the-fold content, it may help prevent the website visitors from immediately exiting the website, and thus, it could help SEO by reducing the bounce rate.
What is the difference between “above the fold” and the hero section?
The hero section is one of the sections within the above-the-fold content elements. “Above the fold” is a broader term and covers all sections that you see at the top of the website before scrolling down.
How do you optimize above the fold?
To optimize your website’s above-the-fold section, you need to ensure that it fits perfectly well on smaller as well as bigger screens. Create a mobile-friendly design. Make sure it has a great copy, color scheme, image/video, and CTA button(s).
Why should CTA be above the fold?
The web pages on your website may have different sections from top to bottom, but many visitors may not even pay attention to all those sections. However, all visitors see the above-the-fold section by default when they land on the page. So, it gets more eyeballs, and thus, more chances of conversion. That’s why CTA should be above the fold.
