如何在2022年为网站设计一个英雄形象？

时间：2023-06-02 16:54:01 | 来源：网站运营

时间：2023-06-02 16:54:01 来源：网站运营

如何在2022年为网站设计一个英雄形象？：优哲研究发现，访问者只需 0.05 秒就可以决定对网站的留存。 为了保持访问者继续浏览网站，我们需要创建引人注目且高质量的主图（人们看到的第一张照片、图形或视频），帮助网站代表品牌标志的精髓和整体形象。 出色的英雄形象设计是获得良好第一印象的关键，它可以对用户产生巨大影响。 这是对你的网站进行好奇探索的起点。

根据维基百科的定义：英雄图片是一个大的横幅图片，显眼地放置在网页上，通常在前面和中间。

在网页设计中，英雄图片是人们在网站标题正下方的网页折叠上方区域中看到的第一张照片、图形、插图或视频。根据你创建的网站的目标，英雄形象可能会覆盖一个 CTA，鼓励访问者深入了解网站。它旨在展示你的品牌风格，分享网站的目的，并让人们兴奋地探索。







正如上面的线框所示，主图像通常占据页面上几乎所有的预滚动全宽空间。其他布局元素（CTA 按钮、文本等）放置在英雄图像上和周围，以呈现一致且平衡的视觉构图。

为什么英雄形象很重要？

网站的英雄形象及其周围的英雄内容通常是网站传达组织的 USP（独特卖点）和连接客户的第一个机会。

由于以下原因，英雄形象的良好设计非常重要。

给人留下很好的第一印象。英雄形象最重要的好处是它可以立即吸引访问者的注意力。我们已经知道，用户对网站形成意见只需要 50 毫秒。因此，英雄形象有机会尽快给用户留下深刻印象。作为网页设计师，你应该记住，你选择的英雄图片以及我们如何在你的页面上展示它会在很大程度上影响用户的情绪和行为。

清晰地告诉访问者你的网站主题。图像比文字更能说明问题，人们可以比文字更快地解码图像。使用信息丰富的英雄图像，你可以提供有关内容的快速视觉信息，从而更好地宣传你的品牌和产品。

用以提升用户体验。通过精心设计的英雄形象，可以激活网页的美感，这在网络上的激烈竞争和作为积极用户体验的一部分的需求上升方面意义重大。

以提高转化率。英雄形象的正确构图可以加强导航并让更多人关注号召性用语按钮。如果英雄形象完成了它的工作，那么访问者就可以成功地转化为客户。

如何设计一个英雄形象网站？

我们已经讨论了网页设计中英雄形象的定义和重要性，现在是时候讨论如何最好地在你的网站上使用英雄形象了。

使用高质量和相关的图像

英雄形象将在访问者的脑海中创造你网站的第一印象，因此你需要确保使用有助于建立访问者信任的高质量图片。但是，由于高分辨率图像可能会使加载时间更长，因此你需要针对网页对其进行优化，以确保访问者的质量和高效体验。

此外，英雄形象必须与你的品牌价值相关。花点时间问自己这些问题，以确认网站形象可以清楚地放大你的价值主张：你想触发什么情绪？你的图像如何连接到你的 USP / ESP？图像是否与网站内容相关联？

选择正确的设计工具

想打造高转化的英雄形象？选择正确的设计工具将更轻松、更快速地完成设计。使用像 Mockplus 这样的设计工具将为你提供大量的内置组件，有助于提高工作效率。也是一款简单易用的设计工具，只需简单的拖拽，即可拥有高保真英雄形象。不仅如此，它还可以在早期阶段预览和测试你的设计，帮助找出并解决可能出现的可用性问题。

为你的设计添加一些交互

英雄形象的交互是影响设计的另一个因素。通过使用相同的主图/插图可以帮助有效地传达品牌价值并使访问者感觉更加紧密，从而引起他们对网页的反应。因此，参与度会增加。如果你想改善你的英雄图像的交互，你可以使用一些基本的设计元素，比如视差滚动、图像滑块和鼠标悬停效果。

使用突出的 CTA

请记住，你的网站的真正目的是提高转化率，这意味着CTA 元素不能被忽略或隐藏在没人能看到的地方。如果用户不点击页面上的任何内容，你将浪费所有时间和金钱。 CTA 的智能放置可确保访问者的互动，从而带来大量转化。为了使 CTA 比平时更亮，可以使用对比度来突出显示它，而不会影响英雄图像的视觉吸引力。

设计时考虑真实性

我们都知道今天的受众被刺激、广告和噪音所淹没，但品牌真实性可以帮助你突破噪音并使网站脱颖而出。如果正确使用真实的信息和逼真的图像，你可以与观众产生更强烈的共鸣，并与他们建立更牢固的联系。也可以考虑在整体形象设计中加入渐变色，融入品牌美感，为参观者营造强烈的视觉记忆。

建立情感联系

如果你在情感层面上与访问者建立联系，则更有可能获得有效的转化。你应该有一个英雄形象，以吸引你想在访问者心中唤起的情感。从最近的一项研究中可以了解到，情感图像比情感文字更能影响人们。为了在观看者中引发情绪反应，你可以选择具有高度情绪化的图像。

使英雄形象与内容对齐

在设计网站时，你需要为访问者创造无缝体验，为了做到这一点，应该在设计语言和相关性方面遵循相同的设计原则。如果访问者看到一个英雄图像的设计方式有很多空白和最少的方法，但网页的其余部分聚集在一起并充满动画，那么他/她会对网站的内容感到困惑想交流。因此，为网站营造一种整体感觉并确保英雄形象有助于赞美和增强它是非常重要的。

测试和优化你的英雄形象

如果你想知道哪个英雄图片最适合网站，首先要做的是对英雄图片进行 A/B 测试。你需要进行 A/B 测试的最重要原因之一是它可以帮助优化网站的转化率并通过了解哪个图像产生更多点击或浏览量来赚取更多利润。获得测试结果后，你可以决定哪个图片最适合网站并尝试对其进行优化。

3个例子

1.艺术设计服务网站的照片英雄形象设计







这是英雄形象设计的另一个很好的例子。 艺术设计服务网站首页以颜色为主要工具，将英雄插图、文案内容和CTA按钮的视觉细节统一起来。

2.茶叶公司英雄标题插画设计







这个网站茶事活动页面右侧卡通英雄插画，快速与主题建立视觉联系，传递茶道盛况。

3.在线书店网站的英雄插画设计







这是销售儿童书籍的在线书店的网页。 英雄插图立即营造出适当的氛围，简单的标语有效地鼓励用户订阅。

小结

由于英雄图片对我们的品牌认知度、网站流量和转化率有重大影响，因此我们需要创建一个从第一眼就吸引人们的图片。只需遵循优哲制定的最佳实践，从英雄图像示例中汲取灵感，你就可以将访问者转化为客户。