关于如何选择、修改和改进滑块图像的 7 个设计技巧

在过去的 7 年里，几乎每个网站都有滑块（或轮播）。 这是一种常见的做法。 我们都习惯的东西。 这是您的访问者将在您的网站上看到的第一件事。 这是成败的时刻。 滑块图像必须给人留下良好的第一印象，否则您将永远失去您的访客。

当我浏览我们的客户使用我们的 WordPress 主题创建的网站时，我经常看到准备不充分的滑块图像。 大多数时候照片太大或太小。 滑块上的文字不够显眼，图片也没有优化，所以页面本身加载非常慢。

当我看到一个整体不错的网站有一个很好的副本，但滑块图像很糟糕时，我的心有点碎。 我决定通过分享一些简单的技巧来阻止这种疯狂。

1. 选择合适的照片

首先也是最重要的。 选择正确的照片。 选择具有足够描述性并有足够空白的图像。 查看滑块上文本出现的位置，并选择该区域中视觉噪音尽可能少的图像。

2. 高分辨率照片是必须的

使用主题制作者推荐的分辨率。 在过去的 4 年里，我看到过无数个网站，小分辨率的照片铺满了屏幕。 如果您选择 1920 像素宽的图像，您不会错过。 没有什么比滑块中的像素化照片更能阻止您的访问者了。 Unsplash 是免费、高质量照片的绝佳资源。 如果您有预算，我建议您在 Shutterstock 上购买优质照片。 投资将得到回报。

3.使照片变暗或变亮

如何使滑块上的文本更明显的一个好技巧是使照片变暗（或变亮）。 这可以在 Photoshop 或任何其他照片编辑程序中完成。 在本教程中，我将使用名为 Canva 的免费设计应用程序。 注册 Canva 后，点击左上角的“创建设计”。 然后在右上角单击“使用自定义尺寸”并输入主题开发者推荐的尺寸。 如果没有推荐的分辨率，请访问 WordPress 主题的演示站点并检查照片（或与我们更改您的 WordPress 主题提供商）。
点击“设计！” 并转到左侧菜单中的“上传”。 上传您的滑块图像并将其拖放到板上。 在顶部菜单中，单击“过滤器”并将“亮度”和“对比度”降低 10-20%。 如果滑块上的文本颜色为白色，则您希望将照片调暗一点以提高对比度。 如果您的滑块上有黑色文本，您想要做相反的事情。

更进一步。 通过向左或向右移动“色调”（色调）轮播，以您的品牌颜色为您的照片着色。

4.半透明颜色叠加

有时，您只是找不到具有足够空白空间的照片来放置文本，或者您的客户希望您使用过度饱和的图像，这样您的文本就不够可见了。 在这种情况下，您可以做的最直接的事情就是制作一个半透明的颜色叠加层。

为此，请转到您的 Canva 应用 > 元素 > 形状，然后将第一个白色或第二个黑色矩形拖放到您的板上（它显示为免费）。 从边到边调整该矩形的大小，并将其着色为左上角的黑色。 然后在右上角将矩形的透明度设置为 ~50%，这取决于您需要多少对比度。

5. 为您的照片添加内光

使您的滑块照片更有趣的另一个绝妙技巧是添加黑色半透明内发光。 这种方法将使您的网站看起来更加专业。 它将焦点放在屏幕的中心。 在 Canva 应用程序中，此效果称为“晕影”，您可以在顶部菜单“滤镜”>“高级选项”中找到它。 当您对滑块照片感到满意时，可以单击右上角的“下载”按钮将其保存。

6.选择正确的文件类型

保存编辑后的滑块图像时，选择正确的文件类型很重要（由于文件大小）。 别担心； 规则很简单。 如果您的滑块图像是实际照片，请将其另存为 .jpg。 如果它不是照片（即图案、图标、涂鸦），请将其另存为 .png。 这很重要，因为您希望滑块图像尽可能轻巧和优化。

7. 页面速度很重要

适用于 Google 和您的访问者。 滑块图像是您网站的最大图像（甚至可能是文件），因此优化它们很重要。 减小图像大小的好工具是 TinyPNG。 他们简单的拖放界面允许您在不损失质量的情况下减小图像的大小。 请参阅图像优化和页面速度优化的终极指南。

额外提示：使用推荐的滑块图像大小

