为什么你的封面图设计方式，可能一直都是错的！

编者按：封面图和着陆页绝对是设计师的必修课，它决定了产品和服务的第一印象，是兼顾呈现和转化功能的重要设计物料，堪称是设计的「桥头堡」。这篇文章出自资深 UX 设计师 Michal Malewicz ，他重新审视了如今很多封面图和首屏、着陆页的设计，并且提出了他所认为的更为合理的解决方案。

着陆页的主要目的是将浏览内容的用户转化为你的客户。简而言之：一切都是为了销售转化！

今天，我将用这篇文章来挑战你们对网页设计和封面图设计的的「普遍共识」。

这是基于超过 500 小时的 HotJar 浏览时长数据，以及我们在 Squareblack 为几乎所有产品类别创建的网站案例。

除此之外，我还分析了 X 平台上创作者提供的 400 多个网站 — 其中一些非常受欢迎。当然，有些也相当不错。

来自网络社区的网站设计示例

我收集了 1000 多个这样的设计，对它们进行了分组，并且已经分析了 400 多个。

我在这篇文章当中不会过度科学数据化，我希望你了解并重新思考你对网站的看法，然后找到自己的方式让网站变得更好。不过所有的工作都有一个起点。

一切都始于封面图

封面图是你的客户首先看到的东西。第一印象很重要。

好的第一印象应该已经说服客户 90% 了。一个好的封面图会帮用户消除剩下 10 % 的疑虑。

这是高转换率着陆页的基础套路，收藏好

最终的目标

与一些流行观点相反，在我的观察当中，封面图的最终目标并非为了激发好奇心或营造神秘感。你不应该含糊其辞，也不应该装腔作势，指望用户向下滚动浏览查看解释。

大家都很忙，你的潜在客户更是如此。如果你没有使用封面图展示他们想要的东西，他们大概率会关闭页面看点别的。

结果就是，卖不出去。

封面图的 8 秒规则：如果在前 8 秒内你的用户无法确定这是否是他们要的，他们就会离开。

现代封面图设计的逻辑

这个月我分析了 500 多个现代网页设计，大部分都是由 X 平台上的设计师自己做的。其中很多都相当不错，但也有一些完全的反面案例，却被当作好的设计受到追捧。

这样一来，就有问题了。

1、设计师从 AI 生成的图像开始。它要么是一些风景，要么是抽象形状。他们通常还会在顶部添加一个玻璃质感菜单，但为了清晰起见，我们先跳过这些设计的步骤。

现代网页设计流行的背景元素

2、第二步是添加标题、副标题/细节描述和 CTA 按钮。首先我们来看看样式。在本文中我特意使用了一种流行的字体，因为大多数时候这些标题都是这样的。

如果你在网站上看到这些抽象的内容 - 赶紧跑！

3、最重要的是找到合适的、听起来很巧妙的标题文本，这样用户才能立刻被惊艳到。不仅背景中的图像很漂亮，而且看看那些天衣无缝、变化多端的文字组合！

网站中大量使用的无意义词语列表

我可以马上告诉你，如果你看到一个标题包含两个这样的词，那么它是人工撰写的概率就会降为 0。这是一种看似复杂却又令人费解的文字游戏，实际上它也只会让用户感到困惑。

文字与视觉的匹配

这这设计方式当中，文字是事后才考虑的，并且需要迁就图片内容。文字的大小、位置和换行方式必须基于图像构图。

这就是我们最终看到视觉好看但是信息无意义的封面图的原因。

我在 X 上设计了一张图来讽刺这一点——有些人仍然称赞「它看起来真好看」

开始测试

如果你打算聘请一位作品集里有这类东西的设计师，那么与你之前的「不太复杂的设计」相比，你的销售转化率实际上可能还会下降。

现在我们知道什么是坏事，那么我们如何才能使它变好呢？

从版面框架开始而非视觉

在与一些拥有庞大营销团队的大客户合作时，我们很快意识到构建着陆页的经典方法是行不通的。

主要有两个风险。一个是立即进行高保真设计，但可能需要浪费大量时间进行彻底的重新设计。

另一种是制作低保真线框图，大多数甲方营销人员不明白为什么它这么丑，这会破坏你未来的所有设计努力。

还有第三条路

2016 年某个时候，我创造了 Typeframe （版面框架）这个术语，它是一种低保真线框搭配高保真文本。这意味着所有的文案都已经按层次结构排列好了。所有文本都有合适的大小和间距，以支持层次结构。

以下是一个案例：

版面框架

首先是要弄清楚客户对什么感兴趣。然后制作 3-5 个版本的文案组合，并在本地（而不是在互联网上）测试，以获得第一轮的反馈。

网站文案的 A/B/C 测试

