轉自：三分設（ID：sanfen-design）

作者：大蛤蜊

想象一下，如果你走進一家商店，往購物籃里塞滿了東西卻找不到收銀臺的感覺,。最后你可能放下所有東西一分錢沒花極其失望地離開了,。的確，這種在支付過程中遇到的槽糕事情,，也會發(fā)生在表單設計中,。

糟糕的表單替我省了好幾百美元。冗長,、繁瑣的表單嚇跑了你的顧客,，讓你的公司潛在中流失了幾千美元。

表單看起來是最簡單的UI組件,，卻把控著你產品中最重要的交互設計,。它們引導你的用戶去注冊、支付,。

我不需要告訴你這些步驟在精心運作的企業(yè)中扮演的重要角色。但是我也有好的消息：做到好的表單設計不是那么難,。

在這篇指南里,，我收集了33個你能立即應用的最好的做法。它提供了一個非常好的出發(fā)點去試驗,， 找到對你有用的方法,。我們會講到：

• 副本很重要！

• 最優(yōu)移動端表單設計

• 使用正確的輸入方式

• 通過工作而不是用戶來變得聰明

• 優(yōu)秀表單的合理布局

• 表單設計的巧妙之處

副本很重要

你知道副本有多重要,。我們曾在博客里寫過,。調整表單設計能大大的提高你的轉化率。

1. 讓用戶知道完成表單的好處

“我閑的時候,，喜歡填不同的線上表單,。我就是喜歡填！”從來沒人這樣說,。用戶需要明確的知道把他們的時間投入到這樣一個不合理的活動里有什么好處,。

在結賬過程中，好處非常明顯,，但是注冊呢,？在表單的頂部突出顯示他們一旦注冊完能做什么。他們可以訪問獨家內容,，社區(qū)或者免費試用,。不要羞于讓他們興奮。

Marvel 顯示他們的大客戶和用戶數來展示他們的社會認同

2. 在注冊窗口旁邊使用社會認同

作為人類,，我們都想歸屬于某處,。我們需要知道一個產品是否值得我們花費時間、金錢和注意力。證明其他用戶和我們一樣,，已經加入了這個俱樂部并非常喜歡它,，對你的項目非常有幫助。

你的產品上有一些大牌嗎,？在注冊表單的旁邊展示這些品牌的logo,。你已經擁有了多少滿意的用戶？它會讓原本猶豫的訪客對注冊感到安心?，F在就為你所獲得的成就驕傲吧,！

3. 明確錯誤

“發(fā)生了錯誤”。好吧謝謝,，我發(fā)現了,。。,。但是,，我已經看了多少遍了？這讓我非常受挫,，我甚至都沒有得到一個哪里出錯的提示,。有人已經使用了我的用戶名嗎？還是密碼強度設置的不夠嗎,？幫幫你的用戶吧,，讓這個錯誤盡可能的明確。

       詳情呢,？

4. 在相關輸入框旁邊顯示錯誤的信息

發(fā)生出錯,。哪錯的，顯示在哪,。假設用戶提交了有三處錯誤的表單,，然后全都顯示在頂部。這種情況下,，他們需要瀏覽整張表單找出哪些需要注意,。

根據上下文顯示錯誤，不要忘了考慮色盲用戶,。不僅僅只使用紅色文字強調錯誤字段,。圖標是萬無一失的選擇。強烈推薦讀者閱讀更多關于易訪問性的文章,。

5. 對指令有明確的稱謂

用戶應該對他們的操作所帶來的結果非常自信,。如“提交”、“好的”,、“允許”,。描述用戶將采取的操作,。多使用“注冊”、“立即支付”,、“創(chuàng)造賬戶”,。

6. 用戶操作成功時給他們反饋

你可能以為整個表單的設計到用戶按下“下單”就結束了。錯,！用戶需要清楚的已操作成功的反饋,。還要讓他們知道接下來的步驟。

例如,，有人在你的網店里下了單,，顯示一個支付成功和訂單的頁面。甚至還可以提供預期的下一步時間線,，比如產品什么時候發(fā)貨,。

優(yōu)化移動端表單設計

優(yōu)化移動端表單有兩個方面。一方面,，我們需要額外注意某些事情,。另一方面，我們手機有很多功能,，會讓填寫表單簡單些,。

在你的設計上多花點心思。本節(jié)將提供幾個簡單的示例,，專門用于改進移動設備的表單設計。

1. 提供足夠大的點擊區(qū)域

我周日晚上喜歡在電視上看NFL比賽,。球員的運動能力總是能讓我驚訝,，就像他們的接球技術一樣。他們需要一雙大手去接球,。這些足球運動員可能是你下一個客戶,。

