Scott
Поле денежной суммы должно связывать три вещи: число, которое имеет в виду человек, выбранную валюту и значение, которое сохранит приложение. Показывайте валюту явно, задавайте понятный формат числа и позволяйте проверить распознанную сумму перед значимым действием. Форматирование не должно незаметно превращать одну сумму в другую.
Начните с правил полей для всей формы, а затем отдельно определите требования к денежным значениям. Указания «принимать числа» недостаточно: запятая может разделять целую и дробную части, скопированная сумма — содержать код валюты, а смена валюты — менять допустимую точность.
Определите, для чего вводится сумма
Представим приложение для закупок: сотрудник записывает итоговую сумму из предложения поставщика перед созданием заказа. В примере предложение составляет USD 1,234.50. Поле фиксирует этот итог; оно не рассчитывает налог, не конвертирует валюту и не запускает платёж.
В упражнении продукт принимает положительные итоговые суммы в USD, EUR и JPY. Для USD и EUR допускаются два знака дробной части, для JPY — только целые единицы. Это правила конкретного приложения. Поле цены за единицу, поле обменного курса и бухгалтерская корректировка могут требовать иной точности или правил для знака, даже если находятся в том же продукте.
Отделяйте валюту предложения от настроек отображения. Русскоязычный интерфейс может работать с предложением в евро, а немецкий формат чисел — отображать сумму в долларах США. Выбор USD не должен незаметно менять язык или способ интерпретации уже введённого текста. В основном примере ниже явно выбран американский формат числа: точка отделяет дробную часть, запятая разделяет разряды.
Назовите поле «Итого по предложению», а элемент выбора валюты подпишите отдельно. В списке используйте понятные варианты вроде «USD — доллар США» и оставляйте код возле суммы после выбора. Один знак доллара даёт недостаточно контекста форме, работающей с несколькими валютами.
Различайте введённый текст, распознанную сумму и запись для проверки
Во время ввода поле содержит текст, который может быть ещё не закончен: пустую строку, «1234.» или значение, в котором выделена дробная часть для замены. Такой промежуточный текст отличается от принятого числового значения. На экране проверки то же значение может быть отформатировано для чтения.
Для нашего предложения в поле может стоять «1234.50», принятая сумма составляет 1234.50 USD, а при проверке показано «USD 1,234.50». Все три представления должны согласовываться. Если человек изменил видимый текст и новое значение ещё не распознано, нельзя позволять отправить скрытую прежнюю сумму.
Шаблоны денежных форматов Unicode CLDR на английском описывают правила отображения, включая положение символа валюты и группировку разрядов. Они не определяют, как ваше приложение должно разбирать любую вставленную строку. Отдельно задайте правила распознавания и вывода, чтобы библиотека форматирования не подменяла правила ввода.
В примечаниях для разработки приведите конкретные сочетания: выбранный формат, введённый текст, принятое число, валюта и итоговая запись. Это полезнее требования «поддерживать международные валюты». Разместите примечания рядом с соответствующими состояниями: точные внутренние правила не требуют перегруженного интерфейса.
Определите смысл разделителей во вставленном значении
Сумма, скопированная из другого приложения, может использовать иной формат. Американская запись «1,234.50» и немецкая «1.234,50» обозначают одно число. Важно, какой символ отделяет дробную часть, а какой группирует разряды. Простое удаление всех точек и запятых не заменяет распознавание.
Рекомендации CLDR по числовым символам на английском различают десятичный разделитель и разделитель групп разрядов, учитывая региональные настройки. Для ввода используйте явно показанный или уже установленный формат. По пунктуации нельзя определять валюту предложения.
| Настройки ввода | Введённый текст | Результат в этом проекте |
|---|---|---|
| Американский формат, выбрана USD | 1,234.50 | Принять 1234.50 USD; показать для проверки USD 1,234.50. |
| Немецкий формат, выбрана USD | 1.234,50 | Принять ту же сумму в USD; показать её в выбранном числовом формате. |
| Американский формат, выбрана USD | 1.234,50 | Сохранить текст и объяснить ожидаемый формат; не удалять разделители, угадывая число. |
| Числовой формат ещё не определён | 1,234 | Уточнить формат или попросить значение без группировки разрядов с явно указанным десятичным разделителем. |
В этом примере правила распознавания намеренно ограничены. Продукт может принимать дополнительные форматы вставки, если надёжно их различает и показывает распознанную сумму. Основное решение касается ситуации, когда остаются два правдоподобных толкования.
Для отклонённой вставки подойдёт сообщение: «Используйте точку для дробной части, например 1234.50». Если продукт позволяет, рядом можно предложить изменить формат чисел. Сохраните исходный текст в поле, чтобы сотрудник мог сравнить его с предложением поставщика.
Из вставленной строки «USD 1,234.50» можно убрать распознанный код USD без изменения смысла, если выбрана именно эта валюта. Если при выбранной USD вставлено «EUR 1,234.50», нужно разрешить противоречие валют. Незаметно отброшенный код EUR оставит аккуратное поле с неверным денежным значением.
Выбирайте момент форматирования так, чтобы не мешать редактированию
В этой форме закупки оставляйте число удобным для редактирования, пока поле в фокусе, и форматируйте завершённое корректное значение после выхода из поля. Не превращайте «1» в «1.00», пока сотрудник продолжает вводить «1234», и не переносите курсор в конец при замене цифры посередине.
Форматирование во время набора тоже возможно, но требует аккуратной работы с курсором, выделением, удалением, вставкой и составным вводом. Например, денежное поле Pega, описанное на английском, форматирует значение по мере набора. Это поведение конкретного компонента, а не обязательное правило для любого поля суммы.
Выбирайте решение на основе реального редактирования. Попросите человека заменить «34» в «1234.50», удалить дробную часть, вставить новое значение поверх всего содержимого и отменить изменение. Если поле мешает этим обычным действиям, красивое исходное форматирование проблему не исправляет.
На телефоне подсказка для десятичной клавиатуры может упростить ввод. Определение inputmode в стандарте HTML на английском описывает механизм ввода дробного числа; этот атрибут не проверяет сумму. Тестируйте реализованное поле на поддерживаемых устройствах, в том числе возможность ввести разделитель, ожидаемый формой.
Отклоняйте лишние знаки без незаметного округления
Допустим, сотрудник ввёл USD 1,234.567. По правилам нашего поля три знака дробной части не принимаются. Сохраните значение и объясните: «Для USD допустимо не более 2 знаков дробной части». Не сохраняйте незаметно 1,234.57: тогда приложение запишет итог, который отличается от предложения поставщика.
Если продукт намеренно округляет вычисленные суммы, определите правило и момент, когда человек увидит округлённый результат. Это другое решение, чем округление неподходящего пользовательского ввода ради соответствия полю. То же относится к усечению: скрытая третья цифра не исчезает безопасным образом.
Точность должна соответствовать и операции за интерфейсом. Документация Stripe по валютам на английском показывает, почему важны условия интеграции: параметр amount в API передаёт сумму в минимальных единицах валюты. Например, 10 USD задаются как 1000, а 10 JPY — как 10; существуют и особые правила для отдельных валют. Это правила Stripe, а не основание умножать на 100 суммы в любом приложении.
Для приложения закупок согласуйте с разработчиками точное десятичное представление и обеспечьте совпадение с экраном проверки. Отдельно решите, разрешён ли ноль, нужны ли в этом сценарии отрицательные корректировки и есть ли верхний предел. Пустое обязательное поле должно оставаться пустым до ввода: заполнитель «0.00» не должен создавать настоящую нулевую сумму.
Смена валюты не должна выглядеть как конвертация
Теперь сотрудник меняет USD на JPY, пока в поле остаётся 1234.50. Простая замена кода придаст записи другой смысл, а удаление «.50» изменит и число. Ни одно из этих действий не является конвертацией валюты.
В этом проекте сохраните введённую запись как ещё не принятое значение и покажите: «Для JPY в этой форме допустимы только целые суммы. Введите итог из предложения в JPY». Предыдущая проверка USD больше не действует. Сотрудник может вернуться к USD с сохранённым вводом либо указать действительный итог из предложения в JPY и проверить его заново.
При смене USD на EUR те же цифры удовлетворяют правилу точности, но обозначают другую денежную сумму. Форма может оставить их видимыми, явно требуя проверить «EUR 1,234.50» перед созданием заказа. Изменение кода значимо и тогда, когда ошибки дробной части нет.
Если продукт предлагает конвертацию, выделите её в отдельное действие и до принятия результата покажите исходную и полученную суммы, сведения о курсе, применимые комиссии и округление. В нашем приложении конвертации нет, поэтому строка обменного курса создала бы ложное впечатление о его возможностях.
Подтвердите именно ту сумму и валюту, которые будут сохранены
На экране проверки заказа покажите итог предложения с явным кодом валюты рядом с поставщиком и номером предложения. Действие «Изменить» возвращает сотрудника к полю суммы. Изменение цифр или валюты отменяет прежнюю проверку: отметка подтверждения не должна оставаться возле устаревшего значения.
Информация о валюте должна быть доступна не только в видимом префиксе. Рекомендации GOV.UK по текстовым полям на английском предупреждают, что нельзя полагаться только на префикс или суффикс. Программно свяжите поле с информативной подписью и нужными пояснениями, чтобы пользователь вспомогательных технологий получил тот же контекст суммы.
После сохранения покажите подтверждённые сервисом сумму и валюту. При однозначно неуспешном сохранении оставьте проверенную пару для исправления или повтора и объясните, что заказ не сохранён. Если исход неизвестен, сначала установите статус заказа и только затем предлагайте создать его повторно. Зелёное поле означает корректный ввод, а не завершённое создание заказа.
Сопоставьте смену валюты и итоговую проверку в Pixso
Соберите на холсте Pixso один сценарий ввода суммы предложения. Поместите редактирование USD рядом с проверкой «USD 1,234.50», затем добавьте состояние после выбора JPY: в поле остаётся «1234.50», рядом показано требование целой суммы. Создайте компонент поля и используйте его экземпляры, чтобы сравнить подписи, положение валюты и отступы сообщений во всех состояниях.
Свяжите смену валюты и действие «Изменить» с нужными фреймами и просмотрите путь. С помощью Auto Layout проверьте, как длинная ошибка сдвигает номер предложения и следующую кнопку. Инструменты прототипирования и обсуждения Pixso помогают пройти этот сценарий; правила распознавания чисел и денежных значений остаются частью спецификации приложения.
Попросите участника записать сумму предложения, заменить дробную часть и один раз сменить валюту. На каждом экране проверки спросите, какая сумма окажется в заказе. Оставьте комментарий рядом с фреймом, если ответы расходятся. Если для ответа приходится угадывать смысл разделителя или предполагать, что произошла конвертация, правила поля ещё нужно сделать понятнее.
