17 个常见的网站设计错误以及如何避免它们

网页设计错误对企业来说可能代价高昂，导致潜在客户和收入流失。 糟糕的用户体验会赶走访问者，如果您的网站在视觉上不吸引人或不易于浏览，甚至会让人们望而却步。

根据斯坦福大学进行的一项研究，75% 的人仅根据其网页设计对整个公司做出判断。

这意味着在网页设计过程中避免错误更为重要，您不觉得吗？

这就是为什么今天我们要介绍 17 个常见的网页设计错误以及如何避免它们。

到最后，您会知道应该避免哪些设计错误，这样您的网站才能最好地代表您和您的公司。

1. 每个页面没有明确的目标

为您网站上的每个页面设定一个特定的目的很重要。 每个页面都应该有一个明确的目标，无论是告知、说服还是销售。

如果没有明确的目标，您的页面可能会缺乏方向并且无法有效地传达其信息。

例如，假设一家时装零售商的主页包含有关公司历史、最新系列和促销商品的杂乱信息。

这可能会让用户感到困惑，他们可能不知道页面的主要目的是什么或者他们应该采取什么行动。

要解决此问题，零售商需要确定每个页面的主要目标，并通过使用标题、副标题和清晰的布局让用户清楚了解。

公司历史、当前收藏和销售项目应该有单独的页面。 所有这些都有清晰的标题和号召性用语，而不是将所有这些信息都扔到一个页面上。

在现实世界中，您只需导航至 eBay 即可查看此问题的一个很好的示例。

该网站的设计不仅混乱，而且很难解析出您应该做什么。

主页目前显示一个滑块，上面有特价商品，但也有很多广告。 很难说出您应该点击什么。

你应该注册一个帐户吗？ 谁知道！

由于 eBay 的全部目的是寻找待售物品进行拍卖，因此将搜索栏放在主页上更显眼的位置会更有意义。

毕竟，这就是该网站的全部意义所在——搜索要买的东西！

2.信息不足

您的网站在设计时应考虑到用户。 这意味着包括足够的信息让他们做出明智的决定。

但不要太多以至于它变得势不可挡。

以电子产品零售商的产品页面为例，该页面仅包含一张小图片，没有关于产品的详细信息。

如果没有规格、定价和客户评论，您可能没有足够的信息来确定产品是否适合您。

相反，您可以包括多张高质量图像，以及详细的描述和规格。

您还可以考虑包括定价、客户评论和任何其他可以帮助您在购买前做出明智决定的相关信息。

例如，Dom Perignon 网站看起来不错，但信息非常稀疏。 它是极简主义带来不利影响的一个很好的例子。

是的，流线型设计很可爱，如果您正在看唐培里侬 (Dom Perignon)，您可能知道自己在寻找什么。

但是，如果以向新访问者提供有用信息为代价，那么您可能做得太过火了。

3.没有优化网站结构

据 Top Design Firms 称，访问网站的人中有 38% 会立即评估其导航链接、菜单和整体结构。

这是有道理的。 一个组织良好的网站可以让用户轻松浏览并找到他们正在寻找的内容。

另一方面，结构不佳的网站可能会令人沮丧并导致用户离开。

举一个假设的例子，假设有一个医疗保健网站，其菜单结构令人困惑且没有清晰的层次结构。

该菜单包括有关医疗保健提供者、他们的服务和患者资源的混合信息，但用户不清楚在哪里可以找到特定信息。 这可能会使新患者难以导航以找到正确的表格来进行首次预约。

或者，它可能会使其他相关方难以找出医疗保健提供者提供的服务。

您可以在 Toronto Cupcake 网站上看到此类问题的完整展示。

乍一看，整个网站似乎只是纸杯蛋糕盒的图片和一些文字。 但仔细检查后，网站页脚上有文本链接。

屏幕左侧还有一个汉堡菜单，但即使显示它也无济于事：下拉菜单直接向下并覆盖其他菜单项。

为了解决这个问题，网站应该有明确定义的类别，具有逻辑菜单结构和层次结构。

考虑对向外堆叠的子类别使用下拉菜单，以免遮挡其他选项。

最好坚持熟悉的菜单结构和定位，将文本链接放置在网站顶部，并将任何汉堡菜单链接放置在右上角。

对于我们的示例医疗保健网站，他们可以为“关于我们”、“服务”和“患者资源”提供单独的顶级菜单项，每个菜单项都有子菜单项。

4. 没有明确的 CTA（号召性用语）

号召性用语是一个按钮或链接，告诉用户您希望他们下一步做什么。 它可以是进行购买、注册时事通讯或下载资源。

如果没有明确的 CTA，用户可能不知道要采取什么行动。

为了说明这一点，假设有一个软件公司的登陆页面，其中包含大量有关产品的信息，但没有明确的 CTA 按钮。

