您可能会犯下7种致命的网页设计罪

网页设计是一个棘手的主题。

人们对什么是好的网页设计，什么不是有不同的看法。

有些人认为你的网站需要超级时尚，具有最新的现代设计，才能引起关注。其他人认为，网页设计并不真正重要，您只需要一个可以正常工作并让人们做自己想做的事情的网站，例如Craigslist。

这两个答案都是正确的，取决于你说的是哪个行业或企业。但是，您如何找出适合您的东西？而且，您如何确保自己是网页设计师，知道他们在说什么并且不会犯错？

这篇文章提出了你不想在你的网站上犯下的七种致命的网页设计罪。好消息是，它们都是每个网站都应遵循的简单原则。所以，不管你是否有一个漂亮的设计，你仍然需要知道这些设计原则以及它们如何应用于你的网站。

此外，您可以使用这些原则来确保您的网页设计师知道他们在做什么。仅仅因为某人是一个好的设计师并不意味着他们知道如何为网络设计。而且，仅仅因为有人设计网站并不意味着他们知道如何设计可以转换的网站。密切关注这篇文章中提出的原则，并在必要时使用它们来确保你的设计师设计一个经过优化的网站，以获得你需要的结果。

错误 #1: 字体太小

人们犯的第一个错误是创建一个字体太小的网站。

原因是，在过去，大多数网站都有小字体。该标准约为12像素，几乎每个人都遵循该标准。

但是，随着时间的流逝，人们开始意识到12 px字体很难在线阅读。当屏幕从某人的脸上24英寸时，小字体使其难以阅读。

人们也开始意识到，你只有有限的时间来吸引游客的注意力，让他们知道他们在正确的地方。一项研究甚至指出，2013年的平均注意力跨度为8秒，比金鱼的平均注意力跨度少一秒。同一项研究还指出，人们只阅读平均网页上的28% 单词。

一项2013研究发现，人们的平均注意力持续时间为8秒，比金鱼少1秒。这有可能吗？Flickr: 摄影师23，知识共享许可证

为了立即引起人们的注意，您需要执行以下操作:

撰写吸引读者注意力的头条新闻。编写有趣的内容，使他们能够阅读超过28% 的内容。使用足够大的标题字体，以引起人们的注意。确保正文字体足够大，可以阅读，这样读者就不会因为厌倦了斜视而放弃。

由于上述所有原因，字体大小在过去几年中有所增加，以至于许多人将14 px视为最小字体大小，并且许多站点甚至以18 px作为最小字体大小更大，尤其是当大量阅读时涉及。

以下是一些具有出色字体大小的出色网页设计示例:

KISSmetrics

标题: 35 pxFooter: 15像素

维罗

标题: 41 pxBody: 18像素

帮助童子军博客

介绍文本: 26像素

身体: 19像素

要记住的一点是，编写副本的目的是使其阅读。当你付给作家一大笔钱或者自己费力地写网站副本时，你要确保它被阅读，并且不会被一种使副本难以阅读的小字体隐藏起来。

您还需要记住，并非所有字体的大小都相同。16 px Arial字体可以小于另一种字体的16 px版本。这是你在选择字体大小时需要注意的事情，所以你不要随意选择19像素，因为另一个网站选择了，只是发现你的19像素版本没有那么大。

请记住，页脚字体可以在较小的一侧，也可以在潜台词上，但是如果您写了想要人们阅读的内容，请考虑至少使用16 px字体。而且，如果您不想相信我的话，Smashing杂志在本文中会宣扬同样的事情: 16像素用于身体复制。少一点都是代价高昂的错误。

专业提示: 为了了解您想要使用的字体大小，请根据您喜欢的网站下载Google Chrome的WhatFont扩展。这是一个Chrome插件，可以很容易地单击字体，以找出网站使用的字体类型和大小。

错误 #2: 移动滑块

我仍然不明白为什么这么多网站使用移动滑块。

它们有效吗？他们会转换吗？它们是向客户展示您的信息的最佳方式吗？

在大多数情况下，它们不是。

peep Laja为ConversionXL写了一篇题为 “不要使用自动图像轮播或滑块，忽略时尚” 的文章。在文章中，他引用了WiderFunnel的Chris Goward和SiteTuners的Tim Ash的话:

