滑块在网页中的设计_网页设计中使用或不使用的滑块-CSDN博客

本文探讨了滑块在网页设计中的应用及其利弊。内容来源于一篇翻译，讨论了何时应该使用滑块以及可能对用户体验产生的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑块在网页中的设计

Many designers have strong opinions about the use of sliders and slider controls in website design. Some love them; others hate them. A poorly-timed carousel or automated gallery slider can distract users from more critical site aspects. On the other hand, a manual slider allows mobile and website users to navigate through a range of content features or options quickly. Explore sliders and slider controls and find out when they are most useful in web design.

许多设计人员对于在网站设计中使用滑块和滑块控件有强烈的意见。有些人爱他们；其他人讨厌他们。时间安排不当的轮播或自动画廊滑块会分散用户对更关键站点的注意力。另一方面，手动滑块允许移动和网站用户快速浏览一系列内容功能或选项。探索滑块和滑块控件，并找出它们在网页设计中最有用的时间。

什么是滑块？ (What are Sliders?)

A slider is a term that refers to a slideshow on a website. An example of a slider can be a revolving carousel that displays products or photos. Web designers can incorporate sliders into all kinds of sites, but they are most useful for businesses wanting to show relevant content or showcase professional portfolios. When designers want to quickly show multiple options and help users sort through them quickly, a slider helps narrow down choices.

滑块是指网站上的幻灯片放映的术语。滑块的示例可以是显示产品或照片的旋转圆盘传送带。 Web设计人员可以将滑块合并到所有类型的站点中，但是它们对于想要显示相关内容或展示专业作品集的企业来说非常有用。当设计人员想要快速显示多个选项并帮助用户快速对其进行排序时，滑块可帮助缩小选择范围。

为什么爱恨交织？ (Why the Love Hate?)

If you conduct a web search for sliders, near the top of the SERP, you will find critics who hate them, and just as many designers arguing in their favour. Here are some viewpoints on each side.

如果您在SERP顶部附近对滑块进行网络搜索，则会发现讨厌它们的评论家，以及许多设计师对此表示赞同的人。以下是双方的一些观点。

Image for post — Depositphotos) Depositphotos )

Critics argue sliders are confusing since they present users with several options at once, all of which have the same weight or importance. Since UX is about making choices clear, they say anything that creates confusion should be avoided. They also offer the following reasons they are bad UX:

批评家认为，滑块会令人困惑，因为它们会同时为用户提供多个选项，所有选项都具有相同的重要性或重要性。由于UX就是要明确选择，因此他们说应该避免造成混淆的任何事情。他们还提供以下原因来说明他们的用户体验不好：

Visitors often view sliders the same way they do ads and skip over them.
访客通常以与制作广告相同的方式查看滑块，并跳过它们。
Sliders slow down pages, impacting SEO and conversion rates.
滑块会减慢页面速度，影响SEO和转化率。
Some sliders do not transition well to mobile.
某些滑块无法很好地过渡到移动设备。
The space they take up reduces available room for other content.
他们占用的空间减少了其他内容的可用空间。
Sliders might give the impression that the company was not sure what to highlight, so opted to display all choices at the same time.
滑块可能会给人一种印象，即公司不确定要突出显示的内容，因此选择同时显示所有选择。

Some say a moving slideshow can have the same negative impact as auto-playing video. Instead of sliders, critics recommend using static images and copy.

有人说，移动幻灯片放映与自动播放视频具有相同的负面影响。评论家建议使用静态图像并进行复制，而不要使用滑块。

Diagrammatically opposite, some designers love sliders and argue just as vehemently in favour of their use. Here are some ways adequately used content sliders can be good UX:

与图例相反，一些设计师喜欢 滑块，并强烈支持滑块的使用。以下是适当使用内容滑块可以成为优质UX的一些方法：

They save space: Consolidate content so more is visible on one screen.
它们节省了空间 ：整合内容，使更多内容在一个屏幕上可见。
Users stay engaged: Visitors linger in one place to view content, and visuals provide a break before continuing down the page.
用户保持参与 ：访客徘徊在一个地方查看内容，而视觉效果在继续浏览页面之前提供了一个休息时间。
Sliders consolidate images: While media on the page can draw attention away from text, sliders put it all in one place to prevent distractions.
滑块合并图像 ：虽然页面上的媒体可以使注意力从文本移开，但滑块将它们全部放在一个位置以防止分散注意力。
Users control content: Always allow users to proceed through sliders at their own pace or skip them altogether if that’s not what they are looking for.
用户控制内容 ：始终允许用户按自己的步调浏览滑块，如果不是他们想要的，则完全跳过它们。

