說實話，現(xiàn)實生活中帖旨，又有多少人會真正喜歡填寫表格箕昭？顯然，并不多解阅。因為填寫表單這樣的網(wǎng)頁或App服務(wù)落竹，并非用戶所需。他們需要的僅僅只是能夠盡快買票货抄、聊天等服務(wù)而已述召。如此，注冊表單的填寫蟹地，似乎就成為他們不得不面對的噩夢积暖。但這也不禁讓設(shè)計師們開始思考，這些表單設(shè)計到底存在什么問題怪与，才讓用戶如此這般抗拒夺刑？
不用擔(dān)心，以下解釋或許能夠為廣大設(shè)計師解惑：
注冊表單填寫過程費時分别、費力
部分注冊表單復(fù)雜難懂
注冊表單有時會涉及用戶個人隱私性誉，比如信用卡、電話號碼茎杂、地址詳情等。而這些都是用戶非常不愿分享的纫雁。
眾所周知煌往，注冊表單對于網(wǎng)頁或App產(chǎn)品銷售，有著至關(guān)重要的作用轧邪。不好的表單設(shè)計刽脖，甚至可能最終導(dǎo)致低的轉(zhuǎn)化率和客戶流失。更何況忌愚，它可能會成為用戶體驗過程中曲管，最苦惱的部分。那么硕糊，在這種情況下院水，設(shè)計師如何才能幫助他們擺脫這些苦惱? 如何才能設(shè)計出一款真正實用且用戶體驗絕佳的注冊表單呢?
以下是小編的一些建議：
支持社交賬號登錄和注冊 ,例如Facebook, Google, Twitter等
社交登錄是促成用戶完成表單填寫的重要方式腊徙。當(dāng)然，設(shè)計過程中檬某，千萬不要忘記注明：用戶所填寫相關(guān)社交賬號信息撬腾，絕對安全、有保障恢恼。而且民傻，需要填寫的信息，最好也解釋清楚其來龍去脈场斑。
自動保存輸入信息
表單設(shè)計最實用的特性之一, 就是能夠自動記住用戶所填寫的信息漓踢。避免當(dāng)出現(xiàn)任何意外或報錯時， 用戶需重新逐一輸入這些信息漏隐。這一特性喧半，對于一些長表單設(shè)計，尤為重要锁保。
表單設(shè)計盡量簡潔或直接劃分成更易查看的小模塊
表單設(shè)計中盡量包含一些最基本的信息薯酝。如此，既能節(jié)省時間爽柒，又能有效避免不必要的錯誤吴菠。而且， 設(shè)計過程中浩村，如若某條信息是自選選項做葵， 則無需顯示出來。而且心墅，每款表單設(shè)計酿矢，也盡量將自選信息，控制在1到2個為宜怎燥，并標(biāo)明它們是“自選的”瘫筐。
同時，也不要忘記铐姚，去掉部分不必要的確認(rèn)環(huán)節(jié)策肝。如若在設(shè)計中，需要的用戶信息較多隐绵，不得不設(shè)計成長表單之众。最好將其劃分成多個小模塊，相關(guān)的元素集合在一起依许。如此棺禾，更易于用戶查看，并提升用戶體驗峭跳。
表單自動聚焦第一條信息
自動聚焦表單第一條信息膘婶，能夠無形中暗示和引導(dǎo)用戶缺前。 進(jìn)入， 即開始填寫竣付。但诡延，對設(shè)計師而言，究竟如何才能實現(xiàn)表單信息的自動聚焦呢古胆？答案很簡單肆良。為第一條信息或輸入框，添加引人注目的邊框色或背景色即可逸绎。
避免通過復(fù)選框設(shè)計勾選注冊隱私協(xié)議
可直接使用帶鏈接文本（帶有“接受相關(guān)隱私條款和協(xié)議”的文本字樣）惹恃， 代替復(fù)選框設(shè)計。當(dāng)然棺牧，一些地區(qū)巫糙，例如歐盟地區(qū)，復(fù)選框（可供用戶選擇颊乘，而非自動默認(rèn)選中）是唯一合法設(shè)計方式時参淹，這一點就不適用了》η模總之浙值，表單設(shè)計也需符合各地區(qū)相關(guān)規(guī)定。
注冊和登錄使用相同的表單設(shè)計
注冊和登錄使用相同表單設(shè)計檩小，是一個不錯的設(shè)計思路开呐。一般而言，如此规求，當(dāng)用戶輸入郵箱和密碼之后筐付，系統(tǒng)將自動檢索該郵件或賬號信息是否已在其數(shù)據(jù)庫中。如若在阻肿，系統(tǒng)將自動登錄瓦戚。如若不在，系統(tǒng)則將為其自動創(chuàng)建新的賬號進(jìn)行丛塌，十分體貼周到伤极。
但也請注意，此類設(shè)計也存在一些致命的問題姨伤。例如，當(dāng)用戶輸入錯誤或無效的郵箱信息時庸疾，系統(tǒng)將不能檢索到對應(yīng)的賬號信息乍楚，而會自動創(chuàng)建一個全新的賬戶。而這一點届慈，是會極大影響用戶體驗的徒溪。
單列展示所有輸入框
單列展示所有輸入框忿偷，方便用戶更加流暢的閱讀和查看。無需不斷改變閱讀視線和方向臊泌。（當(dāng)然鲤桥，一些簡短且相關(guān)的信息除外，例如城市渠概，州縣以及郵編等）茶凳。如圖：
標(biāo)題清晰醒目
優(yōu)秀的設(shè)計始于文字，最佳的表單始于標(biāo)題播揪。簡短精干的CTA按鈕標(biāo)題設(shè)計贮喧，總是能夠明確指明填寫表單的好處，并鼓勵用戶認(rèn)真完成表單猪狈。而且箱沦，設(shè)計中，也需表明：相關(guān)信息絕對安全雇庙、有保障谓形，并提供安全徽章，以獲取用戶信任疆前。
設(shè)置輸入?yún)^(qū)域
輸入?yún)^(qū)域是所有表單設(shè)計中最基本的元素寒跳。而一個簡潔實用的輸入?yún)^(qū)域時常包括以下部件：輸入框，標(biāo)簽和占位符峡继。
輸入框
通常冯袍，輸入框擁有6種狀態(tài)：默認(rèn)、懸停碾牌、聚焦康愤、錯誤、成功以及禁用狀態(tài)舶吗。
標(biāo)簽
標(biāo)簽設(shè)計一大原則就是：使用頂部對齊方式检激，更易于用戶瀏覽和閱讀。而且腹侣，在設(shè)計一些簡短的表單時叔收，嘗試?yán)脠D標(biāo)代替文字標(biāo)簽，會更加簡約易用傲隶。
另一種設(shè)計方式饺律，就是使用類似Material Design中的浮動標(biāo)簽。同時跺株，也可為每個標(biāo)簽配上簡潔易懂的文案复濒，以優(yōu)化設(shè)計脖卖。
當(dāng)然，標(biāo)簽的文案設(shè)計巧颈，具體采用一個簡短的句子畦木，還是標(biāo)題，應(yīng)由設(shè)計師自己決定砸泛。但無論如何十籍，盡量保持一致的標(biāo)簽名，以方便用戶查看晾嘶。相關(guān)聯(lián)的標(biāo)簽和輸入框也需盡量靠近妓雾，保持一定的緊密性，增強頁面可讀性垒迂。
占位符設(shè)置
在表單設(shè)計中械姻，占位符能夠清楚表明，輸入框支持哪種類型和格式的數(shù)據(jù)机断，從而避免錯誤信息的輸入楷拳。當(dāng)然，設(shè)計師也需盡量避免吏奸，將占位符作為標(biāo)簽使用欢揖。因為這樣會讓表單更加復(fù)雜，最終帶來相反的效果奋蔚。而且她混，這類設(shè)計方式也僅僅適用于擁有２到３個輸入框的簡短型表單。
此外泊碑， 一般而言坤按，當(dāng)用戶輸入信息時，占位符也會隨之消失馒过。此時臭脓，用戶可能也無法查看是否輸入了正確類型的數(shù)據(jù)。這也是這類設(shè)計的一大缺陷腹忽。而作為設(shè)計師来累，應(yīng)該事先認(rèn)識到這一點，才能更加靈活的應(yīng)用窘奏，以優(yōu)化其表單設(shè)計嘹锁。
注意密碼框設(shè)計
小編之所以在這里特別指出密碼框，是因為其擁有獨特的設(shè)計原則和技巧着裹。
保證用戶能夠隨時查看密碼
如此领猾，能夠有效幫助用戶在提交表單之前，隨時檢查輸入的密碼，避免密碼錯誤瘤运。
顯示密碼強度
絕佳的密碼是很難被猜到。因此匠题，為保障用戶賬號的安全拯坟，設(shè)計密碼框時，盡量同時展示用戶密碼的強度和安全性韭山，無形中規(guī)勸他們設(shè)置更加復(fù)雜安全的密碼郁季。
提交之前，明確指出密碼填寫要求
如若密碼填寫钱磅，具有某些特定要求梦裂。請在提交表單之前，明確指出盖淡，以方便用戶及時修改和填寫年柠。
提示用戶：大寫鎖定已打開
如此，才能夠有效避免褪迟，當(dāng)用戶遇到意外按到 Caps Lock按鈕等常見問題時冗恨，能夠及時更正，避免帶來更加嚴(yán)重的問題味赃。
登錄表單設(shè)計掀抹，添加“忘記密碼”選項
用戶經(jīng)常會忘記密碼 (包括小編，偶爾也會)心俗。 而登錄時傲武，添加“忘記密碼”選項，能夠幫助用戶盡快找回密碼城榛，順利登陸揪利。
添加高效實用的按鈕設(shè)計
添加準(zhǔn)確貼切的按鈕微文案
相較于簡單使用“提交”或“保存”等通用的按鈕文案吠谢，更加準(zhǔn)確貼切的文案設(shè)計土童，例如“創(chuàng)建賬號”、“登陸”等工坊，更能清晰直觀的表明献汗，用戶點擊之后，所能實現(xiàn)的效果王污。
用戶完整填寫各類表單信息之前罢吃，禁用按鈕
這也是用戶提交表單之前俐银，可視化驗證輸入信息的重要方式刃榨。
主按鈕和輔助按鈕巧妙結(jié)合
如若表單設(shè)計中缝裁，需要使用兩類按鈕—— 主按鈕和輔助按鈕撩鹿。則盡量在視覺上，對它們進(jìn)行區(qū)分纷纫，以減少潛在的錯誤娩践。當(dāng)然，相較之下丧荐，主按鈕缆瓣，應(yīng)該更引人注目。
避免使用“重置” 或 “清除”等按鈕
錯誤預(yù)防
錯誤預(yù)防是成就優(yōu)質(zhì)表單設(shè)計的重要環(huán)節(jié)虹统。設(shè)計過程中弓坞，設(shè)計師應(yīng)該預(yù)先考慮到，系統(tǒng)將如何預(yù)防和修復(fù)一些常見問題车荔，而不僅僅只是給予用戶錯誤提示渡冻。
那么，這類錯誤預(yù)防從哪些方面可以實現(xiàn)呢忧便？
輸入自動化
輸入自動化族吻，能夠有效減少用戶手動輸入的內(nèi)容，從而避免一些不必要的錯誤茬腿。例如：
通過用戶填入郵政編碼或地理位置等數(shù)據(jù)呼奢，自動填充城市和州縣信息
通過用戶輸入的信用卡卡號，自動選定信用卡類型
利用輸入掩碼切平，格式化輸入信息
利用輸入掩碼握础，格式化輸入信息，解決輸入格式不匹配的問題悴品。
簡而言之禀综，當(dāng)用戶輸入相關(guān)信息之后，輸入掩碼會自動在字段中插入正確的格式苔严，將其轉(zhuǎn)化成可識別的正確信息定枷。
添加輸入限制
另一種能夠幫助設(shè)計師届氢，有效控制用戶輸入的技巧就是：添加輸入限制欠窒。例如，只允許電話和郵政編碼等數(shù)字輸入的限制退子。
注意錯誤驗證和提示
1. 使用inline驗證
為避免錯誤提示與輸入框不配的問題岖妄，提示信息盡量靠近輸入框。并且寂祥，一次只顯示一個輸入框的報錯信息荐虐。
2. 設(shè)計一款簡潔直觀的錯誤提示
錯誤提示的文案設(shè)計，應(yīng)該能夠明確告知用戶：為什么他們的信息會被系統(tǒng)拒絕丸凭，如何才能準(zhǔn)確修改這些信息福扬。而且腕铸，整個文案設(shè)計的基調(diào)，應(yīng)該是禮貌而專業(yè)的铛碑，從而更具權(quán)威性和不可違抗性狠裹。
3. 提交之前，根據(jù)輸入要求汽烦，及時驗證
4. 利用色彩刹缝，圖標(biāo)以及提示指出輸入錯誤
通過各類設(shè)計元素，明確指出用戶的輸入錯誤颈将。例如鮮亮的色彩梢夯，引人注目的圖標(biāo)以及清晰的提示文案。
總結(jié)
創(chuàng)建優(yōu)質(zhì)的注冊表單并非易事颂砸。它不僅僅只是設(shè)計一款美觀UI這么簡單。為提升用戶體驗死姚，設(shè)計師應(yīng)該注意設(shè)計過程的每一個細(xì)節(jié)人乓。深知一款優(yōu)質(zhì)實用的表單設(shè)計，是提升頁面轉(zhuǎn)化率都毒，留住用戶色罚，增加產(chǎn)品銷量的重要方式。
總之账劲，注冊表單設(shè)計過程中戳护，每一個細(xì)節(jié)都不容易忽視。
相關(guān)性閱讀：
【史上最全】設(shè)計師必備的83個設(shè)計資源網(wǎng)站
原文鏈接：https://uxplanet.org/how-to-design-great-ux-for-si...
本文由摹客團(tuán)隊翻譯瀑焦，專業(yè)的設(shè)計工具提供者腌且，其主要產(chǎn)品是UI設(shè)計師和產(chǎn)品經(jīng)理使用的原型設(shè)計工具M(jìn)ockplus和自動標(biāo)注切圖神器摹客iDoc，本文經(jīng)同意轉(zhuǎn)載榛瓮，最初發(fā)表在摹客官方博客铺董，地址：https://www.mockplus.cn/blog/post/1261。
