访客总数。很容易看到。每个营销人员都知道他们获得了多少流量，因为它就在您的分析中。但接下来会发生什么并不那么明显。

　　这就是为什么提供有关驾驶交通的建议很容易，但网页设计技巧却很难。有很多因素。即使在 1000 多个成功的网页设计项目之后，我们也很难知道什么是最好的。

　　这篇文章有 27 个网页设计技巧，可以从每个访问者那里获得更多价值。大多数这些技巧都得到了研究的支持。这些适用于初级设计师和高级用户体验专家，适用于小型企业和大型企业。

　　这是我们关于如何设计一个能取得成果的网站的最佳建议、想法和灵感。一个看起来很漂亮的网站，可以转化访问者并从每一次来之不易的访问中获得更多价值。

　　网站是两件事：容器和内容。容器是两件事：结构和风格。让我们从第一个开始。这些提示是关于页面的结构和布局。

　　网页设计师使用视觉层次结构来引导访问者首先关注重要元素。网站布局包括位置（页面上的高或低）、大小（大或小）、视觉效果（视频、图像、图标）和对比度（颜色和空白空间）。

　　组合方面会增加它们的效果。每个人都会在页面上看到一个大视频。很少有人会看到被图像包围的低对比度文本。

　　视觉层次结构是为什么您的眼睛在互联网问的每个页面上都遵循特定路径的原因。故意使用时，它会通过一系列消息引导访问者的注意力，以呼吁采取行动。

　　主页（以及每一页）顶部的标题要么是描述性的，要么是非描述性的。否则，访客可能无法回答他们的第一个问题：“我来对地方了吗？”

　　这也是一个使用目标关键词并表明相关性的机会。但是很多营销人员反而写了一些聪明或含糊的东西。但清晰总比聪明好。

　　与其写一个花哨但模糊的标题，不如写一些描述性的东西。确保你解释了公司在页面上方、首屏上所做的事情。

　　是的，有折叠。对于每个屏幕上的每次访问，都有一个可视区域。底部是著名的褶皱。要查看此行下方的任何内容，该访问者必须滚动。

　　为什么以及这在网页设计中是否重要是一个激烈争论的话题。这里有两个最好的论据：“没有折叠！“ vs “折叠仍然很重要。”

　　当然，屏幕尺寸有数千种，从小到大。上个月，该网站在 958 个不同尺寸的屏幕上被浏览。所以一些设计师说折叠不再相关。

　　但这是底线（明白了吗？）每次访问仍然有一个折叠，所有访问仍然是平均折叠。Hotjar 等工具将其清楚地显示为滚动热图中的一条线，适用于台式机/笔记本电脑、手机和平板电脑。

　　所以是的，有一个折叠，你在它上面和下面放什么很重要。一项研究表明，访客 80% 的时间都花在了首屏上。

　　游客可能会在那里停留更多时间，但这并不意味着他们已准备好采取行动。很多说服发生在页面的更深处。

　　当 Chartbeat分析 2500 万次访问时，他们发现大多数参与都发生在首屏以下。顶部的内容可能是可见的，它不一定是发出号召性用语的最有效位置。

　　关于这项经常被引用的研究的一个警告：Chartbeat 主要由新闻网站使用，这与营销网站非常不同。没有人在新闻网站上做更多的事情！正常的网页设计技巧不适用。

　　更多像素意味着有更多空间来回答问题、解决异议和添加支持性证据。如果访问者没有找到重要问题的答案，他们可以简单地继续向下移动页面。一旦他们感到满意，他们就会停止阅读。

　　你永远不会在销售会议上打断某人并停止回答他们的问题，对吗？这就是一个短页面所做的一切；它停止回答问题。

　　这就是来自 Crazy Egg 的著名研究的用武之地。他们调查了他们的听众，发现了他们最关心的问题，并建立了一个高大的页面来解决所有问题。

　　“我喜欢干净、现代的设计。”这是我们的大多数客户在开始网页设计项目时告诉我们的。他们经常以 Apple 的网站为例。

　　2012 年，谷歌着手发现哪些类型的网站对访问者来说是美丽的。这是一项关于简单性的研究，名称非常复杂：视觉复杂性和原型对网站第一印象的作用：致力于理解审美判断。

　　这解释了单列布局和高页面的趋势。多列（左侧导航、内容区域、右侧栏杆）的设计更复杂，在访问者的视野内有更多的视觉元素。

　　谷歌的同一项研究发现，“高原型”也与感知美有关。换句话说，怪异通常并不漂亮。遵循网页设计标准的网站更容易受到喜爱。

　　这样想，让您的品牌与众不同是件好事，但布局不是这样做的地方。在你说的话上有所不同。但是在如何使用您的网站时要典型。

