Eight seconds。That’s how much time you have to capture the average internet user’s attention on your website. You can tweak your content and page layout as much as possible, but there’s no way around it: Engaging website visitors, especially first-timers, is a real challenge for online businesses.

Free Workbook: How to Plan a Successful Website Redesign 但是,由于众多web designtechnologies at our disposal. Among all the methods for quickly grabbing attention and prompting action, you’ve probably seen theWeb幻灯片technique. And there’s a good chance it could work on your site, too.

现在,当您听到该术语时幻灯片, your mind might immediately jump toPowerPoint presentation, and from there,conference roomandboring

如果是这样,请尝试暂时忘记PowerPoint。事实证明,Web幻灯片是将视觉内容传达给访问者的最流行和有效方法之一。

In this guide, we’ll learn about common uses of web slideshows, the best practices for implementing them, and how to get started with placing one on your website.

Specifically, online businesses tend to use sliders on their homepage to communicate their missions or to showcase CTAs for new products. Take this simple example fromMicrosoft’s website:

gif of a web slideshow on microsoft.com

Image Source

This style of presentation aids the browsing experience in two primary ways. First, it draws the viewer in by placing important content above the fold, no scrolling required. This content could be new products or offers, an announcement or blog post, or anything else visitors should know.

其次,Web幻灯片可以为您的页面添加视觉风格。例如,循环浏览大型,充满活力的图像会创造令人难忘的体验,甚至可以唤起读者的某些积极情绪,然后他们与您的品牌相关联。这对于艺术家投资组合,媒体公司和其他强调美学的组织特别有效。

何时使用Web幻灯片

您会在网络上找到滑块,但是在某些情况下,当它们工作特别良好时。让我们快速对他们的最佳用途进行摘要:

新产品/优惠

Place a slider on your homepage and populate it with CTAs showcasing the latest your business has to offer, à la the Microsoft example above. New to CTAs? Check out我们最喜欢的例子

General Information

Many organizations use sliders to communicate their mission, strategy, or story. You’ll see this frequently on sites for consulting agencies, nonprofit and educational organizations, and special projects without a physical product to present.

Product Showcase

Rather than cycling through multiple products, you might focus on one product or product line. With this approach, each slide can explain a different aspect, benefit, or iteration of your product.

滑块并没有立即展示所有内容,而是将信息分解为可消化的内容。例如,查看耐克(Nike)时尚的设计,展示了15年的扣篮运动鞋系列。

gif of a web slideshow on nike.com

Image Source

Portfolios

媒体公司,创意组织和自由职业者通常会使用滑块来突出其最新或最佳作品。您可能会从单个项目中介绍多个图像,或在网站上使用其专用页面链接的多个项目。

Featured Articles

News sites and blogs with frequent updates can add CTAs for their latest or most popular content in a slideshow. Avoid plain text CTAs here — instead, use featured images for each post to direct users’ eyes toward your new content.

Now that we’ve seen什么sliders can do, let’s next discusshowto implement them. And yes, there is a wrong way to make a slider.

From a usability standpoint, sliders are a bit of a double-edged sword. Due to their popularity, slideshows are familiar to the vast majority of people who land on your page, and they should have no issue understanding the purpose of the feature.

However, this also means that poorly-designed sliders will disengage users very quickly, especially if it’s the literal first thing they see. For this reason, it’s essential to carefully plan out your slideshow element and follow these six best practices:

1.启用automatic and manual transitions.

As I mentioned, web slideshows can rotate through their content automatically based on a time, or manually when a user clicks anarrow button或刷屏幕。

We recommend your slider allows for both methods. On page load, the slider transitions automatically, providing enough time for the user to take in each image. If a user wants to change slides themselves, they can do this too, which might deactivate the timed transitions. This approach gives users better control over the content they want to view. Also, this is how most web sliders are implemented, so it’s intuitive for visitors.

To aid users, place your arrow buttons on both sides of the element (left and right side, or top and bottom). These buttons can be visible within the element by default, or appear when a user hovers over the slideshow. That style choice is up to you.

2. Visually indicate the number of slides.

一个很好的主意,可以发出滑块中有多少个幻灯片,因此用户知道还可以查看多少内容。您可以使用悬停在数字上的缩略图(例如1/5、2/5…)或其他细微的视觉提示中的缩略图执行此操作。

3.优化页面性能。

