表單可能是日常設計中最常見的設計元素了葛虐，它廣泛的應用范疇钱豁、多年來的積淀使得表單設計牽涉到大量的、約定俗成的設計規(guī)則吉执。今天我們來聊聊表單設計優(yōu)化头岔。
下面是列舉的16個表單優(yōu)化技巧
1.填寫的信息永遠越少越好
每一步最好只讓用戶填寫最有用的相關信息。如果你在當前步驟并不迫切需要獲取用戶的電話號碼或家庭住址鼠证，那就不要讓用戶填寫峡竣。“Less is more"的原則在這里很受用量九。
2.自動填寫
如果用戶已經(jīng)填寫過他的一些信息适掰，那就幫他自動填充那些信息，或者根本不顯示這些信息荠列。
例如：
1）大多數(shù)情況下你可以用IP或定位來獲取用戶所在城市类浪。
2）如果用戶參加過你的市場活動或者用郵箱訂閱了你的新聞信息，你當然可以獲取到他的郵箱地址肌似。
當然需要時刻謹記在心的是用戶信息是否安全费就。
3. 光標自動定位于輸入框內(nèi)
自動激活表單第一部分（或需要填寫部分）的填寫區(qū)域。這樣會給用戶一個提示——這里有內(nèi)容需要填寫川队。激發(fā)用戶填寫興趣力细。更重要的是這樣會節(jié)省用戶不必要的點擊鼠標的時間。
4.表單盡量只設計一欄
用單行表單的設計布局眠蚂，視覺動線會很自然，用戶自上而下填寫瀏覽斗躏。多列布局會擾亂用戶垂直方向的視線移動逝慧，用戶的注意力會分散，也很容易錯填漏填啄糙。
5. 相關信息分組區(qū)分
如果表單有很多需要用戶填寫的信息，試著把相似信息分組桑李，把組用標題或者間隙分隔開踱蛀。過長的表單常常會讓用戶感到煩躁和不知所措窿给。
6.給輸入的信息限制提示
為了減少錯誤信息的錄入，在輸入?yún)^(qū)需要增加限制提示：
1）最少和最多字符提示
2）格式提示
3）限制文字率拒、標點符號等提示
舉個例子：銀行卡號可以輸入標點符號和文字嗎崩泡？當然是不可以的。同樣的猬膨，輸入手機號碼也同樣適用角撞。
7. 讓內(nèi)容長度與輸入框長度對應
地址信息的長度明顯比其他標簽的長度要長，在視覺上我們也應當和其他標簽區(qū)分開勃痴。
8.錯誤提示應當展示清楚谒所，逐條說明
在用戶填寫錯誤的那項標簽周圍出現(xiàn)提示，而不是在其他地方沛申。
更重要的是清楚明確的告訴用戶劣领，哪一項填寫有誤。避免用”當前頁面有誤铁材，請隨后再試“這些提示尖淘。這些提示用戶永遠不明白。用更易理解的語言告訴用戶著觉，而不是“系統(tǒng)出現(xiàn)錯誤”這些字眼村生。
9.在用戶填寫完單項信息最好有實時反饋
在用戶輸入不合規(guī)范的信息后趁桃，應當在輸入框旁及時提醒用戶。
普通的內(nèi)容輸入應當在用戶輸入完成之后再對內(nèi)容的格式肄鸽、屬性進行驗證卫病。通過Luke Wroblewski 的研究得知，這樣做的好處是：
1）會提高22%的成功率
2）會減少22%的錯誤輸入
3）會提高31%的滿意度
4）會減少42%的填寫完成時間
你可能注意到現(xiàn)在很多產(chǎn)品用的都是不同的提示方法贴捡。比如：
1）一些產(chǎn)品在用戶填完所有表單信息且點按提交按鈕后才告訴用戶哪里填寫的有問題忽肛。
2）一些產(chǎn)品在用戶未填完信息就已經(jīng)在檢驗用戶填寫的信息是否有誤烂斋。
這兩種情況都會導致用戶體驗不友好。但最壞的情況是第二種础废，因為：
1.打出任何一個字符用戶都會收到錯誤提示
2.即使在什么都沒填的情況下汛骂，也會顯示錯誤提示
10.把標簽放在輸入框外，在輸入框內(nèi)用占位符向用戶提示要填寫的內(nèi)容
如果把標簽放到輸入框內(nèi)评腺，點擊輸入的時候占位符消失帘瞭，有的用戶會忘記輸入內(nèi)容屬性。這種設計非常不友好蒿讥。
如果給移動端或者小屏幕設計表單蝶念，你可以把標簽設置為頂部對齊方式抛腕。當然這會讓表單非常長，但需要記住的是媒殉，表單縱向設計永遠比橫向設計好担敌，因為縱向表單用戶一次獲取的信息比橫向的少很多，可以避免用戶看到繁多冗雜信息而后手足無措廷蓉。
或者用另一種方法（如下圖所示）：把標簽放在輸入框內(nèi)全封，而當用戶開始填寫時，標簽自動移到輸入框的左上角桃犬。這是對移動端來說很友好的交互方式刹悴。
11. 標記選填項而不是必填項
老實說在這一點上存在著很多爭議。Baymard Institute 說你必須兩項都標記才行攒暇。但在這一點上我比較偏向 Nielsen Norman Group version. 他們的建議是——always ask as less as possible. 一般來說土匀，選填的內(nèi)容總比必填的要少。舉個例子形用，如果10項有9項都是必填項恒削，那么只標出那個可選項是說得通的。
12. 不要打斷用戶的填寫進程
不要在結(jié)賬頁放任何會連接到其他地方的鏈接尾序。你需要讓用戶保持專注不要突然地打斷他們钓丰，否則他們會迷失，并且會忘記一開始想要干什么每币。
13.在信息都填寫完成后高亮“下一步”按鈕
在所有必填項都填寫完整并且所有填寫項檢驗無誤后携丁，再讓“下一步”按鈕可點擊。顯然這種情況只適用于用戶填寫完某一項內(nèi)容后兰怠，對內(nèi)容的格式梦鉴、屬性進行驗證的這種情況。而非填寫完成后一次性提交后再驗證錯誤揭保。這種方法會讓用戶的注意力集中于填寫表單肥橙，而且這種方法不會讓用戶遺漏填寫一些重要信息。
更重要的是秸侣，“下一步”按鈕只在用戶填寫完成所有信息后才會出現(xiàn)存筏，所以用戶的注意力不會一開始就在這個按鈕上。需要注意的是：我們需要讓這個按鈕的“可點擊”與“不可點擊”的視覺區(qū)分明顯味榛。
14. 注意地域差別
如果你的產(chǎn)品是跨國產(chǎn)品椭坚，你需要特別主意地域差別。
比如：
1）不同國家的電話區(qū)號問題
2）美國用zip code搏色，歐洲國家用postal code
3）只有美國有州
15. 如果要獲取特殊數(shù)據(jù)善茎，要向用戶解釋這些數(shù)據(jù)是用來做什么的
需要謹記在心的是你想讓用戶填寫的信息對他來說是隱私。為了避免不必要的懷疑和質(zhì)疑垂涯，你需要解釋讓用戶填寫一些私密信息是干什么的耕赘，例如：手機號碼鞠苟，生日鹦倚，配偶名字等媒楼。
上圖為臉書的注冊表單，臉書在這里解釋了為什么他們需要獲取到用戶的生日信息署穗。
16. 支持顏色有障礙的用戶使用
大部分設計師或企業(yè)都會忘記這部分的特殊客群混萝。有一些工具可以幫助設計師檢查設計稿是否對顏色有障礙的群體友好。
Bjango 可以在PS里實時查看設計稿悉患，Stark Plugin 是sketch的插件，這兩個插件用起來都非常簡單付枫。
原文作者：Dmitry Kovalenko
譯者：Ever
原文地址：https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92
相關文章推薦：