　　有些车看起来很棒。他们是不同的。他们很漂亮。但它们的侧面仍然有门，底部有轮子，前面有大灯。

　　现代营销网站，尤其是销售页面，都是用页面块构建的。这些是多行内容，通常一侧是图像，另一侧是文本，以单列形式在页面上向下流动。

　　如图所示，页脚的背景颜色较深。如此多的网站都这样做，以至于访问者现在期望切换到较暗的背景意味着页面底部。

　　但是如果设计有一个带有深色背景的页面块，访问者可能会认为他们已经到达底部并停止滚动。这是一个虚假的底部。

　　注意：我和我自己的设计师就这个问题进行了辩论。我们的创意总监库尔特克鲁斯提出了一个很好的观点。背景颜色的变化是让访问者知道内容类型正在发生变化的绝佳方式。我听到了，库尔特！

　　在为页面块选择背景颜色时要慎重。为安全起见，请仅选择细微的变化或始终使用白色或浅灰色。然后在页脚中切换为深灰色或黑色。

　　它们多年来一直很受欢迎，客户喜欢它们。但是主页幻灯片有一个问题：访问者可能只看到第一张幻灯片。

　　有很多研究得出了相同的结论。后续幻灯片上的消息不太可能被看到，行动号召不太可能被点击。只需查看大学网站上幻灯片的点击率即可。

　　它们可能很受欢迎，因为它们很容易获得批准。来自不同部门的不同利益相关者都获得了一些优势。它们有利于内部政治，而不是访客。

　　知道多达 76% 的网站访问者正在扫描，您可以通过将内容全部公开来让他们更容易看到您的内容，而无需单击以显示某些内容。

　　请记住，滚动比单击更快、更容易。如果访问者必须瞄准并单击或标签才能查看某些内容，则他们不太可能看到它。

　　人脸是独一无二的强大图像。从我们出生的那一刻起，我们就更多地注视面孔。人物图片的磁力在网页设计中非常有用。

　　面孔不仅能吸引注意力，还与转化相关。Basecamp的著名案例研究表明，当销售页面上的面孔和推荐相结合时，结果会得到巨大提升。

　　多年来，我与数以千计的企业就他们的营销进行了交谈，我注意到了一种模式。大公司总是想看起来小，而小公司总是想看起来大。很奇怪吧？

　　库存照片有时间和地点，但我会避免像瘟疫一样的人的库存照片。他们只是永远感觉不到真诚，因此他们不会建立信任。

　　公司被库存照片所吸引，因为生产质量很高。但是您的访客更关心现实。他们更愿意看到真正在公司工作的人。

　　研究支持了这一点。NN Group 的一项研究发现，访问者会忽略人物的库存照片和“填充”图像，但实际上会查看真实人物的照片。

　　人物图片为您提供了一个特殊的机会来引导访问者的注意力。著名的“你看他们看的地方”现象。

　　当研究员 James Breeze向 106 人展示设计时，他展示了定位良好的面孔的力量。他们有能力将游客的注意力引向其他元素。

　　这就是著名的娃娃脸书房。当婴儿看着相机时，访客也看着婴儿。当婴儿看标题时，访问者看标题。

　　我的朋友 Oli Gardner 厌倦了这个婴儿的例子（对不起，Oli！）。如果有人知道其他研究或好的例子，请在评论中告诉我！

　　面孔可以引导注意力，但它们并不是控制访客眼睛的唯一方法。小手绘箭头可能更有效。

　　在CXL 的这项眼动追踪研究中发现，一个简单的箭头在让访问者查看页面元素方面更加强大。

　　如果您希望访问者看到某物，请用箭头指向它。我不确定这个提示是非常明显还是非常有见地。

　　颜色具有情感内涵（红色是紧急的，蓝色是平静的），它们是品牌标准的一部分。但它们也是将访客的注意力吸引到按钮和 CTA 上的机会。

　　Eyequant 关于按钮颜色的一项研究证实了颜色和亮度对比吸引注意力的能力。

　　1930 年代，德国科学家 Hedwig von Restorff 发现，当显示 10 个项目的列表时，如果项目的颜色与其他项目不同，人们就会记住它们。这是因为枕叶对视觉差异或“模式干扰者”很敏感。

　　网络营销人员 Paras Chopra 进行的实验表明，出色的颜色不仅会被更多人记住，而且被点击的次数也更多：增加了 60%！

　　专家提示！为所有链接、按钮和翻转效果选择一种“动作颜色”。使其颜色与整个设计中使用的品牌颜色不同（这些是“被动颜色”）。除了在可点击的项目中，别处使用动作颜色。

