Accordion Design: UI Best Practices & Examples

If you’re struggling with too many navigation options or too much content on a web page, an accordion could be the perfect solution.

An accordion is a menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click). Since this网页设计模式仅突出显示一节最关键的信息，但使其其余的很容易访问，这是responsive design.

在这篇文章中，我们将介绍一部手风琴，其用户界面由什么组成以及示例。

This design pattern is ideal for breaking down longform or complex content into digestible chunks. It’s also ideal for mobile sites since it reduces how much a user has to scroll.

Here’s an example of an accordion menu used on a FAQ page of a website:

Image Source

这使人们可以控制阅读内容以及何时可以增强其用户体验。在上面的示例中，读者只能单击第一个标头来学习Yogaline Mat的尺寸和重量，然后跳过其余的。否则他们可能会完全滚动菜单。无论哪种方式，他们都可以决定他们的阅读经历是什么。

何时使用手风琴

手风琴可以改善用户体验 - 如果出于正确的理由和正确的内容。让我们看一些应该使用手风琴的用例。

• When readers only need a few key pieces of information:如果读者只需要页面上的一些信息，那么手风琴就可以帮助他们更轻松有效地找到所需的信息。FAQ页面经常使用手风琴，因为许多读者只是为了找到一个或两个问题的答案。
• 读者将从较小的屏幕查看您的网站时：如果您对在移动设备（例如移动设备）等小屏幕上的大量内容感到挑战，那么手风琴可以帮助读者概述该页面的内容，并减少他们需要滚动的程度。

当不使用手风琴

Despite its many benefits, an accordion is not always the best choice for your website design. Let’s look at some reasons why you wouldn’t want to use an accordion.

• When readers will need to click on the majority of accordion items:If users need to open the majority of accordion items, then it’s better to reveal all the content instead of hiding some. That way you won’t be forcing users to decide which headings to click on and to click on them one at a time, which can be cumbersome.
• When you don’t have the resources to make it accessible:手风琴必须可以访问，这是一项额外的发展工作。如果您没有符合可访问性标准所需的内部支持或预算，那么最好使用纯文本。

要深入了解什么是手风琴，何时使用它以及它具有的优势和缺点，请检查一下视频Niki提萨河:

Accordion UI

While the design of an accordion varies by site and purpose, its user interface is made up of three elements. Let’s take a look at each below.

Headers

Accordion headers contain section titles. These are meant to be brief but descriptive enough to indicate what the reader can expect to learn more about by clicking. Here’s an example:

Image Source

Icons

图标通常在本节标题的左侧或右侧出现，表明单击时还有更多可用的内容。这些图标可能是指向右侧的箭头，一个镜头，加号或雪佛龙指向下方。

通常，有两组图标用于指示项目是否已扩展或崩溃。在下面的示例中，旋转了扩展部分的加上图标，因此看起来像“ x”。再次单击时，该部分将崩溃，图标将返回其原始位置。

面板

面板are sections of content associated with each header. By default, panels are typically hidden and revealed when a user clicks on a header or icon in the menu. Panels can be composed of bullet points or multiple paragraphs, but they should be brief and descriptive like accordion headers.

An accordion UI may also make use of colors, symbols, and subtitles, as we’ll see in the examples below.

要更好地了解手风琴UI，请检查一下DesignCoach的视频that walks through how to build out an accordion component using Figma:

手风琴菜单示例

尽管是如此常见的设计元素，但在站点之间，手风琴菜单看起来截然不同。这是因为手风琴的上下文或目的将影响其外观以及用户与它的交互方式。例如，导航的手风琴不会像网站的常见问题解答部分那样看起来或行为。

With this in mind, let’s look at a variety of accordion menu examples below.

1.&Tea

我们喜欢什么：&Tea’s homepage uses an accordion to present its menu categories one at a time. That way, readers can easily browse each flavor and know which category it belongs to, or skip right to their favorite category.

2.Material

我们喜欢什么：FAQ页面分为部分，每个部分都有自己的手风琴。左侧的跳跃链接使用户可以轻松地跳到他们感兴趣的各自的手风琴。

3.Urban Jungle

我们喜欢什么：Like Material, Urban Jungle divides its FAQ page into sections, each with its own accordion and jump link for easier navigation. What’s unique about this page is the horizontal layout in which the section names are placed to the left of the accordion, instead of on top of it. This is a clever way to make the page shorter and quicker to scroll.

4.Nourish Change

我们喜欢什么：Nourish Change的FAQ页面具有与Urban Jungle相似的水平布局 - 但其配色方案和图标是完全独特的。交替的颜色和慷慨的空间使用有助于使每个手风琴项目变得不同。带有帮助文本的图标也清楚地传达了手风琴的功能。

Using an Accordion in Your Website Designs

Accordions can help improve the user experience, especially on mobile devices. Since they provide the most important information first, and leave it up to users to decide what to learn more about, they’re ideal for FAQ pages, menu sections on homepages, and more.