用户可能对产品感兴趣，但如果没有突出的 CTA，他们可能不知道如何进行下一步，无论是注册时事通讯还是进行购买。

要解决此问题，您应该在每个页面上包含一个突出的 CTA 按钮，并明确您希望用户执行的操作。

对于我们上面讨论的假冒软件公司，他们可以包含一个 CTA 按钮，上面写着“注册免费试用”或“立即购买”。

您可以在 Vortex Technology 网站上看到这一点。

当然，该设计非常过时，但也不清楚您应该点击此处的确切内容。

这个网站是为谁准备的？ 他们提供什么？

5.太多的号召性用语

虽然拥有清晰的 CTA 很重要，但太多可能会让人不知所措，并分散用户对页面主要目标的注意力。

例如，假设您有一个旅游网站的主页，整个页面上散布着多个 CTA 按钮。

该页面包括用于预订航班、租车和酒店的按钮，以及新闻通讯注册表单和社交媒体链接。

这可能会让用户感到困惑，他们可能不知道首先要采取什么行动，或者可能会对众多选项感到不知所措。

要解决此问题，您可以将 CTA 的数量限制为每页一到两个，尤其是首屏。

对于这个旅游网站示例，他们可以选择最重要的操作，例如预订航班，并将其作为主要 CTA。

它们还可以包括辅助 CTA，例如时事通讯注册表单，但使其不如主要 CTA 突出，以尽量减少混淆。

虽然显然是一个成功的电子商务网站，但沃尔玛提供了一个很好的例子来说明什么是不该做的。

他们的主页上布满了 CTA，提示访问者开始购物、选择送货时间、选择当地商店并注册成为 Walmart+ 的会员。

很多！

6. 不构建响应式页面

随着移动设备的使用越来越多，网站必须适合移动设备。 这意味着网站应该自动调整以适应正在查看的设备的屏幕尺寸。

不应该做的一个很好的例子是博客不适合移动设备并且难以在手机上导航。

该网站使用不适应屏幕大小的固定宽度布局，使得阅读文本和点击链接变得困难。

这是一个不容忽视的问题。 根据 GoodFirms 于 2021 年进行的研究，超过一半的互联网流量来自移动设备。

此外，超过 53% 的网页设计师将缺乏跨所有平台的响应能力作为网站需要重新设计的主要原因。

在这个时代，真的没有任何借口。 尽管如此，Craigslist 网站没有响应，这使得该网站在移动设备上的导航变得复杂。

如果您想在访问者所在的位置（在智能手机或平板电脑上）与他们会面，您需要确保您的网站适合移动设备。

显然，这里最好的解决方法是使用响应式设计技术来确保您的网站在所有设备上的外观和功能都很好。

这包括使用流畅的网格和响应式图像，以及在不同设备上测试网站以确保其外观和运行良好。

您还可以选择默认可以解决此问题的响应式 WordPress 主题。

我们的 Astra WordPress 主题是一个不错的选择，因为它具有内置的移动响应能力和许多自定义选项。

7. 没有优化空格

空白，也称为负空间，是网页上元素周围的空白区域。

正确使用空白可以帮助集中用户的注意力并使页面更具视觉吸引力。

假设您偶然浏览了一个烹饪网站。 它的布局杂乱无章，空白很少。

该页面包含多个图像、广告和链接，使用户很难将注意力集中在任何一个元素上。 除非是超级知名品牌，否则这里的跳出率可能会很高。

您可以在演员 Ed Begley Jr 的可持续生活方式网站上看到空白使用不当。

虽然整体设计还不错，但网站的空白部分发生了一些奇怪的事情，特别是在特色滑块周围。 它淡出部分图像，使对齐看起来不对。

博文的显示位置也存在问题，屏幕右侧有一大片区域是空的。

要解决此问题，您可以有效地使用空格来分隔不同的部分并将用户的注意力吸引到特定元素。

这可以通过使用边距、填充和行距来实现。

8.广告太多

虽然广告可以成为很好的收入来源，但过多的广告会让人不知所措并分散注意力。

它会对用户体验产生负面影响并赶走潜在客户。

每个页面上都有横幅广告和不断打扰用户的弹出式广告的新闻网站看起来并不好看。

这对用户来说可能很烦人，他们可能会觉得自己不断被广告轰炸，并且不太可能返回。

您可以在《每日邮报》网站上看到这个问题的实际效果。 它的主页上到处都是广告，这些广告会主动分散人们对其内容的注意力。

限制广告的数量并确保它们是相关的并且不会过于干扰。

考虑用户体验并确保广告不会影响网站内容。

9.弹出窗口太多

弹出窗口可能是让用户采取特定操作的有用方式，但弹出窗口太多可能会令人厌烦并赶走用户。

一个很好的例子是一个慈善组织的网站，它有多个在页面加载后立即出现的弹出窗口。