　　现在我们开始介绍网站导航的建议，包括让访问者四处走动的菜单、按钮和链接。

　　导航总是在视觉上突出，所以这是一个交流的机会。访问者通常通过扫描标题开始他们的访问。那里的任何东西，包括您的菜单，都很可能会被看到。

　　当导航标签是通用的时网站设计，您就错过了告诉访问者您做什么的机会。比较这两个例子：

　　如果您的导航标签是通用的，那么它们在数千甚至数百万个网站中都是通用的。您已经错过了利用网站导航最佳实践、帮助访问者和提高搜索排名的机会。

　　如果您有主页链接，请将其放在左侧。这是它最常见的地方，所以游客希望在那里找到它。

　　至于其余的菜单项，研究表明顺序并不是那么重要。有两种不同的眼动追踪研究表明，菜单项的顺序与访问者的成功率之间的相关性较低。

　　如果访问者在服务页面上，则目标是将他们转换为潜在客户。如果您添加大量机会离开并阅读您的博客，他们将登陆不太关注潜在客户生成的页面。博客文章自然会有更多的干扰、退出机会和更低的转化率。

　　只要相关，链接到有助于访问者实现目标的事物。在博客文章中，这通常是对来源的引用或外部参考的链接。这篇文章链接到数十篇文章和研究！

　　但是在服务页面和您的主页上，您应该小心地链接到其他站点。对于任何经过优化以将访问者转化为潜在客户的页面，问问自己，您真的希望访问者点击该链接吗？它有助于您实现目标吗？

　　同样，标题中丰富多彩的社交媒体图标也不适合您的目标。如果访问者点击这些糖果色按钮中的任何一个，他们就会进入一个充满干扰的网站。他们不太可能回来。

　　这通常是进行社交媒体整合的错误方式。如果您链接到社交网络，请从页脚进行链接。如果访问者正在寻找，他们可以找到社交网络，但您并不是建议他们离开。

　　让我们谈谈单词。早些时候，我们在主页上推荐了一个以关键词为中心的标题。这里有一些关于进入网站的写作技巧，包括标题、副标题和正文。

　　模糊的小标题无处不在。它们通常是大而无用的，但其次是小而有用的东西。很奇怪吧？相反会更有意义。

　　确保大事对访客有意义且有帮助。如果您的副标题说的是“产品”或“服务”之类的内容，请问问自己，更具描述性的术语是否会更有帮助。这里有些例子。

　　这有利于扫描仪和可用性。这对视障人士和可访问性都有好处。这也是很好的SEO 最佳实践。千万不要错过表明相关性的机会！

　　专业提示：副标题可能完全没有必要。如果没有它，这个页面是否也一样好？访客还会知道他们在看什么吗？如果是这样，只需将其删除。

　　长而块状的段落不符合数字内容最佳实践。简单地分解长段落可以使内容更易于使用。作为一般规则，不要写超过 3-4 行的段落。

　　如果行长度很长，访问者可能更难以阅读。该网站风格指南建议的不超过12个字线. 避免行话。使用简单的词。

　　“保持简单！“认知流畅度”衡量访客的大脑处理他们正在看的东西的难易程度。当某些东西难以阅读时，我们会无意识地发现它更危险和/或更耗时。因此，为了最大限度地提高转化率，请使用短文本、简单字体和易于阅读的设计。

　　适用于“低文化”用户的副本适用于每个人。这不是要降低它；这是关于使用每个人都能理解的简单语言。研究表明，降低可读性水平可以提高所有访问者的成功率。

　　这个大词可能会让你听起来很聪明，但它可能会让你的访客感到愚蠢。怀疑自己的访客不太可能采取行动。所以当你写的时候，不断问自己这个问题：

　　当 Joel Klettke 应用他的流程寻找问题和撰写答案时，他能够将Hubspot 登录页面的转化率提高一倍。他采访了客户，分析了他们的答案，对信息进行了优先排序，最后，他在新的营销文案中使用了受众自己的话。聪明的！

　　很多。有可能没有太多的证据。我们对亚马逊的产品详细信息页面之一进行了快速分析，发现该页面的 43% 是证据和评论。

　　在线和离线都是如此，并解释了许多人类行为。这篇文章解释得很好：将行为经济学和认知心理学应用于设计过程。

　　这是具有相同发现的两项研究。第一个是Hubspot 的一项调查，该调查表明，与漂亮的设计或花哨的用户体验相比，访问者更看重易于查找的信息。

　　网站应该是漂亮的。它们应该对访问者产生视觉或情感上的影响。但是您网站的成功远不止美观。这是关于帮助访问者找到他们需要的东西。这是本文中每个技巧的核心。这就是网页设计的真正目的。