何时使用滑块 (When to Use Sliders)

While sliders are not right for every website, there are some they enhance. Start by analysing what your user is looking for and how each page of your website can help them toward completing that goal. If sliders solidify the brand and enhance the user’s trust, they can be a critical part of UX. If they create distraction and confusion, they will negatively impact conversions. Each organisation is unique, so what works flawlessly for some might have a detrimental effect on others.

尽管滑块并非适用于每个网站，但它们有所增强。首先分析您的用户正在寻找什么，以及网站的每个页面如何帮助他们实现该目标。如果滑块巩固了品牌并增强了用户的信任度，则它们可能是UX的重要组成部分。如果它们分散注意力和混乱，则会对转化产生负面影响。每个组织都是唯一的，因此对某些组织无懈可击的工作可能会对其他组织产生不利影响。

Avoid making sliders a distraction by minimising transitions and choosing soft fades instead of jerky horizontal slides. Make navigation easy with noticeable arrow buttons for moving backwards and forward. Allow mobile users to swipe. Optimise page load time by using the smallest possible image size and wait to load slides later in the carousel, since viewers may not require them.

通过最大程度地减少过渡并选择柔和的淡入效果(而不是生涩的水平幻灯片)来避免使注意力分散。引人注目的箭头按钮可用于前后移动，使导航变得容易。允许移动用户刷卡。通过使用尽可能小的图像尺寸来优化页面加载时间，并等待稍后将幻灯片加载到轮播中，因为观众可能不需要它们。

使用滑块进行产品浏览 (Use Sliders for Product Tours)

When site visitors see large chunks of information, it can be overwhelming. If you offer a product that works in a series of steps, use sliders to show the series and create a visual for the user.

当站点访问者看到大量信息时，它可能会让人不知所措。如果提供的产品可以按一系列步骤操作，请使用滑块显示该系列并为用户创建视觉效果。

For example, a company that uses smartphones to process credit card transactions might feature on its site a slider that shows a customer presenting the card as payment, an employee swiping it through the device, and funds being transferred to the desired account. What would have taken the user several minutes to read through text, they quickly understand through a slider in seconds. The same process can be adapted to user onboarding for new sites and mobile apps.

例如，使用智能手机处理信用卡交易的公司可能会在其站点上使用一个滑块，该滑块显示客户出示该卡作为付款，一名员工通过该设备刷卡以及将资金转入所需帐户。花费用户几分钟来阅读文本的过程，他们可以在几秒钟内通过滑块快速理解。可以将相同的过程适配为新网站和移动应用程序的用户入门。

使新内容脱颖而出 (Make New Content Stand Out)

First-time website visitors often want to know what their options are and what the website has to offer. Homepage content sliders provide a brief overview and allow visitors to make a decision quickly.

初次访问网站的人经常想知道他们的选择以及网站所提供的内容。主页内容滑块可提供简要概述，并允许访问者快速做出决定。

If you regularly update your site, sliders can emphasise updates. On news websites, the latest and most sensational material is usually the focus of their content slider. Every update stands at the forefront for as long as it is the latest news or newest offering. Users know at a glance when things have changed.

如果您定期更新站点，则滑块会强调更新。在新闻网站上，最新，最轰动的材料通常是其内容滑块的焦点。只要是最新新闻或最新产品，每次更新都将始终站在最前沿。事情发生变化时，用户一目了然。

现在的照相馆 (Present Photo Galleries)

Sometimes a single image makes a powerful statement about your brand. Other times, a collection of images provides compelling evidence of an organisation’s quality, value and trustworthiness. A slider goes beyond simply displaying images. It both organises and displays images irrespective of whether you choose a photo gallery with several small images or screen after screen of full-page high-quality graphics.

有时，一张图片可以很好地说明您的品牌。在其他时候，图像集合提供了组织质量，价值和可信赖性的令人信服的证据。滑块不仅可以显示图像。无论您选择带有几个小图像的图片库还是一个接一个的全页高质量图形屏幕，它都可以组织和显示图像。

Photo galleries can be indispensable for organisations that sell real estate or cars. Home buyers want to see multiple photos of a home before they view it in person, and sliders allow them to quickly thumb through.

对于销售房地产或汽车的组织，照相馆可能是必不可少的。购房者希望在亲自查看房屋之前先查看多张照片，并且滑块可让他们快速浏览。

Car manufacturers present screen after screen of their vehicle’s elite features and innovative design to interest buyers in further details. Instead of having to select individual images, shoppers can quickly flip through. The reduced friction enhances user experience.

汽车制造商逐一展示汽车的主要功能和创新设计，以吸引购买者进一步的兴趣。购物者不必选择单个图像，而可以快速浏览。减少的摩擦增强了用户体验。