這些家伙看起來很強壯，所以你不希望你表單上的小小點擊框讓他們生氣,。谷歌建議最小區(qū)域為48x48px,，這是一個很好的標準。

       Odell Beckham Jr.和他的手可能正要嘗試使用你的APP

2. 不要回避使用手機的硬件功能

在用手機填寫表格的用戶中,，大約99%的人都有一個功能齊全的攝像頭,。你想過利用它嗎？

只需點擊按鈕,，他們就可以掃描身份證或信用卡上的信息,，否則這需要更長的時間填寫信息。更進一步,，考慮一下使用GPS或生物識別的可能性,。

3. 使用與預期輸入相匹配的鍵盤

如果你希望用戶填寫郵箱地址,，激活鍵盤文本模式，如果他們需要輸入電話號碼,，顯示數字鍵盤,。

這只需要花一點心思，就能節(jié)省用戶寶貴的時間,，不需要他們自己來回切換鍵盤,。這還有助于他們了解您期望的輸入類型。

4. 使用本機原生輸入

谷歌和蘋果都投入了大量研究來設計他們自己的UI控件,。大多數人都見過這些,，所以除非你有充分的理由不這樣做，否則請堅持使用本機控件,。

使用正確的輸入類型

這可能看起來顯而易見,，但實際上并不總是那么容易。不要讓用戶從200多個下拉列表中選擇一個國家,，或者從下拉列表中選擇“是/否”,，這樣會讓用戶覺得一團糟。

復選框,、單選按鈕,、下拉菜單、短文本和長文本輸入——在表單的世界里任何東西都有自己的位置,。只要確保在適當的時候使用它們,。

5. 避免超長下拉框

節(jié)日季正在迅速的過去，但你可能在線訂購了一些禮物,。要做到這一點,，你需要選擇發(fā)貨到哪個國家。在那個時候,，從滾動條里200多個國家里找到你的真是太讓人生氣了,。

明年再設計表單的時候，最好讓用戶從預設列表里輸入并選擇國家,。這需要你的開發(fā)人員多做一些額外的工作,，但是你的用戶會為此感謝你。

6. 使用智能的即時搜索方案

為什么不讓前面的提示更進一步呢,？花點時間思考用戶可能遇到的場景,。

一個居住在蘇格蘭的人可能開始輸入“蘇格蘭”，盡管你的網站只接受“英國”作為居住國,，在理想的情況下,，他們即時輸入“蘇格蘭”也應該看到“英國”作為一個建議條目。

同樣的情況也適用于“Netherlands”而不是“TheNetherlands”,?？紤]這些場景并花些時間開發(fā)這種邏輯,，這樣用戶就不用去猜測準確的措辭了。

       Lilogo符合了用戶的期望,，顯示了“蘇格蘭”的結果,，盡管標簽上寫著“聯合王國”

7. 當你有6個或更少的條目時使用單選按鈕

下拉框不是長表單的最佳解決方案，對于短列表來說同樣也不是,。為什么讓用戶每次回答是或否的時候需要點開一個下拉框呢,？

6個或更少條目的時候就使用好的經典的單選按鈕好了。更好的表單用戶體驗,，用戶掃描垂直的排列更輕松,。過多的下拉框可能是最糟糕表單設計的標志。

8. 選擇合適的日期輸入方式

很多表單仍在使用錯誤的日期輸入方式（最常被請求的信息之一）,，有多少次選擇年齡是從預設的1900年開始滾動,？

這些網站要么認為他們的大多數用戶是100歲以上俱樂部要么就是不在乎。我傾向于后者,。在移動端設備上,，使用默認的時間選擇框或者使用格式輸入，就像我們的例子里FOX新聞一樣,。

注意預期日期格式,，因國家而異。在數字鍵盤上（甚至移動設備上）輸入8個數字都能比滾動3個下拉框快得多,。如果堅持使用原生iOS或Android日期選擇器,，請確保有一個實際的默認日期，而不是1900年或當前年份,。除非你在為百歲老人協(xié)會的年度晚會設計申請表,。

       使用格式輸入改進日期選擇的用戶體驗（fox.com)

9. 將輸入框長度與輸入的預期長度匹配

你可能想犧牲輸入框的長度，但請記住,，短的輸入框對于郵編或CVV代碼來說更好用。當你希望用戶鍵入更長的答案時,，請使用更大的文本框,。有時把這些長短不一的輸入框放在一起，要設計的很漂亮是個挑戰(zhàn),。但是,，嘿，我們喜歡挑戰(zhàn),！我們成為了設計師,，不是嗎?

