不惜一切代价避免的 8 个常见网页设计错误（以及 Divi 如何提供帮助）

使用 WordPress 和合适的主题，可以在几个小时内轻松启动并运行站点。 然而，创造一个看起来专业的设计需要努力——特别是如果你不是一个使用虚拟画笔的手。

幸运的是，您无需成为经验丰富的设计师即可构建一个有吸引力的网站。 只要你努力避免一些最常见的陷阱，你的设计应该看起来和专业人士一样好。

在本文中，我们将探讨什么是好的网页设计，以及人们在此过程中最常犯的八个错误。

让我们开始吧！

什么是好的网页设计

没有什么构成“好”的网页设计一个通用的标准，但也有被普遍许多网页设计师所接受的一些最佳做法。 例如：

• 好的网页设计专注于实现其目标。
• 好的网页设计应该考虑可用性。
• 它应该突出显示您网站的关键元素及其信息。
• 一个设计良好的网站应该易于浏览。
• 它应该在整个站点中保持一致。
• 它应该在移动设备上显示良好。

过去我们已经讨论过其中的一些主题，我们也将在本文中讨论其中的一些主题。 现在，让我们讨论什么不构成好的网页设计。

不惜一切代价避免的 8 个常见网页设计错误

虽然有很多失误设计你的网站时，你可以做的，我们决定坚持八个最常见，最容易避免。 如果您努力避开这些绊脚石，您的设计应该遥遥领先。

1.可读性差

无论您使用哪种类型的网站，书面内容都可能占主导地位。 如果这适用于您，那么让您的每个帖子尽可能易于阅读非常重要，以免使您的访问者感到沮丧。

可读性差的设计示例。

对于书籍，人们可能愿意忍受长长的不间断的段落，但对于网站则不能这样说。 易于扫描的内容使访问者能够快速理解您的写作并找到他们正在寻找的内容。

有很多方法可以使您的内容更具可读性，但这些是最容易考虑的方法：

• 将您的帖子和页面分成逻辑部分，如果可能，使用副标题。
• 使您的副标题尽可能具有描述性。 这将使读者能够更轻松地浏览内容。
• 考虑实施一种对眼睛来说很容易的配色方案。 毕竟，您希望访问者留下来阅读您的内容。
• 只要有可能，请在大部分帖子中使用 sans-serif 字体。 事实证明，它们比衬线字体更具可读性。

这应该确保您的内容从设计的角度来看不是一件需要通读的苦差事。

迪维如何提供帮助

由于其主题和模块定制器，Divi 使您能够轻松解决可读性问题。 您可以从仪表板上的Divi选项卡访问这两个功能，然后调整字体设置、标题样式，甚至部分的大小（如果其中某些部分太小而无法正确阅读）。

如果您想进行进一步的调整，您可以随时使用 Divi Builder 查看每个模块的高级设计设置。 这些部分几乎包含了提高可读性所需的一切（包括我们前面提到的那些），您还可以在不离开构建器的情况下预览对网站的任何更改。

2. 糟糕的导航

一个网站不应该很难浏览，任何用户都应该能够找到他们正在寻找的内容，而无需进行挖掘。 如果您的网站不符合这两个标准，您就有工作要做。

没有什么比浏览带有无意义导航的网站更令人沮丧的了。 如果其导航栏放置在奇怪的位置、包含损坏的链接或随意组织，则可能会发生这种情况。 此外，这种挫败感可能会导致更高的跳出率、更低的转化率（因为人们将无法找到他们想要的东西）以及总体上更少的回访。

没有导航菜单的网站示例。

值得庆幸的是，如今大多数网站都在简单导航的好处方面受过良好教育。 但是，始终值得考虑以下提示以保持您的易于使用：

• 确保您的导航菜单易于访问。 我们建议放弃所谓的“隐藏”或“弹出”菜单，除非我们谈论的是移动实现。
• 用户应该能够破译每个链接将引导他们到达的位置以及他们将在那里找到的信息。
• 如果您的网站包含多个类别，您可能需要实施多级菜单。 在这种情况下，请确保您的设计暗示了组件之间的清晰层次结构。

许多人倾向于不小心将导航菜单放在一起。 但是，这些元素对于您网站的成功至关重要，需要相应地对待它们。 不要犯同样的错误！

迪维如何提供帮助

Divi 使您可以使用其标题即时调整导航设置 和模块定制器，它们的工作方式与我们在上一节中讨论的工具大致相同。 如果您更愿意完全切换导航样式，可以通过修改主题设置来实现：

