WordPress 主题买家通常会犯的 11 个设计错误

您是否曾经发现自己使用 WordPress 主题制作网站，但最终结果与主题演示完全不同？ 我列出了网站制作者经常忽略的 11 个常见设计错误。

您找到了完美的 WordPress 主题。 主题的演示看起来完美无瑕。 您的客户非常喜欢它，并同意您购买。 您购买了它，安装了它并开始根据客户的需要编辑主题。

您更改了徽标，更改了主题的颜色，插入了滑块图像和内容，但最终，您制作的网站看起来一点也不像演示。 你知道出了什么问题，但你就是无法检测到什么。 听起来很熟悉？

在过去的 5 年中，作为 WordPress 主题业务的设计师，我看到了无数使用我们的 WordPress 主题创建的漂亮网站的示例。

但是每隔一段时间，我就会看到一个基础扎实但有几个小设计错误的网站，这会破坏整体体验。 我说的是任何人都可以轻松解决的小事。

我知道很难发现这些缺陷，尤其是如果您不是设计师的话。 出于这个原因，我决定写一篇关于如何改进您客户的网站以使其看起来更好的博客文章。

将此博客文章添加为书签，并在您下次使用 WordPress 主题构建网站时浏览下面的列表。 消除所有瑕疵只需要一两个小时，但结果看起来会好 100%。

1.滑块上的文字对比度差

我一直在谈论关于滑块图像的注意事项和注意事项，所以我现在要简要介绍一下。 原则很简单：

• 如果滑块上的文本颜色为白色，请选择深色背景。 如果滑块文本较暗，请选择浅色背景。
• 确保文本出现的区域在背景中没有太多的视觉噪音。 杂乱的背景会降低正面文本的可读性，并且可能会错过写在滑块上的主要价值主张。

对您来说幸运的是，我们的大多数主题都包括文本后面的半透明纯色背景选项。 我们较新的 WordPress 主题还对滑块上的所有文本应用了阴影，因此对比度更好。

2.太大的滑块图像

当我查看使用我们的 WordPress 主题制作的网站时，我经常注意到用户使用了太大的滑块图像。 仅当您是摄影师并且照片是您的最终产品时，才可以使用占据屏幕高度 100% 的滑块图像。 在其他情况下，请保持安全并坚持主题建议。 它将保持您网站的完美视觉平衡。

3. 差的白色（负）空间

网页设计中的空白或负空间是小部件、文本块、图像或网站任何其他部分之间的空白空间，有助于组织所有内容并为最终用户提供清晰、合乎逻辑的流程。

无论我们如何努力，如何对 WordPress 主题的每一个可能方面进行防弹，用户总能找到一种方法来破坏空白。

幸运的是，我们在主题中使用了功能强大的页面构建器，这意味着您可以轻松地调整整个网站的间距。 Page Builder 允许您更改小部件的填充、行的填充，并允许您修改列之间的间距大小。

我不打算谈论细节，我宁愿给你一些实际的例子。

• 在大多数情况下，网站制造商使用的空白太少，这不允许内容呼吸，因此通常，您应用的空白越多，您获得的效果就越好。
• 用间距显示元素之间的关系。 组合在一起的元素，例如博客文章的标题和文章的日期，应该比具有不同目的的元素更接近，例如博客文章的日期和页面的标题。
• 与间距保持一致。 这意味着您网站上的每一行都应该在顶部、底部、左侧和右侧有相同数量的空白。

所以，它涉及到小部件。 无论它们出现在页面的哪个位置，它们都应该应用相同数量的填充和边距。 一致性将为您的网站带来平衡，并将注意力集中在重要的事情上——内容。

4. 糟糕的移动友好性

程序和规则与上面的桌面相同。 您仍然需要注意空白，但对于移动设备，还有一些附加规则：

• 其中之一是手指友好的设计。 由于手指是我们在移动设备上浏览时在网站上移动的工具，因此我们需要使页面适应它们。 当我们设计 WordPress 主题时，我们会确保按钮和可点击元素不小于 50 像素。 如果您要向 WordPress 主题添加第 3 方元素，请确保它们足够大。 此外，确保这些可操作的组件不会粘在一起太多，以防止误点击。
• 优化图像以提高速度。 许多人在旅途中访问网站，这意味着不可靠，有时连接不良。 尝试消除缓慢的网站加载（在移动设备上）并优化您的图像。
• 在实际的移动设备上测试您的网站。 您可以调整浏览器窗口的大小以查看移动视图，但是当您完成所有调整后，请查看网站在实际移动设备上的外观。

