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

  • Input Field
    Это основа для форм. Они используются для всего, что требует пользовательского ввода, а не выбора предустановленных вариантов. Имена пользователей, сообщения электронной почты, адреса, пароли, сайты, телефоны.
  • Input Field c автозавершением
    Если для ввода доступны сотни вариантов (слишком много, чтобы отобразить на экране сразу), поле ввода с автозавершением является хорошим выбором.
  • Tag Input Field
    Этот вариант ограничивает пользователю ввод некоторых предопределенных вариантов. Кроме того, он может вести себя как поле адреса электронной почты – предполагая возможные варианты, но позволяя ввести любой.
  • Checkboxes
    Флажки используются, когда вы хотите, чтобы пользователь мог выбрать любое количество (в том числе ноль) предопределенных вариантов.
  • Toggles
    Они, по существу, как флажки, но напоминают реальные переключатель, немного более интуитивные.
  • Radio Buttons
    В то время как флажки позволяют пользователю выбрать любое количество предопределенных вариантов, переключатели используются, чтобы заставить пользователя выбрать один вариант.
  • Select Dropdowns
    Если пользователю нужно выбрать только один из многих вариантов (слишком много для набора переключателей), то выпадающий список является идеальным выбором. Тем не менее, если у вас есть много-много вариантов (например, “Выберите вашу страну»), лучше использовать поле ввода с автозавершением.
  • Multi-select Dropdowns
    Этот вид стоит использовать, когда у вас слишком много возможных вариантов для использования встроенных флажков. Однако, если у вас есть много-много вариантов, лучше использовать поле ввода тегов.
  • Range sliders
    Ползунки хороши, когда вам нужно, чтобы пользователь ввел значение в пределах минимального или максимального предела.
  • Steppers
    Это быстрый и простой способ, чтобы позволить пользователям управлять количеством чего-либо.

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

Ссылка на источник.

Руслан Раянов

Recent Posts

Зачем мне нужен партнер? #вебстартап

Источник: https://falconspace.ru/blog/partnerstvo-pri-razrabotke-proekta---tonkaya-shtuka

8 часов ago

Сколько стоит сделать сайт? #вебстартап

Источник: https://falconspace.ru/blog/cenoobrazovanie-v-mire-veb-razrabotki

1 день ago

Любой проект можно запустить с минимальным бюджетом #вебстартап

Источник: https://falconspace.ru/blog/kak-zapustit-proekt-s-minimumom-zatrat

2 дня ago

Что такое MVP простыми словами? Зачем нужен MVP стартапу?Создание MVP для веб-проекта и других сфер

В этой статье мы рассмотрим такое понятие как - Minimal Viable Product (минимально жизнеспособный продукт).…

3 дня ago

Кто такой Product-owner? #понятия_веб_разработки #вебликбез

https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта

6 дней ago

Что такое бизнес-логика? #понятия_веб_разработки #вебликбез

https://falconspace.ru/blog/bazovye-voprosy-i-ponyatiya-v-sfere-sozdaniya-veb-proektov - Основы веб-разработки. Базовые понятия для владельца сайта

1 неделя ago