Оформляем выпадающее меню 25 28: Выпадающее многоуровневое меню. CSS + javascript

Хватит неправильно использовать выпадающие списки / Хабр

Формы состоят из самых разных элементов интерфейса. Если вы не знаете, как правильно с ними обращаться, вы можете сильно усложнить заполнение форм. Чаще всего ошибаются, применяя выпадающие списки (select menu).

Когда использовать

Иногда можно встретить выпадающие списки с 2 вариантами, иногда — с более чем 20. В обоих случаях это неправильно. Если у пользователя есть менее 5 вариантов выбора, следует использовать радиокнопки. Так выбор будет проще и быстрее, потому что пользователю нужно лишь взглянуть на варианты и один раз кликнуть. С выпадающим списком ему нужно нажать на него, найти подходящий вариант и кликнуть снова. Также другие варианты не видны, пока вы не нажмёте на выпадающий список. Если их меньше 5, лучше наглядно показать их в форме в виде радиокнопок — пользователи смогут быстро их просмотреть.

Если вариантов выбора больше 15, это тоже плохо. Если в выпадающем списке окажется так много вариантов, это затормозит пользователя, которому придётся прокрутить и просмотреть длинный список. Бывает, вариантов так много, что их список занимает весь экран. Если вариантов больше 15, следует либо сократить их количество, либо предоставить пользователю текстовое поле для ввода своих данных. Текстовое поле избавит пользователей от возни с огромным списком и сделает заполнение формы более быстрым и простым.

Как называть

Как у любого другого элемента формы, у выпадающего списка должно быть находящееся рядом название (label). Однако, надпись о том, что пользователь выбирает, должна быть и внутри элемента. Она должна чётко описывать набор вариантов. Пользователям с ограниченными возможностями, использующим при заполнении форм экранных дикторов (screen readers), будет недостаточно универсального «Выберите, пожалуйста». Добавление названия и снаружи, и внутри выпадающего списка позволит любому пользователю делать выбор быстрее и без какой-либо замешки.

Когда подставлять вариант по умолчанию

Постарайтесь не предлагать пользователям вариант по умолчанию. При заполнении формы пользователь может нечаянно пропустить выпадающий список с неподходящим вариантом по умолчанию. Надёжнее будет сообщать о невыбранном варианте, нежели принимать форму с некорректными данными. Подставить вариант по умолчанию можно только в том случае, если вы более чем на 90% уверены, что пользователи будут выбирать именно этот вариант. Тогда это защитит большинство ваших пользователей от возни с выпадающим списком.

Группировка вариантов выбора

Если у вариантов выбора есть иерархия, разделите их на группы, используя тег optgroup. Это позволит быстрее находить нужный вариант, просматривая названия групп, а не общий список вариантов. Названия групп должны быть недоступны для выбора. Они лишь предают списку иерархию и облегчают поиск. Пользователей с ограниченными возможностями группы не запутают, так как экранные дикторы их не зачитывают.

Использование для навигации

В основном выпадающие списки используются в формах, но иногда — и для навигации. На некоторых сайтах выпадающие списки используются для фильтрации или упорядочивания содержимого. Выбрав вариант, пользователь направляется на новую страницу. Для экранных дикторов это сработает, если можно табом перейти к выпадающему списку и с помощью кнопок со стрелками дойти до нужного варианта, не уходя на новую страницу сразу. Выпадающий список должен направлять на новую страницу по нажатию клавиши ввода. Джаваскрипт бывает выключен у отдельных экранных дикторов. Чтобы выпадающие списки служили навигации при выключенном джаваскрипте, рядом следует разместить кнопку подтверждения. Пользователи будут направляться на новую страницу после выбора варианта и нажатия на эту кнопку.

Больше подходят для форм, а не навигации

Хоть вы и встретите выпадающие списки, используемые в навигации, мы рекомендуем использовать их только в формах.

Мобильные сайты часто используют их как основную навигацию, чтобы сэкономить место. Однако с этим решением связаны проблемы, касающиеся юзабилити, доступности и поисковой оптимизации.

На первый взгляд, навигация с помощью выпадающего списка выглядит неуместной, так как не сочетается с дизайном сайта. Также она неудобна, потому что нажатие на выпадающий список приводит к появлению вращающегося колеса (spinning wheel), использующегося для выбора из вариантов в мобильных формах. Пользователь должен нажать на выпадающий список, найти и выбрать вариант, нажать кнопку «Готово», а это немало действий. Не говоря уже о том, что кнопки «Предыдущий», «Следующий» и «Автозаполнение» в данной ситуации бесполезны, так как вы не заполняете форму.

Ваш выпадающий список нельзя будет использовать для навигации, если джаваскрипт выключен. Это касается пользователей некоторых экранных дикторов. Доступнее будет меню, которое откроется при перемещении на него табом и позволит тем же самым табом пройтись по другим вариантам.

Это возможно только если пункты меню являются настоящими ссылками. По этой же причине выпадающие меню бесполезны с точки зрения поисковой оптимизации. Если вы хотите, чтобы ваша навигация была оптимизирована для поисковиков, не используйте выпадающие списки, а предлагайте пользователям раскрывающиеся меню (dropdown menu).

Хватит неправильно использовать выпадающие списки

В сети множество неправильно использующихся выпадающих списков. Это происходит из-за недопонимания основных принципов их использования. Вооружившись этими знаниями, помогите положить этому конец — убедитесь, что на вашем сайте выпадающие списки работают правильно.

От переводчика

В разных компаниях и даже среди разных специалистов в пределах одной компании встречаются различные варианты перевода select menu, dropdown menu и т.п. Я проектирую сайты с 2008 года и в этой статье использую русскоязычные термины, привычные мне. Прошу не судить строго, если вам привычнее другие варианты. На этот случай оригинальные термины указаны в скобочках.

Главная

 

Уважаемые работники техникума, ветераны и студенты!

 

