WordPress滑块正解使用方法

当我为客户创建网站时，他们几乎总是要求我在他们的主页上添加一个，即使不是在网站的每个页面上。

但是，尽管无可否认有吸引力，但网站设计中并不总是需要滑块。在本文中，我将探讨 wordpress 滑块的好处，并确定何时应该使用它们以及何时不应该使用它们。我也会看看一些替代方案。

滑块的好处

滑块看起来很棒，尤其是在大屏幕上。它们让您有机会展示大量产品或链接到您网站中的多个页面。

如果您组织中的每个部门都希望在您的站点主页上出现特色，那么滑块可能是实现此目的的最佳方式：为每个部门添加一张幻灯片，您就有了解决方案。

由于它们现在在网站上如此普遍，它们还可以给人一种现代和最新的印象，这反过来又会给网站背后的企业、组织或个人一种现代感。

但在向网站添加滑块之前，请花一些时间考虑添加它的原因以及它的用途。当然，您应该为网站的各个方面都这样做，但是许多网站所有者使用滑块跳过了这一考虑。

为什么使用滑块？

在添加滑块之前，请花一些时间考虑添加它的原因：

• 您是否有需要传达的视觉信息，这是否适用于网站的多个信息或区域？（如果您只需要一个图像或链接，则单个横幅图像将加载得更快并完成工作。）

• 您的受众是通过主页还是通过您网站中的其他内部页面到达的，在这种情况下，大多数访问者甚至会看到滑块吗？

• 人们会通过台式机或移动设备访问您的网站吗？标准的信箱式滑块设计在移动设备上效果较差。

• 您可以在主页正文中添加滑块中的信息吗？

• 您是添加滑块来实现目标（沟通、号召性用语、链接等）还是仅仅因为它看起来不错？

无论您对这些问题的回答如何，请考虑您的滑块将对网站访问者的体验以及他们登陆您网站时的行为产生什么影响。并为滑块中的每张幻灯片考虑这一点。

因此，您已经考虑了这一点，并决定您的网站确实需要一个滑块。以下是一些提示，可帮助您从滑块中获得最佳用户体验 (UX)。

在哪里放置滑块

用户希望在您网站的主页上靠近顶部的地方出现一个滑块。这可能在您的导航上方或下方。

如果滑块是您主页上最重要的一项（即，如果它将用户带到您希望他们都关注的链接，例如订阅页面），那么您应该将其放大。调整您的图像大小，以便它们填满屏幕，如果用户想要使用您主页的其余部分，则必须向下滚动。

SpaceX是一个网站示例，其滑块几乎占据了整个主页。它大到足以统治，但又不会大到您看不到，您可以滚动以了解更多信息。

如果滑块不是主页用途的组成部分，那么您应该使其更苗条。将任何图像裁剪为类似信箱的比例，并确保它们在滑块显示时都正确呈现。如果您的滑块不是主页的组成部分，那么您可能需要考虑是否需要它。

如果您不希望滑块占据页面的主导地位，您可以考虑在页面底部使用它，作为一种额外的导航形式。这可以取代页脚作为鼓励人们访问您网站中其他页面的视觉方式。

另一个考虑因素是滑块应该转到哪些页面。滑块会减慢页面加载速度，因此不应包含在您网站的每个页面中。您可能决定仅将其包含在主页上，或者包含在静态页面上，但不包含在 blog post上。

或者，对于网站的不同部分，您可能有不同的滑块。例如，在时尚网站中，您的商店中的每个部门可能都有不同的滑块。

您添加到站点的每个滑块都需要有一个用途。记住要确定滑块的作用；这将帮助您确定放置它的位置以及它应该有多大。

滑块和移动设备

过去，由于对带宽和加载时间的担忧，许多网站没有将滑块发送到移动设备。对于许多观众来说，这已经不是问题了，因为 4G 连接通常比国内 WiFi 更快。但这并不意味着您应该只将滑块发送到移动设备而不进行调整。

现在大部分网站访问都是在移动设备上进行的，对于一些行业和受众来说，这一比例远高于 50%。因此，正确处理这一点很重要。

标准的宽滑块在小屏幕上看起来不太好；它会缩小到几乎没有，并且它包含的任何链接都可能太小而无法用手指或拇指点击。

因此，您有两个选择：您可以将滑块限制为台式计算机，或者您可以将其不同版本发送到移动设备。

如果您认为将滑块发送到移动设备不值得，我会质疑您是否真的需要滑块。如果滑块的存在是为了实现一项功能，那么它需要为移动设备上的访问者和桌面上的访问者实现该功能。如果您不打算将滑块发送到移动设备，请暂停并考虑您是否真的需要它。