如果您的页面需要超过几秒钟的加载,则访问者将开始失去兴趣。许多人甚至不会看到您如此努力工作的完整滑块。

首先,考虑幻灯片中的图像数量。幻灯片越多,负载时间越长,因此只包括您需要的幻灯片。保存其余内容以供以后在页面上。然后,optimize your slider imagesby reducing the file size for each image as much as possible.

Finally, many slideshow builders will implementlazy loading。只有当前的幻灯片才会首先加载,直到要求显示,隐藏的幻灯片才不会加载。此功能会尽可能地扩散加载需求,因此在搜索滑块构建器时请注意。

4. Mind the transition effects.

过渡是人们非常习惯的滑块的一个看似很小的细节,并且超出规范以外的任何东西都可能令人反感。

您可能会很想通过溶解效果或星星擦拭来加强幻灯片过渡。我欣赏您的品味,但请尝试抵制这种冲动并保持过渡的简单。最好使用简单的褪色效果或水平/垂直锅。这个电话取决于您,但是分心和过渡的震撼力越好。

5.使其对移动设备友好。

Sliders are highly-dynamic, image-heavy elements. If your module isn’t designed to work on smaller screens, it might come out looking like a highly-dynamic, image-heavy mess.

当他们弥补接近一半的交通, do your mobile visitors a favor and apply响应式网页设计滑块的原理(信誉良好的滑块构建器和插件可以做到这一点)。或者,考虑从移动站点完全删除滑块以减少混乱。

6. Make it accessible.

Finally, all of your sliders should be asaccessibleas you can make them. This means mobile responsiveness,image alt textfor each slide (and a textual alternative for the slideshow itself if possible), enabling manual slide transitions, and triggering these transitions with arrow keys in addition to button clicks.

How to Make a Slideshow for a Webpage

想给滑块射击吗?您有一些选择。让我们回顾一下可用的功能,从技术至少到大多数技术实施。

使用幻灯片构建器。

对于轻巧的解决方案,请使用专门的Web幻灯片构建软件。bob电竞官方下载使用这些工具,只需选择滑块内容,调整设置,然后将滑块元素嵌入页面中即可。从一个免费的工具开始BannersnackorCincopaand see how you like it, then consider upgrading to a paid option.

受欢迎的website buildersalso enable slider functionality, either natively or through either a third-party add-on. Make sure these tools can make your slideshows both responsive and accessible to users.

使用WordPress滑块主题/插件。

If your website is built on the WordPress CMS, many主题come with built-in slider modules. There are also numerous free and premium滑块插件that will add slideshow functionality to your site, on any post or page. For your WooCommerce store, consider aWooCommerce滑块插件for product displays.

We recommend adding sliders with plugin over a theme, since changing your theme won’t scrap your slideshow. That said, premium themes with sliders are quite convenient in this case.

手动编程滑块。

If you’re feeling brave, try coding an image slider plugin yourself. To work properly, a slider needsHTML,CSS和JavaScript, the three big languages in frontend development.

BothW3SchoolsandfreeCodeCamp提供用于构建图像滑块的教程。或遵循我们的指南building an image carousel in Bootstrap CSS。Program the slider in, then tweak the CSS to style your new module to fit the rest of your website.

Bonus: Create a Video Slideshow

As an alternative to a manually programmed interactive image slider, you can opt for a video slideshow that displays the same information.

If you’re short on time or resources, we highly recommend thefree Slideshow Maker from Canva。该工具旨在快速,直观且易于使用任何人,包括没有设计排骨的工具。

With Canva, you can easily create slideshows from templates themed for different niches, like explainers, food, and fashion. Populate your slideshow with images and videos from your own library and from Canva’s library of stock media. Then, customize your slideshow with icons, illustrations, animations, and music. Finally, download your slideshow for free (and nope, there’s no watermark).

免费的网络的预览幻灯片builder工具摇来摇去m Canva

Image Source

Not Just a PowerPoint

Web slideshows aren’t perfectly suited for everyone. However, if you want to emphasize visuals while lowering your bounce rate, we recommend trying them out.

When adding a slider, keep our best practices in mind, and ensure that it serves the overall mission of your site, rather than distract from it. Finally, be sure to keep them visually pleasing and engaging for all. This isn’t a brightly lit conference room, it’s your business!

博客 - 网站重新设计工作簿指南[基于列表]

网站重新设计

Originally published Sep 8, 2020 7:00:00 AM, updated November 02 2021

Topics:

Website Design