10. 去掉“確認密碼”這一欄，增加“顯示密碼”的選項

在手機上輸入密碼尤其煩人,，所以不要讓用戶輸入過多不必要的,。為什么要讓他們確認密碼呢,？想要確保他們的密碼沒有打錯嗎？

在輸入框旁邊放一個小眼睛圖標(或“顯示密碼”文本),，這樣他們就可以看到自己輸入的錯誤,。越來越多的網站使用這樣的解決方案，我認為這絕對是良好的表單設計的標志,。

讓工作而不是用戶變得聰明

當你問自己如何設計表單時,，第一個要注意的是：不要偷懶！仔細而正確地開發(fā)表單可以節(jié)省很多時間,。

在設計它時,，想想你可以從已經存在的信息中猜測出什么，而不需要用戶輸入一個字符,。有些解決方案肯定會比“足夠好”的解決方案占用更多的開發(fā)資源,，但是你的用戶會因此而喜歡它。

11. 當用戶嘗試使用已獲取的郵箱地址注冊時,，提供登錄

如果用戶試圖使用已獲取的郵箱地址注冊,，這可能意味著他們以前已經注冊過。為什么不給他們提供一個快速登錄的方法呢,？預填好郵箱地址,，這樣他們只需要輸入密碼。

12. 使用智能默認值

這個有些籠統(tǒng),，但當你使用智能默認值時,。你可以根據IP地址、設備語言甚至某些情況下的設備位置進行猜測,。每次設計表單時,，都花幾分鐘仔細考慮所有這些項目。

       當在開發(fā)我們的產品UXfol.io時,，我們的開發(fā)人員代替我們的用戶來做繁重的工作

13. 避免驗證碼

驗證碼能讓人很煩,，但我們仍然用它來避免數據庫中的數千個虛假賬戶。然而,，一些更好的,、不那么煩人的解決方案也可以做到這一點。當考慮使用驗證碼時,，在實行最懶的開箱即用的想法之前,，考慮一些替代方案，一些最先進的解決方案,。

14. 基于郵政編碼的地址信息

電商店主可能會需要一個地址,。可能需要讓用戶鍵入所有內容,，然后在末尾輸入郵政編碼,?；蛘撸葟膰议_始(因為郵政編碼在全球并不是唯一的),，然后自動填充州,、城市，在某些情況下甚至街道信息,。所以,，你可能需要一個第三方插件。

15. 接受多種格式

電話號碼為此提供了一個很好的示例：不用你的用戶,，而是你自己必須確保以正確的格式儲存號碼,。接受多格式的電話號碼（包括其他信息），然后自己把它們標準化,。如果做不到,，至少提供一個你期望的清晰的格式示例。

16. 在提交表單之前顯示錯誤

這聽起來很簡單,，但仍有很多表單忽略了這一點,。如果用戶輸入了錯誤的郵箱地址，請在提交表單之前顯示錯誤,。

但是,，注意不要驗證得太快——當你還在打字，但是表單“大喊”你輸入了一個無效的郵箱地址時,，驗證會變得非常煩人,。“嗯,，好的,，但是你能等我打完字嗎？謝謝,！”

優(yōu)秀表單設計的正確布局

以下建議會更通用,，所以在收集用戶數據時，基本上可以在任何情況下使用它們,。與上面的一些技巧不同,，它們不需要瘋狂的開發(fā)魔法，只需要好的設計,。精心設計的表單總是從精心選擇的布局開始。

1. 總是顯示標簽

近年來,，使用表單標簽作為占位符文本變得非常流行,。在許多情況下，它很好用,，因為它確實使設計更干凈,。但是想象一下,，一旦您的用戶填寫了這些輸入框，他們就不知道每個輸入框應該包含什么信息了,。

在某些情況下,，比如電子郵件地址，可能看起來很明顯,，但是容易把姓和名搞混,。所以即使你決定使用標簽作為占位符，也要在字段被填充時讓它們可見,，就像谷歌建議的那樣,。

       谷歌展示標簽的建議(Material設計規(guī)范)

2. 只詢問必要的信息

“市場部讓我這么做的！” 是的,，我知道你（或我們）可能會被施加很大的壓力,，甚至要求用戶提供鞋碼。我們擁有的信息越多,，我們就能更好地細分我們不同的信息等等,。

但是，填寫一張滿是不必要的信息的巨大表單不僅讓人感到沮喪和恐懼,，還會讓用戶產生不信任,。想象一下，你剛剛在酒吧里遇到一個人,，簡單聊了30秒,，他們開始問你一些私人的問題。

