常見的表單設(shè)計(jì)背后藏著許多秘密，如何讓用戶快速準(zhǔn)確的填寫表單，是本文在思考解決的問題。本文偏理論和實(shí)踐結(jié)果，實(shí)例較少，供大家參考和學(xué)習(xí)。
limeiseo（加v分享）
常見問題： 利美知識百科在設(shè)計(jì)表單時(shí)，你是否會(huì)有如下疑問或思考：誰會(huì)填寫表單？為什么要填寫？如果表單跨多個(gè)網(wǎng)頁，需要告訴人們當(dāng)前處在哪一頁么？輸入框標(biāo)簽應(yīng)當(dāng)頂對齊、右對齊還是左對齊？表單中如何使用智能默認(rèn)選項(xiàng)？何時(shí)在表單中使用幫助文字？如何表示必填項(xiàng)？主動(dòng)作和次動(dòng)作有什么區(qū)別？（提交/保存/繼續(xù)、取消/重置）一、表單設(shè)計(jì)原則盡量減少痛苦，填寫過程盡量簡潔容易；說明完整填寫路徑，清晰地告訴人們?nèi)绾翁顚懲瓿煽紤]情景，受眾群體、應(yīng)用、業(yè)務(wù)確保一致溝通，保證客戶與公司只用一種聲音說話二、表單的組織花時(shí)間評估表單中的問題，去除不必要的問題；表單所提問題（標(biāo)簽）應(yīng)當(dāng)盡量簡潔，如果人們誤解簡潔標(biāo)簽，應(yīng)當(dāng)尋找使用自然語言澄清的機(jī)會(huì)；表單所提的問題可能來自不同的人或部門，確保表單統(tǒng)一口徑；可以將表單內(nèi)容組織成邏輯組，有助于瀏覽和完成填寫；可以以對話的形式構(gòu)建表單，主題自然間斷；表單包含大量問題，若干主題，需要多個(gè)網(wǎng)頁來組織表單；表單包含大量問題，一個(gè)主題，需要較長網(wǎng)頁來組織表單；表單填寫完成后提出可選問題，可能會(huì)獲得更多答案；應(yīng)當(dāng)采用最少的必要視覺信息來區(qū)分內(nèi)容組；如果表單需要較長時(shí)間或查詢信息才能填寫，可采用起始頁說明（暫存）方式滿足；由始至終采用清晰的瀏線和有效視覺引導(dǎo)表單填寫（清晰唯一路徑）；如果表單分為多個(gè)已知有序網(wǎng)頁，可以采用進(jìn)程指示來傳達(dá)范圍、狀態(tài)和位置等信息。三、標(biāo)簽對齊每個(gè)表單至少都有三個(gè)基本要素：標(biāo)簽、輸入框和動(dòng)作。 利美知識百科
標(biāo)簽負(fù)責(zé)提出問題，輸入框供給人們填寫信息，而動(dòng)作允許人們提交答案，還有一類——無標(biāo)簽表單。1. 頂對齊標(biāo)簽頂對齊標(biāo)簽由于輸入框和標(biāo)簽的位置非常近，處理起來毫不費(fèi)力，所以填寫整個(gè)表單很快很容易，是最能減少填寫時(shí)間的方式。
本文利美網(wǎng)絡(luò)（wo1m.com.cn）整理發(fā)布
但是，頂對齊標(biāo)簽也會(huì)占用額外的垂直空間，若可使用的垂直屏幕空間較小，應(yīng)當(dāng)謹(jǐn)慎使用頂對齊標(biāo)簽。
頂對齊標(biāo)簽還應(yīng)當(dāng)采用合適的垂直間距。表單輸入框之間的間距太少或太多都會(huì)阻礙移動(dòng)。一般而言，最好使用輸入框50%~75%的高度作為相鄰輸入框的間距。2. 右對齊標(biāo)簽右對齊標(biāo)簽同樣有輸入框與標(biāo)簽相鄰的有點(diǎn)，因此也能快速填完且減少垂直屏幕空間的占用，但是速度沒有頂對齊快。
copyright limeiseo
由于右對齊布局造成左側(cè)參差不齊，會(huì)降低快速瀏覽表單問題的效率，還會(huì)產(chǎn)生靈活性問題，如果標(biāo)簽需要兩行字，瀏覽表單會(huì)更加困難。
利美網(wǎng)絡(luò)
利美網(wǎng)絡(luò)
本文利美網(wǎng)絡(luò)（wo1m.com.cn）整理發(fā)布
但是，完成時(shí)間較長也不是壞事，也有適用場景。如果希望人們速度放慢，并仔細(xì)思考表單中的每個(gè)輸入框，特別是表單含有大量可選輸入框、類似“使用偏好”或者高級設(shè)置陌生數(shù)據(jù)時(shí)。4. 輸入框內(nèi)的標(biāo)簽如果屏幕空間寶貴，應(yīng)當(dāng)將標(biāo)簽和輸入框組合成單一的用戶界面元素。光標(biāo)放入輸入框時(shí)，標(biāo)簽要迅速消失，以便用戶能輕松填寫。
填寫輸入框時(shí)，輸入框內(nèi)的標(biāo)簽會(huì)消失，因此答案情境也會(huì)消失；如果忘記了要回答什么問題或者檢查答案時(shí)，體驗(yàn)也是不好的。
copyright limeiseo
因此，如果表單較長、甚至中等長度，輸入框內(nèi)標(biāo)簽并不是好的解決方案。輸入框內(nèi)標(biāo)簽更適合用于只有一個(gè)問題（例如，搜索框）或者幾個(gè)輸入框的表單或者問題非常熟悉的表單（例如，通訊錄）四、輸入框表單中何時(shí)使用文本框、復(fù)選框、單選按鈕、下拉菜單、列表框呢？輸入框的長度能提供有意義的暗示，幫助人們有效回答問題；若不需要暗示，輸入框的長度應(yīng)當(dāng)盡量保持一致，為答案提供足夠空間；盡量避免出現(xiàn)可選輸入框；標(biāo)明表單中的必填項(xiàng)；如果答案明顯有多種格式，應(yīng)當(dāng)考慮使用彈性輸入框；確保彈性輸入框不會(huì)導(dǎo)致填寫簡單問題變得復(fù)雜。五、動(dòng)作標(biāo)簽列出表單要求人們回答的問題，輸入框讓人們填寫答案，完成表單的單一職責(zé)屬于動(dòng)作。綠色標(biāo)識主動(dòng)作（成功），紅色標(biāo)識次動(dòng)作（未成功）；盡量避免表單中出現(xiàn)次動(dòng)作，應(yīng)當(dāng)提供完成表單的單一路徑；如果需要使用次動(dòng)作，應(yīng)當(dāng)確保主動(dòng)作和次動(dòng)作視覺差異清晰；如果表單所提問題分布在多個(gè)網(wǎng)頁，主動(dòng)作應(yīng)當(dāng)讓人們更接近完成表單，而次動(dòng)作應(yīng)當(dāng)允許人們返回；主動(dòng)作與輸入框?qū)R，能提供明確路徑完成表單；如果需要采用具有破壞性的次動(dòng)作（重置或清除），應(yīng)當(dāng)提供簡便的撤銷方法；處理表單時(shí)，應(yīng)當(dāng)明確表達(dá)，避免重復(fù)提交；不要依賴幫助文字來提醒人們不要兩次點(diǎn)擊主動(dòng)作，而應(yīng)當(dāng)通過禁用主動(dòng)作按鈕來阻止；思考組合服務(wù)條款和主動(dòng)作的機(jī)會(huì)，以確保法律要求合理化。六、幫助文字常見幫助文字是在標(biāo)簽或輸入框旁增加幫助文字，告訴應(yīng)該如何回答問題。 limeiseo（加v分享）
本文標(biāo)簽：