数字输入 Input Number
用户预订班车时调整座位数量,数量只能在允许范围内按固定步长变化。
前端与交互约 10 分钟 · 从真实需求理解
1为什么数量输入需要边界和步长?
班车预订
座位数量
同行人数需要是 1–6 人,每次按 1 人调整
Input Number 让用户输入一个有数量语义的数字,同时用最小值、最大值和步长把结果限制在页面真正能处理的范围内。
- 加减按钮和输入框操作的是同一个数值,不应出现按钮与手动输入各自维护一份状态。
- 边界、步长和单位要让用户在控件附近看懂,否则一个看似数字的字段仍然可能接受错误数量。
2Input Number 和普通 Input、Slider 怎么区分?
Input Number ≠ 任何带数字键盘的输入框:它表达的是可增减、可校验的数量;普通 Input 可以收集编号等文本,Slider 更适合在连续范围里拖动。
- 座位数、购买件数等离散数量适合 Input Number,因为最小值、最大值和步长都明确。
- 订单编号 A-1042 不是数量,即使包含数字也应该使用普通 Input。
判断控件时看值的语义和变化方式,不要只看输入框里是否出现数字。
3一个 Input Number 由哪些真实部分组成?
班车预订
座位数量
同行人数需要是 1–6 人,每次按 1 人调整
Input Number 的结构要让数值、调整方式和合法范围互相对应。
- Label 说明当前输入的数量对象,输入区域展示同一个可编辑数值。
- 减少、增加和直接输入都更新同一个值,并遵守 min、max 和 step。
- 单位和范围提示帮助用户理解数字代表什么,以及为什么某些值不能继续增加。
4调整座位数量时,Input Number 怎样回应?
预订同行座位
Input Number · 班车预订选择同行人数后确认座位
用户在班车预订里调整座位数量,再确认预订;页面把合法数量带入当前任务并显示对应结果。
- 加减按钮、手动输入和确认结果都围绕同一个数量值,超过边界时控件不会产生不可处理的数字。
5什么时候该用 Input Number?
整数、上下界和每次 1 人的步长都明确。
可直接输入,也可以按 1 件增减。
用户更关心 0%–100% 之间的位置,用 Slider 调整更直接。
A-1042 是文本标识,不存在增减数量的约束。
先看值是不是有数量语义:离散数量需要上下界和步长时使用 Input Number;连续范围或字母数字文本则选择 Slider 或普通 Input。
6怎样把 Input Number 需求告诉 Agent?
请使用 Input Number 实现班车预订的座位数量:允许 1–6 人,步长为 1,显示单位“人”,加减按钮和直接输入必须更新同一个值并遵守边界。请保留清晰 label、键盘输入、禁用边界和可读的当前数量,不要把订单编号或连续音量误做成数字步进器。
7不用背,看看你能不能判断
1 / 3
Input Number 最适合输入什么?
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。