Аккордеон — интерактивный компонент интерфейса, который помогает организовать большое количество контента в сворачиваемые секции. Когда раскрывается одна секция, остальные секции скрываются. Это экономит пространство экрана и помогает пользователю воспринимать большие объемы информации.
Аккордеон очень полезно использовать, когда пользователю не нужно видеть весь контент сразу.
Структура компонента
Данный элемент состоит из панели с заголовком и сворачиваемых областей контента. Заголовок каждой секции должен быть всегда видим, чтобы облегчить навигацию по компоненту.
Элементы панели
Заголовки секций содержат иконку, текст и дополнительные элементы. Индикатор раскрытия может быть представлен стрелкой или символом плюс/минус, однако, это совсем не обязательно. Контентная часть должна поддерживать любое наполнение.
Варианты компоновки
Обычно используется режим работы с одной активной панелью (остальные автоматически сворачиваются), но иногда интерфейс позволяет использовать аккордеон с множественным раскрытием. Панели могут быть сгруппированы по смыслу или быть обособленными друг от друга.
Анимация раскрытия
При активации заголовка контент плавно раскрывается, а индикатор, если он есть, поворачивается. Следите за тем, чтобы в анимации учитывался объем контента, чтобы движение выглядело естественно.
Взаимодействие с панелями
Заголовки могут выделяться при наведении, однако, это не обязательно, так как обычно аккордеон и так интуитивно понятен пользователю. Клик по заголовку разворачивает или сворачивает секцию. В режиме одной активной панели предыдущая панель автоматически сворачивается.
Мобильная версия
На узких экранах высота заголовков увеличивается для удобства касания, индикаторы становятся крупнее, а анимации оптимизируются для производительности. Аккордеон принимает вертикальное положение.
Планшетная версия и Десктопная версия
На средних экранах возможно комбинирование раскрытых и свернутых секций. Заголовки могут содержать больше информации, отзывчивость на касания улучшена, добавляются дополнительные визуальные подсказки. На средних экранах аккордеон можно сделать горизонтальным. Содержательную часть заголовков можно увеличить, а сам элемент дополнить разными визуальными подсказками. На широких экранах аккордеон может быть и горизонтальным, и вертикальным, в зависимости от задачи. Заголовки и области касания могут стать меньше из-за отсутствия возможности сенсорного взаимодействия.