我们已经多次测试了旋转报价，发现这是一种展示主页内容的糟糕方式。

-克里斯·高德

和...

旋转横幅绝对邪恶，应立即移除。

-蒂姆·阿什

Laja还提到了两项研究，其中旋转滑块被证明是无效的:

第一个是可用性大师雅各布·尼尔森 (Jakob Nielsen)。他问访客西门子在他们的网站上是否有洗衣机的特别优惠。实际上，他们确实提供了98点字体的报价，该报价说客户可以从新设备上获得现金。不幸的是，用户没有看到报价，因为它被隐藏在移动的滑块中，最终被完全错过了。

这表明转换专家的理论是，滑块会导致横幅盲，类似于侧边栏中的广告。人们习惯于在侧边栏中la脚广告，因此他们倾向于忽略它们。这个原理似乎也适用于旋转滑块。

第二项研究来自圣母大学。他们发现只有大约1% 的访问者点击了滑块，84% 点击了第一个位置的项目。

如果只有1% 的人点击占据你最有价值的首页房地产的项目，特别是当84% 的点击都在第一个项目上的时候，有一个网站滑块有什么意义？为什么要用难以跟踪的移动来惹恼人们？为什么不给他们一个选择的单一选项，因为大多数人还是点击了第一个项目？

那么，为什么这么多人使用滑块，因为它们看起来如此无效？

我能想到的最好的理论是，它似乎是一个很酷的高科技功能，而且web开发人员很容易实现。基于这两个因素，企业主说，“嘿，我想要一个花哨的移动滑块的东西，” 网页设计师遵守，因为他们看起来 “很酷”，并不难做到。

但是网站所有者需要考虑他们是否会有效，以及他们是否是在网站上传达信息的最佳方式，这是peep Laja，Chris Goward，Tim Ash和许多其他智能互联网营销人员不再相信的情况。

要解决这个问题，首先问自己什么是最好的方式来呈现你的信息，而不是选择一个你喜欢的网站并复制他们的设计，包括他们在主页上使用的看起来很酷的滑块。

几年前，我和我的一个朋友一起使用了这种方法，他正在为他的辅导公司-Genesis补习建立一个网站。

他和他的商业伙伴走近我说，“嘿，我们想建立一个网站 ...... 我们想在主页上有一个包含这些信息的滑块，” 然后他给我看了一张他们在学校分发的传单，宣传他们的服务。传单很漂亮，提供的信息非常好，而且，令人惊讶的是，没有包括滑块 (那些讨厌的滑块似乎并不能很好地转化为印刷传单的世界)。

所以，我建议，“你为什么不复制你已经在你主页上工作的小册子，然后在下面放一个联系按钮以及你的电话号码和电子邮件。”我们试过了，结果是这样的...

该站点最终看起来很棒，避免了可怕的默认滑块，并且转换良好。有什么不喜欢的？

在构建自己的网站时，请按照以下说明获得相同的结果:

记住不要仅仅因为其他人都在这样做而盲目地添加滑块 (即使你的设计师推荐了一个)。考虑什么是在你的主页上展示你的信息的最佳方式，而不是盲目地复制你的竞争对手正在做的事情。选择一个重要的报价在a-Space中列出你的主页，然后去做。总会有其他你想推广的东西，但是你可以在页面的下面或者在页面顶部有一个按钮。选择一个报价，使其突出，然后让路，让你的网站开始工作。真正敲定最后一点: 想想你想让你的网站做的第一目标。专注于这一点，所有其他的行动呼吁都可以。

同样，如果您不想接受我的话，可以阅读以下一些支持这一点的文章:

旋转横幅？只是说不!轮换报价-主页设计的祸害

错误 #3: 低对比度字体

人们犯的另一个巨大错误是使用低对比度的字体。

低对比度意味着浅色背景上的字体较浅或深色背景上的字体较深。我不确定这在印刷设计中是否看起来不错，但在网络上从来都不是一个好主意。

你总是想确保你的网站内容尽可能容易阅读。上面引用的Smashing杂志文章告诉我们，40岁时通过眼睛的光量仅为20岁时通过眼睛的光量的一半。这下降到60岁的20%。最重要的是，将近9% 的美国人有视力障碍。