不要詢問一些你不需要的東西,，或者至少讓它成為可選的,。如果您真的需要這些信息，請與用戶溝通你的理由,，并告訴他們這會如何改進他們的體驗,。

漸進式分析提供了另一種選擇，當您在用戶更加關注您的產品之后,，再收集額外的數據,。

3. 標記可選項

不用星號來標記必填項，而是明確的標識可選項,。

4. 對于長表單,，將輸入按類別分組并使用多個步驟

讓長表單設計的用戶體驗變得正確非常挑戰(zhàn)。不管你怎么努力,，有些情況下你就是要處理很長的表格,。在這種情況下，有兩件事可以幫助獲得更好的完成率。

首先,，將相關字段分組在一起,。一組是個人信息，另一組是地址,。還可以考慮將表單分成多個步驟,，這樣就不會在開始時有大量輸入框嚇到用戶。如果這樣操做,，請確保使用進度條來顯示剩余的進度,。

5. 避免標簽左對齊

研究表明，人們在填寫標簽在輸入框左側的表單會更慢,。想象一下,，當你填寫表格時，你的眼睛需要跳來跳去,。垂直地堆疊所有標簽會增加表單高度,，所以使用標簽作為占位符，在填充字段時移到頂部,。就像谷歌建議的那樣,。

6. 使用單列布局

表單的總體布局也是如此。如果輸入框覆蓋多列,，用戶的眼睛就要跳來跳去,。瀏覽單列會快得多。當然也會有例外,，當一行中有多個字段時,，比如姓和名。不過,，一般來說,，即使單列布局增加了總體高度，它也更好用,。

7. 從簡單的問題開始

除了嚇到用戶的表單之外,，可能還包含不同類型的數據，其中一些更敏感或更復雜,。從用戶覺得容易填寫的常見字段開始,。讓他們放松下來，然后去做那些需要更多參與的事情,。

表單設計的巧妙之處

做到這一步表明你致力于改進表單的用戶體驗,。并不是每個人都會這樣做，這是錦上添花,，它可以讓用戶叫好,。如果你的目標是最好的表單設計用戶體驗,，請繼續(xù)閱讀。讓我們繼續(xù),，好嗎?

1. 顯示和更新密碼規(guī)則

這可能是我最喜歡的一條，也是我的一個項目,，執(zhí)行起來并不復雜,。許多網站對于密碼應該包含的不同字符有嚴格的規(guī)則。一些網站在提示框里顯示了這些規(guī)則,。這不是最好的做法,。

用戶只有在輸入了常用密碼后才會知道密碼的強弱。因此,，最遲在該字段成為焦點時顯示標準,。更好的是，在用戶輸入時實時更新它們,。這樣就更容易發(fā)現他們到底缺少什么,。

Mailchimp在用戶鍵入時主動更新列表，幫助用戶輸入足夠強度的密碼

2. 禁用“提交”按鈕,，直到用戶完成所有必填的字段

當你試圖提交一個表單時卻發(fā)現沒有填寫所有必需的字段,，這非常令人沮喪。如果你正確地標記了必填和選填框,，你可能可以避免這種情況,。

禁用“提交”按鈕（你不會給它標記成“提交”，對嗎,？）,，直到他們填完所有內容，這是另一種方法將焦點轉移到剩下部分,。

3. 擁抱包容性

如果你的業(yè)務中包含在線表單,，那你的客戶很可能非常多樣化。你不想讓他們中的任何一個感到被排斥,，對吧,？我們可以就此主題寫一篇完整的文章，所以讓我快速地給你一些提示,。首先,，不要驗證名稱 —— 如果你有一個無效的名稱，你會有什么感覺?

性別是另一個敏感話題,。在你的公司里,，至少有一個人可能會說，要準確定位客戶這些信息是絕對必要的,。但這是真的嗎,？

越來越多的APP和產品已經停止詢問了。所以，建議一：不要問,。如果你這樣做了,，讓它成為可選的。對于后者,，為那些既不是男性也不是女性的人提供一種選擇,。你可以很容易地使用“其他”選項（盡管這個標簽也可能冒犯）。

更進一步,，可以像Facebook那樣添加一個自定義輸入框,。最后但并非最不重要的是，不要忘記可訪問性,。確保用戶可以使用鍵盤瀏覽表單,，并找到足夠大且具有足夠對比度的標簽。

4. 當大寫鎖定時警告用戶

我非常喜歡MacOS的這個功能,。為什么不把它也用在你的表格上呢?當輸入密碼時,，我們有時會不小心按下大寫鍵。這發(fā)生在我們所有人身上,。為什么不提前警告用戶節(jié)省他們幾秒鐘呢?

       使用有趣的圖片提示大寫鎖定阻止登錄