Html выпадающий текст: Выпадающий текст HTML & CSS

Содержание

Все что нужно знать о раскрывающихся списках (dropdown)

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

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

1. Анатомия

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

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

2. Типы и варианты раскрывающихся списков

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

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

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

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

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

Раскрывающийся список с автодополнением (autosuggest)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выборщик дат (Date picker)

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

Выборщик дат

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

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

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

3. Стили раскрывающихся списков

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

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

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

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

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

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

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

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

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

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

С иконками

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

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

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

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

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

Раскрывающийся список с изображениями. Фото с Unspalsh.Фото: Strawberry cake — @alinasagirova , Cheese cake — @patuphotos, Chocolate cake — @tuvaloland

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

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

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

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

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

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

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

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

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

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

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

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

4. Состояния раскрывающихся списков

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ошибка обратной связи

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

Ошибка обратной связи

5. Что должен сказать плейсхолдер

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

Пустой плейсхолдер

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

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

Общие подсказки в плейсхолдере

«- Select -», «Choose» и т.д. – это классические подсказки для раскрывающихся списков.

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

Побуждающая фраза в плейсхолдере

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

Раскрывающийся список с побуждающей фразой

Выбранный вариант в качестве плейсхолдера

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

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

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

6. Когда не использовать выпадающий список (а когда нужно)

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

Если у вас меньше пяти вариантов

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

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

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

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

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

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

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

Если у вас есть два варианта, и это «on» и «off» (или «да» и «нет»)

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

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

Если варианты ответа числовые

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

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

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

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

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

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

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

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

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

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

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

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

7. Нативные раскрывающиеся списки

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

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

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

— Кристиан Хольст

Статью можно прочитать здесь

По умолчанию

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

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

Нативные декстопные раскрывающиеся списки https://html.com/attributes/option-selected/

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

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

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

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

Оболочка раскрывающегося списка

8. Проверка доступности?

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

И, если вы сомневаетесь, посетите https://webaim.org/techniques/forms/controls

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

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

Спасибо Lesedi Hermans.


Перевод статьи uxdesign.cc

О правильном дизайне полей с выпадающими списками 📜⤵️

Выпадающие (они же – раскрывающиеся) списки пользуются дурной славой. Их ставят там, где это не нужно, создают избыточное количество опкций или просто неряшливо оформляют. Сам по себе элемент такого отношения, конечно, не заслуживает. UX-дизайнер Тесс Гэдд в недавном посте на UX Collective разобрала ключевые ошибки и полезные практики в отношении раскрывающихся списков и родственных элементов.

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

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

  1. Текст метки.
  2. Контейнер.
  3. Стрелка для раскрытия списка.
  4. Заполнитель.
  5. Полоса прокрутки.
  6. Меню списка.
  7. Элементы списка – опции, варианты выбора.
  8. Разделитель групп элементов.
  9. Выделенный элемент.
  10. Текст и оформление для обеспечения обратной связи.
Анатомия выпадающего списка

Давайте для начала разберём, какие бывают варианты полей с раскрывающимися списками.

2.1. Стандартный выпадающий список без текстового поля

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

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

2.2. Выпадающий список с текстовым полем (или текстовое поле со списком)

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

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

Несколько отличный вариант – автодополнение – текстовое поле предлагает способ завершения слова или фразы.

2.3. Раскрывающийся список с мультиселектом (множественным выбором)

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

Выпадающий список с мультиселектом

По возможности не используйте такие элементы интерфейса – с ними попросту неудобно работать.

2.4. Выпадающий список с группировкой элементов

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

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

2.5. Меню с возможностью выбора

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

Меню с прокруткой

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

2.6. Выбор даты

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

Выпадающий список для выбора даты

3.1. Стандартный стиль

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

Стандартный стиль с соединением контейнера и меню элементовСтиль с разделением контейнера и меню элементов

3.2. Скругленные углы

Скруглённые углы помогают создать более весёлое, игровое настроение.

Список со скругленными углами

3.

3. Иконки

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

Выпадающий список с иконкой

3.4. Иллюстрации

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

Выпадающий список с иллюстрациями

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

3.5. Material Design

