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

Где применяются input-поля:

  • Авторизация и регистрация — телефоны, email, пароли
  • Поиск — строки поиска товаров, категорий, магазинов
  • Оформление заказов — адреса, имена, комментарии
  • Платежи — номера карт, CVV, суммы
  • Фильтры — цены, даты, параметры товаров
  • Настройки профиля — персональные данные, предпочтения

Почему это критично:

По статистике, 68% пользователей abandoning форму, если она вызывает трудности. Каждое поле ввода — это потенциальная точка выхода из воронки. Плохой input = потерянные конверсии, поддержка и негативный опыт.

Хороший input = быстрое заполнение, минимум ошибок, доверие к продукту.

1. Default (Пустое состояние)

Визуал:

  • Темно-синий фон поля (#1E293B)
  • Синяя неоновая обводка (glow-эффект)
  • Placeholder: --- --- -- -- (дефисы показывают формат)

UX-решение:

  • Дефисы вместо пустого поля — пользователь сразу видит структуру
  • Неоновое свечение создает ощущение «интерактивности» в темной теме
  • Визуальная глубина за счет тени

2. Focus (Курсор в начале)

Визуал:

  • Яркий белый курсор | в начале поля
  • Усиленное свечение обводки
  • Остальная часть: --- --- -- --

UX-решение:

  • Мгновенная обратная связь — поле «оживает»
  • Курсор в начале (не в конце) — готовность к вводу с первой цифры
  • Автоматическое появление цифровой клавиатуры

3. Typing (Частичный ввод)

Визуал:

  • Частично заполненное поле: --- --- -- --|
  • Курсор смещается по мере ввода
  • Маска применяется в реальном времени

UX-решение:

  • Пользователь видит прогресс заполнения
  • Курсор не перескакивает через пробелы (умная навигация)
  • Визуальная обратная связь без текста ошибок

4. Filled (Полное заполнение)

Визуал:

  • Полный номер: 999 999 99 99
  • Белый текст на темном фоне
  • Синяя обводка (валидное состояние)

UX-решение:

  • Пробелы между группами цифр — легче прочитать и проверить
  • Формат 3-3-2-2 (вместо +7 (999) 999-99-99) — чище визуально
  • Кнопка «Продолжить» активируется автоматически

5. Country Code (Префикс страны)

Визуал:

  • Префикс +7 в начале поля
  • Серый цвет (неактивный элемент)
  • Остальная часть поля пуста

UX-решение:

  • Код страны не редактируется — защита от ошибок
  • Визуальное отделение префикса от основного номера
  • Автоматическая подстановка для РФ

6. Error (Ошибка валидации)

Визуал:

  • Красная неоновая обводка (вместо синей)
  • Номер: 000 000 00 00 (красный цвет)
  • Текст ошибки под полем: * Не правильный номер телефона

UX-решение:

  • Двойная индикация: цвет + текст (доступность для дальтоников)
  • Неоновое свечение сохраняется (но красное) — поле все еще активно
  • Ошибка под полем (не перекрывает ввод)
  • Звездочка * привлекает внимание

Заключение

Input — это не просто «поле с рамкой». Это коммуникационный канал между пользователем и системой. Каждое состояние (default, focus, typing, filled, error) — это сообщение пользователю: «Я тебя понимаю, я работаю, я здесь».

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

Главный принцип: пользователь должен понимать состояние поля за 0.5 секунды без вдумчивого чтения.