您希望提高网站的转化率吗？许多人知道，设计对此有重大影响。该小部件服务的创始人 KEPLER LEADS 的创始人安东·切尔卡索夫为 E-pepper.ru 撰写了一篇文章，旨在分享能够提升转化率的网页设计原则。
许多营销人员强调 SEO、社交媒体和创建诱饵（lead magnets）以增加转化率的重要性，却往往忽视了网站设计的作用。上述组件确实很重要，但设计不仅仅是“漂亮的外表”。它能够显著增加或减少转化率。
根据斯坦福大学进行的一项调查，46.1% 的人表示，网站设计是判断一家公司是否可靠的三大最重要标准之一。因此，确保您的网站看起来专业至关重要。
优质且经过深思熟虑的网站设计能够提升转化率。根据 Adobe 的这项研究，三分之二的用户更青睐排版精美的内容。因此，如果您希望人们阅读您的博客文章，它们必须看起来具有吸引力。
但这还不是全部。如果您的网站缺乏吸引力，用户会更快地离开。38%的人会如此做，准确来说。这意味着大量潜在客户的流失！
无论设计是否是您的强项，您都不能忽视它。学习网页设计，聘请自由职业者、员工或代理机构。总之，做所有必要的事情！
在本文中，您将找到几个能够提高网站转化率的设计原则。
1. 遵循希克定律
希克定律是一种流行的理论，被许多人引用，但通常是从网页设计的角度来引用的。以英国心理学家威廉·埃德蒙·希克命名的这一定律指出，人们做出决策所需的时间与可选方案的数量成正比。
换句话说，随着可选方案数量的增加，选择时间也会增加。
也许您听说过心理学家希娜·艾扬格和马克·莱珀的著名研究。他们发现，包含24种果酱品种的图片比仅包含6种品种的图片吸引的关注更少。当用户在屏幕上看到大量信息时，他们购买的可能性大约降低了10倍。
从网页设计的角度来看，您可以通过限制用户的选择来提高转化率。首先可以减少选择数量的地方是导航栏。不要放置过多的链接，否则用户会失去兴趣。
换句话说，不要这样做：
然而，希克定律并不仅限于此。请思考用户在您的网站上需要做出的所有决策，并将它们的数量减至最少。
以下是一些示例：
- 使用导航栏还是页面滚动
- 在众多文章中阅读哪一篇
- 是否下载诱饵、在社交媒体上分享帖子或留下评论
- 在浏览商品评论后立即购买与查看其他产品之间的选择
这只是用户需要做出的众多决策中的开始。也许，你很难确定从哪里开始减少决策数量，但有一种简单的方法可以利用希克定律……
你所要做的就是在网站首页设置一个全屏欢迎页面。这个欢迎页面将用单一的号召性用语（CTA）填满整个屏幕，这样用户最初只需做一个决定。如果他们想看更多选项，可以关闭它。
这有助于最大限度地减少干扰因素，同时保持主页功能的完整性。
总体而言，在应用希克定律时，重要的是要理解哪些用户行为对于实现你的目标最为关键。例如，你是希望用户下载你的“诱饵”（lead magnet），还是希望他们将商品加入购物车？网站的每个页面都应引导访客执行特定的操作。
你能给访客提供的选择越少，他们使用你的网站就越轻松，转化率也会随之提高。
可以采取的措施：
- 限制网站上的选择
- 最大限度减少干扰因素
- 进行审计：每个页面是否都引导访客执行特定操作？还是多个操作？
2. 使用三分法则
三分法则是摄影中流行的一个原则，同样可以应用于网页设计。根据该法则，您应将图像（或网页）在视觉上分为三部分（无论是垂直方向还是水平方向）。
这将为你生成九个相等的正方形：
根据该规则，线条的四个中间交叉点是“力量点”。当物体位于这些点上时，会形成最具视觉冲击力的画面。
从网页设计的角度来看，你可以将页面上最重要的元素放置在这些交叉点上。人们将更容易导航，从而增加转化率。
例如，看看服务页面 Callbackhunter。“免费连接8年”按钮位于左下角的交叉点：
Kissmetrics 也将其行动号召放置在左下角的交叉点：
请注意，这些网站中没有任何一个将导航栏放置在交叉点附近。这有助于让访问者专注于主要的行动号召，而不是那些引导他们离开当前页面的元素。
您不需要严格按照三分法原则来设计整个网站。但您可以利用它来放置页面上最重要的元素。
尝试截取您网站的屏幕截图（仅截取顶部部分，而非整页，因为没有人会同时查看整页内容），并将其划分为九个相等的正方形。然后决定哪些地方可以改进。
操作步骤：
- 将网站的首屏划分为9个正方形
- 将关键元素（按钮、行动号召）放置在线条交叉的“力量点”上。
3. 考虑用户的耐心
更准确地说，是缺乏耐心。
人们非常没有耐心。尤其是在浏览互联网时。
根据 Aberdeen Group 进行的研究，页面加载每延迟一秒，转化率就可能降低7%！
因此，在页面加载速度方面，每一秒都至关重要。字面意义上的。您可以使用以下一个或多个免费工具来检查页面加载速度：
- Google PageSpeed Insights
- Pingdom
- GTmetrix
- KeyCDN
- Sucuri
该怎么做：
- 检查网站加载速度
- 排除故障并提升速度
4. 使用负空间
在网页设计中，空白被称为负空间。正空间是指包含网站所有元素的空间。而负空间则是这些元素之间的所有空白区域。
尽管名称如此，负空间实际上是网页设计中的一个重要要素。因为没有它，网站将难以阅读且无法使用。
负空间不仅包括页面中大型元素（如标题和正文内容，或侧边栏与正文内容）之间的距离，还包括网站中所有小型元素之间的空间。例如，项目之间、行之间甚至字母之间的间距。
如果您关注网站上的所有负空间形式，就能使其更清晰易读，便于访客理解。当然，这也有助于提升转化率。
Flat.io 在其主页上大量使用留白，以将用户的注意力集中在主要的行动号召上——通过 Google 或 Facebook 登录。
以下是一些建议，以确保您使用了足够的负空间：
- 字体越小，字母之间的间距应越大。
- 行高（包括文本上方和下方的空间以及文本本身）应约为字体大小的150%（在CSS中，这通过以下方式设置：line-height: 1.5;）。
- 然而，在使用较小字体时，应增加行高。请看下图两个段落文本的感知差异：
- 将大段文本拆分为更小的块，以增加负空间并便于阅读。
- 在网站的较大元素（菜单、标题、内容）之间添加负空间，使用宽边距和内边距。
5. F型页面浏览模式
研究人员发现，用户在浏览网页时会潜意识地使用所谓的“F”模型。
以下是热力图，显示了用户浏览页面时目光停留的位置：
其示意图如下所示：
如您所见，人们首先从左上角开始向右看。然后他们向下扫描页面，有时会将目光移向右侧以查看内容。右下角区域获得的注意力最少。
如何利用它来提高转化率？您可以将最重要的对象或行动号召沿着F型浏览区域放置，而将最不重要的元素放在其范围之外。
例如，您可以将主要的行动号召放在页面的左上角，因为这是用户首先看到的区域。
然后，您可以将不太重要的元素（例如您博客最新文章链接）放在下方，但仍在左侧。不太重要的材料（例如广告区块）可以放置在页面的右侧。您可以在页面的右下角放置价值较低的信息。
该做什么：
- 根据F型浏览模式对网站进行分析
- 将网站的重要元素（行动号召、按钮）放置在左侧
- 将不太重要的元素放置在F型浏览区域之外
6. 色彩搭配
“色彩往往是网页设计中常被低估的一个方面，但它可以在可用性方面发挥非常重要的作用，并传达品牌的整体意义和网站氛围。”设计师汤姆·肯尼说道。“不同的颜色组合可能会引发不同的情绪和反应。”
为您的网站选择配色方案时，请确保您选择的组合能够引发所需的情感。
一种方法是维护您的 Pinterest 画板，并观察您的品牌引发了哪些情感。您还可以将一些图片上传到 Adobe’s Color Wheel 通过屏幕右上角的相机图标。
上传后，程序会根据图像中的颜色自动为您创建配色方案。
创建好配色方案后，有一件重要的事情需要注意，以提高转化率。
对比度
利用对比度使文本、标题和行动号召保持醒目和易读。换句话说，文本和按钮应与页面背景形成对比（例如，白色背景配黑色文本）。您希望突出的元素（例如行动号召）也应从网站的其余元素中脱颖而出。
如果我们使用上面创建的配色方案，我们将使蓝色色调成为主导颜色。而亮黄色则会谨慎使用，作为行动号召的颜色（因为它提供了最大的对比度）。
让我们以 MailChimp 为例。哪些元素吸引了您的注意力？
当然，是中间的女孩图片，但真正吸引注意力的是两个橙色的行动号召按钮。这是因为它们与页面上的其他元素形成了鲜明的对比。
该做什么：
- 在此查看颜色的情感含义
- 确定您的颜色组合引发了哪些情感
- 网站上行动号召用什么颜色突出显示？
- 这种颜色还在其他地方使用吗？按钮在这些元素的背景下是否突出显示？
7. 不要忘记简洁性
在涉及转化率时，简洁性至关重要。每次创建页面时，问自己：“能否让它更简单？”结果将更加美观，转化率也会更高。
还记得希克定律吗？现在它开始发挥作用了。但简洁性不仅仅是限制选择选项。它关乎创建一个整洁的整体设计，将干扰因素降到最低。
与希克定律一样，其核心理念是：人们一次只能处理有限数量的信息。如果我们在一个页面上看到太多元素，注意力就会过载。为用户创造积极的网站体验意味着去除所有非绝对必要的东西。
Apple 的网站是简洁设计的最佳典范之一。它的效果如此显著，以至于许多其他公司都效仿了它。
该做什么：
- 分析您的网站有多简洁？能否让它更简单？
8. 使用 8 秒规则
规则在于，您只有8秒钟的时间来吸引用户的注意力。一个人能集中注意力于一件事的时间正是这么长。
当用户访问网站时，您与他们互动的机会窗口非常小。因此，请充分利用这几秒钟！
以下是一些在前 8 秒内吸引注意力并提高转化率的建议：
- 使用醒目且简洁明了的大标题，直接说明您产品的优势。
- 使用引人注目的图像，传达页面的主要目标，并将注意力引导至主要的行动号召（Call-to-Action）。
- 使 Call-to-Action 按钮大而简单、易于理解。
- 使用特定的词汇，使您的提议更具吸引力。
- 使用媒体内容，如视频、音频等。
- 在按钮上使用悬停效果（例如，鼠标悬停时改变颜色或光标），以增强用户点击的欲望。
- 使用动画弹出窗口，重新吸引那些失去兴趣的访客。
9. 注意格式塔原则
格式塔设计原则可以用心理学家库尔特·考夫卡的话来概括：“整体不同于部分之和”。人眼和人脑对整体结构的感知与对其各个组成部分的感知是不同的。
第一个格式塔原则是相似性法则，它指出人眼喜欢将相似的物体归为同一组。
从网页设计的角度来看，你可以利用这一法则将元素分组。例如，感谢图片、转化按钮或相关图像。
如果你拥有出色的推荐语，可以利用它来提高转化率。为此，请将评价放在申请表或订阅表单下方。即使该评价与当前表单没有直接关联，用户也会将其与表单联系起来，因为它们彼此相邻。
相似性法则对用户体验同样重要。将注册表单的主要元素（标题、描述、按钮）组合在一起，并将它们放置在页面中其他元素较远的位置（使用负空间）。这将帮助访客更快、更有效地感知信息。
这一原则对于提高转化率尤为重要，因为人们的注意力转移得非常快！
具体做法：
- 将注册表单的主要元素组合在一起，并将它们放置在远离其他元素的位置。
- 如果你有好的评价，请将它们放置在注册表单旁边。
10. 利用人物形象来增加信任感
人们会关注其他人。“当我们看到某人的脸时，我们自动开始感受相同的情绪并与这个人产生共情。”设计师萨宾娜·伊德勒说。
确保在你的文章、案例研究、用户评价以及落地页中包含带有所需情绪的人物面部图像。
如果你本人就是品牌的代言人，那么这很容易实现。安排一次摄影拍摄，并确保摄影师拍摄大量水平构图的照片，在你身体一侧留出负空间。这样，你就可以在该区域放置行动号召或文本内容。
以下是 amoCRM 网站上的示例：
如果您本人不作为公司形象代言人，可以使用模特照片或图库素材。但图库素材只是最后的选择。请确保您选择的人物能够让用户对您的品牌产生正确的联想。
阿尔法银行通过展示代表网站主要目标受众的人物来实现这一点：
该怎么做：
- 确保网站上包含具有所需表情的面部图像
- 为网站挑选符合目标受众特征的人物
11. 高质量图片的来源
如果有什么东西会显著降低转化率或内容质量，那就是低质量的图片。
研究 Bright Local 显示，60%的人更愿意查看包含图片的搜索结果。而23%的人更有可能联系那些展示员工面孔的公司。
应避免使用死板、不合时宜且俗气的库存照片。Skyword 的研究表明，如果内容包含引人入胜的图像，平均浏览量将增加94%！
与其使用无趣和模板化的图片，不如寻找高质量的图片来源，以激发客户对您品牌的积极联想。请记住：人们喜欢那些他们认为与自己相似的品牌。如果您的图片过于“枯燥”或“企业化”，可能会劝退访客。以下是一些可以找到免费高质量图片的优质平台：
- Pexels
- Death to Stock
- StockSnap
- Unsplash
- Superfamous Studios
- Negative Space
- Gratisography
- Little Visuals
- Picjumbo
- Kaboompics
该做什么：
- 从网站上移除标准且模板化的图片
- 用更高质量的图片替换它们
结论
现在您已经了解了网页设计的11个原则，请评估您网站的设计。有哪些原则未被遵守？
您的导航中链接数量是否过多？负空间是否充足？也许您没有使用他人面部图像。
这些问题中的许多都可以快速轻松地解决。请在下方评论中分享您的经验。
此外，如果您喜欢这篇文章，还可以阅读我们的另一篇文章：5 малоизвестных способов увеличения конверсии сайта。
作者：安东·切尔卡索夫
KEPLER LEADS 小工具服务创始人