Стиль line only пропал из методических рекомендаций Material Design, но до сих пор часто встречается в интернете.

Стиль line only для старого оформления списков в Material Design

Стиль одной линии сменился на filled dropdown – контейнер выделен не только линией, но и затененной областью. Не так легковесно, но более дружелюбно по отношению к пользователю.

Стиль оформления filled dropdown

Ещё больший акцент на контейнере списка сделан в контурном стиле оформления outlined dropdown.

Стиль оформления outlined dropdown

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

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

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

4.1. Блокированный элемент

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

Блокированный список

4.2. Наведение курсора

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

Изменение состояния при наведении курсора

4.3. Подсветка и состояние фокуса

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

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

Подсветка (слева) и сочетание подсветки и фокуса

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

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

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

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

4.

4. Выбранный пункт

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

Пункт выбран

4.5. Обратная связь для ошибочного ввода

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

Обратная связь в случае ошибочного заполнения

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

5.1. Пустой заполнитель

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

Вариант с пустым заполнителем

5.2. Подсказка

Другой вариант – дать в плейсхолдере одну из классических подсказок.

Вариант заполнителя с подсказкой

5.

3. Побуждающая фраза

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

Побуждающая фраза: глагол + существительное.

5.4. Один из вариантов выбора

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

Вариант с предпоказом одного из элементов списка

6.1. Если в списке меньше пяти вариантов

Если у вас меньше пяти параметров, лучше использовать радиокнопки – один клик вместо двух, много места не занимает, нет задержки перед прочтением вариантов.

Список не нужен, если в нем меньше пяти опций

Число 5, конечно, не сакральное – руководствуйтесь здравым смыслом.

6.2. Если у вас две опции, используйте слайдер

Продолжение первого правила: если опций всего две, лучше использовать простой переключатель в виде слайдера.

Если у вас две опции

6.3. Иногда легче печатать, чем выбирать

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

Иногда проще напечатать текст

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

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

В случае ввода чисел списки тоже обычно не нужны

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

Для чисел с плавающей запятой – слайдерыТем более для интервалов

6.

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

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

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

Если в списке пять и более вариантов.

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

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

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

Из публикации «5 распространенных ошибок в юзабилити кастомных выпадающих списков» (англ.)

7.1. Дефолтные списки

Вот несколько примеров нативных списков в «дикой природе». Попробуйте их на странице для тестов html.com:

Нативные выпадающие списки для различных платформНативные выпадающие списки для различных платформ

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

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

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

Пример использования полукастомного подхода

Пройдитесь по следующему списку и проверьте, соответствует ли ваш dropdown-элемент правилами доступности:

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

***

Надеемся, этот пост был для вас полезен. На proglib.io есть ещё много материалов, касающихся дизайна интерфейсов, к примеру:

  • Как правильно использовать анимацию
  • «Каждый охотник желает знать»: теория цвета для веба и приложений
  • Графический приём, благодаря которому пользователи будут регистрироваться чаще

html — Почему мой text-align: center не работает в моем выпадающем меню?

Задать вопрос

спросил

Изменено 1 год, 7 месяцев назад

Просмотрено 361 раз

Я пытаюсь создать раскрывающееся меню, но моя команда выравнивания текста не работает (то же самое относится к размеру шрифта и другим кодам, связанным с текстом). Я попытался поместить свои коды выравнивания текста в nav ul li, и, похоже, ничего не произошло. Я также пытался поместить его в главное раскрывающееся меню CSS, но он все еще не изменился. Может кто-нибудь помочь мне здесь? Я не мог понять причину этого.

