27 个研究支持的网页设计技巧：如何设计一个有效的网站
时间：2023-09-11 06:54:01 | 来源：网站运营
时间：2023-09-11 06:54:01 来源：网站运营
27 个研究支持的网页设计技巧：如何设计一个有效的网站：访客总数。很容易看到。每个营销人员都知道他们获得了多少流量，因为它就在您的分析中。但接下来会发生什么并不那么明显。
这就是为什么提供有关驾驶交通的建议很容易，但网页设计技巧却很难。有很多因素。即使在 1000 多个成功的网页设计项目之后，我们也很难知道什么是最好的。
这篇文章有 27 个网页设计技巧，可以从每个访问者那里获得更多价值。大多数这些技巧都得到了研究的支持。这些适用于初级设计师和高级用户体验专家，适用于小型企业和大型企业。
这是我们关于如何设计一个能取得成果的网站的最佳建议、想法和灵感。一个看起来很漂亮的网站，可以转化访问者并从每一次来之不易的访问中获得更多价值。
这里引用的两项最重要的研究在最后。如果您不耐烦，请跳过！网站的结构布局
网站是两件事：容器和内容。容器是两件事：结构和风格。让我们从第一个开始。这些提示是关于页面的结构和布局。
1. 利用视觉层次结构
每个页面都有一个视觉层次结构。如果你不熟悉这个概念，这里是我们的定义：
视觉层次是指视觉元素的排列、大小、颜色和对比度。它决定了它们的相对显着性和人眼看到它们的顺序。
网页设计师使用视觉层次结构来引导访问者首先关注重要元素。网站布局包括位置（页面上的高或低）、大小（大或小）、视觉效果（视频、图像、图标）和对比度（颜色和空白空间）。
组合方面会增加它们的效果。每个人都会在页面上看到一个大视频。很少有人会看到被图像包围的低对比度文本。
视觉层次结构是为什么您的眼睛在互联网上访问的每个页面上都遵循特定路径的原因。故意使用时，它会通过一系列消息引导访问者的注意力，以呼吁采取行动。
2. 在主页的高处使用描述性的、以关键词为中心的标题
主页（以及每一页）顶部的标题要么是描述性的，要么是非描述性的。否则，访客可能无法回答他们的第一个问题：
“我来对地方了吗？”这也是一个使用目标关键词并表明相关性的机会。但是很多营销人员反而写了一些聪明或含糊的东西。
但清晰总比聪明好。与其写一个花哨但模糊的标题，不如写一些描述性的东西。确保你解释了公司在页面上方、首屏上所做的事情。
资料来源：外展加等等，折叠还是一回事？
是的，有折叠。对于每个屏幕上的每次访问，都有一个可视区域。底部是著名的褶皱。要查看此行下方的任何内容，该访问者必须滚动。
为什么以及这在网页设计中是否重要是一个激烈争论的话题。这里有两个最好的论据：“没有折叠！“ vs “折叠仍然很重要。”
当然，屏幕尺寸有数千种，从小到大。上个月，该网站在 958 个不同尺寸的屏幕上被浏览。所以一些设计师说折叠不再相关。
但这是底线（明白了吗？）每次访问仍然有一个折叠，所有访问仍然是平均折叠。Hotjar 等工具将其清楚地显示为滚动热图中的一条线，适用于台式机/笔记本电脑、手机和平板电脑。
所以是的，有一个折叠，你在它上面和下面放什么很重要。一项研究表明，访客 80% 的时间都花在了首屏上。
因此，将您的价值主张，即您所做工作的 8 字版本放在页面上方、首屏。
3. 但不要将所有号召性用语放在首位
游客可能会在那里停留更多时间，但这并不意味着他们已准备好采取行动。很多说服发生在页面的更深处。
当 Chartbeat分析 2500 万次访问时，他们发现大多数参与都发生在首屏以下。顶部的内容可能是可见的，它不一定是发出号召性用语的最有效位置。
关于这项经常被引用的研究的一个警告：Chartbeat 主要由新闻网站使用，这与营销网站非常不同。没有人在新闻网站上做更多的事情！正常的网页设计技巧不适用。确保将号召性用语放在页面下方的任何可能引起高度关注的地方。
4. 让它成为一个高大的页面。回答所有访客的问题。
更多像素意味着有更多空间来回答问题、解决异议和添加支持性证据。如果访问者没有找到重要问题的答案，他们可以简单地继续向下移动页面。一旦他们感到满意，他们就会停止阅读。
最有效的销售页面模拟销售对话。
你永远不会在销售会议上打断某人并停止回答他们的问题，对吗？这就是一个短页面所做的一切；它停止回答问题。
这就是来自 Crazy Egg 的著名研究的用武之地。他们调查了他们的听众，发现了他们最关心的问题，并建立了一个高大的页面来解决所有问题。
页面长了 20 倍。转化率提高了 30%。
5. 一次展示一件事
“我喜欢干净、现代的设计。” 这是我们的大多数客户在开始网页设计项目时告诉我们的。他们经常以 Apple 的网站为例。
游客不喜欢混乱。我们喜欢空白。换句话说，我们喜欢低视觉复杂度。
2012 年，谷歌着手发现哪些类型的网站对访问者来说是美丽的。这是一项关于简单性的研究，名称非常复杂：
视觉复杂性和原型对网站第一印象的作用：致力于理解审美判断。他们了解到，更复杂的设计不太可能被认为是美丽的。
这解释了单列布局和高页面的趋势。多列（左侧导航、内容区域、右侧栏杆）的设计更复杂，在访问者的视野内有更多的视觉元素。
所以剪掉杂物。使两个元素之一成为每个滚动深度的焦点。
6.坚持标准布局
谷歌的同一项研究发现，“高原型”也与感知美有关。换句话说，怪异通常并不漂亮。遵循网页设计标准的网站更容易受到喜爱。
被认为最美丽的网站具有高原型性和低视觉复杂性。它们既简单又干净。
这样想，让您的品牌与众不同是件好事，但布局不是这样做的地方。在你说的话上有所不同。但是在如何使用您的网站时要典型。
有些车看起来很棒。他们是不同的。他们很漂亮。但它们的侧面仍然有门，底部有轮子，前面有大灯。
但什么是标准？根据我们自己的研究，这些是网站的标准元素：
具有高原型性的“标准”网站包括以下内容：
- 左上角的标志
- 标题中的水平导航
- 顶部的搜索栏
- 底部的社交图标
- 移动响应式设计
7、谨防“假底”
现代营销网站，尤其是销售页面，都是用页面块构建的。这些是多行内容，通常一侧是图像，另一侧是文本，以单列形式在页面上向下流动。
以下是潜在客户生成网站上典型服务页面的剖析。
如图所示，页脚的背景颜色较深。如此多的网站都这样做，以至于访问者现在期望切换到较暗的背景意味着页面底部。
但是如果设计有一个带有深色背景的页面块，访问者可能会认为他们已经到达底部并停止滚动。这是一个虚假的底部。
注意：我和我自己的设计师就这个问题进行了辩论。我们的创意总监库尔特克鲁斯提出了一个很好的观点。背景颜色的变化是让访问者知道内容类型正在发生变化的绝佳方式。我听到了，库尔特！在为页面块选择背景颜色时要慎重。为安全起见，请仅选择细微的变化或始终使用白色或浅灰色。然后在页脚中切换为深灰色或黑色。
8.避免轮播和旋转滑块
它们多年来一直很受欢迎，客户喜欢它们。但是主页幻灯片有一个问题：访问者可能只看到第一张幻灯片。
有很多研究得出了相同的结论。后续幻灯片上的消息不太可能被看到，行动号召不太可能被点击。只需查看大学网站上幻灯片的点击率即可。
它们可能很受欢迎，因为它们很容易获得批准。来自不同部门的不同利益相关者都获得了一些优势。它们有利于内部政治，而不是访客。
主页幻灯片很擅长防止人们在会议室互相刺伤。
那么该怎么做呢？
- 堆叠幻灯片，以便访问者可以通过向下滚动页面来查看每个幻灯片。它们会突然变得更加明显。
- 使用特色图片，使用最具影响力的幻灯片作为主角。给它一个好的行动号召！
9.避免标签和手风琴
这是另一种隐藏内容的方法：避免使用选项卡和可扩展的内容框。
知道多达 76% 的网站访问者正在扫描，您可以通过将内容全部公开来让他们更容易看到您的内容，而无需单击以显示某些内容。
如果选项卡和可扩展手风琴有效，您可能会在亚马逊上看到它们。请记住，滚动比单击更快、更容易。如果访问者必须瞄准并单击或标签才能查看某些内容，则他们不太可能看到它。
图片
让我们继续看视觉效果。这些提示特定于网页上的图片。
10.使用人物图片
人脸是独一无二的强大图像。从我们出生的那一刻起，我们就更多地注视面孔。人物图片的磁力在网页设计中非常有用。
面孔不仅能吸引注意力，还与转化相关。Basecamp的著名案例研究表明，当销售页面上的面孔和推荐相结合时，结果会得到巨大提升。
确保您的网站看起来不像一艘没有灵魂的“废弃宇宙飞船”。
多年来，我与数以千计的企业就他们的营销进行了交谈，我注意到了一种模式。大公司总是想看起来小，而小公司总是想看起来大。很奇怪吧？
真的，每家公司都应该努力变得更加个性化，更加人性化。
11. 但要避免人的库存照片
库存照片有时间和地点，但我会避免像瘟疫一样的人的库存照片。他们只是永远感觉不到真诚，因此他们不会建立信任。
公司被库存照片所吸引，因为生产质量很高。但是您的访客更关心现实。他们更愿意看到真正在公司工作的人。
真实性比抛光更重要。
研究支持了这一点。NN Group 的一项研究发现，访问者会忽略人物的库存照片和“填充”图像，但实际上会查看真实人物的照片。
所以做你自己，向你的团队展示并使用真人的照片，即使它们已经完美无瑕。
12. 使用面孔作为视觉提示
人物图片为您提供了一个特殊的机会来引导访问者的注意力。著名的“你看他们看的地方”现象。
当研究员 James Breeze向 106 人展示设计时，他展示了定位良好的面孔的力量。他们有能力将游客的注意力引向其他元素。
这就是著名的娃娃脸书房。当婴儿看着相机时，访客也看着婴儿。当婴儿看标题时，访问者看标题。
我的朋友 Oli Gardner 厌倦了这个婴儿的例子（对不起，Oli！）。如果有人知道其他研究或好的例子，请在评论中告诉我！使用面部图像中的视线作为方向提示，引导访客注意利益陈述或行动呼吁。
13. 使用箭头作为视觉提示
面孔可以引导注意力，但它们并不是控制访客眼睛的唯一方法。小手绘箭头可能更有效。
在CXL 的这项眼动追踪研究中发现，一个简单的箭头在让访问者查看页面元素方面更加强大。
如果您希望访问者看到某物，请用箭头指向它。我不确定这个提示是非常明显还是非常有见地。
14. 使用颜色引导访问者的注意力转向行动号召
颜色具有情感内涵（红色是紧急的，蓝色是平静的），它们是品牌标准的一部分。但它们也是将访客的注意力吸引到按钮和 CTA 上的机会。
Eyequant 关于按钮颜色的一项研究证实了颜色和亮度对比吸引注意力的能力。
但研究表明，彩色按钮并不总是有效。如果您希望按钮在视觉上更加突出：
- 将按钮颜色与背景对比
- 对比按钮颜色和按钮文本
- 将按钮颜色与页面上附近的元素进行对比（或在其周围留出足够的空白）
“冯·雷斯托夫效应”1930 年代，德国科学家 Hedwig von Restorff 发现，当显示 10 个项目的列表时，如果项目的颜色与其他项目不同，人们就会记住它们。这是因为枕叶对视觉差异或“模式干扰者”很敏感。
网络营销人员 Paras Chopra 进行的实验表明，出色的颜色不仅会被更多人记住，而且被点击的次数也更多：增加了 60%！
专家提示！为所有链接、按钮和翻转效果选择一种“动作颜色”。使其颜色与整个设计中使用的品牌颜色不同（这些是“被动颜色”）。除了在可点击的项目中，别处使用动作颜色。导航和链接
现在我们开始介绍网站导航的建议，包括让访问者四处走动的菜单、按钮和链接。
15. 具有描述性
导航总是在视觉上突出，所以这是一个交流的机会。访问者通常通过扫描标题开始他们的访问。那里的任何东西，包括您的菜单，都很可能会被看到。
当导航标签是通用的时，您就错过了告诉访问者您做什么的机会。比较这两个例子：
如果您的导航标签是通用的，那么它们在数千甚至数百万个网站中都是通用的。您已经错过了利用网站导航最佳实践、帮助访问者和提高搜索排名的机会。
16.把home放在左边，但除此之外，不要太在意菜单项的顺序
如果您有主页链接，请将其放在左侧。这是它最常见的地方，所以游客希望在那里找到它。
至于其余的菜单项，研究表明顺序并不是那么重要。有两种不同的眼动追踪研究表明，菜单项的顺序与访问者的成功率之间的相关性较低。
因此，不要花大量时间担心菜单中的顺序。
17. 小心从服务页面链接到博客文章
如果访问者在服务页面上，则目标是将他们转换为潜在客户。如果您添加大量机会离开并阅读您的博客，他们将登陆不太关注潜在客户生成的页面。博客文章自然会有更多的干扰、退出机会和更低的转化率。
18. 小心链接到其他网站上的任何内容
只要相关，链接到有助于访问者实现目标的事物。在博客文章中，这通常是对来源的引用或外部参考的链接。这篇文章链接到数十篇文章和研究！
但是在服务页面和您的主页上，您应该小心地链接到其他站点。对于任何经过优化以将访问者转化为潜在客户的页面，问问自己，您真的希望访问者点击该链接吗？它有助于您实现目标吗？
19.避免在网站标题中使用社交媒体图标
同样，标题中丰富多彩的社交媒体图标也不适合您的目标。如果访问者点击这些糖果色按钮中的任何一个，他们就会进入一个充满干扰的网站。他们不太可能回来。
这通常是进行社交媒体整合的错误方式。如果您链接到社交网络，请从页脚进行链接。如果访问者正在寻找，他们可以找到社交网络，但您并不是建议他们离开。
写作
让我们谈谈单词。早些时候，我们在主页上推荐了一个以关键词为中心的标题。这里有一些关于进入网站的写作技巧，包括标题、副标题和正文。
20.写有意义的小标题
模糊的小标题无处不在。它们通常是大而无用的，但其次是小而有用的东西。很奇怪吧？相反会更有意义。
确保大事对访客有意义且有帮助。如果您的副标题说的是“产品”或“服务”之类的内容，请问问自己，更具描述性的术语是否会更有帮助。这里有些例子。
这有利于扫描仪和可用性。这对视障人士和可访问性都有好处。这也是很好的SEO 最佳实践。千万不要错过表明相关性的机会！
专业提示：副标题可能完全没有必要。如果没有它，这个页面是否也一样好？访客还会知道他们在看什么吗？如果是这样，只需将其删除。21.避免长段落和长行长
长而块状的段落不符合数字内容最佳实践。简单地分解长段落可以使内容更易于使用。作为一般规则，不要写超过 3-4 行的段落。
“短段落被阅读，长段落被略读，真正长段落被跳过” ——杰森弗里德，Basecamp创始人兼首席执行官
如果行长度很长，访问者可能更难以阅读。该网站风格指南建议的不超过12个字线。
22. 避免行话。使用简单的词。
阅读越容易，网站就越成功。使用访问者期望的常用词。长句和花哨的词迫使颞叶更加努力地工作。这不好。
“保持简单！“认知流畅度”衡量访客的大脑处理他们正在看的东西的难易程度。当某些东西难以阅读时，我们会无意识地发现它更危险和/或更耗时。因此，为了最大限度地提高转化率，请使用短文本、简单字体和易于阅读的设计。
适用于“低文化”用户的副本适用于每个人。这不是要降低它；这是关于使用每个人都能理解的简单语言。研究表明，降低可读性水平可以提高所有访问者的成功率。
即使是博士也更喜欢阅读 8 年级的水平。
这个大词可能会让你听起来很聪明，但它可能会让你的访客感到愚蠢。怀疑自己的访客不太可能采取行动。所以当你写的时候，不断问自己这个问题：
是否 100% 的访问者知道此页面上单词的含义？23. 列表顺序和“序列位置效应”
在您的副本中订购任何列表时，请将重要的内容放在开头和结尾。在所有列表中，读者的注意力和保留度最低。当访问者浏览页面时，第一个和最后一个项目最有可能留在短期记忆中。
24. 回答访客最关心的问题
他们带着问题来了。该网站的主要工作是回答这些问题。每个悬而未决的问题都是建立信任的错失良机。未回答的问题也会增加访客离开的可能性。
当 Joel Klettke 应用他的流程寻找问题和撰写答案时，他能够将Hubspot 登录页面的转化率提高一倍。他采访了客户，分析了他们的答案，对信息进行了优先排序，最后，他在新的营销文案中使用了受众自己的话。聪明的！
以下是乔尔用来发现访问者最关心的问题的问题：
- 发生了什么让您寻找解决方案？
- 你还尝试了什么，你不喜欢它什么？
- 是什么让您几乎无法从我们这里购买？
- 是什么让你有足够的信心让我们试一试？
- 是什么让 X 成为您的最佳解决方案？
- 在评估 X 时，您认为最重要的是什么？
- 你现在能做什么（或做得更好）以前不能做的事？
- 给我举个例子，说明 X 什么时候对你产生了影响？
一句话，你的网站的目的是什么？回答。
25. 添加证据和社会证明
“从众偏见”是人类倾向于做其他人正在做的事情。因此，提供其他人选择您的证据使选择您的公司似乎是一个不错的选择。目标是
使除使用贵公司以外的任何决定都显得不合常理。向您的访客证明您是合法的。理想情况下，您的每一项营销主张都有证据支持。
“您有多少次点击设计奖得主名单上的网站，并在“家”这个引人入胜的标题标签上翻白眼？这就是当你相信一个机构“创造出完全独特而独特的东西”而不是选择一个承诺建立一些能按照你的客户/客户需要并期望它运作的方式运作的机构时会发生的情况。” – Jen Salamandick，
最快、最简单的方法是添加推荐。以下是其他类型的社会证明。
- 相关影响者的认可
- 来自客户的产品评论
- “正如在……中所见”提及贵公司的媒体徽标
- 社交媒体小部件显示您的关注人数
- 信任印章，包括协会会员资格、安全证书和奖项
多少证据才够？您应该添加多少推荐信？很多。有可能没有太多的证据。我们对亚马逊的产品详细信息页面之一进行了快速分析，发现该页面的 43% 是证据和评论。
专家提示！不要制作推荐页面。它们往往是低流量页面。相反，将推荐添加到每个服务页面。26. 提及稀缺性，引发“损失厌恶”
人类不是高效的成本/收益计算器。我们倾向于高估损失和低估收益。换句话说，损失比获得的快乐更痛苦。
在线和离线都是如此，并解释了许多人类行为。这篇文章解释得很好：将行为经济学和认知心理学应用于设计过程。
这种对损失的厌恶对网页设计师和撰稿人很有用。以下是一些考虑到损失厌恶的情况下撰写文案的技巧。
- 强调不使用您的产品或服务的成本。
- 将成本组合在一起，分别列出收益。
- 强调立竿见影的收获。
- 通过限时优惠创造紧迫感。如果产品稀缺，请说出来。
轻轻提醒您的访问者，如果现在不采取行动，他们会错过什么、冒什么风险或失去什么。
27.优化订阅者的电子邮件注册表单
这篇文章的底部有一个。这是订阅号召性用语。如果仔细观察，您会发现它包含三个独立的元素。这些都是3 P的电子邮件注册表格。
- 突出它在视觉层次结构中脱颖而出
- 承诺它告诉读者他们会得到什么以及多久得到一次
- 证明 它使用社会证明：订阅者的数量或一个小小的推荐
当我们第一次尝试这些更改时，旧表单的转换率非常低，因此改进非常显着。我们看到
电子邮件注册增加了
4,863%。
在设计您的电子邮件注册表单时，使其可见，使用社会证明并告诉读者他们将得到什么。
不仅仅是一个漂亮的网站
人人都爱美。每个人都喜欢很酷的新设计功能。每个人都是批评家。但作为游客，我们需要的不仅仅是美丽。我们需要信息。作为网站所有者，我们需要结果。
这是具有相同发现的两项研究。第一个是Hubspot 的一项调查，该调查表明，与漂亮的设计或花哨的用户体验相比，访问者更看重易于查找的信息。
第二项研究是NN Group的一组用户测试的结论。它表明，当访问者失败时，是因为他们找不到信息，而不是因为网站不够漂亮。
我和任何人一样喜欢漂亮的设计。这就是我开始从事这项业务的原因！我经常想到这句话：
“设计师的生活就是奋斗的一生。与丑恶作斗争。” – Massimo Vignelli，设计传奇
但在网页设计中，我们为内容创建容器。访问者是为了内容，而不是容器。
网站应该是漂亮的。它们应该对访问者产生视觉或情感上的影响。但是您网站的成功远不止美观。这是关于帮助访问者找到他们需要的东西。这是本文中每个技巧的核心。这就是网页设计的真正目的。
在线咨询
