Как оформить поле кода подтверждения в мобильном приложении

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

Короткий код выглядит простым, но каждая цифра здесь несёт одинаково важную информацию. Пользователь сравнивает знаки друг с другом, замечает заполненность, читает подсказку и одновременно взаимодействует с системной клавиатурой или предложением автозаполнения. Даже небольшая особенность шрифта — похожие 0 и 8, слишком узкая единица или неровная ширина — может замедлить проверку.

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

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

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

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

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

На iOS текстовое поле можно пометить как поле одноразового кода через oneTimeCode (textContentType в UIKit, модификатор textContentType в SwiftUI). Apple описывает этот тип как семантику для текстовой области и указывает его для AutoFill кодов. Системная подсказка зависит от контекста и доступности кода, поэтому не обещайте, что она появится всегда. Для Android используйте подходящий тип ввода и проверьте интеграцию выбранного способа получения кода: документация Android описывает SMS Retriever API как один из вариантов, а приложение должно отправлять полученное значение на сервер для проверки. См. документацию Apple о поле одноразового кода и Android о проверке по SMS.

В одноразовом коде нет длинного чтения, поэтому экспериментальная гарнитура редко помогает. Для цифр важны различимость, устойчивый рисунок и достаточная ширина; используйте семейство, которое в приложении действительно подключено на обеих платформах. Если продукт применяет авторский шрифт, сравните его ноль и заглавную O, единицу и строчную l, а также пары 3/8 и 5/6. Некоторые из этих символов не встретятся в цифровом коде, но появятся в буквенно-цифровом.

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

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

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

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

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

Если архитектура требует отдельных полей, проверьте поддержку всей цепочки ввода на обеих платформах, а не только ручной набор. Apple рекомендует задавать текстовому полю oneTimeCode; документация Android по оптимизации AutoFill описывает подсказку SMS OTP для одного представления и отдельные подсказки для символов в многополевом вводе. Это не означает, что любой менеджер автозаполнения обязан предложить код: поведение зависит от устройства, сервиса и согласия пользователя. Сверяйтесь с документацией Android по AutoFill.

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

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

Ошибка должна называться словами, а не только красной рамкой. Например: «Код не подошёл. Проверьте цифры или запросите новый». Не сообщайте о неверном коде до ответа сервера, если приложение ещё проверяет значение. Не сбрасывайте ввод молча: если код можно исправить, сохраните его и переместите фокус так, чтобы пользователь мог отредактировать значение. Цвет ошибки дополняйте текстом и доступным объявлением для вспомогательных технологий.

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

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

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

Минимальная проверка должна включать не только красивый макет в дизайнерском инструменте, но и собранное приложение. Шрифт, межбуквенные интервалы и системные элементы на устройстве могут отличаться от статической картинки. Сверьте, что при вставке или AutoFill значение попадает в правильной последовательности, а отображение группировки не меняет данные. Отдельно проверьте отмену, очистку кода и ручное исправление одной цифры в середине.

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

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

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

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

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

Да, если разделение помогает увидеть длину и прогресс заполнения. Убедитесь, что ячейки представляют одно понятное поле ввода либо что многополевой вариант корректно работает с вставкой, фокусом, screen reader и AutoFill на целевых платформах.

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

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

Подсказка зависит от устройства, доступности подходящего сообщения, настроек и корректного описания поля. В iOS укажите семантику oneTimeCode, но сохраните ручной способ ввода и предусмотрите понятное восстановление, если предложение не появляется.

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

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

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