說實(shí)話，現(xiàn)實(shí)生活中，又有多少人會(huì)真正喜歡填寫表格？顯然，并不多。因?yàn)樘顚懕韱芜@樣的網(wǎng)頁或App服務(wù)，并非用戶所需。他們需要的僅僅只是能夠盡快買票、聊天等服務(wù)而已。如此，注冊(cè)表單的填寫，似乎就成為他們不得不面對(duì)的噩夢(mèng)。但這也不禁讓設(shè)計(jì)師們開始思考，這些表單設(shè)計(jì)到底存在什么問題，才讓用戶如此這般抗拒？
不用擔(dān)心，以下解釋或許能夠?yàn)閺V大設(shè)計(jì)師解惑：
注冊(cè)表單填寫過程費(fèi)時(shí)、費(fèi)力
部分注冊(cè)表單復(fù)雜難懂
注冊(cè)表單有時(shí)會(huì)涉及用戶個(gè)人隱私，比如信用卡、電話號(hào)碼、地址詳情等。而這些都是用戶非常不愿分享的。
眾所周知，注冊(cè)表單對(duì)于網(wǎng)頁或App產(chǎn)品銷售，有著至關(guān)重要的作用。不好的表單設(shè)計(jì)，甚至可能最終導(dǎo)致低的轉(zhuǎn)化率和客戶流失。更何況，它可能會(huì)成為用戶體驗(yàn)過程中，最苦惱的部分。那么，在這種情況下，設(shè)計(jì)師如何才能幫助他們擺脫這些苦惱? 如何才能設(shè)計(jì)出一款真正實(shí)用且用戶體驗(yàn)絕佳的注冊(cè)表單呢?
以下是小編的一些建議：
支持社交賬號(hào)登錄和注冊(cè) ,例如Facebook, Google, Twitter等
社交登錄是促成用戶完成表單填寫的重要方式。當(dāng)然，設(shè)計(jì)過程中，千萬不要忘記注明：用戶所填寫相關(guān)社交賬號(hào)信息，絕對(duì)安全、有保障。而且，需要填寫的信息，最好也解釋清楚其來龍去脈。
自動(dòng)保存輸入信息
表單設(shè)計(jì)最實(shí)用的特性之一, 就是能夠自動(dòng)記住用戶所填寫的信息。避免當(dāng)出現(xiàn)任何意外或報(bào)錯(cuò)時(shí)， 用戶需重新逐一輸入這些信息。這一特性，對(duì)于一些長表單設(shè)計(jì)，尤為重要。
表單設(shè)計(jì)盡量簡潔或直接劃分成更易查看的小模塊
表單設(shè)計(jì)中盡量包含一些最基本的信息。如此，既能節(jié)省時(shí)間，又能有效避免不必要的錯(cuò)誤。而且， 設(shè)計(jì)過程中，如若某條信息是自選選項(xiàng)， 則無需顯示出來。而且，每款表單設(shè)計(jì)，也盡量將自選信息，控制在1到2個(gè)為宜，并標(biāo)明它們是“自選的”。
同時(shí)，也不要忘記，去掉部分不必要的確認(rèn)環(huán)節(jié)。如若在設(shè)計(jì)中，需要的用戶信息較多，不得不設(shè)計(jì)成長表單。最好將其劃分成多個(gè)小模塊，相關(guān)的元素集合在一起。如此，更易于用戶查看，并提升用戶體驗(yàn)。
表單自動(dòng)聚焦第一條信息
自動(dòng)聚焦表單第一條信息，能夠無形中暗示和引導(dǎo)用戶。 進(jìn)入， 即開始填寫。但，對(duì)設(shè)計(jì)師而言，究竟如何才能實(shí)現(xiàn)表單信息的自動(dòng)聚焦呢？答案很簡單。為第一條信息或輸入框，添加引人注目的邊框色或背景色即可。
避免通過復(fù)選框設(shè)計(jì)勾選注冊(cè)隱私協(xié)議
可直接使用帶鏈接文本（帶有“接受相關(guān)隱私條款和協(xié)議”的文本字樣）， 代替復(fù)選框設(shè)計(jì)。當(dāng)然，一些地區(qū)，例如歐盟地區(qū)，復(fù)選框（可供用戶選擇，而非自動(dòng)默認(rèn)選中）是唯一合法設(shè)計(jì)方式時(shí)，這一點(diǎn)就不適用了?？傊韱卧O(shè)計(jì)也需符合各地區(qū)相關(guān)規(guī)定。
注冊(cè)和登錄使用相同的表單設(shè)計(jì)
注冊(cè)和登錄使用相同表單設(shè)計(jì)，是一個(gè)不錯(cuò)的設(shè)計(jì)思路。一般而言，如此，當(dāng)用戶輸入郵箱和密碼之后，系統(tǒng)將自動(dòng)檢索該郵件或賬號(hào)信息是否已在其數(shù)據(jù)庫中。如若在，系統(tǒng)將自動(dòng)登錄。如若不在，系統(tǒng)則將為其自動(dòng)創(chuàng)建新的賬號(hào)進(jìn)行，十分體貼周到。
但也請(qǐng)注意，此類設(shè)計(jì)也存在一些致命的問題。例如，當(dāng)用戶輸入錯(cuò)誤或無效的郵箱信息時(shí)，系統(tǒng)將不能檢索到對(duì)應(yīng)的賬號(hào)信息，而會(huì)自動(dòng)創(chuàng)建一個(gè)全新的賬戶。而這一點(diǎn)，是會(huì)極大影響用戶體驗(yàn)的。
單列展示所有輸入框
單列展示所有輸入框，方便用戶更加流暢的閱讀和查看。無需不斷改變閱讀視線和方向。（當(dāng)然，一些簡短且相關(guān)的信息除外，例如城市，州縣以及郵編等）。如圖：
標(biāo)題清晰醒目
優(yōu)秀的設(shè)計(jì)始于文字，最佳的表單始于標(biāo)題。簡短精干的CTA按鈕標(biāo)題設(shè)計(jì)，總是能夠明確指明填寫表單的好處，并鼓勵(lì)用戶認(rèn)真完成表單。而且，設(shè)計(jì)中，也需表明：相關(guān)信息絕對(duì)安全、有保障，并提供安全徽章，以獲取用戶信任。
設(shè)置輸入?yún)^(qū)域
輸入?yún)^(qū)域是所有表單設(shè)計(jì)中最基本的元素。而一個(gè)簡潔實(shí)用的輸入?yún)^(qū)域時(shí)常包括以下部件：輸入框，標(biāo)簽和占位符。
輸入框
通常，輸入框擁有6種狀態(tài)：默認(rèn)、懸停、聚焦、錯(cuò)誤、成功以及禁用狀態(tài)。
標(biāo)簽
標(biāo)簽設(shè)計(jì)一大原則就是：使用頂部對(duì)齊方式，更易于用戶瀏覽和閱讀。而且，在設(shè)計(jì)一些簡短的表單時(shí)，嘗試?yán)脠D標(biāo)代替文字標(biāo)簽，會(huì)更加簡約易用。
另一種設(shè)計(jì)方式，就是使用類似Material Design中的浮動(dòng)標(biāo)簽。同時(shí)，也可為每個(gè)標(biāo)簽配上簡潔易懂的文案，以優(yōu)化設(shè)計(jì)。
當(dāng)然，標(biāo)簽的文案設(shè)計(jì)，具體采用一個(gè)簡短的句子，還是標(biāo)題，應(yīng)由設(shè)計(jì)師自己決定。但無論如何，盡量保持一致的標(biāo)簽名，以方便用戶查看。相關(guān)聯(lián)的標(biāo)簽和輸入框也需盡量靠近，保持一定的緊密性，增強(qiáng)頁面可讀性。
占位符設(shè)置
在表單設(shè)計(jì)中，占位符能夠清楚表明，輸入框支持哪種類型和格式的數(shù)據(jù)，從而避免錯(cuò)誤信息的輸入。當(dāng)然，設(shè)計(jì)師也需盡量避免，將占位符作為標(biāo)簽使用。因?yàn)檫@樣會(huì)讓表單更加復(fù)雜，最終帶來相反的效果。而且，這類設(shè)計(jì)方式也僅僅適用于擁有２到３個(gè)輸入框的簡短型表單。
此外， 一般而言，當(dāng)用戶輸入信息時(shí)，占位符也會(huì)隨之消失。此時(shí)，用戶可能也無法查看是否輸入了正確類型的數(shù)據(jù)。這也是這類設(shè)計(jì)的一大缺陷。而作為設(shè)計(jì)師，應(yīng)該事先認(rèn)識(shí)到這一點(diǎn)，才能更加靈活的應(yīng)用，以優(yōu)化其表單設(shè)計(jì)。
注意密碼框設(shè)計(jì)
小編之所以在這里特別指出密碼框，是因?yàn)槠鋼碛歇?dú)特的設(shè)計(jì)原則和技巧。
保證用戶能夠隨時(shí)查看密碼
如此，能夠有效幫助用戶在提交表單之前，隨時(shí)檢查輸入的密碼，避免密碼錯(cuò)誤。
顯示密碼強(qiáng)度
絕佳的密碼是很難被猜到。因此，為保障用戶賬號(hào)的安全，設(shè)計(jì)密碼框時(shí)，盡量同時(shí)展示用戶密碼的強(qiáng)度和安全性，無形中規(guī)勸他們?cè)O(shè)置更加復(fù)雜安全的密碼。
提交之前，明確指出密碼填寫要求
如若密碼填寫，具有某些特定要求。請(qǐng)?jiān)谔峤槐韱沃?，明確指出，以方便用戶及時(shí)修改和填寫。
提示用戶：大寫鎖定已打開
如此，才能夠有效避免，當(dāng)用戶遇到意外按到 Caps Lock按鈕等常見問題時(shí)，能夠及時(shí)更正，避免帶來更加嚴(yán)重的問題。
登錄表單設(shè)計(jì)，添加“忘記密碼”選項(xiàng)
用戶經(jīng)常會(huì)忘記密碼 (包括小編，偶爾也會(huì))。 而登錄時(shí)，添加“忘記密碼”選項(xiàng)，能夠幫助用戶盡快找回密碼，順利登陸。
添加高效實(shí)用的按鈕設(shè)計(jì)
添加準(zhǔn)確貼切的按鈕微文案
相較于簡單使用“提交”或“保存”等通用的按鈕文案，更加準(zhǔn)確貼切的文案設(shè)計(jì)，例如“創(chuàng)建賬號(hào)”、“登陸”等，更能清晰直觀的表明，用戶點(diǎn)擊之后，所能實(shí)現(xiàn)的效果。
用戶完整填寫各類表單信息之前，禁用按鈕
這也是用戶提交表單之前，可視化驗(yàn)證輸入信息的重要方式。
主按鈕和輔助按鈕巧妙結(jié)合
如若表單設(shè)計(jì)中，需要使用兩類按鈕—— 主按鈕和輔助按鈕。則盡量在視覺上，對(duì)它們進(jìn)行區(qū)分，以減少潛在的錯(cuò)誤。當(dāng)然，相較之下，主按鈕，應(yīng)該更引人注目。
避免使用“重置” 或 “清除”等按鈕
錯(cuò)誤預(yù)防
錯(cuò)誤預(yù)防是成就優(yōu)質(zhì)表單設(shè)計(jì)的重要環(huán)節(jié)。設(shè)計(jì)過程中，設(shè)計(jì)師應(yīng)該預(yù)先考慮到，系統(tǒng)將如何預(yù)防和修復(fù)一些常見問題，而不僅僅只是給予用戶錯(cuò)誤提示。
那么，這類錯(cuò)誤預(yù)防從哪些方面可以實(shí)現(xiàn)呢？
輸入自動(dòng)化
輸入自動(dòng)化，能夠有效減少用戶手動(dòng)輸入的內(nèi)容，從而避免一些不必要的錯(cuò)誤。例如：
通過用戶填入郵政編碼或地理位置等數(shù)據(jù)，自動(dòng)填充城市和州縣信息
通過用戶輸入的信用卡卡號(hào)，自動(dòng)選定信用卡類型
利用輸入掩碼，格式化輸入信息
利用輸入掩碼，格式化輸入信息，解決輸入格式不匹配的問題。
簡而言之，當(dāng)用戶輸入相關(guān)信息之后，輸入掩碼會(huì)自動(dòng)在字段中插入正確的格式，將其轉(zhuǎn)化成可識(shí)別的正確信息。
添加輸入限制
另一種能夠幫助設(shè)計(jì)師，有效控制用戶輸入的技巧就是：添加輸入限制。例如，只允許電話和郵政編碼等數(shù)字輸入的限制。
注意錯(cuò)誤驗(yàn)證和提示
1. 使用inline驗(yàn)證
為避免錯(cuò)誤提示與輸入框不配的問題，提示信息盡量靠近輸入框。并且，一次只顯示一個(gè)輸入框的報(bào)錯(cuò)信息。
2. 設(shè)計(jì)一款簡潔直觀的錯(cuò)誤提示
錯(cuò)誤提示的文案設(shè)計(jì)，應(yīng)該能夠明確告知用戶：為什么他們的信息會(huì)被系統(tǒng)拒絕，如何才能準(zhǔn)確修改這些信息。而且，整個(gè)文案設(shè)計(jì)的基調(diào)，應(yīng)該是禮貌而專業(yè)的，從而更具權(quán)威性和不可違抗性。
3. 提交之前，根據(jù)輸入要求，及時(shí)驗(yàn)證
4. 利用色彩，圖標(biāo)以及提示指出輸入錯(cuò)誤
通過各類設(shè)計(jì)元素，明確指出用戶的輸入錯(cuò)誤。例如鮮亮的色彩，引人注目的圖標(biāo)以及清晰的提示文案。
總結(jié)
創(chuàng)建優(yōu)質(zhì)的注冊(cè)表單并非易事。它不僅僅只是設(shè)計(jì)一款美觀UI這么簡單。為提升用戶體驗(yàn)，設(shè)計(jì)師應(yīng)該注意設(shè)計(jì)過程的每一個(gè)細(xì)節(jié)。深知一款優(yōu)質(zhì)實(shí)用的表單設(shè)計(jì)，是提升頁面轉(zhuǎn)化率，留住用戶，增加產(chǎn)品銷量的重要方式。
總之，注冊(cè)表單設(shè)計(jì)過程中，每一個(gè)細(xì)節(jié)都不容易忽視。
相關(guān)性閱讀：
創(chuàng)建表單常見設(shè)計(jì)問題快速指南
【干貨】5大移動(dòng)端表單設(shè)計(jì)原則及案例賞析
【史上最全】設(shè)計(jì)師必備的83個(gè)設(shè)計(jì)資源網(wǎng)站
原文鏈接：https://uxplanet.org/how-to-design-great-ux-for-si...
本文由摹客團(tuán)隊(duì)翻譯，專業(yè)的設(shè)計(jì)工具提供者，其主要產(chǎn)品是UI設(shè)計(jì)師和產(chǎn)品經(jīng)理使用的原型設(shè)計(jì)工具M(jìn)ockplus和自動(dòng)標(biāo)注切圖神器摹客iDoc，本文經(jīng)同意轉(zhuǎn)載，最初發(fā)表在摹客官方博客，地址：https://www.mockplus.cn/blog/post/1261。