От лица администрации техникума поздравляю вас с Днём Победы! Пусть мужество и героизм этого великого праздника никогда и никем не забываются. Пусть дух победы воодушевляет сердца и ведёт вперёд — к новым подвигам, успехам и достижениям. Пусть над головой всегда будет ясное небо и яркое солнце.

Желаю в День Победы здоровья, радости и счастья.

 

 

С уважением, директор ГБПОУ ЯНАО «ЯПАТ» В.П. Волков

 

Патриотическое воспитание — это одна из важнейших задач современного образования. Память о войне сочетается с чувством гордости за свою историю, за достоинства нации, способность защищать национальные интересы, ценности и идеалы.

   Так, в техникуме 5 — 6 мая прошли тематические классные часы, посвященные Великой Победе. Студентам была представлена тематическая презентация «Наша общая Победа!». Цель классного часа: пополнить знания об истории нашей Родины периода Великой Отечественной войны 1941 – 1945гг.

Подробнее…

В преддверии празднования 78 годовщины Победы в Великой Отечественной войне  4 мая  2023 года в техникуме  проведен конкурс чтецов  «Этих дней не смолкнет слава». Студенты первого курса приняли активное участие в этом мероприятии.

Торжественно и проникновенно в исполнении участников конкурса прозвучали стихотворения К. Симонова, Э. Асадова, Ю. Друниной и других поэтов. Чтение стихов сопровождалось презентацией, иллюстрирующей представляемые произведения. Каждый из исполнителей  смог выразить чувства авторов произведений.

Подробнее…

4 мая 2023 года учебный день начался с торжественной линейки, посвященной 78-й годовщине со Дня Победы в Великой Отечественной войне.

Одним из главных моментов линейки является вынос знамени Российской Федерации, исполнения Гимна России и почтение воинов, павших в сражениях за нашу Родину! Студенты узнали о важности сохранения исторической памяти, о героическом подвиге советского народа.

На торжественной линейке студентка группы Ю-11 Махонина Дарья рассказала стихотворение Константина Симонова «Родина».

 

Акция проходит с целью сохранения памяти о воинах, погибших при защите Отечества, и приурочена к 78-й годовщине Победы в Великой Отечественной войне 1941-1945 годов.

Наш техникум не остался в стороне и принял участие в этой светлой акции. Волонтёры техникума раздавали Георгиевские ленты со словами поздравления с наступающим праздником студентам, педагогам и работникам. 

Георгиевская лента – это не просто украшение. Это знак гордости и благодарности людям, которые защищали наше Отечество и продолжают оберегать его от посягательств внешних врагов. Относитесь к этому символу памяти с уважением!

28 апреля в техникуме прошел Всероссийский открытый урок по «Основам безопасности жизнедеятельности» в целях привлечения внимания общественности к проблеме формирования культуры безопасности жизнедеятельности подрастающего поколения, более эффективного усвоения теоретических знаний учебной дисциплины «Основы безопасности жизнедеятельности», отработки практических навыков действий в различных чрезвычайных ситуациях, а также повышения престижа профессий пожарного и спасателя. В уроке приняли участие сотрудники МЧС России по ЯНАО. Помощник начальника караула Урасбактеев Р.М. и дознаватель ОНД и ПР Бадюк А.В. рассказали ребятам как действовать в чрезвычайных ситуациях, о не легком труде спасателей и показали действующую экипировку сотрудника пожарной службы. Инженер группы организации и контроля применения беспилотных авиационных систем Вилисов А.В. рассказал про БПЛА на службе МЧС и и показал в действии их работу.

С 17 апреля 2023 года в рамках просветительского проекта «Цифровой ликбез» преподаватели информатики и информационных технологий Рыбин Ю.И., Сухов П.В., Мирасова Э.Р. Ямальского полярного агроэкономического техникума проводят уроки по теме «Безопасное поведение в сети Интернет», направленного на формирование базовых компетенций цифровой грамотности и кибербезопасности.

Как обезопасить себя в Интернете? Зачем нужна безопасность в Интернете? Что такое безопасность в сети Wi-Fi? Существуют ли правила поведения в Интернете? Ключевые вопросы, на которые должны ответить учащиеся в конце урока.

Также учащиеся на уроках получают представление об авторском праве, цифровом этикете, электронных деньгах, правах потребителей, цифровом балансе.

02 мая 2023 года в рамках просветительского проекта «Цифровой ликбез» прошло мероприятие по теме «Безопасное поведение в сети Интернет», направленное на формирование базовых компетенций цифровой грамотности и кибербезопасности.

Динчян Давид, студент 1 курса специальности «Информационные системы и программирование» совместно с преподавателем Мирасовой Э.Р., руководителем волонтерского движения «КиберпатрульЯПАТ» в доступной форме рассказали основные принципы безопасного пользования интернетом: как общаться в социальных сетях, каких ссылок стоит опасаться, где искать точную и проверенную информацию.

Подробнее…

В рамках предстоящего пожароопасного сезона, установленного в период с 10 мая по 01 октября 2023 года и в целях исполнения Плана мероприятий по защите населения и территорий Ямало-Ненецкого автономного округа от лесных и других ландшафтных пожаров в пожароопасный сезон 2023 года, утвержденного постановлением Правительства Ямало-Ненецкого автономного округа от 03 февраля 2023 года № 79-П, просим ознакомиться с Памяткой пребывания граждан в лесах Российской Федерации, Памяткой жителей сельских населенных пунктов против поджогов сухой травы.

Общероссийское общественное движение «НАРОДНЫЙ ФРОНТ «ЗА РОССИЮ» осуществляет комплексный мониторинг в сфере среднего профессионального образования в формате онлайн-опроса (далее – Опрос).

Анкетирование проводится среди руководителей и педагогов профессиональных образовательных организаций, а также обучающихся по образовательным программам среднего профессионального образования. Минпросвещения России просит организовать работу по проведению Опроса.