这可能会让用户感到沮丧，他们可能会觉得自己不断受到捐款请求的轰炸，并且不太可能采取行动。

有时，弹出窗口的数量甚至都不是问题，问题在于它们的普遍侵入性。

当您第一次访问卫报上的某个页面时，您会在屏幕底部看到一个大弹出窗口，要求您捐款。

当然，当与屏幕顶部网站的大型广告空间配对时，此弹出窗口会遮挡网站的全部内容。

值得庆幸的是，这是一个简单的修复。

只需在必要时谨慎使用弹出窗口即可。

确保它们不会过于干扰并且可以轻松关闭。 考虑用户体验并确保弹出窗口不会影响内容。

10.信息太多

虽然提供足够的信息很重要，但信息过多可能会让人不知所措并导致访客离开。

这种情况的一个典型例子是家具零售商的产品页面，其中包含冗长、无组织的描述，难以阅读。

该页面将包括多个文本段落，以及功能和技术规格列表。

以这种方式设计的页面对于可能没有时间或耐心阅读所有信息的人来说会让人不知所措。

不是为了强调这一点，但 eBay 再次成为这个问题的一个很好的例子。

单个产品页面是用户生成的，但它们的整体布局通常非常繁琐和混乱。

令人惊奇的是，任何人都能理解所呈现的信息，无论是产品图片、规格、功能还是评论。

保持信息简洁和有条理。 使用标题、要点和图像来分解大块文本。

考虑哪些信息对人们了解和突出显示最重要。

在次要位置包括其他详细信息，例如单独的“技术规格”部分。

11.排版不一致或选择不当

排版是网页设计的一个重要方面，因为它有助于创建信息层次结构并设定网站的基调。

不一致或选择不当的排版可能会分散注意力并使网站难以阅读。

假设您有一个个人博客，但现在想让它更专业。

如果它有多种字体样式和大小与整体设计不匹配，并且页面包含无衬线字体的标题、衬线字体的正文和手写字体的标题，则可能会造成混淆。

访问者很难一眼就区分出不同层次的信息，这是不好的。

现在，Pacific Northwest X-Ray Inc. 网站上的排版可能是最不关心的问题，但无论如何仍然值得一提。

该网站不仅看起来像是建于 1997 年，而且还具有多种颜色和大小冲突的字体。

好的网站排版将是直观的并适合整体设计。

为此，请为标题和正文选择一致的字体样式和大小，并确保它适合网站的基调和品牌。

考虑为不同级别的标题和正文文本使用具有不同粗细和大小的单一字体系列，以实现更大的一致性。

12. 跨页面的品牌不一致

拥有一致的品牌对于建立信任很重要。 跨页面不一致的品牌可能会造成混淆，并且难以识别您的业务。

这个问题实际上看起来像一个小企业的网站，在不同的页面上有不同的标志和配色方案。

主页可能使用蓝绿配色和圆形标志，而“关于我们”页面使用红黄配色和矩形标志。

这可能会让访问者感到困惑，他们甚至可能认为他们在途中离开了您的网站。

尽管 New Century Chamber Orchestra 网站的整体设计不错，但由于颜色选择如此不一致，他们错失了重要的品牌推广机会。

徽标很漂亮，但遗憾的是其中的颜色并未在整个网站中使用。

只是看起来有点随意。

您可以通过在网站的所有页面上使用一致的徽标、配色方案和设计元素来避免此问题。

选择代表您品牌的调色板，并在每个页面上一致地使用它。 在所有页面上也使用相同的徽标。

13. 不利用 404 页面

当有人试图访问您网站上不存在的页面时，将显示 404 页面。

您可以利用这个机会引导用户访问您网站的其他部分，而不是仅仅显示无聊的错误消息。

错失机会的一个例子是，如果您有一个基本的 404 页面，其中只有一条错误消息并且没有用户选项。

当然，它可能会让访问者知道他们访问了一个不存在的页面，但是如果不能将他们重定向到其他地方，您就会完全失去他们。

如果不向该空间添加某种定制，您将错失创造更积极的用户体验并让访问者对您的品牌留下持久印象的机会。

Translate.com 确实有一个 404 页面，可以将访问者重定向回其主页，所以这是一个很好的举措。

然而，它错过了一个让人们了解他们的品牌和使命宣言的重要机会。 相反，它只是一条平淡无奇的消息，“抱歉，我们找不到该页面”。

更好的选择是构建自定义 404 页面，其中包含指向您网站上其他页面的链接或搜索栏，以帮助用户找到他们正在寻找的内容。

考虑加入幽默或创意的信息来缓和心情，减少体验的沮丧。

14. 没有优化速度和性能

当您的网站滞后时，可能会导致不满意的用户体验并促使他们放弃该页面。

这也会对您的搜索引擎排名以及整体业务产生不利影响。

