日期與時間

Time Picker|時間選擇器

需要選擇一天中的特定時間時使用;清楚界定時制、步進與允許的營業時段。

常見俗稱:時間選擇器、時間欄位、Time Picker、預約時段

60 秒決策

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

適合使用

  • 使用者需要選擇一天中的時刻,例如預約開始時間。
  • 可用時段、時制與固定步進會影響是否能提交。

不適合使用

  • 只需要選擇日期,時間不影響任務。
  • 使用者要查看整天或整週的事件配置。

畫面要說清楚的事

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

時制與步進先說清楚

明確標示 24 小時制或上午下午制,以及能選 15 分鐘或 30 分鐘一格。

把可用時段放在欄位附近

營業開始與結束時間要看得到,避免選完才知道不開放。

不要只依賴原生外觀

可以使用原生控制,但規則、錯誤與目前值仍要由產品介面說清楚。

必要狀態與回應

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

預設

可見 Label、時制、步進與可用時段。

有值

目前時間以固定、可讀格式顯示。

不在營業時間

保留輸入並指出可選範圍。

不符合步進

說明需以 15 分鐘為單位調整。

操作 Demo

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

操作前先知道

  1. 預約開始時間

    先觀察:24 小時制、15 分鐘步進與營業時間規則是否清楚。

    操作:輸入 08:45,再改成 09:30。

    預期結果:不合規則的時間保留並顯示錯誤;可用時間會立即確認。

可操作 Demo

選擇預約開始時間

採 24 小時制;可預約時間為 09:00 至 18:00,每次 15 分鐘。

已選擇 09:30,可安排預約。

告訴 AI

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

建立一個 Time Picker 供預約時段使用。採 24 小時制,範圍為 09:00 至 18:00,每 15 分鐘一格;顯示目前已選時間。輸入不在營業時間或不符合 15 分鐘步進時,保留內容並提供明確錯誤訊息。

驗收清單

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

  • 12/24 小時制是否沒有歧義?
  • 步進值是否符合真實營運規則?
  • 可用開始與結束時間是否看得見?
  • 錯誤是否保留輸入?
  • 手機原生時間選擇器與桌面鍵盤是否可用?