Ссылка на опрос в сети интернет: https://nk.onf.ru/surveys/79.

40 лучших примеров и практик в 2020 году

Понятное и хорошо структурированное раскрывающееся меню помогает посетителям перемещаться по веб-сайту/приложению, сужать их выбор и легко экономить место на экране. Таким образом, он широко используется в панелях навигации веб-сайтов/приложений, панелях поиска или панелях вкладок для улучшения UX.

Однако для дизайнеров UI/UX настоящая проблема заключается в том, как сделать их простыми, эффективными и достаточно привлекательными.

В этой статье Mockplus собрал 40 лучших примеров дизайна выпадающих меню с кликами и наведением, а также передовой опыт, чтобы вы могли черпать вдохновение и легко создавать отличительные выпадающие меню для своих веб-сайтов/приложений.

Множество дизайнов раскрывающихся меню для панелей навигации, панелей поиска, панелей вкладок и даже плавающих кнопок или значков включены для вашего вдохновения.

30 Лучшие выпадающие примеры дизайна меню для вашего вдохновения

1. Converse

Converse — это онлайн -веб -сайт моды, который продает обувь, одежду и передачи. В его интерактивном раскрывающемся меню навигации есть потрясающее раскрывающееся подменю с двумя столбцами, помогающее пользователям ориентироваться. Предоставляются богатые эффекты наведения, чтобы помочь пользователям легко выбирать нужные параметры меню.

2. Santa Cruz

Santa Cruz — это интернет-магазин велосипедов, который имеет довольно креативное выпадающее меню навигации, в котором представлены различные велосипеды с изображениями. Посетители сайта могут легко получить небольшое представление о том, что они увидят в этом магазине. Это хорошая идея для всех сайтов онлайн-покупок, чтобы улучшить UX.

3. Helias Oils 

Helias Oils — это веб-сайт, посвященный эфирным маслам, который также имеет привлекательные раскрывающиеся меню навигации в сочетании с изображениями продуктов. Он также использует приятные эффекты наведения и волнообразные переходы для привлечения пользователей.

4. Выпадающее меню Whirling CSS3

Выпадающее меню Whirling CSS3 — это уникальный шаблон раскрывающегося меню, который легко создается с помощью CSS. Когда вы наводите курсор на элементы верхнего меню, элементы подменю появляются с классным эффектом кружения. Если вы заинтересованы, просто нажмите на ссылку учебника, чтобы узнать больше.

5. Lion Burger

Lion Burger имеет привлекательную выпадающую строку меню в виде кнопки. Элементы подменю сделаны с характерными эффектами наведения. Более того, красные элементы кнопок и белый текст действительно отлично работают на темном фоне страницы.

6. CSS3 Slide Drop Down Box Menu

CSS3 Slide Drop Down Box Menu — еще один хороший шаблон выпадающего навигационного меню с очень классным эффектом скольжения. При наведении курсора на пункт меню всплывает миниатюрное изображение, а соответствующие подменю плавно выдвигаются вправо/влево. Вы также можете щелкнуть нижнюю ссылку, чтобы просмотреть учебник по CSS.

7. Адаптивное раскрывающееся меню навигации

Адаптивное раскрывающееся меню навигации исходит из шаблона веб-сайта рецептов Bootstrap. Его раскрывающееся меню состоит из трех подменю столбцов для демонстрации категорий рецептов. Значительный слайдер изображений с правой стороны также помогает пользователям быстро выбрать правильный рецепт.

8. Выпадающее меню Bryan

Выпадающее меню Bryan — интеллектуальное многоуровневое выпадающее меню. Пользователи могут легко навести указатель мыши на верхний элемент, чтобы шаг за шагом отобразить все элементы подменю. Он идеально подходит для веб-сайтов с очень сложной системой навигации.

9. PopSockets

PopSockets — это красивый веб-сайт для онлайн-покупок телефонов, а его выпадающее навигационное меню использует красочные иллюстрации для представления своих продуктов, что придает ему впечатляющую визуальную привлекательность.

10. Исследование минимального выпадающего меню

Исследование минимального раскрывающегося меню — классное минималистичное раскрывающееся меню навигации. Все его пункты главного меню были упрощены до очень тонких цветных полос. При наведении на них всплывают элементы подменю, помогающие пользователям ориентироваться. Прекрасный пример для создания минималистического веб-сайта.

11. Креативное выпадающее меню со значками 

Креативное раскрывающееся меню со значками — это понятное и хорошо продуманное раскрывающееся меню навигации. Он имеет очень модную сине-белую цветовую гамму. И каждый пункт подменю хорошо структурирован и имеет очень яркие штриховые значки.

12. Раскрывающееся меню Zenith Arena De Lille

Раскрывающееся меню Zenith Arena De Lille специально разработано для многоцелевой крытой арены. Поскольку все их события запланированы по месяцам, пользователи могут легко щелкнуть, чтобы показать или скрыть полный список событий месяца, и выбрать нужное, чтобы просмотреть подробности.

13. Раскрывающееся меню SkySmile

Раскрывающееся меню SkySmile использует градиентный цвет фона, чтобы выделить раскрывающиеся меню. И синяя цветовая схема также отлично сочетается с фоном главной страницы.

14. Минимальное взаимодействие с раскрывающимся меню

Минимальное взаимодействие с раскрывающимся меню — очень классическое раскрывающееся меню для кнопки с плавающим значком. При наведении курсора на кнопку появится раскрывающееся меню, состоящее из значков, предлагающих различные варианты навигации. Это идеально, чтобы помочь вам создать минимальное мобильное приложение.

15. Раскрывающееся меню мобильного приложения

Раскрывающееся меню мобильного приложения — еще один хороший пример, которому дизайнеры могут следовать, чтобы создать отличное раскрывающееся меню для минималистичных мобильных приложений. Он использует не только элементы подменю значков, но также имеет очень творческий эффект скольжения для яркого отображения параметров.

