SPT术语库

数字输入 Input Number

用户预订班车时调整座位数量,数量只能在允许范围内按固定步长变化。

前端与交互约 10 分钟 · 从真实需求理解

1为什么数量输入需要边界和步长?

班车预订

座位数量

同行人数需要是 1–6 人,每次按 1 人调整

最少 1 人 · 最多 6 人 · 每次 1 人

当前 1人,可以按步长调整。

Input Number 让用户输入一个有数量语义的数字,同时用最小值、最大值和步长把结果限制在页面真正能处理的范围内。

  • 加减按钮和输入框操作的是同一个数值,不应出现按钮与手动输入各自维护一份状态。
  • 边界、步长和单位要让用户在控件附近看懂,否则一个看似数字的字段仍然可能接受错误数量。

2Input Number 和普通 Input、Slider 怎么区分?

Input Number ≠ 任何带数字键盘的输入框:它表达的是可增减、可校验的数量;普通 Input 可以收集编号等文本,Slider 更适合在连续范围里拖动。

  • 座位数、购买件数等离散数量适合 Input Number,因为最小值、最大值和步长都明确。
  • 订单编号 A-1042 不是数量,即使包含数字也应该使用普通 Input。

判断控件时看值的语义和变化方式,不要只看输入框里是否出现数字。

3一个 Input Number 由哪些真实部分组成?

班车预订

座位数量

同行人数需要是 1–6 人,每次按 1 人调整

最少 1 人 · 最多 6 人 · 每次 1 人

已按 3 人保留座位

Input Number 的结构要让数值、调整方式和合法范围互相对应。

  • Label 说明当前输入的数量对象,输入区域展示同一个可编辑数值。
  • 减少、增加和直接输入都更新同一个值,并遵守 min、max 和 step。
  • 单位和范围提示帮助用户理解数字代表什么,以及为什么某些值不能继续增加。

4调整座位数量时,Input Number 怎样回应?

预订同行座位
Input Number · 班车预订

选择同行人数后确认座位

用户在班车预订里调整座位数量,再确认预订;页面把合法数量带入当前任务并显示对应结果。

  • 加减按钮、手动输入和确认结果都围绕同一个数量值,超过边界时控件不会产生不可处理的数字。

5什么时候该用 Input Number?

座位数是离散数量

整数、上下界和每次 1 人的步长都明确。

可直接输入,也可以按 1 件增减。
不建议这样用音量是连续范围

用户更关心 0%–100% 之间的位置,用 Slider 调整更直接。

播放音量65%
当前音量:65%
不建议这样用编号包含字母和符号

A-1042 是文本标识,不存在增减数量的约束。

先看值是不是有数量语义:离散数量需要上下界和步长时使用 Input Number;连续范围或字母数字文本则选择 Slider 或普通 Input。

6怎样把 Input Number 需求告诉 Agent?

请使用 Input Number 实现班车预订的座位数量:允许 1–6 人,步长为 1,显示单位“人”,加减按钮和直接输入必须更新同一个值并遵守边界。请保留清晰 label、键盘输入、禁用边界和可读的当前数量,不要把订单编号或连续音量误做成数字步进器。

7不用背,看看你能不能判断

1 / 3

Input Number 最适合输入什么?

请选择一个最符合题意的答案

选择答案后自动进入下一题

社区延伸

看别人真实遇到过什么

社区帖子还没有关联到这个词条。