所用的确切措辞和文案应根据行业进行调整，这个阶段没有特别的词语或短语可以起决定性作用。

主要思路是让目标用户感到信息是清晰的。他们需要在看到文案的时候，立即了解自己能从这个品牌的产品或服务中获得哪些好处。如果你没有透过封面图展示他们所需要的内容，他们就会点击离开，转化失败。

使用适当的字体大小、层次和间距，确保甲方和客户的营销团队都可以更轻松地理解信息。而这在任何图片和视觉信息被放到屏幕上之前就要搞定。

视觉效果

只有当这一部分完全弄清楚之后，我们才能开始思考将文案视觉化呈现的最佳方式。

但这与「看上去漂亮」无关，关键的视觉设计完全是服务于内容和转化的。

用户阅读你的文案内容，并且视觉元素应该放大这些信息给人的感知。

你会相信一个人还是一个随机的抽象视觉元素？

人类与抽象元素

99% 的企业都会因在封面图中使用人类形象而受益。

这是因为我们天生就与其他人保持一致，我们想模仿榜样所做的事。我们更容易想象自己处于与他们相同的处境。

在某些行业中，这并不重要，但这些人是少数。让用户与封面图产生的情感联系对于吸引注意力至关重要。

当然，这种构建的方式必须妥帖地完成——根据信息的上下文环境来构建并与之相匹配。

在标题中添加不符合氛围和内容的随机人物，会很快分散用户注意力。

添加知名图库人物图片也会产生「我以前好像在哪里见过」的错觉，但是这种错觉并非好事。当照片明显是图库照片时，用户对品牌的信任度会急剧下降。

最好的方法，是为你自己的品牌单独准备照片，生成一些经过大量调整后符合你的风格的照片，或者对图库网站上的照片进行大幅修改。

优秀封面图的示例

发挥创造力，但不要含糊其辞。少即是多。

重新为网站上的人物图片调色

颜色匹配

当你已经有了配色方案时，你可以将图像的某些部分（例如人物的衣服）重新着色为主 CTA 的浅色调，以加强视觉关联性。

在 Squareblack 上我们有时甚至会重新着色人物的眼睛，我们有时候在这些事情上非常痴迷。

重新着色时，请确保只突出一件衣服，不要让人物穿着单色的「制服」。在上面的例子中，这是衬衫，重新着色后会显得很微妙。

网页设计中的凝视原则

凝视原则

凝视原则是我之前多次提到过的一个设计原则。简而言之，这是一种人类的原始本能，大家总想看看别人正在看的东西。基本上就是跟随其他人的视线来寻找视觉标的。

当照片中的人直视相机时，大部分用户注意力都会集中在眼睛上。但让照片中的人看向 CTA 按钮，可以将注意力转移到我们想要的地方，也就是 CTA 按钮。

通过策略性的布局来产生视觉引导线

视觉引导

凝视原则是人们眼睛向标题看的第一个引导。但请注意，在文本的影响下，视线是如何被折断的。它形成一条不自然的留白和引导线，隔绝了 CTA 按钮和人物的目光。

以这种方式需要进行更改优化，否则会使整个视觉通路会显得过于曲折，进而导致失效。

锯齿状的视觉引导线破坏了引导，这是失败的层次结构

内容部分

现在让我们快速浏览一下文案内容的部分，看看它们的结构是否合理。

为此，我使用了我创建的另一种设计方法，我将它称为「层次标识」。

网站标题上的层次标识，这是封面图的五个主要的元素。

1. 引子，在这个案例当中，使用的社交认同的逻辑，呈现的是用户数量，这是最有说服力的技巧之一。
2. 主标题，它必须简短且非常容易理解，展示你如何解决用户关心的问题。
3. 一旦用户发现你可以解决他们的问题，那么请在描述中向用户展示如何解决。简短一点，你可以帮助用户消除一两个最常见的疑问（比如如果线路繁忙怎么办）。
4. 对于大多数项目，只需一个 CTA 按钮即可直接进入购买流程。对于高价、高摩擦行业（昂贵或难以转化的行业），可以添加额外的按钮以展示相关的应用案例。
5. 情感联系（也可以使用小叠加层来显示已解决的问题 - 例如在这个产品可以在线路繁忙时辅助安排约会）

在开始制作高保真样机之前规划你的设计方向

封面图的设计总结

对于高转换率的着陆页，并没有真正绝对套路。只有一些基本原则需要遵循，并且要有开放的心态来研究和测试假设。

最重要的是保持设计足够清晰和足够明确的逻辑结构。首先从版面框架开始进行测试和调研，以便后续视觉效果呈现，和文案能够产生合理的联系。

当然还有更多讲究，下次我们将介绍不同的设计指导原则。