表單輸入和 terminal 輸入用同一套四維度決策框架(keyboard type / submit model / IME policy / special keys),但每個維度的選項和取捨方向不同。表單場景的使用者輸入的是結構化但自然語言為主的內容 — 姓名、email、地址 — 手機鍵盤的自動行為在這個場景中大部分是幫助。

Keyboard type 的選擇

表單的每個欄位應該使用最適合該欄位內容的鍵盤。正確的 keyboard type 減少使用者在鍵盤上找按鍵的時間,也讓自動填入和驗證更準確。

欄位Keyboard type理由
EmailemailAddress@. 快捷鍵
電話號碼phone只顯示數字和 + -
URLurl.com 快捷鍵和 /
密碼visiblePassword關閉自動校正,保留字元可見控制
搜尋text一般文字,可搭配 textInputAction: search
數字金額numberWithOptions(decimal: true)數字鍵盤加小數點

驗證時機

表單驗證的時機影響使用者的操作流暢度和錯誤修正效率。

即時驗證(on change)

每次輸入變化時驗證。適合格式明確的欄位(email 格式、手機號碼長度)。即時驗證在使用者輸入過程中就能回饋格式錯誤,不需要等到送出。

即時驗證的風險是過早報錯。使用者正在輸入 email 地址 user@ 時,缺少 domain 部分 — 這個時候報「email 格式錯誤」對使用者沒有幫助。解法是在欄位失去焦點(on blur)時才顯示錯誤,輸入過程中只顯示通過的驗證(例如勾號表示格式正確)。

送出時驗證(on submit)

使用者按送出按鈕時統一驗證所有欄位。適合需要多欄位交叉驗證的場景(密碼確認、日期範圍)。

送出時驗證的風險是使用者填完整張表單才知道哪裡有問題。在欄位多的表單中,使用者需要回頭找到錯誤欄位修正 — 用 scroll 定位和欄位 highlight 減輕這個成本。

混合策略

格式驗證用即時(on blur)、業務邏輯驗證用送出時。Email 格式在失去焦點時檢查,「email 是否已被註冊」在送出時呼叫 API 檢查。

Auto-fill 支援

手機系統(iOS AutoFill、Android Autofill)可以自動填入使用者已儲存的資訊(姓名、地址、信用卡)。App 需要正確標記每個欄位的語意類型(autofillHints),系統才能匹配正確的儲存值。

正確標記的欄位讓使用者一鍵填入而非手動輸入 — 在 mobile 上減少的打字量直接轉化為轉換率提升。

錯誤回饋

錯誤訊息的位置和內容影響使用者修正錯誤的效率。

位置:錯誤訊息應該緊跟在對應欄位下方,而非集中在表單頂部或底部。使用者需要在看到錯誤的同時看到對應的欄位,不需要來回比對。

內容:錯誤訊息應該說明「期望什麼」而非「哪裡錯了」。「請輸入有效的 email 地址」比「email 格式無效」提供更多行動指引。

視覺:錯誤欄位的邊框變色(通常紅色)讓使用者在視覺掃描時快速定位。搭配錯誤文字使用,不要只靠顏色(色盲使用者)。

下一步路由