数字输入框设计要先约定数值含义，再处理外观：空值表示尚未填写，0 是一个已经填写的数；单位要一直可见；超出范围或小数位数时保留原输入，说明如何修改。不要在用户还输入“12.”时就删掉小数点，也不要把三位小数悄悄截成两位。
下面用一张虚构报价单 Q-018，把单价、数量和优惠比例的规则写完整。评审时可以先把数字字段的不同状态做成可点击原型，让同一组数据经过输入、报错和确认，检查每个提示是否能帮助用户继续。
单价、数量和优惠比例，先各写一份规则
需求里的“只能填数字”太宽泛。电话号码是由数字组成的标识，单价才是可用于计算的数值；数量通常不能有小数，金额却可能需要。画输入框前，先与业务方确定下面这些条件。本例的范围只用于演示，不是所有报价系统的通用限制。
| 字段 | 本例允许的值 | 空值与 0 | 确认后的显示 |
|---|---|---|---|
| 单价 | 人民币元/件；0 至 999999.99；最多两位小数 | 必填；空值未填写；0 表示免费单品 | 补足两位小数，加入千位分隔符，如 1,280.34 |
| 数量 | 件；1 至 9999 的整数 | 必填；空值未填写；0 不符合范围 | 整数，不补小数，如 3 |
| 优惠比例 | %；0 至 50；最多两位小数 | 必填；0 表示不优惠；空值不代填 0 | 保留必要的小数，如 10、12.5 |
这里特意用“优惠比例”，并在说明中写“从商品金额中减去的比例”，避免“折扣 10”被理解为付原价的 10%。若产品使用“几折”，就应更换单位和计算规则，不能只替换字段名称。本例三个字段都不预填，用户主动输入 0 才表示已作出选择。
单位放在输入框旁的固定位置：单价后面写“元/件”，数量后面写“件”，优惠比例后面写“%”。不要只在占位文字中写单位，否则输入后就看不到。GOV.UK 的文本输入指南提供了前后缀单位和数字键盘的设计参考；这些做法仍需结合自己的字段含义选择。
空着、输入 0、显示 0.00，是三种不同状态
空框不是值为零的框。用户打开报价单还没有填写单价时，页面不应显示“免费”，也不应计算出总价 0.00。本例把总价显示为“—”，旁边说明“填写完整后计算”。首次进入不立即报错；用户离开一个已进入的必填字段，或点击提交时，才提示缺失项。
单价输入 0 并通过校验后，显示 0.00；它的数值仍是零，补小数只是金额格式。数量输入 0 则显示“数量应为 1 至 9999 的整数”，保留 0 供修改。优惠比例输入 0 表示不优惠，不能因为它在程序判断中等同于假值，就误报“请填写”。
因此，字段至少需要区分“原始输入文本”“是否通过校验”和“已确认数值”。这些是交付给研发的行为约定，不必全部显示在页面上。用户清空一个已有值时，应立即撤销该字段对预览金额的贡献；不要让旧总价继续看起来像当前结果。
输入到一半，先允许用户把数字写完
正在编辑的文本不一定已是可提交的数值。例如输入 12.5 时，会短暂经过“1”“12”“12.”。此时可以保留小数点，等离开字段或提交时再校验；每敲一个字符就格式化，容易移动光标，也会妨碍插入和删除中间的数字。
本例在获得焦点后显示不带千位分隔符的编辑值，通过校验并离开后才恢复金额格式。粘贴内容先原样保留，校验通过后再转换。对单价允许标准的英文千位分隔符，如 1,280.34；逗号每组三位，英文句点代表小数点。本例不接受货币符号、百分号或逗号小数写法，提示用户删除符号或改正格式，不替用户猜测。
| 输入或操作 | 字段如何响应 | 本例提示 |
|---|---|---|
| 单价输入到 12. | 编辑过程中保留；离开时要求补完或删除小数点 | 请补全小数，或删除末尾的小数点 |
| 单价粘贴 1,280.345 | 保留原文，不截断、不自动四舍五入 | 单价最多填写两位小数，请核对后修改 |
| 单价粘贴 1,280.34 | 确认数值为 1280.34；展示为 1,280.34 | 通过校验，无错误提示 |
| 单价粘贴 1,28 | 不把它猜成 1.28 或 128 | 千位分隔符格式不正确，例如 1,280.34 |
| 数量输入 2.5 | 保留输入，不取整 | 数量应为 1 至 9999 的整数 |
| 优惠比例输入 60 | 保留输入，不自动改为 50 | 优惠比例应在 0% 至 50% 之间 |
错误出现后，用户修改字段时应有机会尽快解除提示。例如把 1,280.345 改成 1,280.34 后，可以重新校验并移除旧错误；不要必须再次提交整张表单，才能知道已经改对。ONS 的数字输入模式也强调允许粘贴，并针对缺失、格式和范围提供具体提示。
键盘、增减按钮和校验，各自解决不同问题
移动端可以为数量提示整数键盘，为单价提示小数键盘，但键盘提示不能代替校验：用户仍可能粘贴其他内容，不同设备提供的按键也会不同。若业务允许负数，还要确认目标设备有方便输入负号的方法。本例三个字段均不接受负数，不需要展示负数输入路径。
数量是否配加减按钮，要看常见操作。频繁把 2 件改成 3 件时，步长为 1 的按钮有用；经常录入 1800 件时，直接输入更方便。单价不应因为滚动页面或误触一个箭头就变化。GOV.UK 提醒数值输入类型可能带来滚轮误增减等问题，因此不能仅凭“内容是数字”就决定控件。
页面仍需保留清晰标签和错误文本，不能仅用红边表示问题。输入框、单位、说明和错误在窄屏上也应保持对应关系；把“元/件”挤到下一行时，要避免看起来像下一字段的标签。
用一条错误路径验收报价单
准备三个页面状态即可开始评审：初始未填写、单价小数位超限、修正后可提交。错误状态固定为单价 1,280.345、数量 3、优惠比例 10%，总价显示“—”，提示“请先修正单价”。修正状态改为单价 1,280.34，其余两项不变。
为让预览结果可核对，本例约定先计算单价乘数量，再乘以剩余比例，仅在最后按四舍五入保留两位小数：1280.34 × 3 ×（1 − 10%）= 3456.918，显示 3,456.92 元。该计算约定属于这个教学例子；如果真实业务按行先舍入或包含税费，界面说明和预期结果必须一起更换。
在墨刀中，可以用多个页面状态连线演示错误修正与提交入口，把每个字段的范围、精度、格式化时机和结果写在页面说明里。这里评审的是交互约定，真实的解析、计算和保存仍需开发实现。走查时让同事分别清空单价、输入数量 0、粘贴超精度金额，再检查原输入是否保留、总价是否停止更新、错误是否指向正确字段。
数字字段明确后，再按表单原型的校验与提交方法把它接入完整表单。需要统一其他输入组件的文字、间距和反馈，可继续查看UI 与界面设计专题。交付的关键不是画出一个带单位的框，而是让每一种输入都能得到可解释的结果。