16. Дизайн раскрывающегося списка уведомлений

Дизайн раскрывающегося списка уведомлений — превосходный дизайн раскрывающегося меню для минималистичных веб-сайтов для демонстрации новостей. Когда пользователи наводят курсор на верхний значок уведомления, сразу же появляется раскрывающийся список для отображения различных новостей уведомлений. Связанное время, люди и ключевые слова новостей также будут показаны для быстрого сканирования.

17. Раскрывающееся меню уведомлений

Раскрывающееся меню уведомлений — еще одно красивое раскрывающееся меню, созданное для кнопок со значками уведомлений. В отличие от предыдущего примера, заполненного изображениями и информацией, это выпадающее меню уведомлений имеет очень минималистичный вид и использует милые иллюстрации кошек и ярко-розовые цвета, чтобы привлечь внимание посетителей.

18. HTML-анимация раскрывающегося меню

HTML-анимация раскрывающегося меню специально создан для минималистичных веб-сайтов , чтобы показать/скрыть меню навигации. Он имеет уникальную анимацию медленного падения. Он также предоставляет пользователям коды HTML/CSS/JS. Если вы заинтересованы, вы можете напрямую скопировать и вставить эти коды в свой дизайн для более быстрой и легкой разработки.

19. Анимация раскрывающегося меню «О нас»

Анимация раскрывающегося меню «О нас» — это раскрывающееся меню, созданное для раздела «О нас». Он имеет умную всплывающую анимацию. И каждый элемент подменю разработан с плоским значком, чтобы помочь пользователям легко получить информацию об элементе.

20. Интерактивные раскрывающиеся меню 

Интерактивные раскрывающиеся меню — это раскрывающееся меню, созданное для панели фильтров. После открытия пользователи могут легко выбрать параметры фильтра, такие как тип дома, спальни, удобства и т. д., для поиска желаемых результатов. Это хороший пример того, как создавать интерактивные выпадающие меню для панелей поиска/фильтров.

21. Выпадающее меню магазина

Выпадающее меню магазина использует значки только для представления различных категорий товаров.

22. Mini Cooper 

Mini Cooper  – это отличный автомобильный веб-сайт с продуманным раскрывающимся меню навигации. Он имеет богатые стили подменю и эффекты наведения.

23. Board Star

Board Star — интернет-магазин сноубордов. Его раскрывающееся меню навигации выполнено в характерном ретро-стиле и использует интуитивно понятный список и дизайн карты для предоставления различных вариантов продукта.

24. Porsche

Porsche — еще один стильный автомобильный веб-сайт с великолепным раскрывающимся меню навигации. При наведении курсора на автомобиль справа появится соответствующее изображение, что позволит вам заранее быстро просмотреть автомобиль.

25. Audi

Audi — известный автомобильный веб-сайт с интуитивно понятным раскрывающимся меню навигации. Как и у Porsche, в его раскрывающихся подменю используются изображения автомобилей. Тем не менее, он также имеет совершенно другую и эффективную компоновку для представления деталей автомобиля.

26. Sony Play Station

Sony Play Station имеет превосходное раскрывающееся меню навигации с возможностью нажатия, а все его подменю сделаны с креативными жирными значками. Прекрасный пример создания привлекательного меню с иконками.

27. Mr Clean 

Mr Clean предлагает различные чистящие средства и решения. На его официальном сайте используется великолепное выпадающее меню навигации, состоящее из изображений продуктов и коротких ярлыков.

28. KFC 

KFC использует вертикальное раскрывающееся меню, чтобы помочь вам сориентироваться. Анимация подменю тоже очень классная.

29. Taco Bell

Taco Bell может помочь пользователям быстро найти вкусные меню или близлежащие магазины в Интернете. На его веб-сайте есть потрясающая боковая панель навигации, в которой используются вертикальные раскрывающиеся меню.

30. Берн Туризм

Bern Tourism — это туристический веб-сайт, который может помочь посетителям найти самые важные события, достопримечательности и мероприятия в Швейцарии. Он использует многоуровневое раскрывающееся меню навигации с умной панелью вкладок.

10 Рекомендации по использованию раскрывающегося меню, которым следует следовать выпадающее меню.

Итак, мы также собрали 10 лучших практик по дизайну раскрывающегося меню, чтобы объяснить, каким советам следует следовать, чтобы быстро создать более полезный и эффективный дизайн раскрывающегося меню: 

1. Держите меню не более двух уровней в глубину

Слишком длинные или сложные выпадающие меню могут создавать проблемы для пользователей, а иногда даже заставлять их терять фокус меню. Таким образом, вы всегда должны держать раскрывающиеся меню ниже двух уровней.

Возьмем в качестве примера веб-сайт Slack. Он использует двухуровневое раскрывающееся меню для четкого и интуитивно понятного представления информации о ресурсах.

Конечно, если вам действительно нужно меню с более чем двумя уровнями, эффект наведения или выбора может помочь вам направить внимание пользователей, позволяя им быстро находить нужные параметры меню.

Например, WooCommerce использует интеллектуальные эффекты наведения для пошагового отображения пунктов меню.

2. Создание четких и хорошо структурированных раскрывающихся меню

При разработке раскрывающегося меню очень важно иметь чистый, хорошо структурированный и читаемый список элементов. Чтобы достичь этого, вы должны учитывать множество факторов, таких как читаемый шрифт, четкая типографика, достаточный интервал и даже аккуратная структура/макет и т. д.

На веб-сайте музыкального оборудования ниже показано, как создать хорошо структурированный горизонтальный переход меню вниз с использованием различных шрифтов, размеров шрифтов, цветов, значков и макетов: 

3. Добавьте эффекты наведения или выбора, чтобы выделять пункты меню

Чтобы создать эффективное раскрывающееся меню, вы должны добавить один, два или более эффектов наведения или выбора, чтобы направлять пользователей.

