转换的登陆页面视觉效果:你的完整指南
视觉是你的情感基础登陆页面．
它们有能力让你的访客离开时感到快乐、知情、有动力或放心。
最重要的是，他们有能力提高你的转换．
但是如何将视觉效果融入到登陆页面中呢?
不出所料，有很多使用视觉效果的方法——图像、视频甚至动图。
在这篇文章中，我将向你展示16种创造性的方法，在你的登陆页面中使用视觉元素。我还将向您展示如何充分利用每个视觉元素，以便您可以从您的页面挤出更好的转化率。
就让我们一探究竟吧:
第一章-作为图像
这就是你通常在登陆页面上使用视觉效果的方式——作为图像。
图片有两个好处，捕捉注意力和放大你的信息，同时也易于使用和快速加载。页面加载时间对于用户体验来说非常重要!
再加上图像是现成的，容易编辑而且制作成本几乎为零(与视频相比)，你就能明白为什么它们是登陆页面的支柱了。
那么你可以在登陆页面上使用什么样的图片呢?
这里有一些建议可以帮助你开始:
使用人物形象
关于在登陆页面上使用人物图片，有三件事你必须知道:
- 我们是天生就会注意到脸．人脸几乎总是我们在任何图像中首先看到的东西。
- 我们的眼睛自然会跟着别人看的东西走。这被称为"凝视跟随"或"共同关注．’
- 我们基于我们所看到的与他人产生共鸣尤其是以图像的形式。
这种行为使得人们的照片成为一种特别强大的工具，可以创造同理心，保持注意力，并将其导向我们登陆页面上的一个重要元素。
例如,眼球追踪研究有婴儿的登陆页面显示，当婴儿直视时，浏览者几乎会忽略页面上的文字。相反，孩子的脸吸引了所有的注意力。
当图像被移动到婴儿面对文本时，访问者首先看婴儿(即脸引起了他们的注意)。然后，他们跟随婴儿的眼睛看文本。
这是一个很好的例子，说明了我们倾向于注意面部并跟随他们的目光。
现在，让我们来看看在你的登陆页面上使用人物图片的一些具体方法:
1.帮助访问者认同你的产品
向访问者展示你的客户“和他们一样”可以弥合移情鸿沟。这意味着他们更容易认同你的产品并想象自己在使用它。
结果呢?更高的转化率。
实现此目的的一种方法是显示现有客户或客户的理想化版本(基于你的角色)。
例如，这个登陆页面来自Basecamp显示一个实际客户的报价和她的照片:
和这是Voya的一个例子，展示了代表理想目标客户的模型:
只要有可能，使用一个真实的客户而不是一个理想的目标客户——这样感觉更真实(至少对我来说是这样)。如果有疑问，可以使用分割测试来看看哪种方法最有效。
2.描绘一种你想让访问者感受到的情感
你如何证明使用你的产品会让人们感到快乐?
很简单:用一幅描绘你目标情绪的图片。
这是一种现代广告。你在汽车广告中看到快乐的人，因为汽车公司希望你对他们的汽车有这样的感觉。
这类似于电视信息购物广告中的“之前”镜头。他们都是不开心、沮丧的人，因为这是公司想要放大的情绪。
所以，在使用人物图片时，要尽量表现出你想让顾客感受到的情感。
在这个例子中Freshdesk，你看到一个微笑，快乐的孩子。这张照片足够独特，足以吸引我们的注意力(尤其是孩子的巨大眼镜)。而这种微笑与Freshdesk想要传达的“幸福”情感是一致的:
这里有一个更复杂的“快乐”图像类型的例子，由HomeAway：
你可以在图片中看到各种各样的行为，但人们都一致地快乐——这是HomeAway想让你感受到的情绪。
3.使用图片来吸引注意力
某些类型的图片会立即吸引我们的注意力，尤其是那些大胆、富有戏剧性或能引起欲望的图片。
这个例子来自Lyft使用女模特的形象:
为什么?因为研究表明，迷人的面孔能吸引我们的注意力．
重要的是要知道，这种方法也可能适得其反。如果CTA不够引人注目，访问者可能不会注意到它，而只会将注意力集中在模型上。
例如，在这个眼动跟踪研究在美国，观众几乎没有看产品本身:
如果你打算使用这种方法，请确保你的CTA和报价足够强大。
你也可以使用凝视跟随，让模型看着你的CTA。
4.使用公司创始人的照片
使用企业创始人的照片有两个作用:
- 这让品牌更“人性化”，更容易让人产生共鸣
- 它将品牌与个人联系在一起，因此将个人的个性转移到品牌上
“创始人形象”最著名的例子当然是肯德基。上校的形象随处可见。
在较小的范围内，你会看到博主和作者经常在他们的登录页面上使用他们自己的图片。
这是诺亚·卡根的OKDork：
使用产品的图片
在购买产品之前，你的客户自然想知道它的外观和工作原理。
这就是为什么产品图片在登陆页面上如此受欢迎的原因。他们展示产品(即使是数字产品)，帮助买家感受它是如何工作的。
让我们来看看在你的登陆页面上使用产品图片的一些方法:
1.展示正在使用的产品
这是在登陆页面上使用产品图片最常见的方式——展示产品的外观和使用方式。
你既可以使用产品的独立图像，也可以展示使用/佩戴它的人。如果你想让人们看到你的产品(比如包装或配件)，你应该选择最后一个选项。
例如,Warby帕克展示了使用其产品的模型:
在上面的例子中，产品没有足够独特的设计来保持自己。这就是为什么需要一个模型来帮助您可视化它。
如果你的产品是独一无二的，或者对某个问题有新的看法，你就会想要在你的登陆页面上向人们展示它是如何工作的。
例如,最初的Square登陆页面展示了这个产品是如何工作的，因为在那个时候，接受手机卡是一个相当革命性的想法。
2.展示产品本身
如果产品不需要模型，或者有一个你想展示的特殊设计，你可以有一个像这样的登录页面耐克：
以产品为中心的设计在这里很有效，因为它有助于展示产品的独特功能。
当然，我们不能不提到以产品为中心的登陆页面苹果：
在这两种情况下，登陆页面都突出了产品的设计和功能。这并不适用于一般的设计，但它适用于苹果和耐克等公司。
食品行业也遵循这一趋势，尽管它通常以产品的“理想化”版本为特色。这个麦当劳的登陆页面没有显示他们的汉堡到底是什么样子的;它展示了对汉堡的ps解释:
另一个例子是这张图片Zenfoods它展示了食物的增强版:
但如果你的产品在设计或价值主张方面没有什么特别之处呢?
在这种情况下，一个很好的选择是关注包装或在背景中展示产品。
例如，这个登陆页面来自绞车展示产品的完整包装。包装是该公司USP的一部分，而不是葡萄酒。这个登陆页面强调了这一点。
类似地,Trunk Club登陆页面展示的是“箱子”，而不是单独的衣服:
3.可视化一个数字产品
如果你销售的是数码产品，主要有三种使用图像的方式:
- 把它想象成一个实体产品，比如ps成实体书的电子书。
- 想象它的内容。这对于可以显示UI的软件产品尤其有效。
- 在上下文中将产品可视化，即显示产品在哪里以及如何使用。
例如,这个Unbounce的登陆页面显示电子书作为实体书:
这是电子书登陆页面的一个普遍趋势，因为它有助于可视化产品。这也有助于给人以更高价值的印象。
软件产品通常显示产品的界面，主要是在特定的设备上(笔记本电脑/iPad/手机)。
这里有一个例子Salesgenie：
另一种选择是展示一个人实际使用的产品。这将产品置于上下文中，并帮助客户更好地理解它。
这是一个例子：
使用抽象的意象
在这种情况下，“抽象”形象是指任何与产品没有明确关系的形象。
想想你看到的“英雄形象”Unsplash.com．这些图片之所以奏效，是因为它们看起来很美，吸引了人们的注意力。
这里有一些使用抽象意象的方法:
1.使用风景图片
风景图片或其他不相关的图片对你的产品没有任何帮助。它不会放大你想要创造的情感。
然而，它确实为你的文案创造了一个有趣的背景。它可能不会像一张微笑的模特照片那样吸引注意力，但它确实能在任何页面上创造出适当的“忙碌感”。
如果处理得当，它还可以与页面上的副本配对，帮助读者可视化它。
例如,Kapost的登陆页面显示一条路。这与页面上的拷贝是一致的——内容成功的“路径”。
2.使用抽象或简单的背景
一个抽象或简单的背景帮助你的文本脱颖而出，同时补充你的页面设计。因为这样的背景在文件大小方面很小，所以它们加载非常快。这对于移动访问者和那些连接速度较慢的人来说很有用。
这里有一个例子AwesomeTalk：
背景是纯色，这有助于将聚光灯放在副本上。
这是另一个例子Mitro：
第二章-作为视频
如果可以选择，很多人更喜欢看视频形式的博客文章，而不是阅读它。
原因如下:
视频降低了访问者理解你的信息所需要付出的努力。这能让他们更好地理解你的报价。
对于营销人员来说，视频的好处是显而易见的。他们帮助你更好地展示你的产品。它们还可以帮助你使用更好的讲故事技巧(如动画)来讲述故事。
但是，这也有不利的一面。视频有两个主要缺陷:
- 他们排除了网速较低的用户，尤其是移动用户。
- 他们排除了那些可能无法使用耳机/扬声器的用户。
尽管有这些缺陷，视频通常会提高登陆页面的转化率，有时甚至高达一项研究显示是80%．
最好是包含视频的替代选项，或者只在用户通过单击按钮请求时才显示视频。这将确保你不会失去任何访客。
虽然视频的制作成本通常更高，但技术已经取得了长足的进步。不花很多钱就能买到高质量视频的相机。然后，有很多工具可以让视频编辑变得简单(而且预算友好)。达芬奇解决就是一个很好的例子。
下面，我将向你展示一些在你的登陆页面上使用视频的方法:
1.展示实际的产品
这是在登陆页面上使用视频最常见的方式——展示产品的样子以及它是如何工作的。
你会特别想把它用在创新产品上。
这里有一个例子:
松弛使用视频让用户浏览产品。由于Slack在工作场所沟通方面的做法非常不同，所以这段参观视频让新用户了解了他们想知道的关于该产品的一切:
这是另一个例子iio展示其产品的工作原理:
但是，大多数用户都不想坐着看完一个10分钟的视频。向他们展示视频的长度，让他们放心。例如,Swagbucks，告诉用户它的视频正好是“43秒”。这是减少它们抵抗力的好方法。
2.使用视频作为你的登陆页面背景
在登陆页面设计中，使用视频作为页面背景是一个日益增长的趋势。
这为设计增加了更深层次的情感和视觉复杂性。但是它会减少页面加载时间，所以这是一个很好的练习使用内容传递网络或一个专门视频托管平台你的视频。对于较慢的连接，您还需要一个静态替代方案。
使用视频背景的一种方法是在背景中展示产品。例如,触摸小酒馆，显示其POS产品正在一家餐厅使用。这有助于客户了解产品是如何工作的。
另一种方法是使用不展示产品或用户但增加页面视觉复杂性的背景。
一个很好的例子是车间的着陆页。
他们使用抽象的背景，为页面增加戏剧性的天赋，同时将注意力集中在副本上:
3.使用视频作为销售工具
您可以在销售页面上找到这种方法的示例。通常情况下，它会涉及一个叙述者(看得见或看不见的)在视频的帮助下进行宣传。本质上，这是一个视频格式的长篇销售页面。
例如,茁壮成长的主题在大多数产品登陆页面上使用视频。这些视频有助于演示产品如何工作，并推销其核心价值主张。
另外，Thrive Themes提供了一套以转换为重点的WordPress工具。您可以使用它们来构建登陆页面、整个网站、可选择的表单等等。想了解更多吗?看看我的茁壮成长主题评论．
4.使用视频推荐
奖状表明产品或服务为他人提供了真正的价值，也可能为你带来类似的结果。他们是一个很好的社会证明形式．
视频证明优于文本和音频证明。虽然创建一个虚假的文字证明很容易，但视频很难伪造，这导致了更高的信任。
如果你打算使用视频感言，请确保你的演讲人触及以下几点:
- 他们面临的挑战(以及他们解决这些挑战的失败尝试)
- 他们如何发现你的产品/使用方便吗
- 你的产品如何帮助他们解决挑战
例如，蝎子网络营销展示了一个实际的客户讨论他们与该公司的工作经验。在低可信度的竞争领域(网络营销)，这个视频证明增加了他们的信息的真实性。
第三章-作为动图
动图并不是什么新鲜事。
它们诞生于20世纪80年代末，并迅速被互联网社区所接受。然而，它们作为一种营销策略的使用直到最近才开始受到关注(感谢Buzzfeed)。
这些小动画提供了图像和视频之间的“中间地带”。
它们制作成本低，而且通常比静态图像更吸引人。除了参与之外，这些小动画还能让你瞄准访问者的准确情感。
注意:我现在制作动图的工具是CloudApp．整个GIF创建过程非常快。他们有一个免费计划，可以让你制作最长15秒的动图。您还可以使用此工具进行截屏和截屏视频(在专业帐户上无限制截屏/视频)。
到目前为止，我发现的唯一问题是动图的文件大小，所以下面的一些以图像的形式显示。
下面是一些在你的登陆页面上使用动图的简单方法:
1.用动图展示产品及其核心优势
在某些情况下，您可以使用GIF来展示您的产品及其核心优势。
这通常是数字产品的情况。
例如,Instapaper的着陆页展示了该产品的核心功能——“在任何地方阅读”的能力——并配以动态GIF。
在这种情况下，GIF比视频效果更好，因为它更容易制作动画。而且，因为GIF只有有限的颜色，它的文件大小也更小(记住，页面加载时间很重要)。
2.展示实际的产品
通过这种方法，GIF工作起来就像一个自动播放的视频。你可以用动图来展示你的产品，而不是让人们点击“播放”视频。
因为GIF需要一个相对小的文件大小，你将不得不限制你展示的功能。考虑只展示最重要的功能，而不是完整的演示(视频效果最好)。
例如,视觉网站优化器使用GIF来展示它的“视觉”优化器是如何工作的:
3.为页面添加视觉乐趣
使用动图的另一种方法是为原本基本的页面增加视觉复杂性。GIF通常取代页面上的静态元素，使其在视觉上更有趣。
例如，这个登陆页面来自板凳上本可以只使用静态图片(他们根据用户的位置或设备向一些用户提供静态图片)，但GIF让页面更加有趣。
把它们放在一起
为了推动转化率，登陆页面必须具有视觉吸引力和动态。
在你的登陆页面中添加动图、图像和视频可以增加它的情感影响，突出你的副本或CTA，增加视觉复杂性。
使用上面的例子来启发你设计下一个登陆页面——你会创建什么?
进一步阅读:
