60 秒決策
先確認使用者要完成的事。
適合使用
- 輸入姓名、專案名稱、編號等短文字或格式化值。
- 使用者需要直接輸入一個單一值。
不適合使用
- 內容需要多段敘述或較長備註。
- 輸入內容屬於密碼或這個欄位其實是搜尋既有資料。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
Label 是欄位的名字
可見 Label 說明用途；Placeholder 只可補充格式或範例，不能取代欄位名稱。
提示寫在輸入前
格式、必填與限制應在使用者輸入前就能理解，不等提交後才責備。
錯誤靠近欄位
錯誤文字要指出哪裡不對與如何修正，不能只用紅色外框。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
空白與 Focus
未輸入時保留用途與格式提示；聚焦時讓人清楚知道目前位置。
已輸入
輸入後保留內容，必要時回饋字數或格式。
錯誤
顯示具體修正方式，例如「名稱至少 2 個字」。
停用或唯讀
說明為什麼不能改，避免只留下灰色欄位。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
短文字與字數
先觀察：Label、提示與字數訊息如何一起說明欄位規則。
操作：輸入專案名稱並清空內容。
預期結果：欄位狀態與目前輸入都能被看見與理解。
可操作 Demo
短文字輸入
2 至 30 個字，讓團隊知道這個專案要做什麼。
尚未輸入專案名稱。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「專案名稱」Text Field。使用可見 Label、提示文字與必填規則；聚焦時要有明確外框，輸入後回報目前字數，錯誤訊息放在欄位附近，不以 Placeholder 取代 Label。驗收清單
不要只確認欄位能不能點。
- 是否有可見 Label？
- Placeholder 是否只作為範例而非唯一說明？
- 格式錯誤是否有文字回饋？
- Focus、停用與唯讀是否能區分？
- 手機版鍵盤類型是否適合輸入內容？