当我们开发 WordPress 主题时，我们会付出额外的努力来选择滑块照片的正确大小和比例。 照片本身必须在每个屏幕尺寸上都能正常工作。 我看到很多情况下，用户使用的尺寸与推荐的尺寸不同。 大多数时候，滑块中的照片占用了太多的垂直空间。

这对于滑块本身的功能来说不是问题，但是如果您的访问者必须滚动很多才能到达内容，那么它对用户体验没有任何好处。

如果您仍然想使用比推荐更大的图像，请至少记住一个很好的旧的折叠规则。

滑块是您的访问者将在您的网站上看到的第一件事。 通过实施上述一些技巧，让他们的用户体验更好。 它不会花费您太多时间，但会提高您、您的客户和客户的访客的幸福感。

因此，现在您对如何改进滑块图像有了一个想法，让我们讨论使用滑块的优缺点。 事实证明，有大量研究表明滑块对您网站的伤害大于对网站的帮助。 甚至 Yoast SEO 插件的作者也表示应该禁止您的网站使用滑块，因此绝对值得讨论滑块的优点和缺点，以及它们何时合适以及何时最好避免使用它们。

在您的网站上使用滑块的缺点

首先，让我们看一下滑块最重要的缺点。

很少有滑块插件是真正的移动响应

您是否遇到过使用滑块并尝试在手机上查看的网站？ 虽然手机确实越来越大，但简单的事实是大多数滑块都会调整大小以适应更小的屏幕尺寸。

这导致图像和文本都太小而无法在较小的屏幕上阅读和查看。 最后，您漂亮的滑块很可能会在手机上被忽略，因此请三思而后行添加到幻灯片中的内容。

如果您有幸使用了像 Soliloquy 这样的响应式滑块插件，请准备好花一些时间自定义您的滑块，以确保它们在所有设备上看起来都不错。 当您使用它时，请务必测试滑块并查看它在各种屏幕尺寸和设备上的外观。

大多数访客不会停留在前两张幻灯片上

如果您考虑到我们的注意力越来越短，可以肯定地假设大多数访问者不会停留在前几张幻灯片上。

当访问者登陆您的网站时，他们想立即知道您在做什么以及如何帮助他们。 如果你的幻灯片没有回答这些问题，他们很可能会继续前进。

滑块控件很容易被错过

滑块控件通常是不显眼的图标，其设计和样式不会影响实际的幻灯片内容。 因此，那些用于在滑块中导航的箭头很容易被遗漏。

这个问题在较小的屏幕上更加明显，这意味着您的移动访问者将很难在幻灯片之间来回切换或单击将他们带到您网站的另一部分的按钮。

滑块可能会减慢您的网站速度

如果您不小心优化滑块和一般网络的图像，滑块可能会降低您的网站速度。 更重要的是，滑块经常使用资源密集的 JavaScript 文件。

这些 JavaScript 文件中的每一个都是浏览器必须向您的网站所在的托管服务器发出的另一个请求。 当浏览器发出这些请求时，您的访问者正在等待您的网站加载，因为在加载必要的 JavaScript 文件（以及滑块和您的网站的样式文件）之前，浏览器无法继续。

结果，访问者可能会感到沮丧并离开另一个加载速度更快的网站，并为他们提供与他们来到您的网站相同的解决方案。

还值得一提的是，由于对网站加载时间的影响，滑块可能会对您的 SEO 产生负面影响。

人眼对运动做出反应

最后，请记住，我们的眼睛自然会被运动所吸引。 如果您在整个网站中使用滑块，它们可能会分散用户的注意力并导致他们停止关注您网站上的其他内容。

每次幻灯片更改时，您都会冒着访问者即将单击该预订按钮以专注于其他事情的风险。 这可能会导致转换损失，进而导致销售额减少和整体利润减少。

要记住的另一件事是，如果您使用滑块，请不要使用自动滑动选项，因为它会很快使访问者的用户体验变差。 想象一下，如果有人开始阅读幻灯片上的文本，然后图像在他们读完之前发生了变化。 这可能会让您的用户感到沮丧并导致他们离开您的网站。

在您的网站上使用滑块的优点

现在我们已经介绍了使用滑块的缺点，让我们来看看为什么您可能要考虑使用滑块。

您可以在更小的空间内展示更多内容

由于它们的性质，滑块可以轻松地在首屏或网站上的任何其他位置显示更多内容，而无需创建长页面。 您可以使用任意数量的幻灯片，通过幻灯片分享您想要的信息，并以视觉上吸引人的方式呈现。