最后，您还可以使用定制器或帖子导航模块来调整帖子导航设置。 此功能使您可以调整用户单击上一个或下一个选项时应显示的帖子，以及全局或针对特定设备隐藏它们。

3. 不平衡的负空间

如果使用得当，负空间可以增强它周围的内容。 这使您能够将访问者的目光引导到您希望他们去的地方。

如何正确使用负空间。

相反，在关键部分周围没有留下足够的负空间会导致您的网站看起来很混乱。

杂乱设计的一个例子。

在这个例子中，用户可能会感到不知所措，导致他们远离您的网站，并转向竞争对手。

负空间也可用于提高网站的可读性。 您可以通过在每个副标题之间留出一些额外空间，并使用图像和列表来分解长段落来实现这一点。 这里的目标是让您的内容看起来井井有条，并防止读者感到疲劳。 您还可以将其中一些基础知识应用到您网站的整体设计中，以保持内容整洁（正如我们在博客中所做的那样）。

获得正确的负空间可能很棘手，但这是为您的设计实现现代、干净外观的最简单方法之一。

迪维如何提供帮助

Divi 的高级设计和自定义 CSS选项使您可以调整设计的几乎任何元素，包括您选择的任何部分的边距、填充和装订线，这足以利用负空间获得创意：

修改这些选项中的每一个都非常简单。 在大多数情况下，您需要做的就是以像素为单位设置它们的值，使用“预览”功能检查它们是否在标记上，并在必要时继续调整它直到到达那里。

4. 未优化的号召性用语 (CTA)

CTA 有多种形式，例如按钮、标题，甚至纯文本。 然而，它们的目的总是相同的——提示读者采取行动。 在我们的博客上查看我们如何使用它们的示例：

如果您对网络营销略知一二，就会知道好的 CTA 是多么重要。 使用正确的信息可以显着提高您的转化率，而您呈现它们的方式也同样重要。 相反，不实施 CTA 或使用含糊不清的词可能会导致您的转换受到影响。

当谈到 CTA 时，您需要牢记两件事——位置和突出。 这是如何做到的：

• 理想情况下，您应该尝试在页面的开头和结尾附近包含 CTA。 这将使您能够抓住准备立即转换的访问者，以及阅读您的内容后感兴趣的访问者。
• 您的 CTA 应该从页面的其余部分中脱颖而出。 您可以通过利用对比色、独特的按钮设计，甚至仅使用粗体文本来做到这一点。
• 确保您的 CTA 易于点击，尤其是对于移动用户。 通常，这意味着不要让它们过小。

在转换方面稍微注意您的 CTA 可以带来很大的回报。 无论您是寻求电子邮件订阅还是销售，CTA 对您的工作都至关重要。

迪维如何提供帮助

迪维行动呼吁模块配备了几乎所有你需要确保你的商品交易顾问中脱颖而出，其中包括设置自定义选项，应对风格和移动优化：

此外，您始终可以使用 Divi 的内置拆分测试功能 Divi Leads 来优化您的 CTA。 这为 Divi 带来了强大的拆分测试功能，并直接从您的 WordPress 仪表板进行管理。

5. 缺乏移动优化

确保您的网站对移动设备友好从未如此重要。 移动流量在 2016 年首次超过台式机，而且这种趋势短期内不会逆转。

优化不佳的移动网站的示例。

简而言之，如果您没有为移动用户优化您的网页设计，现在将是开始的绝佳时机。 否则，您可能会冒着将大部分流量吓跑的风险。

幸运的是，我们已经涵盖了您在移动优化方面需要牢记的几个要素，例如：

• 可读性：确保您的内容格式正确很重要，因为您将处理小视口。
• 导航：考虑到移动用户无法使用鼠标，您的导航菜单应该易于查找和使用。
• CTA 优化：就像您的菜单一样，这些需要易于识别和交互。

关于这个主题还有很多要说的，我们过去已经深入讨论过。 有关该主题的更多信息，请查看移动网页设计优化的十个技巧列表。

迪维如何提供帮助

在移动优化方面，Divi 支持您！ 该主题针对开箱即用的响应能力进行了优化，您始终可以使用主题定制器功能检查您的网站在移动设备上的外观。

但是，如果您更愿意采用更实际的方法，您可以通过专用的“高级设计”菜单微调每个模块的显示方式。 这使您可以调整桌面、平板电脑和移动视口的设计控件。

6. 不一致和不专注的设计

