常見的表單設計背後藏著許多秘密，如何讓用戶快速準確的填寫表單，是本文在思考解決的問題。本文偏理論和實踐結果，實例較少，供大家參考和學習。
常見問題：
在設計表單時，你是否會有如下疑問或思考：
- 誰會填寫表單？為什麼要填寫？
- 如果表單跨多個網頁，需要告訴人們當前處在哪一頁麼？
- 輸入框標籤應當頂對齊、右對齊還是左對齊？
- 表單中如何使用智能默認選項？
- 何時在表單中使用幫助文字？
- 如何表示必填項？
- 主動作和次動作有什麼區別？（提交/保存/繼續、取消/重置）
一、表單設計原則
- 儘量減少痛苦，填寫過程儘量簡潔容易；
- 說明完整填寫路徑，清晰地告訴人們如何填寫完成
- 考慮情景，受眾群體、應用、業務
- 確保一致溝通，保證客戶與公司只用一種聲音說話
二、表單的組織
- 花時間評估表單中的問題，去除不必要的問題；
- 表單所提問題（標籤）應當儘量簡潔，如果人們誤解簡潔標籤，應當尋找使用自然語言澄清的機會；
- 表單所提的問題可能來自不同的人或部門，確保表單統一口徑；
- 可以將表單內容組織成邏輯組，有助於瀏覽和完成填寫；
- 可以以對話的形式構建表單，主題自然間斷；
- 表單包含大量問題，若干主題，需要多個網頁來組織表單；
- 表單包含大量問題，一個主題，需要較長網頁來組織表單；
- 表單填寫完成後提出可選問題，可能會獲得更多答案；
- 應當採用最少的必要視覺信息來區分內容組；
- 如果表單需要較長時間或查詢信息才能填寫，可採用起始頁說明（暫存）方式滿足；
- 由始至終採用清晰的瀏線和有效視覺引導表單填寫（清晰唯一路徑）；
- 如果表單分為多個已知有序網頁，可以採用進程指示來傳達範圍、狀態和位置等信息。
三、標籤對齊
每個表單至少都有三個基本要素：標籤、輸入框和動作。
標籤負責提出問題，輸入框供給人們填寫信息，而動作允許人們提交答案，還有一類——無標籤表單。
1. 頂對齊標籤
頂對齊標籤由於輸入框和標籤的位置非常近，處理起來毫不費力，所以填寫整個表單很快很容易，是最能減少填寫時間的方式。
頂對齊標籤還提供了大量的橫向空間，可以擴大或收縮標籤文字，而不會對整個頁面的佈局產生負面影響。大量橫向空間可用於以多種方式組合相關輸入框。
但是，頂對齊標籤也會佔用額外的垂直空間，若可使用的垂直屏幕空間較小，應當謹慎使用頂對齊標籤。
頂對齊標籤還應當採用合適的垂直間距。表單輸入框之間的間距太少或太多都會阻礙移動。一般而言，最好使用輸入框50%~75%的高度作為相鄰輸入框的間距。
2. 右對齊標籤
右對齊標籤同樣有輸入框與標籤相鄰的有點，因此也能快速填完且減少垂直屏幕空間的佔用，但是速度沒有頂對齊快。
由於右對齊佈局造成左側參差不齊，會降低快速瀏覽表單問題的效率，還會產生靈活性問題，如果標籤需要兩行字，瀏覽表單會更加困難。
3. 左對齊標籤
如果人們不熟悉表單要收集的數據，或者問題無法分成易處理的內容組，左對齊標籤瀏覽表單問題會更容易，只需上下瀏覽標籤左欄，不會被輸入框打斷。
三種方案中，左對齊表單填寫速度最慢，人們一般將左對齊佈局中的標籤與相應輸入框聯繫起來，只是花費時間較長。
但是，完成時間較長也不是壞事，也有適用場景。如果希望人們速度放慢，並仔細思考表單中的每個輸入框，特別是表單含有大量可選輸入框、類似“使用偏好”或者高級設置陌生數據時。
4. 輸入框內的標籤
如果屏幕空間寶貴，應當將標籤和輸入框組合成單一的用戶界面元素。光標放入輸入框時，標籤要迅速消失，以便用戶能輕鬆填寫。
填寫輸入框時，輸入框內的標籤會消失，因此答案情境也會消失；如果忘記了要回答什麼問題或者檢查答案時，體驗也是不好的。
因此，如果表單較長、甚至中等長度，輸入框內標籤並不是好的解決方案。輸入框內標籤更適合用於只有一個問題（例如，搜索框）或者幾個輸入框的表單或者問題非常熟悉的表單（例如，通訊錄）
四、輸入框
表單中何時使用文本框、複選框、單選按鈕、下拉菜單、列表框呢？
- 輸入框的長度能提供有意義的暗示，幫助人們有效回答問題；
- 若不需要暗示，輸入框的長度應當儘量保持一致，為答案提供足夠空間；
- 儘量避免出現可選輸入框；
- 標明表單中的必填項；
- 如果答案明顯有多種格式，應當考慮使用彈性輸入框；確保彈性輸入框不會導致填寫簡單問題變得複雜。
五、動作
標籤列出表單要求人們回答的問題，輸入框讓人們填寫答案，完成表單的單一職責屬於動作。
- 綠色標識主動作（成功），紅色標識次動作（未成功）；
- 儘量避免表單中出現次動作，應當提供完成表單的單一路徑；
- 如果需要使用次動作，應當確保主動作和次動作視覺差異清晰；
- 如果表單所提問題分佈在多個網頁，主動作應當讓人們更接近完成表單，而次動作應當允許人們返回；
- 主動作與輸入框對齊，能提供明確路徑完成表單；
- 如果需要採用具有破壞性的次動作（重置或清除），應當提供簡便的撤銷方法；
- 處理表單時，應當明確表達，避免重複提交；
- 不要依賴幫助文字來提醒人們不要兩次點擊主動作，而應當通過禁用主動作按鈕來阻止；
- 思考組合服務條款和主動作的機會，以確保法律要求合理化。
六、幫助文字
常見幫助文字是在標籤或輸入框旁增加幫助文字，告訴應該如何回答問題。
幫助文字最合適解釋人們不熟悉的數據，例如，為什麼要問這些問題、安全和隱私、建議回答問題的方式及說明可填項。
- 如果人們知道問題的答案，但是不確定如何回答或為什麼回答，可以考慮使用自動即時幫助系統；
- 如果表單問題人們不熟悉或者複雜，而且同樣的人會多次使用，可以採用用戶激活的幫助系統；
- 如果幫助內容很多，可以使用一致的幫助區域，不要使用即時幫助；
- 圖標、鏈接或按鈕用於用戶激活的幫助文字觸發器，應放在標籤旁，不要放在輸入框旁；
- 如果要求用戶填入敏感資料，考慮使用有操作含義的幫助文字，允許人們確認資料安全。
七、即時驗證
直接反饋有助於再次確保人們的回答有效。這種實時的溝通方式即為即時校驗（Inline Validation）。
- 考慮使用即時驗證，以確認或者建議有效答案，並幫助人們在限制範圍內輸入（例如，銀行賬號）；
- 即時確認適用於錯誤率高、或者有特定格式要求；
- 即時建議適用於有大量可供選擇有效答案的情況；
- 即時質量指示條能引導人們回答複雜的問題；
- 如果需要即時驗證答案，應當在人們輸入答案之後進行，不要在輸入過程中進行；校驗數據唯一也是這樣，需要等待輸入完成時校驗；
- 如果輸入有限制，應當採用實時、動態更新的方法傳遞輸入限制。
八、多餘輸入/額外輸入
- 通過恰當的設施滿足多數人需要的默認選擇，智能默認可以幫助人們回答問題；
- 設置個性化默認選擇，客戶能更快完成表單，因為“答案”具有粘性；
- 如果有可能，單選按鈕都應當設置成默認項；
- 額外輸入可以提供更多的選項或者高級選項，滿足有需要的用戶，同時不妨礙不需要的用戶；
- 根據客戶需求的優先順序，安排額外輸入；
- 如果需要顯示大量額外輸入，可以考慮疊層方式代替即時顯示方式，避免網頁跳動用戶迷失方向。
總結
表單的設計方式多種多樣，不能完全按照設計規則來進行產品設計，需要具體分析應用場景，填寫情境來設計。
感謝各位花費時間來閱讀，希望對您有幫助！
閱讀更多 人人都是產品經理 的文章
