随着现代网站对突出视觉细节和图形多样性的日益关注，使用主体图像的方法似乎从趋势转变为成熟的策略。在今天的文章中，我们将讨论什么是主角形象，为什么它在网页设计中很重要，以及如何让它为您的目标服务。当然，我们将在工作室团队的多个网页设计示例中展示所有这些。

使用主体插图的照片服务登陆页面设计

什么是网页中的主角？

在网页设计中，“主角”是一个术语，适用于通常出现在网页正下方的折叠上方区域的大图片。 网站标题. 这个简单的方案来自香脂 涵盖了基本思想。

从上面的线框图可以看出，一个主体图片通常会占据页面上几乎所有的预滚动全宽空间。其他布局元素（号召性用语按钮、文本等）位于标题中以及主体图像之上或周围，以呈现一致且平衡的视觉构图。

毫无疑问，该术语并不要求所有此类图像都应仅包含人类、动物、吉祥物或任何其他类型的角色。不要对“主角”部分刻板印象。它也可以是具有景观、设备、建筑物——任何东西，甚至是抽象模型或构图的主题图像。主要思想是图像立即吸引注意力，并允许与用户建立快速的视觉、情感和信息联系。

这个保姆服务的登陆页面应用了一个带有有趣角色的动画主体形象

为什么主角形象很重要？

为什么是主解？有几个点可以回答这个问题。

• 注意力和印象。首先，因为它激活了视觉感知从第一秒开始。没有什么秘密，没有太多时间给网站的首次访问者留下深刻印象或吸引对新优惠的关注。英雄形象提供了一个机会，尽快给用户留下深刻印象。
• 信息。大多数人比文字更快地感知和解码图像。这意味着英雄图像不仅是吸引人的元素——它也是页面的信息部分，提供关于内容的快速视觉信息。
• 导航。英雄形象的正确构图可以加强导航 并引起更多关注 号召性用语按钮.
• 情感诉求。毫无疑问，用户体验的情感背景起着重要作用，并使网站与其访问者之间的交流更加人性化。英雄图像是一种行之有效的通过图像传递所需情绪的方式，形状，和颜色，并从交互的第一秒开始设置所需的氛围。
• 审美满足。当然，网站的优惠和功能是重中之重。尽管如此，人们也希望让他们的眼睛感到高兴。美学在网络上的激烈竞争和作为积极用户体验一部分的日益增长的需求方面意义重大。英雄形象是立即激活美学的方法之一。

设计工作室的网站使用全屏主体图像来打动参观者并告知专业能力。

什么类型的图形用于主体图像？

这 图形类型 对于主角形象和他们传递的信息取决于这个特定网页的目标和 网站类型一般来说。可以是必须立即吸引用户的新闻、反映要约或信息的性质或好处的图像、最值得关注的新鲜出版物，等等。电子商务网站 经常使用主体图片来展示最畅销的产品、销售和特别优惠、战略服务或热卖。

至于图形的类型，主体图像可以包括以下内容。

相片

的基本好处 相片是他们将用户在网页上看到的内容与现实世界中的物理事物和活人联系起来。几十年来，照片一直是人类现实的一部分，早在互联网出现之前。这就是为什么我们觉得这种视觉效果直观、贴近和清晰。更重要的是，所有这些设备都可以让我们任何人在一秒钟内捕捉到一些东西，摄影真的是日常生活的一部分。因此，在网站上使用时，它会建立强烈的联想，并可能以目标受众的典型风格反映所需的氛围。

更何况，摄影也是一种艺术。照片可让您在 Web 用户界面中设置真实感和美感的平衡。您可以保持必要的风格来吸引目标受众并创造必要的情感背景。这是选择照片来支持博客和媒体网站上的文章的原因之一。

此外，照片是电子商务网站上商品视觉呈现的主要工具，其中“所见即所得”的原则是成功的重要组成部分。

时尚电商网站以照片为主角形象，吸引眼球并设置适当的视觉风格。

插图

一个大的 网页设计趋势 现在正在使用 自定义插图满足各种网站需求，包括英雄图片。各种风格的自定义图形，有效支持页面或屏幕上信息的快速感知。他们还为视觉原创性奠定了坚实的基础，并为登陆页面、博客和网站。

专为名人、娱乐、音乐和电影制作项目设计的设计师的作品集网站概念。深色背景与自定义英雄插图相结合，看起来更加生动，并与音乐会舞台的气氛建立了联系。

3D 图形

