Как оформить ввод суммы в мобильном приложении: клавиатура и формат

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

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

Не называйте любую числовую строку суммой. Телефонный номер, код подтверждения, номер заказа, целое количество и денежная величина требуют разных режимов ввода. В Android поле можно настроить как числовое, десятичное или знаковое через тип ввода; Apple отдельно описывает цифровую и десятичную клавиатуры. Эти настройки подсказывают клавиатуре ожидаемый ввод, но не заменяют проверку и разбор значения в приложении. См. Android InputType и UIKeyboardType.DecimalPad.

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

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

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

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

Сначала составьте таблицу возможных значений: допустима ли дробная часть, сколько у неё знаков, разрешён ли минус, максимальная сумма и что делать с ведущими нулями. Затем проверьте, что нужные символы доступны на клавиатуре выбранной платформы и метода ввода. Документация Android называет TYPE_NUMBER_FLAG_DECIMAL флагом для дробных чисел, а TYPE_NUMBER_FLAG_SIGNED — для знаковых; документация Apple различает .numberPad и .decimalPad. Не делайте вывод, что клавиатура всегда покажет именно тот символ или расположение, которое вы увидели на одном устройстве: проверьте реальные целевые устройства, языки и сторонние методы ввода.

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

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

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

В экосистеме Apple объект Locale задаёт среди прочего десятичный и групповой разделители; NumberFormatter форматирует и разбирает текстовое представление числа, а в Swift доступны и формат-стили чисел. Это хороший пример того, почему локаль должна участвовать в форматировании. Для собственного проекта используйте штатный форматтер платформы или проверенную библиотеку и задайте ожидаемую локаль явно там, где это требуется. Источники: Locale и NumberFormatter и десятичный разделитель локали.

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

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

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

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

Не уменьшайте шрифт автоматически до микроскопического размера, чтобы вместить строку. Сначала решите, может ли поле прокручиваться по горизонтали во время редактирования, переноситься на новую строку после ввода или менять компоновку. Для отображения результата можно разнести число и валюту на соседние строки, если это не затрудняет сканирование. Сохраните знак минуса, дробную часть и валюту: сокращённое «1,2 млн ₽» годится как обзор, но не как единственная запись точного платежа.

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

Не называйте поле неверным, если проблема в превышении диапазона или неверном формате. Сообщение «Некорректное значение» заставляет угадывать, а «Максимум — 50 000 ₽» называет границу. «Введите сумму в рублях без букв» помогает исправить вставленный текст. Сообщение появится рядом с полем, поэтому заранее предусмотрите для него место и контраст; появление ошибки не должно сдвигать кнопку за экран клавиатуры.

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

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

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

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

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

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

Менять всю строку при вводе цифры. Значение становится трудным для редактирования из-за прыгающего курсора. Разведите редактирование и отображение либо точно сохраняйте позицию каретки.

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

Исправлять данные незаметно. Автоматическое округление или удаление символов меняет намерение пользователя. Укажите правило, покажите результат и дайте подтвердить его.

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

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

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

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

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

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

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

Источники платформ: Apple: DecimalPad, Apple: NumberFormatter, Apple: десятичный разделитель Locale, Android: InputType.