Например, при наведении указателя мыши на раскрывающееся меню ниже футбольного поля появится ярко-синий фон и белый значок, чтобы выделить нужный элемент меню. Это поможет вам быстро найти нужные пункты меню.

Также обратите внимание, что вы всегда должны обращать внимание на время закрытия эффекта наведения. Слишком длинные или короткие оба могут вызвать проблемы у пользователей.

4. Используйте значки или изображения для обогащения раскрывающихся меню

Не существует фиксированного способа оформления раскрывающегося меню. Помимо использования различных шрифтов, типографики и цветов, вы по-прежнему можете добавлять собственные значки и изображения, чтобы обогатить свои меню.

Как и на приведенном ниже веб-сайте JetBlue, вы по-прежнему можете использовать расширенные изображения, значки и текст для создания более привлекательного и эффективного раскрывающегося меню.

5. Сохраняйте единообразие стилей меню 

При разработке раскрывающегося меню следует использовать похожие стили меню, фоны и изображения, чтобы все меню работало как единое целое.

Возьмите приведенный ниже компьютерный веб-сайт Dell в качестве примера. Он использует двухуровневые раскрывающиеся меню с одинаковыми стилями текста и изображений для привлечения посетителей.

6. Недоступные пункты меню выделены серым цветом

Когда некоторых продуктов или услуг нет в наличии или они временно недоступны, удаление соответствующих пунктов меню вслепую может нарушить весь макет, что усложнит просмотр и навигацию для пользователей. В этот момент вы можете сделать их серыми, чтобы избежать каких-либо проблем.

Непосредственное выделение элементов меню серым цветом не повлияет на весь макет, что сэкономит вам больше времени на обработку недоступных параметров.

7. Добавьте быструю анимацию раскрывающегося списка 

Вы также можете добавить быструю анимацию раскрывающегося списка (например, анимацию скольжения, затухания, прыжка или кружения), чтобы привлечь пользователей.

Например, на приведенном ниже веб-сайте Mediate Template для привлечения пользователей используется привлекательная скользящая анимация: 

8. Используйте полупрозрачный фон, чтобы выделить меню

Чтобы выделиться из раскрывающегося меню, вы можете использовать полупрозрачный фон.

На приведенном ниже веб-сайте Econsultancy используется полупрозрачный фон, чтобы легко выделить все раскрывающееся меню: 

9. Используйте другой цвет фона, чтобы выделить меню Фон меню также помогает отделить раскрывающиеся меню от фона.

И этот веб-сайт по мебели дает хороший пример того, как выделить раскрывающееся меню другим цветом фона:

10. Регулярно проверяйте раскрывающееся меню

Что бы ни случилось, вы всегда должны вниз меню регулярно, чтобы убедиться, что все идет хорошо все время.

В общем, мы надеемся, что эти творческие примеры и передовой опыт вдохновят вас.

Как сделать выпадающее меню?

Если вы до сих пор не знаете, как сделать выпадающее меню с нуля, вот два доступных способа:

1. Создайте раскрывающееся меню с помощью шаблона HTML/CSS

Для дизайнеров UI/UX самый быстрый способ — использовать шаблон оформления раскрывающегося меню. В Интернете доступно множество шаблонов HTML/CSS . Вы можете свободно искать тот, который основан на ваших собственных потребностях.

2. Создайте раскрывающееся меню с помощью инструмента дизайна

Однако, если вам не нужен шаблон, вы можете вместо этого использовать инструмент дизайна для визуализации ваших идей меню. Мокплюс , универсальная платформа для разработки продуктов, — хороший вариант для вас. Это позволяет вам создавать прототипы ваших раскрывающихся меню, добавлять взаимодействия, тестировать, делиться и передавать с легкостью в Интернете.

Резюме 

Хорошо продуманное раскрывающееся меню помогает эффективно улучшить UX. Мы надеемся, что эти лучшие примеры дизайна раскрывающегося меню, лучшие практики и советы по дизайну помогут вам легко создать отличный веб-сайт/приложение.

Шпаргалка пользовательского интерфейса: выпадающее поле. Выпадающие списки вызывают много критики в пользовательском интерфейсе… | Тесс Гэдд

Опубликовано в

·

Чтение: 14 мин.

·

12 апреля 2020 г.

Выпадающие списки вызывают много критики в мире пользовательского интерфейса — и, если честно, это не без причины. Сделанные плохо, они становятся громоздкими, подавляющими и уродливыми. Но это не то, о чем эта шпаргалка. Здесь мы поговорим о том, что делать, когда у вас есть , чтобы их использовать.

Также хочу уточнить, что есть два основных типа раскрывающихся списков: используемые для навигации и используемые в формах. Для целей этой шпаргалки мы просто рассмотрим вариант формы.

В этой шпаргалке мы рассмотрим следующее:

1. Анатомия
2. Типы и варианты раскрывающихся списков
3. Стили раскрывающихся списков
4. Состояния раскрывающихся списков
5. Что должен говорить заполнитель
6. Когда нет использовать раскрывающийся список (и когда до)
7. Встроенные раскрывающиеся списки
8. Контрольный список специальных возможностей
9. Заключительные мысли

Анатомия раскрывающегося списка очень похожа на структуру поля ввода текста, плюс немного больше. Чтобы сравнить их, см. эту более раннюю историю.

Анатомия раскрывающегося списка

Несмотря на то, что стандартные раскрывающиеся списки широко известны, существует несколько различных типов и вариантов, которые вам, возможно, придется учитывать при следующем начинании. Обратите внимание, что для этих примеров я включаю только выпадающие списки, используемые в формах, а не те, которые используются в навигации.

Стандартный раскрывающийся список

Стандартный раскрывающийся список — это то, о чем мы думаем, когда слышим слово «раскрывающийся список». В активном состоянии он должен выглядеть очень похоже на поле ввода текста, пока вы не нажмете на него и не откроется меню.

Стандартный выпадающий список

Выпадающий список с автоматическим предложением