今年出现的另一种网络视觉效果是 3D图形，通过将 3D 线框模型转换为 2D 图像而创建的视觉效果。其中许多具有逼真的效果，这是它们在网页设计中的一大优势。当您需要的照片内容无法获得或价格昂贵时，3D 渲染可能会很好地发挥作用。尽管创建此类图像需要特定技能且成本高昂且耗时，但制作精良的 3D 图形极具吸引力、时尚且令人信服，因此它们可以对网页设计外观和转化率产生重大影响。这就是为什么现在它们在主角图像中也很受欢迎。

这是一家公司的网站，该公司使用太阳能来设计和建造可持续住宅，以获取所有所需的能源。房屋的 3D 渲染模型允许用户查看所提供服务的逼真图像，甚至可以操纵它以在白天和夜间模式下查看视图。

网页设计中使用英雄图片的实践

现在让我们讨论一些有效工作的主角图像的策略。

考虑使用清晰简洁的标语，并使其与图片配合使用

标语是一段简短而有力的文字，是一种口号，可以向读者传达快速而清晰的信息。它可能会告知产品的核心优势或解决的问题；它可能会促使读者采取行动或提出页面上其余文本中已回答的问题，等等。如果您使用主角形象，则其与标语的和谐组合可能是一个有效的想法：这样的形象用文字的力量支撑，用视觉让文字更有表现力。

另一个网页示例，其中英雄图像和复制内容呈现出坚实的构图，营造积极的氛围并告知用户健康博客提供的内容的主题。

玩字体

排版不仅仅是一种让用户阅读文本信息的方式。它也是设计的一部分，有自己的心情和目标。网页的英雄部分是搜索字体的一个很好的理由，这些字体也将在视觉上反映主角形象的风格和情绪——反之亦然，将与其形成鲜明对比，从而吸引注意力和兴趣。所以，花点时间寻找和谐字体，它们可以在一个作品中协同工作。但是，请注意以下问题可读性: 过多的实验会导致无法读取的副本和糟糕的用户体验。

安全应用程序的登录页面使用充满不规则曲线和细线的英雄插图和大胆的实心 Druk 字体的视觉对比。

让导航元素和主角形象一起工作

无论你的网页设计多么时尚和和谐，如果它不转换，它就没有价值。轻松转换的核心条件之一是制作一个号召性用语元素很快找到并清除。所以，追求美，不要忘记网页背后的主要目标，不要让主角形象战胜CTA。相反，让他们一起工作并互相支持。让主角形象和导航一起工作。

预订服务网站的这种设计使用了 3D 图形形式的突出主角形象。为了使布局的构成不仅美观而且有效，设计师使用相同的黄色阴影作为主图像的基本颜色和交互元素的强调色：徽标按钮和 CTA 按钮。 

 

视觉媒体工具的登陆页面使用 3D 图形作为英雄图像，分屏使几何构图更具表现力。CTA 按钮使用的颜色强调使其立即可见并与图像在视觉上统一。

添加动画

加强主角形象的另一种方法是添加 运动. 动画是一种有效的方法，可以为视觉效果添加更多情感和信息力量，增强讲故事并设置更多关联。同样，动画有助于增加设计的原创性。

创新能源服务的网站迅速吸引了注意力，并以漂亮的动画英雄形象告知用户其性质和价值。

唤起情绪

作为 亚伦沃尔特说，“当你开始你的下一个设计项目时，记住这个原则：如果你用积极的情绪奖励他们，人们就会原谅缺点，跟随你的领导，赞美你。” 当然，它并没有打破产品的功能性和简单性是用户体验的基础这一事实。然而，除此之外，用户还为可爱的外观和积极的氛围而努力。由于视觉效果是设置所需情绪的绝佳工具，设计师为主角图像设定的主要目标之一是唤起设计的情感吸引力。

茶会网站茶事页面的卡通英雄插画，迅速与主题建立视觉联系，传递茶道的伟大氛围。

增添艺术气息

随着网络上的竞争越来越激烈，设计师们正在寻找不同的技巧来赢得用户的注意力。现在流行的趋势之一是艺术性的，有时是实验性的数字插图，通常用于英雄图像。创造性的实验似乎将传统和创新结合起来，用于网页设计进化的新圈子。

在线建筑杂志普利兹克奖获得者和提名者画廊的网页展示了扎哈·哈迪德 (Zaha Hadid) 的艺术数字肖像。

总而言之，我们可以看到主角图像在网页设计师的技巧包中提供了一种多样化且灵活的工具。它在增强网页的可用性和美感方面具有巨大的潜力，通过这种方式吸引用户了解更多信息。

作者：Marina Yalanska