60 秒決策
先確認使用者要完成的事。
適合使用
- 數值需要精確輸入、驗證或儲存,例如預算、金額、百分比。
- 使用者可能需要直接貼上或輸入一個不規律的數字。
不適合使用
- 使用者只要在小範圍快速調整,且精確輸入不是主要任務。
- 數字其實是主觀感受或有限等級。
畫面要說清楚的事
不要只交代外觀,也要交代資料與輸入規則。
單位不能藏在 Placeholder
金額、百分比、天數等單位要一直看得見,讓 50 是 50 元還是 50% 不必靠猜。
範圍要能被看見
最小值、最大值與步進規則要在輸入前或輸入後清楚交代。
格式化不能妨礙輸入
千分位、貨幣符號與小數位要幫助閱讀,不能讓游標和貼上數值變得難用。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
空白與已輸入
保留 Label、單位與目前數值,不用 Placeholder 當唯一提示。
格式錯誤
輸入非數字或不允許小數時,說明可接受的格式。
超出範圍
明確說出上限或下限,保留使用者輸入讓他能修正。
停用或唯讀
數值不能改時,交代原因而非只留下灰色欄位。
操作 Demo
先知道要觀察什麼,再動手操作。
操作前先知道
精確預算輸入
先觀察:數字、單位、範圍與錯誤回饋如何同時存在。
操作:輸入 48000,再試著輸入超過上限的值。
預期結果:目前金額與可修正的規則都清楚,不會因錯誤而清空輸入。
可操作 Demo
精確預算輸入
輸入 0 至 200,000 的整數。金額會以新臺幣儲存。
目前預算:NT$ 48,000。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「單月預算」Number Input。使用可見 Label 與新臺幣單位,允許輸入 0 到 200000 的整數;格式錯誤、超出範圍與必填時在欄位附近說明,不能只用 Slider 取代精確輸入。驗收清單
不要只確認欄位能不能點。
- 數字代表的單位是否一直可見?
- 格式、最小值、最大值與小數規則是否明確?
- 錯誤是否保留原本輸入並說明修正方式?
- 貼上、鍵盤輸入與手機數字鍵盤是否可用?
- 需要快速範圍調整時,是否應同時提供 Slider?