Я люблю этих сексуальных плохих парней. Впервые я узнал об автоподсказках в поле поиска Google; однако я понятия не имею, где это было впервые реализовано. (Сообщите мне, если вы это сделаете.) Это особенно полезно, когда у вас есть длинные списки, где пользователь уже знает ответ (например, из какой вы страны).

Выпадающий список с автозаполнением

Выпадающий список с автозаполнением и автозаполнением

Автозаполнение не следует путать с автозаполнением. Автопредложение — это когда в поле ввода отображаются варианты, из которых пользователь может выбрать. Автозаполнение — это когда ввод предлагает способ завершить слово или фразу.

Выпадающий список с автозаполнением и автозаполнением

Поля автозаполнения иногда маскируются под ввод текста, пока вы не начнете печатать.

Раскрывающийся список с множественным выбором

В то время как большинство раскрывающихся списков являются расширением переключателей (в том смысле, что вы можете выбрать только один элемент), этот раскрывающийся список является расширением флажков: пользователь может выбрать несколько элементов в одном поле ввода.

Выпадающий список с множественным выбором

Если возможно, старайтесь избегать этого парня. Мне пришлось использовать его из-за безумно длинного списка категорий, и я до сих пор просыпаюсь ночью в холодном поту из-за этого решения. В идеале хотелось бы использовать комбинацию автозаполнения и автозаполнения.

Раскрывающийся список с группами

Хотя длинные раскрывающиеся списки не идеальны, вы можете сгруппировать некоторые элементы по разным категориям, чтобы упростить поиск нужного.

Раскрывающийся список с группами

Меню множественного выбора

Хотя технически это не раскрывающийся список, меню множественного выбора является альтернативой для рассмотрения. В отличие от раскрывающегося списка, они открыты с самого начала и представляют собой небольшое окно прокрутки.

Фиксированное прокручиваемое меню

Хотя они хороши для настольных компьютеров, они ужасны для мобильных устройств, поскольку представляют собой «прокрутку внутри прокрутки».

Лично я использовал этот шаблон только один раз (должен добавить, по принуждению), и я редко вижу их в дикой природе. Если у кого-то есть дополнительная информация о них, пожалуйста, дайте мне знать в комментариях 🙂

Выбор даты

Выбор даты следует использовать только для планирования встреч, мероприятий и т. д. Наличие календаря с днями недели отлично подходит для помогает вам решить, когда организовать поздний завтрак, но невероятно раздражает, если вы хотите ввести дату истечения срока действия паспорта. Мне нравятся те, где вы можете печатать, а также выбирать из раскрывающегося списка — просто убедитесь, что ввод достаточно умный, чтобы добавить «/» между вашими месяцами, днями и годами, иначе это немного сбивает с толку.

Выбор даты

Руководство Тесс о том, как заставить людей ненавидеть вас:

1. Когда вы просите людей ввести дату истечения срока действия их карты или паспорта, дайте им раскрывающееся меню календаря. Они особенно заботятся о том, чтобы точно узнать, в какой день недели истечет срок действия их карты.
2. Когда пользователям предлагается ввести дату своего рождения, используйте раскрывающийся календарь. Бонусные баллы : Убедитесь, что единственный способ, с помощью которого они могут перемещаться по годам, — это пролистывать каждый месяц. Бонусные бонусные баллы : Этот шаблон дизайна особенно полезен в онлайн-формах для приложений домов престарелых.

Средства выбора даты и средства выбора диапазона дат — сложные звери, поэтому я не стал вдаваться в подробности, но, возможно, однажды я сделаю специальную шпаргалку для выбора даты. Может быть.

В отличие от типов раскрывающихся списков, «стили раскрывающихся списков» относятся к тому, как на самом деле выглядит раскрывающийся список, а не к тому, как он работает. Ниже я перечислил некоторые из распространенных стилей.

Стандартное исполнение (прилагается)

Я называю этот стиль «стандартным», потому что это то, к чему мы больше всего привыкли.

Стандартный стиль (прикрепленный)

Стандартный стиль (отдельный)

Я все чаще вижу стиль с отдельным меню. Это имеет смысл, поскольку позволяет меню располагаться над или под полем в зависимости от области просмотра браузера.

Стандартный стиль (отдельный)

Закругленные границы

Закругленные границы отлично подходят для пользовательских интерфейсов, которые имеют более игривый вид.

Закругленные рамки

Со значками

Добавление простого значка в начало ввода может сделать его более «дизайнерским». Всякий раз, когда кто-то жалуется, что форма выглядит слишком скучно («Ну, Стив, это форма с 20 входами — как ты думаешь, как она будет выглядеть?»), я просто добавляю значки. Это просто исправить.

Раскрывающийся список со значком

Ленивый дизайнер Совет: если кто-то жалуется на то, что длинная форма выглядит скучно, просто добавьте значки. Это проверенный и верный метод, который почти не требует усилий, и ваш владелец продукта будет думать, что вы лучшая вещь после воскресных утренних блинов.

С изображениями

Как правило, я избегаю добавления изображений к элементам в раскрывающемся списке — просто потому, что его обслуживание требует обновления, особенно если это список, который сильно меняется. Тем не менее, это очень полезно, когда вы хотите показать разницу между вещами (породы собак, торты, офисная мебель и т. д.).

Выпадающий список с изображениями. Фотографии с Unspalsh. Фотографии предоставлены: Клубничный торт — @alinasagirova, Чизкейк — @patuphotos, Шоколадный торт — @tuvaloland

Однако я считаю, что из-за ограниченного размера раскрывающегося списка очень сложно увидеть, что представляют собой изображения ( см. график выше), поэтому обычно это не стоит усилий, если вы не делаете изображения действительно большими.

Заполненные выпадающие списки Material Design

Читатели серии шпаргалок знают, что я большой поклонник Material Design, включая их выпадающие списки.