Мои коды HTML и CSS:

 nav{
    гибкий: 1;
    выравнивание текста: вправо;
}
нав уль ли {
    стиль списка: нет;
    отображение: встроенный блок;
    поле слева: 60px;
    положение: родственник;
}
нав уль ли а {
    текстовое оформление: нет;
    цвет: #fff;
    размер шрифта: 13px;
    переход: все 0,5 с;
}
нав уль ли а: hover {
    цвет: #E6C7F3;
    
}
.выпадающее меню{
    дисплей: нет;
    
 
}
nav ul li: hover .dropdown-menu {
    дисплей: блок;
    положение: абсолютное;
    слева: -35;
    верх: 100%;
    ширина: 100 пикселей;
    цвет фона: черный;
    непрозрачность: 0,8;
    радиус границы: 10px;
    
}
.выпадающее меню ul{
    дисплей: блок;
    отступы сверху: 10px;
}
.dropdown-меню ul li{
    ширина: 0 пикселей;
    слева: -58;
    дно: 5;
    отступ: 10 пикселей;
    отступ справа: 40px;
    выравнивание текста: по центру;
    
} 
 <дел>
             html">
            <навигация>
                <ул>
                    
  • ГЛАВНАЯ
  • О НАС
  • МАГАЗИН <дел> <ул>
  • Бестселлеры
  • Аксессуары
  • Ювелирные изделия
  • Разное
  • ОТЗЫВ
  • КОНТАКТ
    • HTML
    • CSS
    • раскрывающееся меню
    • наведение
    • выравнивание текста

    1

    text-align работает с элементом, имеющим ширину. Но вы использовали width: 0px . Так что совершенно очевидно, что вы не можете использовать выравнивание там.

    1

    Привет Сначала вам нужно добавить отступ к ul в раскрывающемся меню . а потом установите ширину элемента li на 100% . Пожалуйста, обратитесь к приведенному ниже коду.

     .выпадающее меню ул {
       дисплей: блок;
       отступы сверху: 10px;
       отступ: 10px 0 0;
    }
    .dropdown-меню ул ли {
        ширина: 100%;
        слева: -58;
        дно: 5;
        отступ: 10px 0;
        /* padding-right: 40px; */
        выравнивание текста: по центру;
    }
     

    0

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

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

    mjgs (Отметка)

    #1

    Мне интересно, как реализованы ваши выпадающие меню.

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

    С обычным раскрывающимся списком HTML я бы сделал что-то похожее на это codepen:

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

    Хелен (Хелен)

    #3

    Привет @mjgs!

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

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

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

    1. Включите аргумент create_labels_if_missing в ваш запрос на мутацию, как указано в этом объявлении. Вы можете видеть, что эти методы требуют, чтобы вы изменили значение, чтобы включить эту новую метку.
    2. Создайте новый столбец и задайте уже существующие метки, используя аргумент settings_str .

    Это то, что вы имели в виду? И если да, может ли работать любой из этих вариантов?

    мгс (Отметка)

    #4

    Возможно, это будет полезным контекстом.

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

    «Классификация»: {
    «id»: «dropdown7»,
    «название»: «Классификация»,
    «значение»: {
    «id»: [
    15
    ],
    «changed_at»: «2021- 06-15T20:44:41.989Z»
    }
    },

    Текст, выбранный в раскрывающемся списке, сохраняется как:

    «id»: [
    15
    ],

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

    мгс (Отметка)

    #5

    Кстати, это запрос, который я использую для извлечения данных из API:

    const jobsQuery = { items_by_column_values(board_id: ${cfg. jobBoardId}, column_id: \"name\", column_value: \"${ cfg.companyId}\") { id name column_values ​​{ id title value } } } ;

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

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

    Хелен (Хелен)

    #6

    Привет @mjgs,

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

    Что касается вашего вопроса, похоже, вы хотите вернуть только метки, которые были выбраны в конкретном элементе, а не все возможные метки, доступные для выбора на доске, верно?

    Если ответ «да», в этом случае вам нужно поле text для запросов column_values ​​. Это выведет текст каждой метки раскрывающегося списка, которая была выбрана в возвращаемом элементе.

    Вот пример запроса:

    с результирующим ответом:

    image898×696 29,8 КБ

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

    Вот пример этого:

    и полученный ответ:

    image1310×524 26,7 КБ

    Что касается фактического jQuery, который вы создаете, я нашел несколько ресурсов, которые могут оказаться полезными:

    • html — Jquery — заполнить поле DropDown содержимым массива – 3 Ответа
    • Java – Как заполнить раскрывающийся список данными JSON в качестве ответа ajax в jQuery –

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

    Кстати, мой коллега смог придумать пример того, как это будет выглядеть в CodePen, посмотрите здесь: https://codepen.