CS-Cart модуль «Меню Аккордеон» от Alt-team
Компактное, вертикальное меню категорий в стиле Аккордеон — это полезный элемент в навигации по Вашему онлайн магазину. CS-Cart модуль «Меню Аккордеон» поможет Вашим посетителям легко и просто ориентироваться в многочисленных вкладках Вашего меню.
Особенности:
- Отображает Меню Категорий на странице онлайн магазина в виде раскрывающегося списка;
- Позволяет отображать подкатегории любого уровня вложенности;
- Совместим с адаптивными темами;
- Возможность разместить Аккордео Меню на любую страницу онлайн магазина.
Совместимость:
Модуль корректно работает в браузерах — Internet Explorer, Mozilla Firefox, Safari, Google Chrome и Opera (последние версии).
Модуль совместим с CS-Cart 4.0.х. и адаптивным дизайном.
Пожалуйста, свяжитесь с нами, если у Вас возникнут какие-либо вопросы относительно этого модуля.
Для корректной работы CS-Cart модуля «Меню аккордеон», Вам необходимо создать новый блок для вертикального меню,после установки модуля.
1. В административной панели онлайн магазина откройте Дизайн>Макеты.
2. Выберите страницу, где должен размещаться новый блок.
3. Создайте новый вертикальный блок и назовите его.
4. В поле Шаблон выберите Вертикальный выпадающий список.
5. Сохраните.
Установка
1. Скачайте архив с модулем Accordion Menu.
2. Распакуйте архив и загрузите файлы на свой сервер в корневую папку с установленной CS-Cart.
3. Залогиньтесь в администраторскую часть магазина, перейдите в “Модули” → “Управление модулями”.
4. Найдите модуль Alt-team:Accordion Menu в списке модулей и нажмите на ссылку “Установить”напротив названия.
5. Все, модуль установлен.
После устновки, выполните ряд настроек, описанных в табе Документация.
Попробуйте демо
Клиентская часть
Логин: [email protected] Пароль: customer
Панель администратора
Логин: [email protected] Пароль: admin
«Yes, it will work with Cs-Cart 4.3.x.»
– Alt-team
«Good addon, used it with Cs-Cart 4.2.4
Will it be compatible with version 4.3.3?»
– Alexander
«Dear Sergeh,
We can not guarantee you the stable work of this add-on with the custom made menu. We developed it for the not modified Cs-Cart.
Best regards, Alt-team.»
– Alt-team
«looks great. I’ve got a presale question. Can this be used for a custom made menu or just for product categories?»
– sergeh
«Thank you, Kostas!
We will post the links on demo soon.
Happy to see you among our customers.
Best regards, Alt-team. «
– Alt-team
«hi.great addon but any demo????
does it use thrid or above categories or just second level???»
– kostas
Ваше имя:
Ваш рейтинг: Отлично!Очень хорошоСносноПлохоОчень плохо
Ваше сообщение:
Паттерны дизайна. Создание идеального аккордеона(accordion)
Паттерны дизайна. Почти мифическая фраза, которая часто вызывает трепет или негодование. Дизайнеры склонны думать о паттернах дизайна, как о готовых стандартных решениях, которые можно применять в различных контекстах почти механически, часто без должного рассмотрения. Навигация? Off-canvas! Предложение дня? Карусель! Ну, вы поняли суть.
Иногда мы используем эти паттерны, даже не задумываясь о них, и для этого есть веская причина: придумывать новое решение всякий раз, когда мы сталкиваемся с проблемой интерфейса рискованно и отнимает много времени, потому что мы не знаем, сколько времени потребуется, чтобы внедрить новое решение и определить, будет ли оно корректно или провалит тесты юзабилити.
Паттерны дизайна могут быть чрезвычайно полезными, в основном потому, что экономят время и быстрее дают лучшие результаты. Нам не нужно их идентично применять, к каждой проблеме, с которой мы сталкиваемся, но мы можем опираться на них, используя имеющийся опыт, для обоснования принимаемых решений. Ведь мы знаем, что они достаточно хорошо работали в других проектах.
За последние несколько лет я провел много времени, работая с различными компаниями, пробуя различные подходы и изучая их с помощью тестов юзабилити. Эта статья представляет собой резюме наблюдений и экспериментов, проведенных за это время.
Базовые элементы аккордеонов
Есть веская причина, по которой аккордеон, вероятно, является самым популярным элементом адаптивного дизайна. Это чрезвычайно полезный паттерн для В результате дизайн остается сфокусированным и в первую очередь отображает важную информацию, а все остальное легко доступно. Если вы столкнетесь с проблемой любого рода – слишком много вариантов навигации, слишком много контента, слишком подробное представление – старый добрый аккордеон может быть хорошей отправной точкой для решения этой проблемы. Чаще всего он работает на удивление хорошо.
Насколько сложно создать аккордеон? Что ж, нужно учесть много факторов. Хороший пример – сайт Schoolfinder
Однако даже такой предсказуемый и часто используемый компонент, как аккордеон, имеет много возможностей для интерпретаций и двусмысленности. Не поймите меня неправильно: контекст имеет значение. Аккордеон для навигации потребует иного подхода, нежели для раздела вопросов и ответов. Но в любых контекстах мы должны тщательно обдумать две вещи: визуальный и интерактивный дизайн аккордеона, чтобы устранить любую путаницу и неверное толкование.
Теперь, если мы более внимательно посмотрим на базовые элементы аккордеона, не составит труда увидеть его атомарные элементы. Аккордеон всегда содержит заголовок категории, развернутое и свернутое состояния, иконку, указывающую на расширение, и интервал между ними. После расширения категории иконка должна измениться, указывая на сворачивание. Однако, что, если пользователь нажмет на свернутую карточку, в то время как другая карточка открыта? Должна ли развернутая карточка закрываться автоматически или нет? Что, если невозможно отобразить все элементы – должна ли страница автоматически прокручиваться вверх? Давайте подробнее рассмотрим эти и связанные с ними вопросы.
Классический пример аккордеона на сайте Nsb.no, норвежском планировщике поездок, с иконкой, выровненной по правому краю панели, и всей панелью, действующей как триггер расширения
Выбор иконки для обозначения расширения
А теперь приступим. Что мы знаем? Что ж, очевидно, что в большинстве интерфейсов с письмом слева направо название категории будет выровнено по левому краю. Предполагая, что, как и во многих аккордеонах, подпункты будут перемещаться между двумя разделами, какую иконку вы бы выбрали, чтобы сообщить об этом поведении? Стрелка, указывающая вниз, стрелка, указывающая вправо, шеврон, указывающий вниз, плюс, обведенный плюс или что-то еще?
Zvv.ch объединяет два горизонтальных аккордеона с одной и той же иконкой (обведенный плюс) — одной для обозначения вариантов поездки, а другой для обозначения остановок между двумя точками. Оба они служат одной цели (расширению) и выглядят одинаково. Они четко передают назначение иконки и ожидаемое поведение
По моему опыту, кажется, что выбор иконки не имеет значения, если она не перегружена различными значениями в одном и том же интерфейсе. Например, если вы используете обведенный кружком плюс для обозначения расширения, масштабирования и объединения двух элементов в тарифных планах – это может ввести в заблуждение. Однако, в контексте аккордеона пользователи, похоже, понимают, что, если у некоторых элементов навигации есть иконка, а в других разделах нет, это своего рода знак того, что при тапе или клике становится доступным больше контента. Мы не обнаружили никаких признаков того, что одна иконка более или менее узнаваема, чем другие. Однако, это не означает, что одни варианты не могут вызвать большую путаницу, чем другие.
Ableton.com использует значок плюса, чтобы обозначить как тарифное предложение (вверху), так и расширение (если вы прокрутите страницу вниз). Иконки, имеющие несколько значений, могут сбить с толку, потому что некоторые пользователи могут ожидать либо расширения при нажатии на значок вверху (но ничего не происходит), либо отсутствия взаимодействия при нажатии на значок плюса внизу (действует как расширение)
Например, Slack использует стрелку, указывающую вправо, хотя элементы аккордеона перемещаются вертикально между заголовками категорий, а не вправо от них. Теперь стоит спросить, какое назначение должно иметь направление иконки? Вероятно, она должна служить индикатором направления движения или, точнее, того, куда будет перемещаться взгляд пользователя после тапа или клика по иконке. Например, в приложении «Почта» на iOS, шеврон, указывающий вправо, соответствует перемещению взгляда пользователя слева-направо.
В Slack тарифные планы на мобильных устройствах отображаются в виде свернутых аккордеонов, при этом шеврон указывает вправо, а движение происходит сверху вниз.
В приложении «Почта» на iOS, например, шеврон, указывающий вправо, соответствует перемещению взгляда пользователя слева-направо
Наличие сопоставления между направлением иконки и движением взгляда пользователя кажется разумным, но поскольку разные интерфейсы ведут себя по-разному (с таинственными иконками, заставляющими пользователя разгадывать головоломки), не все будут ожидать такого поведения. Так что, в конце концов, это не имеет значения, вы все равно не сможете соответствовать ожиданиям некоторых пользователей. При проектировании мы, как правило, сосредотачиваемся на том, что проектируем, но даже если наши интерфейсы будут предельно последовательны, у пользователей будут ожидания, зависящие от опыта, полученного на других сайтах. Таким образом, главное – быть максимально устойчивым и обеспечить пользователям возможность легко и незамедлительно сделать шаг назад в случае, если ожидания не оправдаются.
Значок плюса может иметь разные значения. На сайте Leica, плюс открывает лайтбокс, в котором отображается продукт. Некоторые пользователи могут не ожидать такого поведения. Значок лупы здесь может быть менее неоднозначным
Итак, оглядываясь назад на выбор иконки, если элементы аккордеона сдвигаются вертикально, интуитивно кажется безопасным использовать любую из иконок, перечисленных выше, кроме иконки, указывающей вправо. Единственная проблема, которую следует учитывать – не перегружена ли выбранная вами иконка другим значением в другом контексте. Например, если вы используете иконку плюса для выделения частей тарифного плана (где плюс не нажимается), а затем используете аналогичную иконку для аккордеона. В таком случае лучше избегать использования одной и той же иконки для разных целей, так как это может вызвать путаницу.
Значит, все прояснилось? Ну, не совсем.
Давайте на секунду подумаем об ожидаемом взаимодействии. В то время как стрелка и шеврон обычно служат сигналом для изменения в указанном направлении, плюс указывает на добавление и расширение. В обоих случаях изменение может происходить по-разному: нажатие на иконку вызывает либо оверлей с элементами навигации, появляющийся поверх контента, либо перемещение элементов по вертикали (а не по горизонтали).
Какого поведения следует ожидать пользователям, когда они видят стрелку в меню навигации на сайте tifwe.org? Понятно, что иконка справа от элементов навигации указывает на подменю, а в дизайне хорошо используется доступное пространство. Название категории – это ссылка, которая переходит прямо к категории, а стрелка предлагает расширение
Однако, когда пользователь попадает на страницу, сначала он не знает, попал ли он на страницу с длинным скроллом, где ссылки перебрасывают вас к разным частям страницы, или на «обычный» веб-сайт с разделами, существующими на отдельных страницах. Довольно часто стрелка, указывающая вниз, запускает переход к разделам на странице, а не расширяет возможности навигации. Вполне вероятно, что в прошлом пользователь мог быть дезориентирован, попав в раздел длинной страницы, а затем вернулся к началу страницы и продолжил оттуда.
Иконки часто неоднозначны. На Qso.com, как пользователи могут точно узнать, будет ли нажатие кнопки внизу экрана расширять область в виде аккордеона или прокручивать страницу вниз? В этом случае прокручивается страница. Это может быть проблемой, поскольку шеврон часто указывает на расширение
В результате, если вы решите использовать стрелку, вы можете столкнуться с тем, что некоторые пользователи будут ожидать, что страница прокрутится вниз до этого раздела страницы. Таким образом, шеврон кажется более безопасным и предсказуемым вариантом; если вы решите использовать его, то в свернутом состоянии направьте его вниз, а в развернутом — вверх. Для иконки плюса вы можете выбрать между значками минус или крестик.
Стрелки на сайте Papillons De Nuit. Что вы ожидаете при нажатии на стрелки вверху страницы и справа? Стрелка сверху действует как подсказка (и ничего не делает при нажатии), в то время как стрелки справа прокручивают пользователя к разделам страницы. Не каждый пользователь мог ожидать такого поведения
Итак, что все это значит для дизайнеров? Во-первых, если предполагается, что элементы аккордеона скользят горизонтально слева-направо, можно безопасно использовать стрелку, указывающую вправо. Во-вторых, если предполагается, что элементы аккордеона скользят вертикально сверху-вниз, подойдет либо шеврон, указывающий вниз (не стрелка!), либо иконка плюса.
Учитывая вышесказанное, выбор иконки должен быть довольно простым решением. Но в зависимости от того, насколько близко эта иконка находится к заголовку категории, это тоже может вызвать путаницу. Теперь, какие варианты нужно учитывать при выборе положения этой иконки?
Выбор положения иконки
Параметры! Независимо от того, какую иконку вы выбрали, вы можете разместить ее: а) слева от названия категории; б) справа от нее; в) выровнять иконку по правому краю всей панели элементов навигации, разделив ее интервалом с названием категории.
Иногда клик по текстовой метке открывает отдельную страницу категории, а клик по пустому месту ничего не делает. Вот почему, желая раскрыть аккордеон, некоторые пользователи будут пытаться нажать на иконку, а не на категорию или пустое пространоство. Исследование Viget.com
Имеет ли значение позиция? На самом деле, да. Согласно статье Viget «Тестирование дизайна и иконок меню аккордеона», некоторые пользователи, как правило, сосредотачиваются на нажатии именно на иконку, а не на всю панель навигации. Это происходит по простой причине: в прошлом пользователи могли «обжечься» об альтернативные варианты аккордеона. На некоторых сайтах заголовок категории не запускает расширение, а вместо этого переходит прямо в категорию. В других дизайнах нажатие на панель навигации не вызывает ни расширения, ни перехода в категорию – абсолютно ничего не происходит.
Хотя мы, конечно, проектируем всю область так, чтобы она была целевой, не каждая навигация имеет подобное поведение, поэтому некоторые пользователи не будут знать какая у вас навигация, пока не нажмут на нее (или не наведут на нее курсор). Поскольку наведение курсора не всегда доступно, нажатие на иконку кажется более безопасным – нажатие на иконку почти всегда вызывает ожидаемое поведение. Это важная деталь, которую нужно учитывать при создании аккордеона.
При использовании различных интерфейсов и реализаций казалось, что с иконкой, размещенной справа от заголовка категории, пользователи предпочитают фокусироваться на иконке чаще, чем, если иконка размещается слева (где пользователи нажимают на заголовок категории или пустую часть панели). Однако некоторые пользователи по-прежнему склонны выбирать иконку. Следовательно, будет хорошим решением сделать ее достаточно большой для удобного нажатия – не менее 44 × 44 пикселей.
Следует выравнивать по левому или по правому краю? Похоже, это не имеет большого значения. Но, если у вас есть группа аккордеонов (возможно, расположенных в меню навигации), при этом длина заголовков категорий сильно различается, переключение состояний аккордеона во многих разделах потребует немного большего внимания, чем просто перемещение по панели навигации сверху-вниз. Просто указатель мыши или палец нужно постоянно перемещать, чтобы попасть по этой причудливой иконке! Кроме того, если иконка расположена справа, на узком экране пальцу придется перемещаться по области навигации, закрывая экран. Если иконка расположена на правом краю панели, эта проблема будет решена.
Но, если иконка выровнена по правому краю панели, нам все равно нужно быть осторожными, чтобы не размещать ее слишком далеко от названия категории. Визуально должно быть очевидно, что расширение относится к категории; поэтому в разных окнах просмотра положение иконки может измениться, чтобы визуальная связь оставалась очевидной. Кроме того, иконка может стать немного больше на более широких экранах. Этот вариант кажется предпочтительным для группы аккордеонов, но на самом деле не имеет большого значения для отдельного аккордеона – если ваши данные не доказывают обратное.
Дизайн взаимодействия для аккордеона
Однако, даже если убрать все эти мелкие детали, взаимодействие по-прежнему вызывает ряд вопросов. Предположим, что заголовок категории выровнен по левому краю, а иконка – по правому краю панели. Что должно произойти, когда пользователь нажимает на название категории, иконку или пустое пространство между ними? Должны ли все они инициировать расширение или они должны служить разным целям?
Что ж, можно быть уверенным в одном: когда пользователь нажимает на иконку, он, вероятно, ожидает какого-то расширения, поэтому нажатие на иконку обязательно должно вызвать расширение. Однако по названию категории можно щелкнуть как с намерением перейти прямо к категории, так и с целью расширения.
Если заголовок категории вызывает расширение, нам необходимо предоставить ссылку на категорию в выпадающем меню, чтобы пользователи могли переходить к этому разделу (например, «Все элементы»). Это означает, что переход пользователя от первой страницы к категории может вызвать путаницу, поскольку он не ожидает, что при нажатии на заголовок категории потребуется дополнительное нажатие. Однако, возможность вернуться в этом случае очевидна и на самом деле не заставляет пользователя восстанавливать предыдущее состояние, поскольку он может сразу продолжить работу.
Если ссылка на категорию в аккордеоне очевидна, она не будет мешать работе, тогда как переход к категории вместо того, чтобы развернуть элемент навигации, а затем вернуться назад, может показаться неудобным. Вот почему, вероятно, лучше иметь и иконку, и заголовок категории, запускающие раскрытие. Это менее навязчиво. Должно ли это взаимодействие происходить между заголовком категории и иконкой? Некоторые дизайнеры могут возразить, что, когда пользователь нажимает на область навигации, он может не захотеть расширения, а скорее «привязать» указатель мыши к началу прокрутки страницы, и, следовательно, это будет мешать работе. Это возможно, но вряд ли случится, если пользователь решит открыть меню навигации, чтобы изучить доступные параметры.
Чем ближе к иконке происходит касание, тем больше вероятность того, что пользователи будут ожидать расширения. Однако это не означает, что чем ближе нажатие к названию категории, тем больше вероятность перехода к ней
Аккордеоны часто используются для карточек, и в зависимости от ширины области просмотра карточки могут быть довольно широкими, поэтому, хотя некоторые пользователи будут отчаянно пытаться нажать на иконку, часть пользователей будет сворачивать и разворачивать карточки, нажимая на пустую область в панели. Другие пользователи будут привыкать к пустой области, не имеющей никакой цели, и просто проигнорируют ее. Лишь немногие ожидают, что панель будет служить ссылкой на категорию. В наших тестах оказалось, что наличие триггерного расширения пустого пространства менее запутанно, чем другие варианты, поэтому мы решили его использовать.
Аккордеон не должен служить только навигации. Он также может отображать более или менее подробные сведения, например в таблице лидеров на PremierLeague.com. (Desktop view⎢Mobile view)
Но что, если вы хотите, чтобы заголовок категории был связан непосредственно с категорией? Одна из идей состоит в том, чтобы внести ясность, имея два визуально отличающихся элемента, которые «намекают» на границы элементов – например, с разным цветом фона для иконки и заголовка категории (см. Пример выше). В наших экспериментах мы не заметили изменений в поведении и ожиданиях пользователей – некоторые люди все равно нажимают на категорию и задаются вопросом, что же произошло. Опять же, соединение раздела внутри расширенного аккордеона кажется более безопасным вариантом.
Что делать, если пользователь нажимает иконку для расширения, но на экране недостаточно места для отображения всех подэлементов? Кто-то из вашей команды может предложить автоматически прокрутить страницу вверх, чтобы убедиться, что расширенная область отображается в самом верху экрана. Это хорошая идея?
Всякий раз, когда мы пытаемся забрать контроль у пользователя, это решение должно быть тщательно обдумано и проверено. Возможно, пользователь заинтересован в одновременном просмотре нескольких разделов и хочет быстро переключаться между содержимым этих разделов. Вместо того, чтобы заставлять пользователя задаваться вопросом о поведении авто скролла или прыжка, а затем скроллить назад, чтобы восстановить предыдущее состояние, кажется менее навязчивым просто оставить все как есть, отдав решение на усмотрение пользователя. Он может прокручивать страницу вниз, если необходимо. Не многие пользователи будут ожидать скачка вверх страницы – лучше не прерывать юзерфлоу или добавить постоянную ссылку на раздел (если он действительно длинный).
На сайте Sony.com, если один раздел раскрывается и пользователь нажимает на другой раздел, открытый раздел автоматически сворачивается. Такое поведение неодинаково на разных веб-сайтах, поэтому пользователи не могут полагаться на такое поведение и ожидать его везде
И тогда возникает другой вопрос: если один раздел уже развернут, и пользователь нажимает на другой раздел, должен ли первый свернуться или остаться как есть? Если первый раздел сворачивается автоматически, но это не совсем то, на что надеялся пользователь, он всегда может открыть его снова, но не сможет просматривать или сравнивать обе категории одновременно. Если раздел останется развернутым, ему придется активно закрыть ненужную категорию. У обоих вариантов есть разумные случаи использования.
Природа аккордеона требует автоматического сворачивания, но это может быть не лучший вариант с точки зрения юзабилити. Для аккордеонов с большим количеством элементов мы склонны оставлять разделы раскрытыми, потому что прыжки, происходящие в результате одновременного закрытия и открытия панелей, слишком отвлекают. Следовательно, в качестве альтернативы вы можете предоставить кнопку «свернуть все» / «развернуть все», что может быть очень полезно для расписания или подробной таблицы. Если элементов не так много, то раздел может быть свернут по умолчанию, потому что переход будет минимальным. (Обратите внимание, что для горизонтальных аккордеонов секция определенно закроется – держать ее открытой просто не имеет смысла).
На веб-сайте The Guardian слева размещается шеврон, за которым следует название категории и пустое место. Нажатие на любую точку панели вызывает расширение, а домашняя страница категории аккуратно отображается в качестве первого варианта среди элементов аккордеона
И еще кое-что. Не обращайте внимания на выбор иконки или ее положения, всякий раз, когда аккордеон раскрывается, его должно быть легко сразу же свернуть. Это взаимодействие не требует дополнительных движений курсора мыши или пальца – как и любое другое взаимодействие по скрытию-раскрытию элемента. Это означает, что иконка для сворачивания и раскрытия должна измениться при активации, но ее положение должно оставаться неизменным, что позволяет мгновенно переключать состояние аккордеона.
Вывод
Уф, это было долгое изучение, казалось бы, очевидного паттерна дизайна. Итак, как нам создать идеальный аккордеон? Мы выбираем иконку, которая указывает на расширение (шеврон, указывающий вниз, или значок плюса), делаем ее достаточно большой для удобного нажатия и помещаем ее поперек правого края панели. Вся панель навигации запускает расширение – с достаточным отступом вокруг панели для переключения состояний, и ссылкой на главную страницу категории в категории аккордеона.
Если мы решим использовать шеврон, направление должно измениться при нажатии, а если это значок плюса, он может легко смениться на «-» или «x», чтобы указать на сворачивание. Чтобы взаимодействие было еще более четким, мы можем использовать тонкие переходы или анимацию, которые будут выдвигать и задвигать элементы категорий.
Конечно, ваше решение может сильно отличаться в зависимости от контекста, поэтому, если вы ищете альтернативное решение, ниже вы найдете несколько вопросов, которые мы всегда задаем при проектировании аккордеона.
Чеклист проектирования аккордеонов
- Какую иконку вы выберете для обозначения раскрытия?
- Какую иконку вы выберете для обозначения сворачивания?
- Где именно вы разместите иконку?
- Как оформить заголовок категории?
- Как вы указываете состояние свертывания и раскрытия (помимо иконки)?
- Что произойдет, если пользователь нажмет на категорию?
- Должен ли аккордеон содержать ссылку на главную страницу категории?
- Что произойдет, если пользователь нажмет на пустое место?
- Должен ли развернутый раздел сворачиваться автоматически при выборе другого раздела?
- Что делать, если для отображения всех элементов недостаточно места?
- Должны ли у вас быть ссылка или кнопка «Свернуть все / Открыть все»?
Уровень внимательности, требуемый для такого, казалось бы, устоявшегося и предсказуемого компонента, как аккордеон, оказывается почти бесконечной историей дизайн-экспериментов и сессий юзабилити, потому что существует лишь несколько руководящих принципов для внешнего вида и взаимодействия этого компонента. Хотя создать доступный аккордеон несложно, создать универсальный аккордеон не так-то просто. Следовательно, пользователи часто чувствуют себя потерянными, потому что поведение аккордеона не соответствует их ожиданиям или из-за того, что взаимодействие прерывает их юзерфлоу. Наша задача – уменьшить трудности и сделать так, чтобы они встречались как можно реже. Благодаря гибкому дизайну мы можем добиться именно этого.
Возможно, у вас был иной опыт, чем упомянутый в статье? Пишите об этом в комментариях!
Перевод статьи smashingmagazine.com
UI Best Practices & Examples
Если у вас слишком много вариантов навигации или слишком много контента на веб-странице, аккордеон может стать идеальным решением.
Аккордеон представляет собой меню, состоящее из вертикально расположенных заголовков, раскрывающих более подробную информацию при срабатывании (часто по щелчку мыши). Поскольку этот шаблон веб-дизайна выделяет только самую важную информацию раздела, но делает остальную часть легко доступной, он является распространенным элементом адаптивного дизайна.
В этом посте мы рассмотрим, что такое аккордеон, из чего состоит его пользовательский интерфейс и приведем примеры.
Что такое аккордеон в веб-дизайне?
В веб-дизайне аккордеон — это тип меню, в котором отображается список заголовков, расположенных друг над другом. При нажатии (или при нажатии на клавиатуру или программе чтения с экрана) эти заголовки будут либо отображать, либо скрывать связанный контент.
Этот шаблон проектирования идеально подходит для разбиения длинного или сложного контента на удобоваримые фрагменты. Это также идеально подходит для мобильных сайтов, так как уменьшает количество прокрутки пользователем.
Вот пример аккордеонного меню, используемого на странице часто задаваемых вопросов веб-сайта:
Источник изображения
Это дает людям контроль над тем, что и когда читать, что может улучшить их взаимодействие с пользователем. В приведенном выше примере читатели могут щелкнуть только первый заголовок, чтобы узнать размеры и вес коврика Yogaline, и пропустить остальные. Или они могут вообще прокрутить меню. В любом случае, они сами решают, каков их читательский опыт.
Когда использовать аккордеон
Аккордеон может улучшить взаимодействие с пользователем, если используется по правильной причине и с правильным содержанием. Давайте рассмотрим некоторые варианты использования, в которых вам следует использовать аккордеон.
- Когда читателям нужно всего несколько ключевых фрагментов информации: Если читателям нужна только некоторая информация на странице, аккордеон может помочь им более легко и эффективно находить нужную информацию. Страницы часто задаваемых вопросов часто используют аккордеон, потому что многие читатели приходят, чтобы найти ответ только на один или два вопроса.
- Когда читатели будут просматривать ваш сайт с небольших экранов: Если вам сложно разместить большой объем контента на маленьком экране, таком как мобильное устройство, аккордеон может помочь читателям получить представление о том, о чем страница, и уменьшить, сколько им нужно прокрутить.
Когда не следует использовать аккордеон
Несмотря на множество преимуществ, аккордеон не всегда является лучшим выбором для дизайна вашего веб-сайта. Давайте рассмотрим некоторые причины, по которым вы не захотите использовать аккордеон.
- Когда читателям нужно будет нажимать на большинство элементов аккордеона: Если пользователям нужно открыть большинство элементов аккордеона, лучше открыть все содержимое, а не скрывать его. Таким образом, вы не будете заставлять пользователей решать, на какие заголовки нажимать, и нажимать на них по одному, что может быть обременительно.
- Если у вас нет ресурсов, чтобы сделать его доступным: Аккордеоны должны быть доступны, что требует дополнительных усилий при разработке. Если у вас нет внутренней поддержки или бюджета, необходимого для соблюдения стандартов доступности, лучше использовать обычный текст.
Для подробного ознакомления с тем, что такое аккордеон, когда его использовать, а также с его преимуществами и недостатками, посмотрите это видео Ники Тисы: по сайту и назначению его пользовательский интерфейс состоит из трех элементов. Давайте посмотрим на каждый ниже.
Заголовки
Заголовки-гармошки содержат заголовки разделов. Они должны быть краткими, но достаточно описательными, чтобы показать, о чем читатель может узнать больше, щелкнув мышью. Вот пример:
Источник изображения
Значки
Значки, которые обычно появляются слева или справа от заголовков разделов, указывают, что при нажатии на них доступно больше содержимого. Эти значки могут быть, среди прочего, стрелкой, указывающей вниз или вправо, знаком вставки, знаком плюс или шевроном, указывающим вниз.
Часто используются два набора значков, которые указывают, был ли элемент развернут или свернут. В приведенном ниже примере значок плюса расширенного раздела повернут так, что он выглядит как «X». При повторном нажатии раздел свернется, а значок вернется в исходное положение.
Панели
Панели – это разделы контента, связанные с каждым заголовком. По умолчанию панели обычно скрыты и отображаются, когда пользователь щелкает заголовок или значок в меню. Панели могут состоять из маркеров или нескольких абзацев, но они должны быть краткими и информативными, как заголовки аккордеона.
UI-аккордеон также может использовать цвета, символы и субтитры, как мы увидим в примерах ниже.
Чтобы лучше понять пользовательский интерфейс аккордеона, посмотрите это видео от DesignCoach , в котором показано, как создать компонент аккордеона с помощью Figma:
Примеры меню-аккордеона
Несмотря на то, что это такой распространенный элемент дизайна, меню-гармошка выглядит очень по-разному на разных сайтах. Это связано с тем, что контекст или цель аккордеона будут влиять на то, как он выглядит и как пользователи взаимодействуют с ним. Аккордеон для навигации, например, не будет выглядеть или вести себя так же, как аккордеон для раздела часто задаваемых вопросов на веб-сайте.
Имея это в виду, давайте рассмотрим различные примеры меню аккордеона ниже.
1. &Tea
Что нам нравится: На главной странице &Tea используется аккордеон для представления категорий меню по одной. Таким образом, читатели могут легко просмотреть каждый аромат и узнать, к какой категории он принадлежит, или сразу перейти к своей любимой категории.
2. Материал
Что нам нравится: Страница часто задаваемых вопросов разделена на разделы, каждый из которых имеет свой собственный аккордеон. Ссылки перехода слева позволяют пользователям легко перейти к интересующему их разделу и соответствующему аккордеону.
3. Urban Jungle
Что нам нравится: Как и Material, страница часто задаваемых вопросов Urban Jungle разделена на разделы, каждый из которых имеет собственный аккордеон и ссылку для перехода для более удобной навигации. Что уникально на этой странице, так это горизонтальная компоновка, в которой названия разделов размещаются слева от аккордеона, а не поверх него. Это умный способ сделать страницу короче и быстрее прокручивать ее.
4. Питать перемены
Что нам нравится: Страница часто задаваемых вопросов Nourish Change имеет такой же горизонтальный макет, как и Urban Jungle, но ее цветовая схема и значки совершенно уникальны. Чередующиеся цвета и щедрое использование пустого пространства помогают сделать каждый элемент аккордеона уникальным. Значки со справочным текстом также четко передают функциональность аккордеона.
Использование аккордеона в дизайне вашего веб-сайта
Аккордеон может помочь улучшить взаимодействие с пользователем, особенно на мобильных устройствах. Поскольку они сначала предоставляют самую важную информацию, а пользователям остается решать, о чем им подробнее узнать, они идеально подходят для страниц часто задаваемых вопросов, разделов меню на домашних страницах и многого другого.
Темы: Примеры дизайна веб-сайта
Не забудьте поделиться этим постом!
дизайнов меню Accordion, тем, шаблонов и графических элементов, загружаемых на Dribbble
Просмотр взаимодействия со сворачиваемой боковой панелью
Складная боковая панель Взаимодействие
Посмотреть компоненты Accordion для набора Material X Ui
Компоненты аккордеона для набора Material X Ui
Просмотр элементов веб-интерфейса в темном режиме
Темный режим элементов веб-интерфейса
Посмотреть ↕️ Подменю
↕️ Подменю
Посмотреть дизайн пользовательского интерфейса Accordion — набор пользовательского интерфейса Figma Material X с шаблонами приложений
Дизайн пользовательского интерфейса Accordion — набор пользовательского интерфейса Figma Material X с шаблонами приложений
Посмотреть компоненты Alpine
Компоненты Alpine
Посмотреть дизайн пользовательского интерфейса Accordion — все, что вам нужно знать
Аккордеонный дизайн пользовательского интерфейса — все, что вам нужно знать
Просмотреть Концепция персонализированного инструмента интеграции данных
Концепция персонализированного инструмента интеграции данных
Просмотр пользовательского интерфейса/UX-дизайна панели событий
Дизайн пользовательского интерфейса/UX панели событий
Посмотреть CMS
Просмотр ящика навигации
Навигационный ящик
Посмотреть НОВУЮ ФУНКЦИЮ: Аккордеонный модуль
НОВАЯ ФУНКЦИЯ: Аккордеонный модуль
Просмотр всплывающего окна экспорта подкаста
Всплывающее окно экспорта подкаста
Просмотреть часто задаваемые вопросы — пользовательский интерфейс без названия
Часто задаваемые вопросы — Пользовательский интерфейс без названия
Просмотр управления ролями администратора
Управление ролями администратора
Просмотр решения проблем
Решение проблем
Посмотреть Канбан Посмотреть
Представление Канбан
Просмотр вложенной таблицы данных
Вложенная таблица данных
Посмотреть ценообразование Desktop Exploration (бесплатные файлы Figma)
Цены Исследование рабочего стола (бесплатные файлы Figma)
Посмотреть дизайн пользовательского интерфейса аккордеона
Аккордеонный дизайн пользовательского интерфейса
Посмотреть расширенные фильтры для Apollo.