Поле «Только строки» больше не используется в руководствах по дизайну материалов, но вы все еще можете увидеть его в Интернете. Если вы хотите узнать больше, я писал об этом в предыдущей шпаргалке, а Дэйв Чуи ответил здесь.

Раскрывающийся список строк в Material Design

Поле «только строка» было заменено на «заполненное раскрывающееся меню», и, похоже, оно работает лучше при пользовательском тестировании. Не так круто, но гораздо более удобно для пользователя — и в этом все дело, ребята.

Заполненный выпадающий список Material Design

Контурные выпадающие списки Material Design

Как и выделенные текстовые поля, контурные выпадающие списки Material Design очень крутые. Их меню отделено от фактического выпадающего контейнера, что может помочь с некоторыми проблемами удобства использования.

Уверен, вы все видели эту сексуальную маленькую анимацию, где в фокусе метка становится меньше в верхней части ввода. Я также хотел бы указать на то, что часто упускается из виду (мной): если вы посмотрите на фактический раскрывающийся список, вы заметите, что первый элемент пуст. Это сделано для того, чтобы пользователь мог «сбросить» раскрывающийся список, если он хочет вернуться к этому вопросу позже или оставить его пустым.

Обрисованный раскрывающийся список Material Design

Когда пользователь взаимодействует с входом любого типа, вход должен переключать состояния или внешний вид, чтобы дать пользователю обратную связь. Здесь мы рассмотрим различные состояния раскрывающихся списков.

Активное состояние

Активное состояние — это то, как будет выглядеть раскрывающийся список до того, как пользователь взаимодействует с ним.

Активное состояние

Отключено

Если вы отключите поле ввода, пользователи не смогут взаимодействовать с ним, но смогут его видеть. Вы можете использовать это, если этого требуют ваши бизнес-правила, но это, вероятно, будет не очень часто.

Отключенное состояние

При наведении курсора

Если пользователь наводит курсор на раскрывающийся список, это должно означать, что на него можно щелкнуть.

Состояние при наведении

Совет N00b: Вы не можете наводить курсор на сенсорные устройства, поэтому не создавайте для них состояния, если разрабатываете приложения для мобильных устройств или планшетов.

Состояние выделения

Состояние выделения — это когда пользователь использует карту вкладок (это когда пользователь использует «вкладку» для навигации по интерфейсу и «ввод» для ввода информации) и выделяет раскрывающийся список перед его выбором. Обычно мы видим это как «синий ореол» на интерактивных элементах.

Однако некоторые сайты сочетают в себе состояние выделения и фокуса, так что даже если пользователь не нажимает кнопку «Ввод», раскрывающийся список открывается сразу. Я разрываюсь относительно того, какая система является лучшей. Логически объединение двух состояний имеет смысл; однако я так смущаюсь, когда выпадающие списки открываются без моего явного указания им об этом. Кто-нибудь еще имел опыт с этим? Дай мне знать в комментариях.

Альтернативные выделенные состояния

Состояние фокуса

Состояние фокуса — это когда с элементом можно взаимодействовать. После того, как вы щелкнули раскрывающийся список, он откроет меню и отобразит его параметры.

Хотя во многих раскрывающихся списках, с которыми я работал, стрелка указывала в одном и том же направлении как в активном состоянии, так и в состоянии фокуса, я предпочитаю менять направление стрелки. Я думаю о них так же, как об аккордеоне. И если вы очень круты, вы можете анимировать изменение направления стрелки.

Состояние фокуса

Когда пользователь наводит курсор на элементы в меню, он должен отображать, над какой опцией он находится.

Состояние фокуса при наведении курсора

Завершенный ввод

После того, как пользователь выбрал параметр, ввод должен вернуться в активное состояние или анимироваться, за исключением того, что выбранный элемент будет отображаться.

Завершенный ввод

Неудачная обратная связь

При произвольном вводе текста пользователь может сделать опечатку и т. д. Однако, поскольку параметры в раскрывающемся списке предопределены, должен быть только один тип ошибочной обратной связи: «неполный ‘, который пользователь получит только в том случае, если он нажмет кнопку «отправить» до завершения заполнения формы.

Неудачная обратная связь

Как правило, я бы оставил текст заполнителя/подсказки таким же, как в ваших полях произвольного текста. Все еще не уверены? Вот несколько вариантов для вас:

Оставить местозаполнитель пустым

Оставить местозаполнитель пустым — обычно самый простой вариант, если в других текстовых полях нет заполнителей.

Раскрывающийся список с пустым заполнителем

Иметь общую подсказку в заполнителе

«- Выберите -», «Выбрать» и т. д. — это классические подсказки для размещения раскрывающегося списка.

Выпадающие списки с общими подсказками

Имея продвигающую фразу в заполнителе

Использование общего «Выбрать»/«Выбрать», а затем то, что вы хотите, чтобы они выбрали, — это классный способ сохранить уровень согласованности в ваших раскрывающихся списках, но также дать вашим пользователям подсказку о том, что делать.

Выпадающие списки с общей комбинацией

Отобразить параметр в заполнителе

Хотя у вас есть возможность отобразить предварительно выбранный элемент в раскрывающемся списке, вы должны быть осторожны, чтобы убедиться, что пользователь видел и читал его, иначе они могут соглашаться на то, чего они не хотели бы. #classicDarkPatternMove

Раскрывающийся список с отображаемым параметром в качестве заполнителя

Итак, какой вариант выбрать? Если вы сомневаетесь, выберите последовательность. Если все ваши текстовые поля имеют заполнители, используйте заполнители.

Это посвящено всем сайтам, которые заставляют меня вводить мой год рождения, используя раскрывающийся список: f*** you. Мне больше не нужно напоминать о моем быстро растущем возрасте, прокручивая целый список месяцев, пока я не найду год своего рождения.

Если у вас менее пяти опций

Если у вас менее пяти опций, вероятно, будет проще использовать переключатели, а не использовать дополнительный щелчок, чтобы получить все опции списка. Все, что больше пяти вариантов, начинает занимать много места.