这可以让您的主页保持简短和甜美，专注于最重要的元素，而不是使用所有空间来讲述有关单个产品或服务的视觉故事。

滑块使您无需使用 Photoshop 即可轻松地将文本添加到图像中

大多数滑块插件允许您上传图像并向其添加文本，而无需使用 Photoshop 或其他图像编辑程序。 一些滑块甚至可以添加按钮和号召性用语或指向网站其他部分的链接。

借助滑块的管理界面，您可以使用类似于帖子编辑器或 Word 中的工具轻松编写和格式化文本。 您甚至可以通过添加自定义颜色或字体、调整过渡类型和持续时间等来自定义幻灯片设计。

滑块迫使用户与您的网站进行交互

尽管听起来很粗糙，但滑块使用户不可能不与您的网站进行交互。 如果他们不想等待下一张幻灯片出现，他们可以简单地单击箭头来来回浏览所有幻灯片。

如果您包含将他们带到不同页面的链接或按钮，他们可以单击按钮并浏览您在网站上提供的所有其他内容。 换句话说，幻灯片为您的用户提供了更多的参与度，因此如果您希望访问者从他们第一次登陆网站时就与您的网站进行交互，那么幻灯片可能就是答案。

滑块是分享工作的好方法

如果您是设计师、插画家、摄影师或艺术家，滑块是展示您的作品的好方法，而您的作品集不会占据整个页面。 您可以将您最好的作品的幻灯片放在一起，并将其作为幻灯片分享到您的主页甚至您的作品集页面上。

如果您销售产品，滑块也会派上用场，因为它们可用于展示最受欢迎的产品、新品或特定类别。

结论：你应该使用滑块吗？

考虑到利弊，是时候做出决定了：你应该在你的网站上使用滑块吗？ 这个问题的答案可以用两个词来概括：视情况而定。

什么时候使用滑块是一个不错的选择？

撇开利弊不谈，当使用滑块是一个好主意和可靠的选择时，仍有一些不错的场景。

• 当您想展示您的作品或画廊时，请使用滑块。 如前所述，滑块很适合显示照片画廊或投资组合项目。 如果您的网站属于该类别，那么无论如何，使用滑块是展示您的作品而又不会压倒访问者的好方法。
• 使用滑块展示产品。 同样，如果您要推出新产品或服务； 滑块可能是展示产品实际运行或突出其优点和功能的好方法。
• 使用滑块分享一个有凝聚力的故事。 这可能是您的品牌和公司的故事，或者您可以突出您的团队成员及其专业知识。 无论您决定在滑块中分享什么样的故事，请确保故事有意义，否则，您的访问者将看到一堆没有意义的不相关幻灯片。 同时，确保每张幻灯片都建立对下一张幻灯片的期待，并引起访问者的兴趣，以便他们坚持到最后一张。

什么时候不应该使用滑块？

不用说，如果您的网站不属于上述类别之一，或者您没有使用滑块添加到您的网站，您应该避开滑块。 当使用滑块不是一个好主意时，这里还有一些场景。

• 如果您只使用幻灯片，因为它很时髦。 仅仅因为其他人都在这样做，并不意味着你也必须这样做。 您不仅冒着没有使用滑块向您的网站添加任何有价值的东西的风险，而且还冒着融入竞争对手并看起来与竞争对手相同的风险。
• 如果您的网站已经很慢，请不要使用滑块。 正如我们上面所说，滑块可能会占用大量资源，因此您需要做的最后一件事就是让您的网站加载速度更慢。 首先修复您的网站速度，然后考虑添加滑块。
• 如果您不知道要在滑块中放入什么，请不要添加。 当背后有故事时，滑块效果最好。 如果没有故事，您就会有一堆图像，这些图像不会为您的网站增加任何价值，甚至可能会使您的访问者感到困惑。
• 如果您可以以更简单的方式共享内容，请这样做。 为了最新的设计趋势而使您的网站设计过于复杂或牺牲速度是没有意义的。 更简单的解决方案通常意味着您的网站将更容易更新和维护，更不用说加载速度更快了。 因此，采用更简单的解决方案来替代滑块是一个更好的选择。

结论

既然您知道使用滑块的利弊，您就可以做出明智的决定，是否使用滑块是您网站的好选择。 借助有关优化滑块图像的技巧，您将可以很好地创建不会损害用户体验但会帮助您获得更多转化的有吸引力的幻灯片。