考虑到这些统计数据，你真的想让访问者更难阅读你的内容吗，尤其是在你花了这么多钱，一开始就努力让他们进入你的网站之后？

字体的低对比度总是一个坏主意。

您可以通过始终使用高对比度字体来解决此问题。如果背景是深色的，字体应该是浅色的，如果背景是浅色的，字体应该是深色的。

事实上，我会更进一步。除了黑色或白色之外，很少有需要使用任何字体颜色的时候。有时设计师会在白底选择较浅的灰色字体，或在深蓝色背景选择浅蓝色字体。

为什么？这真的更容易阅读，还是您只是想添加 “视觉吸引力”？书籍在白色背景上使用黑色字体是有原因的-易于阅读。网站最好遵循这个例子。

以下是一些字体对比度大的示例:

帮助童子军博客

Evernote

这是图像对比度良好的示例，这并不容易做到。

哈利的

要记住的教训是，字体应始终与其背后的背景具有较高的对比度。如果你发现文本很难阅读，并且觉得应该有更多的对比，不要犹豫打电话给你的设计师，让他们知道。你的网站不是设计展示。这是一个进行销售和增加转化的地方。

奖励提示: 高对比度不仅很重要，而且您还希望谨慎使用反向类型。(反向类型是黑色 (或彩色) 背景上的白色文本，而不是白色背景上的黑色文本。)

实际上，有史以来最伟大的广告人之一大卫·奥格维 (David Ogilvy) 表示，永远不要将广告设置为反向类型。澳大利亚最大的汽车出版物的编辑科林·惠尔登 (Colin Wheildon) 着手检验这一理论。他的发现令人震惊。

根据研究，以下是不同颜色和背景的理解水平列表:

白色黑色文字: 70% 好，19% 公平，11% 黑色的可怜的白色文字: 0% 好，12% 公平，88% 紫色的可怜的白色文字: 2% 好，16% 公平，82% 宝蓝色的poorWhite文字: 0% 好，4% 公平，96% 差

这不是不可思议吗？与彩色背景上的白色文本相比，白色背景上的黑色文本的结果几乎完全相反!

外卖是:

永远记得使用高对比度的字体，但也... 谨慎使用反向字体。

有时反向类型看起来不错，但它可能会对可读性和保留性产生巨大影响。因此，您应该仅将其用于网站中不需要太多阅读且不那么重要的部分。总的来说，在使用反向类型之前，你应该三思而后行。

这种反向类型在HubSpot的主页上看起来 “很酷”，但对于可读性和理解性来说可能不是最好的，尤其是在整个网站上最重要的空间中。

错误4: 文本的行高较差

文本的行高经常被忽略。许多网页设计师和开发人员选择一种字体，选择一个尺寸，任意选择一个行高，然后将其称为一天。

但是线条高度对网站的整体设计和吸引力产生了令人惊讶的重大影响。选择错误的行高会使字体看起来很拥挤。它会毁了你的整个设计。

好消息是，有才华的网页设计师对此有很好的眼光，会自动为你选择一个好的身高。坏消息是，普通的web开发人员没有这种设计的眼光，并且经常会选择错误的行高。

DIYThemes的克里斯·皮尔森 (Chris pearson) 对此感到如此强烈，以至于他建立了一个线高计算器conpd，用于所谓的黄金比例。这是Google对黄金比例的定义:

一个更简单的定义是，黄金比例是一个被认为在美学上令人愉悦的比例。克里斯·皮尔森 (Chris pearson) 不会让您对更多细节感到厌烦，他使用此比率来构建一个计算器，该计算器将字体大小和内容宽度结合在一起，以得出理想的行高。好消息是，计算器使这个超级容易做到。你只需插入你的字体大小和内容宽度，计算器就会告诉你你的行高应该是多少。

你可能没有意识到这一点，但有些设计和字体组合比其他设计和字体组合更令人愉悦是有原因的。伟大的设计师知道如何自己实现黄金分割，但是克里斯·皮尔森 (Chris pearson) 的计算器使其他所有人都可以轻松地做到这一点。

错误 #5: 太长的线长

您可能会犯的另一个错误是创建过长的文本行。

那么，最佳线长是多少？

Baymard研究所发表了一篇文章，说每行50到60个字符是最好的，最多可以接受75个字符。