您经常会在具有需要很长时间加载的大图像文件的网站上看到这种情况。 这可能令人沮丧，访问者通常会在加载完成之前放弃并离开网站。

Cole Haan 网站就是一个很好的例子。 尽管该网站的设计很可爱并且很适合其品牌，但主页视频和大图片会大大减慢加载时间。

值得庆幸的是，解决这个问题并不难。

只需优化图像和其他媒体文件、使用缓存并尽量减少使用繁重的脚本即可提高网站速度和性能。

使用像 Presto Player 这样的智能视频播放器也可以最大限度地减少视频加载时间。

考虑使用 WP Rocket 之类的工具来测试您网站的性能，只需点击几下即可对其进行改进。

像 Imagify 这样的插件是优化图像的另一个不错的选择。 它可以在不影响质量的情况下减小图像的文件大小。

15.不包括搜索选项

搜索栏是一个有用的功能，可以快速找到您网站上的特定信息。

没有它，访问者将不得不手动浏览您的网站，以期找到他们正在寻找的内容。

现在想象一个没有搜索栏的大型零售连锁店的网站。

这无疑会使用户很难在商店内找到特定的产品或部门。 很可能很大一部分潜在客户会感到沮丧并空手而归。

添加此功能不仅会改善用户体验，而且对 SEO 也有好处。

当用户搜索和点击网站时，他们会产生更多可以被谷歌索引的内容，这可以帮助您的网站排名更高。

Heatherbrae Commons 公寓大楼网站没有搜索栏，这可能会让一些人更难找到他们正在寻找的特定信息。

幸运的是，这是另一个简单的修复方法。

只需在您的网站上包含一个搜索栏，即可让用户更轻松地找到他们正在寻找的内容。 还可以考虑使用自动完成功能在用户键入时建议搜索词。

16. 联系方式不明确

如果他们有问题或想与您做生意，能够轻松联系到您很重要。

根据 KOMarketing 进行的研究，54% 的受访者表示网站上缺少联系信息意味着对公司声誉和信誉的看法降低。

例如，假设有一个当地餐馆的网站，但没有明确的联系信息或难以找到的联系表格。

这可能会使潜在客户难以联系并询问菜单或查询预订。

在这种情况下，网站将错失宝贵的商机。

为避免这种情况，请在您网站上易于查找的位置清楚地显示联系信息，最好靠近页面顶部。

您应该包括您的公司名称、地址、电子邮件地址和电话号码。

您还可以包括一个联系表，以便用户轻松与您联系。 WPForms 非常适合创建自定义和时尚的联系表单。

总体而言，在您的网站上包含清晰的联系信息可以帮助您建立信任

还可以考虑包括指向您的社交媒体资料的链接，作为用户与您联系的另一种方式。

17. 不把网站安全放在首位

站点安全对于保护您的业务和用户的个人信息至关重要。

忽视站点安全可能会导致数据泄露和客户信任度下降。

例如，假设一个网站接受信用卡付款，但没有使用 SSL 证书进行保护。

这可能意味着输入网站的任何个人信息都未加密地通过网络发送，很容易被恶意黑客拦截。

为避免这种情况，请确保您的网站安装了有效的 SSL 证书以保护用户数据。

您还应该确保定期使用最新的安全补丁更新您的网站，并使用独特的强密码来保护管理面板。

您还应该为登录您网站的任何人强制使用强密码，并将双因素身份验证视为额外的保护。

此外，您应该考虑投资第三方安全解决方案，例如恶意软件扫描程序和防火墙。

这些措施有助于保护您的网站免受恶意攻击。 Sucuri 是 WordPress 网站的一个很棒的插件，它提供网站安全扫描和恶意软件清除。

或者，您可能会发现 MalCare 更具吸引力，它提供网站安全监控、恶意软件扫描和删除以及反垃圾邮件服务。

通过采取必要的措施来保护您的网站，您可以确保您的企业免受恶意攻击和数据泄露。

这也有助于建立客户信任，因为客户在访问您的网站时会知道他们的个人信息是安全的。

避免这些常见的网页设计错误并提高网站的成功率

通过避免这些常见的网页设计错误，您可以创建一个视觉上吸引人、易于浏览并且能够有效传达信息的网站。

一个设计良好的网站可以帮助您与受众建立信任并推动业务成功。

请记住在设计您的网站时牢记用户，并确保在不同的设备上对其进行测试以确保一致的体验。

当然，您可以通过使用像 Astra 这样的高质量 WordPress 主题来帮助立即减少其中的一些设计错误。

Astra 是一个多用途的 WordPress 主题，包括漂亮的布局和大量的自定义选项。 它可以帮助您创建一个外观精美、加载速度快并有助于建立客户信任的网站。

通过周密的计划和对细节的关注，您可以创建一个满足您的业务和用户需求的网站。

祝你好运！