Форма под клавиатурой в приложении: как сохранить поле и подсказку

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

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

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

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

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

Представьте форму адреса доставки: после индекса появляются город, улица и квартира. При переходе к улице клавиатура закрывает верхнюю подпись, а закреплённая кнопка «Продолжить» занимает остаток пространства. Человек видит только пустую строку и вынужден угадывать, какое значение вводить. Лучше прокручивать контейнер так, чтобы над активным полем оставались его метка и одна строка пояснения, а нижняя граница поля не прилипала к краю клавиатуры.

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

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

В Android официальная документация описывает режимы изменения окна при появлении клавиатуры. В частности, `adjustResize` уменьшает доступную области окна высоту, чтобы содержимое могло оставаться доступным, включая прокрутку; документация особо связывает это с элементами, нужными во время ввода. В современных интерфейсах также приходится учитывать системные отступы IME. Практические детали зависят от версии Android и стека UI, поэтому используйте актуальное руководство платформы: об обработке видимости клавиатуры и об отступах в Jetpack Compose.

В UIKit на iOS для привязки ограничений к области клавиатуры есть `UIKeyboardLayoutGuide`. Он описывает пространство, занимаемое клавиатурой, и помогает динамически менять ограничения. Если используете уведомления о клавиатуре, учитывайте систему координат и область фактического пересечения: плавающая клавиатура может перекрывать только часть окна. Начните с документации Apple о UIKeyboardLayoutGuide и примере адаптации компоновки.

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

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

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

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

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

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

Сделайте сценарии до разработки: экран без фокуса, активное первое поле, активное поле в середине списка, последнее поле, раскрытая клавиатура, ошибка, длинное введённое значение, переход «Далее» и возврат после закрытия клавиатуры. Отдельно опишите ожидаемое положение подписи, поля, подсказки и кнопки в каждом состоянии.

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

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

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

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

Нет. Если форма длинная, кнопка в потоке документа часто понятнее и освобождает место для активного поля с пояснением. Закреплённое действие уместно, когда оно действительно нужно на каждом шаге и не перекрывает полезный контент; проверьте это на короткой высоте и с увеличенным текстом.

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

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

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

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

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

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

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