理想情况下，您的整个网站应该采用统一的设计，重点明确。 在单个站点中使用多种样式可能会产生不和谐的效果，甚至可能会使您的用户感到困惑。

更重要的是，为您的网站创建独特的标识——例如调色板和统一的风格——将增强其品牌形象。 以脸书为例。 多年来，它们一直保持着相同的风格——干净且带有可识别的蓝色调色板。 它可能不是网络上最时尚的设计，但它完成了工作，现在，它已与品牌相关联。

你在网站上使用的风格主要是个人决定——只要你保持统一就可以了。 如果您正在为细节而苦苦挣扎，您可以随时从 Material Design 等视觉设计语言中寻求灵感。

迪维如何提供帮助

Divi 的所有模块都采用统一样式，开箱即用。 但是，您也可以使用高级设计设置和自定义 CSS功能单独自定义它们，并将您的调整保存到您的 Divi 库以备将来使用：

主题定制器还使您能够即时调整整个主题的美感，它包括用于更改配色方案和移动样式的选项以及其他功能。

7. 图像和动画的错误使用

很多人认为在网站上尽可能包含图像和动画是一件好事。 如果您碰巧记得 2000 年代初期基于 Flash 的网站的流行，您应该知道我们在说什么。

过分依赖这些媒体类型中的任何一种不仅会使您的网站看起来杂乱无章，而且还会影响其加载速度（几乎没有比网站缓慢更糟糕的事情了）。 更重要的是，如果您弄错了，它还会对您的搜索引擎优化 (SEO) 产生影响。

网页上不必要的动画示例。

当然，几乎每个网站都需要一些图形来增强其设计，这里的关键词是“增强”。 您选择包含的任何图像或动画都不应分散您的内容，并且只有在相关时才应使用它们。 例如，在本文中，我们仅包含图像以提供上下文，而不是作为主要焦点。

最后，正如我们在最近关于网页设计趋势的文章中所讨论的，您还应该考虑尽可能用微交互替换成熟的动画。 它们的干扰性要小得多，而且它们仍然使您能够向用户突出显示特定操作。

迪维如何提供帮助

Divi 的许多模块都带有内置的精美动画，不会分散访问者对您内容的注意力。 如果您不反对卷起袖子，您甚至可以使用 CSS 添加自己的 CSS。

此外，Divi 的一些模块（例如Fullwidth Header ）使您能够实现流行的视差功能。 你甚至可以手动将它添加到一些默认不支持它的模块中，就像 Divi 的Slider 一样。

8.“隐藏”联系信息

最后但并非最不重要的，让我们谈谈联系方式。 根据您设计的网站类型，您的访问者中至少有一些可能希望与您或负责人取得联系。 确保您的联系信息突出显示是启用此功能的最佳方式。

不言而喻，但如果某些网站不让他们的联系信息易于查找，它们会比其他网站受到更大的影响。 例如，服务网站上缺少或隐藏的联系方式可能会使您失去商机而付出沉重代价。

对于大多数网站，我们建议您设置一个简单的联系表单，该表单应该可以在您的主页、其自己的部分或两者中找到：

根据您网站的设计，将您的电子邮件或电话添加到您的页脚（或二级菜单）也是一种很好的方法。 不管你包括什么，主要的收获是它必须是突出的！

迪维如何提供帮助

与大多数关键功能一样，Divi 提供了带有优化格式的预设置样式的联系表单模块。 不久前，我们还发布了一个免费的联系页面布局包，如果您正在寻找一个简单而现代的设计，这将是一个很大的帮助：

如果您更愿意手动调整您的设计，Divi 的联系表单模块可让您根据需要添加任意数量的字段并单独设置它们的样式。 您甚至可以设置成功消息供您的用户在提交后阅读，所有这些都无需离开模块的设置。

结论

由于其易于掌握的功能，WordPress 用户在构建有吸引力的网站时比大多数人更容易。 然而，正因为如此，糟糕的设计选择很容​​易渗透到您的项目中，这很容易降低整体视觉质量。

在这篇文章中，我们向您展示了您在下一个项目中需要避免的八个最常见的网页设计陷阱。 让我们回顾一下：

1. 可读性差。
2. 糟糕的导航。
3. 不平衡的负空间。
4. 未优化的 CTA。
5. 缺乏移动优化。
6. 不一致和不集中的设计。
7. 图像和动画的错误使用。
8. “隐藏”的联系信息。

您认为每个用户应该避免的第一个网页设计错误是什么？ 订阅并在下面的评论部分与我们分享您的想法！

美伦/shutterstock.com 的文章缩略图