數值控制

Number Input|數字輸入欄

輸入需要精確儲存或驗證的數值,例如預算、數量或百分比。

常見俗稱:數字輸入欄、數值欄位、Number Input、數字框

60 秒決策

先確認使用者要完成的事。

適合使用

  • 數值需要精確輸入、驗證或儲存,例如預算、金額、百分比。
  • 使用者可能需要直接貼上或輸入一個不規律的數字。

不適合使用

  • 使用者只要在小範圍快速調整,且精確輸入不是主要任務。
  • 數字其實是主觀感受或有限等級。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

單位不能藏在 Placeholder

金額、百分比、天數等單位要一直看得見,讓 50 是 50 元還是 50% 不必靠猜。

範圍要能被看見

最小值、最大值與步進規則要在輸入前或輸入後清楚交代。

格式化不能妨礙輸入

千分位、貨幣符號與小數位要幫助閱讀,不能讓游標和貼上數值變得難用。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

空白與已輸入

保留 Label、單位與目前數值,不用 Placeholder 當唯一提示。

格式錯誤

輸入非數字或不允許小數時,說明可接受的格式。

超出範圍

明確說出上限或下限,保留使用者輸入讓他能修正。

停用或唯讀

數值不能改時,交代原因而非只留下灰色欄位。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 精確預算輸入

    先觀察:數字、單位、範圍與錯誤回饋如何同時存在。

    操作:輸入 48000,再試著輸入超過上限的值。

    預期結果:目前金額與可修正的規則都清楚,不會因錯誤而清空輸入。

可操作 Demo

精確預算輸入

輸入 0 至 200,000 的整數。金額會以新臺幣儲存。

目前預算:NT$ 48,000。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

建立「單月預算」Number Input。使用可見 Label 與新臺幣單位,允許輸入 0 到 200000 的整數;格式錯誤、超出範圍與必填時在欄位附近說明,不能只用 Slider 取代精確輸入。

驗收清單

不要只確認欄位能不能點。

  • 數字代表的單位是否一直可見?
  • 格式、最小值、最大值與小數規則是否明確?
  • 錯誤是否保留原本輸入並說明修正方式?
  • 貼上、鍵盤輸入與手機數字鍵盤是否可用?
  • 需要快速範圍調整時,是否應同時提供 Slider?