Поле поиска — это специализированный элемент интерфейса, предназначенный для ввода поисковых запросов. Основная цель данного элемента — дать возможность пользователю ввести текст для поиска необходимой информации. Само поле поиска обычно состоит из нескольких элементов.
Базовая анатомия
Основой поля является область ввода с характерной для данного компонента иконкой лупы. Границы поля необходимо сделать четкими, а внутренние отступы достаточно большими, чтобы запросы было удобно вводить. Иконка лупы служит визуальным якорем, который поможет человеку быстро понять значение поля и найти его в интерфейсе.
Анатомия с выпадающим списком
Когда пользователь начинает вводить текст, поле ввода может дополниться выпадающим списком с результатами или подсказками. Список следует связать с полем ввода, но не перекрывать важный контент страницы. Вне поля, но чаще всего справа, могут располагаться дополнительные элементы: кнопка очистки, фильтры и другие настройки поиска.
Поле поиска должно активно взаимодействовать с пользователем, привлекая к себе внимание и помогая в процессе.
Default
В базовом состоянии поле должно содержать подсказку (placeholder) с примером запроса или кратким описанием функции данного элемента. Для иконки обычно выбирают нейтральный цвет, чтобы она была заметна, но не привлекала слишком много внимания.
Hover
При наведении курсора поле должно реагировать также, как и обычное текстовое поле.
Active
В процессе ввода, пользователю обязательно нужно видеть введенные им символы, а также, в зависимости от задачи, подсказки, автодополнение или историю поиска.
Disabled
Неактивное состояние явно показывает недоступность поиска, сохраняя при этом узнаваемость элемента. Все интерактивные функции блокируются.