Альтернатива выпадающего списка: если у вас меньше пяти вариантов

Примечание : Некоторые люди говорят, что правило должно быть меньше шести, а не меньше пяти, но я, но я позволю вам судить об этом.

Если было бы проще напечатать, чем выбрать

Если бы у вашего пользователя было меньше времени на набор, чем на выбор чего-либо из выпадающего списка, вам действительно нужно спрашивать, что лучше? Например, для даты рождения было бы проще ввести дату, чем использовать три отдельных раскрывающихся списка.

Альтернатива раскрывающемуся списку: если проще набрать

Иногда разработчики могут возразить против этого, поскольку проще создать раскрывающийся список, чем установить все правила о том, что пользователи могут и не могут вводить в поля произвольного текста. Я, увы, много раз проигрывал эту битву, но продолжаю бороться за правое дело.

Если у вас есть два параметра, и они «включены» и «выключены» (или «да» и «нет»)

Наличие раскрывающегося списка с двумя вариантами немного раздражает. Особенно с вопросами «да/нет». Переключатели прекрасно решают эти вопросы.

Альтернатива выпадающего списка: если у вас есть вопрос с двумя вариантами ответа

Если варианты являются числовыми

Если ваши варианты являются числовыми, у вас есть несколько вариантов.

Во-первых, снова дать им напечатать это. Степперы также полезны, но я бы предложил это только в том случае, если ожидается, что поведение достигнет максимум пяти. В противном случае ваш бедный пользователь будет сидеть там, нажимая на 100.

Альтернатива выпадающего списка: если ваши параметры числовые

Второй использует ползунок для выбора значения. Ползунки особенно полезны для больших чисел или приближений.

Альтернатива выпадающего списка: Если параметры представляют собой число Варианты раскрывающегося списка: Если параметры представляют собой диапазон

Если вариантов много

Если в раскрывающемся списке много вариантов (чего следует по возможности избегать), позвольте пользователю «ищите» свой вариант. Чаще всего такое поведение можно увидеть в раскрывающихся списках стран, поскольку они обширны, но в них легко найти ответ. Как упоминалось ранее, это лучше всего сочетается с автозаполнением.

Альтернатива раскрывающегося списка: если есть много вариантов, НО пользователь знает свой ответ, прежде чем щелкнуть раскрывающийся список

Итак, когда следует использовать раскрывающийся список?

Входные данные должны соответствовать двум требованиям, чтобы я мог рассмотреть возможность использования раскрывающегося списка:

1. Существует более шести вариантов .
2. Когда параметры не являются чем-то, что пользователь узнает сразу. Например, представьте, что ваш пользователь загружает видео, и хосту нужно знать, какую лицензию прикрепить к видео. Среднестатистический пользователь не знает всех опций, доступных на платформе, поэтому раскрывающийся список необходим.

Мы склонны использовать нативные параметры или параметры по умолчанию, когда время и бюджет ограничены или когда мы работаем над MVP. Наличие пользовательских входных данных — это глазурь на торте, но иногда у нас нет возможности сделать эту сладкую, сладкую глазурь. В этом случае полезно знать, с чем вам предстоит работать.

Встроенные выпадающие списки более безопасны, когда речь идет об удобстве использования на разных устройствах.

Наше крупномасштабное тестирование юзабилити оформления заказа и сравнительный анализ показывают, что хотя 82% сайтов электронной коммерции используют специально разработанные раскрывающиеся списки в потоке оформления заказа, 31% всех специально разработанных раскрывающихся списков имеют серьезные проблемы с удобством использования.
— Кристиан Холст, посмотреть историю здесь

Значения по умолчанию

Вот несколько примеров встроенных раскрывающихся списков в дикой природе. Чтобы попробовать сами, перейдите сюда: https://html.com/attributes/option-selected/

Мобильные выпадающие списки | https://html. com/attributes/option-selected/Нативные раскрывающиеся списки рабочего стола https://html.com/attributes/option-selected/

Как видно из этих примеров, все они немного отличаются в зависимости от платформы и браузер. Они некрасивые, но очень полезные.

Использование оболочки

Раньше я называл это «полу-заказной», но недавно я нашел статью, в которой этот шаблон называется оболочкой — и это звучит гораздо более официально. Поэтому я клянусь впредь называть его оболочкой, а также клянусь использовать его на собраниях и наслаждаться силой людей, спрашивающих меня, что это значит, просто для того, чтобы я мог показать, насколько я умен.

«А что такое скорлупа?» — спросите вы. Оболочка — это когда поле выглядит настраиваемым, но когда вы щелкаете по нему, оно использует собственный стиль раскрывающегося списка. Это простой способ сохранить стиль страницы, соответствующий вашему бренду, и снизить затраты на разработку. Это также помогает со всеми проблемами UX, связанными с настраиваемыми полями.

Раскрывающийся список оболочки

1. Является ли активное состояние раскрывающегося списка (включая метку) более 44 пикселей? (Мы включаем метку сюда, потому что, если вы нажмете на метку, раскрывающийся список все равно должен открыться.)
2. Каждый элемент строки в раскрывающемся меню имеет высоту более 44 пикселей и 8 пикселей между ними?
3. Соответствуют ли цвета стандартам соответствия AAA?
4. Выпадающий список имеет выделенное состояние?
5. Убедитесь, что раскрывающиеся списки работают на карте вкладок.
6. Если вы используете настраиваемый раскрывающийся список, убедитесь, что он может открываться вверх или вниз в том случае, если окно просмотра браузера слишком низкое.

А если сомневаетесь, зайдите на https://webaim.org/techniques/forms/controls

Как известно моему обычному читателю, прошло много времени с тех пор, как я писал что-то подобное, и мне очень жаль. так долго. Но, ей-богу, хорошо бы вернуться. И знаете, ничто так не вернет вас к писательству, как глобальная пандемия.