操作系统、浏览器和整体用户体验在桌面和移动设备之间存在差异，并且可能会出现一些不平等。

谷歌开发了一种移动友好测试，一种用于检查您的网站是否适合移动设备的工具。

我们确保我们的每一个 WordPress 主题都能轻松通过。

5. 使用不能齐头并进的颜色。

选择正确的颜色组合是一件棘手的事情。 如果你有才华，你可以跟随你的直觉。 否则，请使用专门为此制作的工具。

我将向您展示一个示例：

我们的大多数 WordPress 主题都是由主要颜色和次要颜色组成的。 如果您的徽标看起来像壳牌的，那么选择主要颜色和次要颜色的决定很简单。 红色将用作号召性用语的主要颜色。 黄色将是辅助颜色，用于背景和支持元素。

如果您的标志看起来像星巴克的标志，并且仅由一种颜色制成，则您需要找到第二种颜色。

一种选择是为主要颜色和次要颜色选择相同的绿色，但我强烈反对这样做。

如果您没有设计师的直觉并且很难挑选出颜色组合，那么我有一个解决方案适合您，称为 Coolors。 它是一个简单易用的工具，用于创建漂亮的颜色组合。

转到他们的应用程序并在列底部插入您的原色的十六进制颜色代码（在我的情况下为 #006241）。 然后通过单击锁定图标并按空格键将其锁定。

提示：不知道如何获取徽标的十六进制代码？ 看看，如果有一个有用的 Chrome 扩展。

我的结果看起来像这样。

如您所见，所有颜色都发生了变化，但您的原色保持不变。 如果您没有得到您喜欢的颜色，请继续按空格键。

如果您选择辅助颜色的唯一原因是在网站上使用它，并且该颜色不会出现在其他任何地方，请不要选择过于强烈的颜色。 在我们的例子中，亮橙色已经过时了。

你需要选择一种更微妙的颜色，它不会破坏你的品牌，并且会顺利地支持你的主色，在我们的例子中是绿色。

我个人的选择是第二个米色（#d8c99b），因为它与绿色完美搭配，而且绝对不会超过它。

也许这种特殊的米色不是完美的颜色，但它是一个足够好的选择。 这就是为什么。 选择颜色时，请尝试考虑其上的深色或白色文本的外观。

在我的示例中，深色文本看起来不错，但增加一点对比度并选择更浅的米色会使其更好。

幸运的是，Coolors 应用程序还有另一个很棒的功能。 您可以选择每种颜色的不同深浅。 将鼠标悬停在彩色列上，然后单击第一个图标，称为“替代色调”。 然后选择更亮或更暗的色调，并始终牢记对比度。

我做了一个关于这两种颜色如何协同工作的快速演示。 为此，我采用了我们的 Adrenaline WordPress 主题并将其转换为星巴克网站。

我在 2 分钟内将 Adrenaline WordPress 主题完全更改为其他主题的速度给我留下了深刻的印象。 我所要做的就是更改两种颜色，上传自定义英雄图像并上传自定义徽标。 自己试试。

6.不要弄乱你的网站导航

以易读易懂的方式构建您的网站导航。 在下拉列表中对不太重要的内容进行分组，或者将它们包含在顶部栏或页脚中。 使导航层次结构合乎逻辑并确保所有相同级别的菜单具有相同的优先级。

例如，条款和协议通常不如主要行动号召重要，因此它们不能同时出现在同一级别。 将条款放入页脚，将主要号召性用语放入页眉。

保持主导航干净，最多有 5 或 6 个选项。

7. 标志太大

有一句名言，我们都曾在某个时候从我们的客户那里得到过——“让标志变大”。 作为网站制作者，你的工作是教育你的客户，没有必要有一个 400 像素宽的标志，因为网站访问者不会来到你的网站来看看你的标志有多漂亮。

上传大小徽标，由 WordPress 主题作者推荐。 他们可能最清楚哪种徽标尺寸最适合特定主题。

徽标只是网站上的众多内容之一，它必须与其他内容和谐相处。

如果你不相信我，看看万维网上的任何主要品牌，你会发现其中 98% 的品牌都有一个标志，大到足以支持所有内容。 用户需要知道网站背后是哪个品牌，但他还必须关注服务、优惠和主要的行动呼吁。