在线展示投资组合 (Display Portfolios Online)

Artists, graphic designers and web developers often seek to demonstrate their products, skills and abilities. Clients want to see a taste or a brief overview that allows them to assess overall quality and tone. A slider enables designers to display work in a flexible format. Visitors can see as much or as little as they wish, but even if they do not stay long, they leave with a general impression.

艺术家，平面设计师和网络开发人员经常寻求展示自己的产品，技能和能力。客户希望看到一种口味或简要概述，以便他们评估整体质量和口气。滑块使设计人员能够以灵活的格式显示作品。访客可以根据自己的意愿看到或多或少的东西，但是即使逗留时间不长，他们也会留下一般的印象。

展示电子商务选项 (Showcase Ecommerce Options)

Online entrepreneurs can display a few of the company’s most popular or recognisable products to draw users in, emphasise new varieties or flavours, or show categories to make it easier for users to shop. Designers who research e-commerce web design trends for better sales know some of the most effective layouts use a minimalist approach and plenty of white space, so the slider is allowed to shine.

在线企业家可以展示公司最受欢迎或最受认可的产品，以吸引用户，强调新品种或口味，或显示类别以使用户更容易购物。研究电子商务网站设计趋势以提高销售量的设计师知道，一些最有效的布局使用极简主义方法和足够的空白空间，因此允许滑块发光。

有效性测试 (Test for Effectiveness)

Sliders are useful if they tell a story and leave control over viewing with the user. If you are not sure if your slider improves user experience, test it. If you are just designing your page, run an A/B test to see how users interact with the slider and which version they prefer. See which version had the higher conversion rate or increased revenue.

如果滑块讲述了一个故事并控制了与用户的观看，则很有用。如果不确定滑块是否可以改善用户体验，请对其进行测试。如果您只是在设计页面，请运行A / B测试以查看用户如何与滑块互动以及他们喜欢哪个版本。查看哪个版本具有更高的转化率或增加的收入。

If the slider is on an existing page, track user interaction and click-through data. Note the point at which clicks begin to diminish. Often interest wanes as users proceed through multiple slides. This can be because designers usually put the most compelling content first, but if subsequent material fails to hold user interest, it just slows page load times.

如果滑块在现有页面上，请跟踪用户交互和点击数据。请注意点击次数开始减少的时间点。随着用户浏览多张幻灯片，通常兴趣会减弱。这可能是因为设计人员通常将最引人注目的内容放在首位，但是如果随后的资料不能引起用户的兴趣，那只会减慢页面加载时间。

结论 (In Conclusion)

Each site is different, and each receives different types of visitors. Designers who start with what the user needs and design content around their preferences and interaction style use a wide range of tools to present content. When used correctly, sliders can be implemented to create an even more immersive browsing experience.

每个站点都不同，并且每个站点都会接待不同类型的访问者。从用户需求出发并根据自己的喜好和交互方式设计内容的设计人员使用各种工具来呈现内容。如果使用得当，可以使用滑块来创建更身临其境的浏览体验。

想了解更多？ (Want to learn more?)

Are you interested in the intersection between UX and UI Design? The online courses on UI Design Patterns for Successful Software and Design Thinking: The Beginner’s Guide can teach you skills you need. If you take a course, you will earn an industry-recognized course certificate to advance your career. On the other hand, if you want to brush up on the basics of UX and Usability, try the online course on User Experience (or another design topic). Good luck on your learning journey!

您对UX和UI设计之间的交叉感兴趣吗？有关成功软件和设计思维的 UI设计模式的在线课程：《初学者指南》可以教您所需的技能。如果您参加某门课程，您将获得行业认可的课程证书，以促进您的职业发展。另一方面，如果您想了解UX和可用性的基础知识，请尝试有关“用户体验” (或其他设计主题 )的在线课程。祝您学习愉快！

(Lead image: Depositphotos — affiliate link)

( 首选图片： Depositphotos —会员链接 )

Originally published at UsabilityGeek by Alan Smith, who is an is an out of the heart writer voicing out his take on various topics of social media, web design, mobile apps, digital marketing, entrepreneurship, startups and much more in the cutting edge digital world. He is associated with SPINX Digital a Los Angeles web design company & digital marketing agency.

最初由艾伦·史密斯 ( Alan Smith)在《 可用性》杂志上发表，他是一位发自内心的作家，他在社交媒体，网页设计，移动应用，数字营销，企业家精神，创业公司以及新兴数字世界等诸多主题上发表自己的见解。。他与SPINX Digital(洛杉矶网页设计公司和数字营销代理)相关联。