行长之所以如此重要，是因为长一行文字在网上阅读令人生畏。如果线路长度太长，有些人将不会开始阅读，因为它看起来不是很好的阅读体验。

另一方面，如果行长太短，读者不得不频繁地开始和停止行，这变得令人讨厌。

响应式设计的普及使这个问题更加复杂。如果你没有为内容部分设置最大宽度，你就无法知道你的博客或任何其他文本的行长会有多长，因为屏幕尺寸变化很大。

在撰写参考文章时，Baymard研究所通过为其文本设置516像素的最大宽度来解决此问题，该宽度在18 px的字体大小下平均每行65个字符。这创造了一个很好的阅读体验，你可以在下图中看到。

再一次，这不是所有设计师都会关注的设计细节，但是现在你知道长行文字令人生畏，你可以指导你的设计师和开发人员确保你为读者提供最佳体验。

错误 #6: 没有要求采取行动的重音颜色

下一个网页设计不是使用强调颜色。我的意思是:

聪明的互联网营销人员知道，您需要一种良好的口音颜色来吸引人们对关键行动的关注。如果你要求某人 “立即购买” 或 “开始免费试用”，你要确保你使用的按钮颜色会吸引人们的注意力，这样他们就会点击并采取你想要他们采取的行动。

这看起来很简单，但我见过多次设计师没有为最重要的行动号召保留口音颜色的场合。取而代之的是，他们选择了一种已经在网站上用于其他用途的颜色。这不是个好主意。

以下是一些强调颜色的经验法则:

它需要足够明亮，以引起您对任何试图引起注意的关注。它需要与网站上的其他颜色互补，以免冲突。它需要从任何背景中脱颖而出。这意味着蓝色背景上的蓝色按钮可能不是一个好主意。它需要保留给关键的行动调用，这样它就不会因为在网站上被过度使用而融入其中。

在下面的示例中，您会注意到CTA按钮是亮橙色。这有助于它从白色背景中脱颖而出。另外，橙色在设计中没有在其他任何地方使用 (徽标中的飞溅物很小，以至于不会引起人们的注意)。如果你愿意，你可以在这里查看整页。

错误7: 常见的违反设计原则

最后一个致命的错误是没有遵循共同的设计原则，这是史蒂夫·克鲁格 (Steve Krug) 在他的《不要让我思考》一书中谈到的。

他提出的观点是，网站访问者习惯于能够在某些地方找到某些功能。例如，它们习惯于在页面的左上角查找徽标和标语，在右上角查找菜单。如果他们想了解更多关于该组织的信息或取得联系，他们也习惯于能够找到 “关于” 页面和 “联系” 页面。

这意味着在你的网站上包含这些功能是一个好主意，在打破常见的设计原则之前，你应该三思而后行。这可能是你认为显而易见的事情，但并不总是如此。

例如，一些网站所有者决定发挥超级创意，并提出一种不同的方式来显示菜单。它不是位于通常发现的顶部，而是包含在背景设计中内置的树的树枝中 (或其他一些创造性的方式，以包含标准方式以外的菜单)。

有时这些疯狂的新方法会起作用，但通常不会。在大多数情况下，遵循共同的设计原则 (这样你就不会混淆访问者) 要比想出一个可能有创意但不直观的疯狂新布局好得多。

结论

希望通过阅读这七个致命的网页设计罪，您已经学到了很多东西。它们中的大多数似乎是常识，但它们都比你想象的更频繁地被打破。

请记住，如果您要进行任何设计更改，请确保测试更改以查看它们如何影响您的底线! (提示: 为此使用KISSmetrics。)

既然你已经知道了这些原则，请注意你遇到的网站，看看有多少人遵循这些规则。我相信你会开始意识到这些规则有多重要，这将强化为什么它们是重要的遵守。

交给你: 我是否错过了您经常在网上看到的任何致命的网页设计罪？留下评论添加到此列表中。

关于作者: Joe putnam (@ josephputnam) 是iSpionage的增长经理，iSpionage是ppC竞争情报工具，可让聪明的广告商 (和代理商) 更容易更快地建立有利可图的广告系列。立即注册免费的iSpy竞争对手警报，以获取有关您选择的网站的新ppC关键字，广告副本和SEO条款的自动更新。