8. 标志质量差

有一次，我遇到了 Microsoft Word (.doc) 格式的徽标。 我想说的是，客户总能找到让你惊喜的方法。

关于徽标，重要的是让它处于最佳的像素完美状态。 为此，您将需要矢量格式（.pdf、.ai、.svg、.eps）。 然后您需要转到您最喜欢的矢量应用程序（例如 Adob​​e Illustrator）并将该徽标导出为主题制作者推荐的大小。 这是您获得最清晰标志的最佳可能性。

如果您在 .png 中获得徽标，它可能会很好地工作，但在调整大小时可能会失去一些清晰度。 如果调整大小会破坏徽标，请访问 Fiverr.com 并投资 5 美元将其重新绘制成矢量格式。 另一个小投资，大结果。

9. 图像质量差

情况每年都在好转，但我仍然发现企业没有将足够的注意力或资源投入到高质量的照片中。

如果您有一个销售特定产品的网站，那么当潜在客户决定是否购买产品时，高质量的图像可能对潜在客户的影响最大并且起着至关重要的作用。

如果您的客户没有为您提供高质量的照片，或者他没有这些照片，那么您的工作就是说服他投资 100 美元并在线购买。

高质量照片的绝佳来源是 Shutterstock，每月 99 美元即可获得 50 张图片。 这对于一个小型网站来说已经足够了，并且将对您的网站用户和对客户品牌的整体信任产生巨大影响。

提示：在选择照片时，尽量避免使用普通、精美、不真实的照片。 一个例子是一个白种人，牙齿超级白，皮肤完美无瑕。

它可以产生反作用，但肯定不会对访问者产生任何影响。 尝试找到一些真实的图像。 为简单起见，请使用具有逼真外观和感觉的图像。

10. 不为第三方插件设计样式

在制作新的 WordPress 主题的过程中，我们总是对我们正在制作主题的利基进行研究。 我们总是渴望在主题中包含所有必要的功能，但有时您的客户只是想要别的东西。 这就是 WordPress 插件发挥作用的时候了。

没有错。 安装插件并将其包含到 WordPress 主题中后，看看它在前端的外观。

我经常注意到，我们的客户忘记将按钮、表格和颜色的样式设置为与主题的其余部分相同的样式。

将已经编写好的 CSS 类应用到您的 3 方插件中只需要 10 分钟，但最终会产生重大影响。

如果您不具备这样做的知识，我们可以为您做。

11. 可读性差

有一个著名的说法，即排版是网页设计的 95%——所以要正确。

如果你按照我们做主题demo的方式来使用widget，不会有任何问题，因为我们在可读性上付出了很多努力，但是如果你正在修改字体的布局和样式，请制作确保您遵守以下规则：

• 每行应包含60-80 个字符，包括空格。
• 如果要设置自定义行高，请将字体大小乘以1.4 到 1.6。 如果您的字体大小为 16 像素，那么您的行高应该在 22.4 到 25.6 之间。
• 在文本周围留出足够的空间。
• 不要使用太浅的文字颜色。 比 #777777 更亮的所有内容都会对可读性产生不利影响。
• 不要使用小于推荐的字体。 你可以去的最低是 14px，但我建议你选择 16px 或 18px 。
• 在主题中安装自定义字体时要小心。 有些字体仅用于标题，在较小的尺寸上效果不佳。 有些字体是为打印而设计的，在屏幕上效果不佳，而有些字体则做得很差。 当您想将默认 WordPress 主题的字体替换为其他字体时，请三思。 如果您仍想更改它，请坚持安全并选择流行的。

• 使用正确的对齐方式。 在 95% 的情况下，左文本对齐是可行的方法。 在其他 5% 中，我允许您使用居中对齐，但请确保仅将其用于简短的支持性文本。

右对齐（从右到左的语言除外）和对齐的对齐是不可能的。 时期。

结论：

下次您为客户制作网站时，请仔细阅读上面的列表并尝试修复所有这些小缺陷。 这将只需要一两个小时，但最终，您会得到更好的结果，这意味着更快乐的客户和更好的参考。 最重要的是，你会帮我们一个忙，因为我们会得到一个很棒的活生生的例子来炫耀。

如果您有任何问题，请随时在下面发表评论。

编辑：这篇文章已被翻译成荷兰语——如果你想把它翻译成你的语言，请在下面的评论中告诉我。