如果您打算将滑块发送到移动设备，则使用替代尺寸是有意义的。它可能包含与桌面滑块相同的图像和链接，但图像被裁剪成不同的比例。或者您可能决定使用在移动设备上效果更好的替代图像。

例如，Microsoft网站包含一个突出的滑块，旨在鼓励您购买。

在移动设备上，这会调整大小，以便图像尺寸更适合。

您可以通过将替代滑块发送到桌面和移动设备，使用不同的图像来做到这一点，或者使用滑块插件来动态调整图像大小，使其适合可用的屏幕尺寸。例如，  Slider Revolution 插件会自动调整您的图像大小，以便它们在正在查看的设备上工作。

如果您手动创建替代滑块，则裁剪图像的方式将取决于滑块的用途。

如果滑块是页面上最重要的元素，并且您已将其设计为在桌面上填充整个页面，那么您应该在移动设备上执行相同的操作。创建大小约为 1440 x 2560 像素的图像，并在您的移动滑块中使用这些图像。

然后，用户必须点击滑块中的链接或向下滚动才能查看任何其他内容。如果有更多内容可供他们向下滚动，请确保滑块中的整个图像不是链接。否则，当他们尝试滚动时，他们会点击链接。

如果滑块不是页面上最重要的元素，则将其缩小。大约占屏幕一半的大小，或者稍微小一点以容纳其上方的任何标题，将使图像足够突出，同时也为它们下方的内容赋予权重。

滑块和辅助功能

滑块是一种固有的视觉媒介，因此很容易忘记它们可能导致的可访问性问题。

再一次，这让您回到问题：真的需要滑块吗？它是否实现了目的？

如果该目的是导航，那么您需要包含供屏幕阅读器使用的文本，以便有视觉障碍的访问者仍然可以访问滑块旨在指向的内容。

如果目的是信息性的，那么文本对于传达可能由图像传达的任何信息是必要的。图像中的任何文本也应编码到页面中。

如果滑块纯粹是装饰性的，那么与图像一样，您不需要为屏幕阅读器提供替代文本，因为它不会影响用户体验。相反，在您的内容中使用语言来传达您的图像所传达的相同印象。因此，如果您的网站是一家精品酒店，并且滑块显示卧室的图像，请确保您的网站上有文字描述这些卧室，以帮助有视觉障碍的人获得与访问者相同的印象照片会得到。

如果您需要在滑块中包含替代文本，请使用可让您执行此操作的插件。RoyalSlider插件专为可访问性而设计，可让您包含文本来代替图像。

滑块的替代品

即使您使用滑块，在您网站的其他地方也提供相同的信息也很重要。

可用性专家 Jakob Nielsen 进行了一项测试，要求用户从 Siemens 网站上查找关键信息。此信息在滑块中突出显示，但由于“横幅失明”，他们没有看到它，也无法找到信息。

因此，如果您使用滑块进行导航或转换信息，请确保您也将其添加到主页的内容中。包括用于导航的号召性用语按钮和用于信息的简单文本。

如果您决定根本不使用滑块，您可能想知道使用什么作为替代方案。以下是一些选项：

单个横幅图像 

如果您只有一个希望访客去的地方，或者一个您想要突出显示的优惠，请考虑使用横幅图片而不是滑块。它将加载更快，更可靠。由于横幅盲区，请确保您也将内容包含在文本中。

改进的导航 

不要使用滑块将人们引导到您网站中的关键页面，而是查看导航，以便将人们引导到您希望他们去的地方。考虑合理化您的顶级导航并专注于优先链接。

形式

如果您希望用户访问带有表单的页面，为什么不在主页上直接使用该表单呢？

主页上的更多内容

拥有高度可视化的主页变得越来越流行，它鼓励用户不断向下滚动浏览多个图像和文本部分，而不是点击进入网站上的其他页面。这在视觉上比滑块更有吸引力，更容易导航，并给人一种真正最新的印象。

更好的内容

与其依靠滑块来鼓励人们采取行动，不如查看您的主页内容。使用良好的文案来赢得转化，就像一个伟大的着陆页一样。

Spotify是一个使用单个横幅图像而不是滑块的网站示例，因为它希望您做一件事：注册。

滑块有其用途——如果使用得当

滑块确实可以发挥作用。如果您有非常直观的信息要传达并仔细考虑滑块的位置和设计，它可以增强您的 WordPress 网站的设计。

但是，在向您的网站添加滑块时，花时间进行战略和考虑是很重要的。考虑它在移动设备上的外观，它将如何影响可访问性，以及您有哪些替代方案。如果你采用这种方法，你就不会出错。