通過對無數(shù)的表單設(shè)計A/B測試各吨，以及一些大公司花費大量經(jīng)費對表單設(shè)計的研究前痘，下面總結(jié)出我認(rèn)為最好的58個表單設(shè)計實例。

我將本文分成了八個部分：

• General Form Design & Structure
• Questions & Field Types
• Accessibility & Ease of Use
• Input Validation & error handling
• Trust & Social proof
• Multi-step forms & progress indicators
• Buttons & Call to actions
• Mobile form optimisation

在開始之前壶冒，我要提醒大家的是眼刃，雖然大多數(shù)的建議都是基于大量網(wǎng)站和行業(yè)的統(tǒng)計有效的實驗，但在實際的使用過程中赴肚，需要根據(jù)上下文來設(shè)計表單樣式素跺。

基本表單設(shè)計和結(jié)構(gòu)（General Form Design & Structure）

• 1、多步驟表單優(yōu)于單步驟表單

  將你的表單分成兩到三個步驟幾乎總是會增加表單完成誉券。我們已經(jīng)在各種引線生成表單中進(jìn)行了測試指厌，從網(wǎng)絡(luò)注冊表單到B2B查詢表單，我們始終發(fā)現(xiàn)多步驟表單優(yōu)于一般單步驟表單踊跟。

  Leadforml

? 多步驟表單的好處是：

? 1踩验、多步驟表單不像長表單那樣給人的第一印象是給人很多疑問

? 2、通過在多步驟表單的最后一步詢問敏感信息(電子郵件商玫、電話)箕憾，用戶更有可能填寫這些字 段——否則他們就會因為填寫之前的步驟而失去進(jìn)展(這是一種被證實的認(rèn)知偏差，被稱為“沉沒成本謬誤”)

? 3拳昌、通過查看進(jìn)度條袭异，用戶更有動力完成表單。這同樣是基于許多已經(jīng)被證實的認(rèn)知偏見炬藤，比如先天進(jìn)步效應(yīng)御铃。

• 2碴里、刪除所有不必要的字段

Expedia每年損失1200萬美元，原因是他們在預(yù)訂表格中多問了一個問題(公司名稱)上真。
統(tǒng)計說明

SHort Forms

你表單中的每一個額外字段都會影響你的主要目的——所以要考慮每個問題的增加或者去掉是否是對表格的主要目的是有幫助的

• 3咬腋、使用條件邏輯來縮短表單

  條件邏輯(有時稱為“分支邏輯”)只在用戶已經(jīng)回答了某個問題之后才顯示

  這種做法減少了表單的平均長度，同時通過不顯示與用戶無關(guān)的問題來表單的流失率

  我們在Leadformly的一個客戶使用這個特性為他們的web代理創(chuàng)建了一個獨特的查詢表單睡互。通過使用條件邏輯根竿，訪問者只需點擊一系列圖標(biāo)，就可以準(zhǔn)確地告訴他們需要什么服務(wù)

  image

• 4就珠、左上對齊標(biāo)簽最適合可讀性和完成性

谷歌的UX研究人員發(fā)現(xiàn)
將標(biāo)簽對齊到左邊的字段之上可以增加表單完成時間寇壳，這是因為它需要更少的“視覺定位
如下圖所示：

image

對于頂部對齊的標(biāo)簽，有一種可接受的替代方法嗓违，我將在第16點討論九巡。

• 5、避免并排放置

眼動追蹤 Eye Tracking表明簡單的單列布局比多列布局更好蹂季；這個規(guī)則的唯一例外就是當(dāng)請求日期(天、月疏日、年)或時間(小時和分鐘)時偿洁，需要將多個字段放在一行上

• 6、給用戶使用表單的理由

試想一下沟优，你有一個長長的表單需要一個小時去填完涕滋，沒有人愿意使用它是不是色罚？

舉一個簡單的例子呻率，BettingExpert通過更改他們表單的title增加了31.54%用戶注冊量

image

• 7娶牌、把相關(guān)的模塊分區(qū)塊展示或分步驟展示

如果您的表單有6個以上的字段忠聚，那么就要考慮分區(qū)塊或分步驟展示表單

問題&字段類型（Questions & Field Types）

• 8巫击、選擇點擊次數(shù)較少的字段類型

當(dāng)微軟將他們的關(guān)機(jī)提示符從可點擊的關(guān)機(jī)圖標(biāo)更改為下拉框時蚓哩，發(fā)現(xiàn)關(guān)閉電腦的人更少了——僅僅因為另外兩次點擊

在選擇要使用的問題字段類型時规婆，盡量減少單擊次數(shù)

• 9泽裳、合理給出默認(rèn)選項

如果你問的問題是電話號碼或國家隘谣，你應(yīng)該建議一個默認(rèn)的電話分機(jī)或國家基于用戶的IP地址

• 10增拥、單選框、復(fù)選框和下拉框使用場景

一般來講寻歧，單選按鈕應(yīng)該在有一系列選項并且只能選擇一個選項時使用
當(dāng)可以選擇多個選項時掌栅，應(yīng)該使用復(fù)選框
如果可能的話，應(yīng)該使用復(fù)選框和單選按鈕码泛，而不是下拉菜單猾封，因為它們減少了用戶的認(rèn)知負(fù)擔(dān)。通常噪珊，當(dāng)有超過六個選項可供選擇時考慮使用下拉菜單

• 11晌缘、單選按鈕應(yīng)該垂直布局

垂直布局單選按鈕(和復(fù)選框)使它們比水平布局更快地處理

wealthfront

• 12逾苫、在詢問電話號碼或出生日期時不要將字段分割

分割字段迫使用戶不必要地進(jìn)行額外的單擊以移動到下一個字段。相反枚钓，用有清晰格式的指導(dǎo)字段會更好（即使用戶輸入完信息后自動定位到下一個字段铅搓，分割字段會帶來更嚴(yán)格的驗證，這可能會適得其反）

字段分割.png

• 13搀捷、當(dāng)需要敏感信息時星掰，需要向用戶解釋為什么需要

人們越來越關(guān)注隱私和信息安全；當(dāng)向用戶詢問個人信息時嫩舟，請使用infield信息按鈕氢烘，鼠標(biāo)懸停在該按鈕時，說明您為什么需要此數(shù)據(jù)家厌；一旦用戶理解你為什么要這些數(shù)據(jù)播玖，他們就更愿意給你。

圖片來源：uxmovement

• 14饭于、在詢問地址時蜀踏，使用郵政編碼/郵政編碼查找來減少字段輸入

當(dāng)要求用戶填寫他們的地址時，最好的做法是只要求填房子號碼和郵政編碼/郵政編碼掰吕，然后使用一個查找服務(wù)來建議完整的地址果覆。

image

• 15、合理使用占位符

占位符是出現(xiàn)在表單字段中的輕文本殖熟。在上面的示例中局待，您可以看到一個占位符表示“例如”×馐簦“CR0 3 rl…”
當(dāng)用戶有歧義的時候钳榨，應(yīng)該使用占位符來指導(dǎo)用戶如何填寫字段。換句話說纽门，您可能不需要為“First name”之類的字段設(shè)置一個占位符薛耻，因為大多數(shù)人都知道如何回答他們的名字

• 16、始終顯示字段標(biāo)簽

字段標(biāo)簽是位于表單之上的問題文本膜毁；它應(yīng)該始終存在昭卓，不應(yīng)該用占位符替換，為什么? 因為當(dāng)你開始在一個表單中輸入文本時占位符文本就消失了瘟滨，這就迫使人們用他們的記憶去回憶它們
[圖片上傳失敗...(image-d5372e-1533288348646)]
唯一可以接受沒有字段標(biāo)簽的情況就是使用內(nèi)聯(lián)標(biāo)簽候醒。內(nèi)聯(lián)標(biāo)簽總是在視圖中出現(xiàn)，但是不像頂部對齊的標(biāo)簽?zāi)菢诱加锰嗟拇怪笨臻g杂瘸。下面是BounceExchange表單使用的內(nèi)聯(lián)標(biāo)簽示例：

image

• 17倒淫、對具有大量預(yù)定義選項的字段使用預(yù)測性搜索

當(dāng)要求用戶選擇他們的國家、職業(yè)或其他有大量預(yù)定義選項的信息時败玉，最好提供一個預(yù)測搜索功能敌土，以減少輸入和認(rèn)知負(fù)荷

image

• 18镜硕、如果信息可以選填時，要使用戶清楚的知道該信息是選填的

• 19返干、可選擇的圖像是最吸引人的字段類型之一

使用可點擊的圖像作為一種問題字段類型是有意義的,從Leadformly的數(shù)據(jù)來看兴枯，這種做法是最吸引人的字段類型之一，并且能夠提供很用表單用戶體驗

image

• 20矩欠、使用電話號碼需謹(jǐn)慎

人們很不希望提供電話號碼财剖；Clicktale的研究表明將電話號碼作為選填字段，可以降低4%～39%的用戶流失率

• 21癌淮、可輸入字段的長度應(yīng)該適當(dāng)?shù)恼{(diào)整

字段的長度應(yīng)該反映用戶希望輸入多少文本躺坟。因此，像郵政編碼或房屋編號這樣的字段應(yīng)該比地址線等字段更短

便捷性和應(yīng)用性（Accessibility & Ease of Use）

• 22乳蓄、避免使用驗證碼

斯坦福大學(xué)(Stanford University)的一項研究發(fā)現(xiàn)咪橙，使用驗證碼將使用戶使用量減少。當(dāng)Animoto將驗證碼從注冊表單中移除時虚倒，他們的簽名者數(shù)量增加了33.3%

驗證碼將垃圾郵件管理的問題強(qiáng)加給用戶美侦，造成摩擦，并最終阻止用戶使用垃圾郵件裹刮。更好的選擇是使用Akismet這樣的自動垃圾郵件檢測服務(wù)音榜，或者使用隱藏字段創(chuàng)建一個“蜜罐”。使用驗證碼應(yīng)該是你最后的選擇

• 23捧弃、不要依賴顏色作為交流碼

雖然在女性中不常見，但12位男性中有1位有一定程度的色盲

當(dāng)顯示驗證錯誤或成功消息時擦囊，請確保不依賴于使字段為綠色或紅色违霞。無論使用什么顏色，都要盡量顯示文本或圖標(biāo)瞬场，以便向用戶傳遞消息

• 24买鸽、確保您的整個表單可以使用tab鍵導(dǎo)航

雖然許多人使用tab鍵在表單中導(dǎo)航，但這對于那些可能依賴使用tab鍵從一個問題轉(zhuǎn)到下一個問題中低用戶來說尤為重要

• 25贯被、當(dāng)詢問用戶可能不知道的問題時眼五，提供能夠讓用戶正確回答問題引導(dǎo)語

如何正確引導(dǎo)用戶確實不容易，有很多必須被詢問的強(qiáng)制性信息會讓用戶感到困惑彤灶；幸運的是看幼，在如何應(yīng)對這一挑戰(zhàn)方面，我們都可以從一些有經(jīng)驗的公司那里學(xué)到很多東西幌陕，當(dāng)你停留在某一個問題上時诵姜，ComparetheMarket.com提供一個很好的視覺方案

image

• 26、你的表單是否兼容主流的瀏覽器和設(shè)備?

這聽起來像是常識搏熄，但是檢查表單是否兼容主流的瀏覽器和設(shè)備是必要的

• 27棚唆、你的表單在明亮或昏暗的環(huán)境下辨識度高嗎暇赤？

如果人們可能在戶外的移動設(shè)備上使用你的表單，最好確保你的問題字段與表單背景形成對比宵凌。否則鞋囊，用戶可能無法看到在哪里點擊

• 28、確保所有元素每秒閃爍不會超過兩次

如果您計劃使用閃爍游標(biāo)瞎惫、動畫進(jìn)度條溜腐、gif或任何閃爍的東西，請確保它們不會每秒閃爍兩次以上微饥。否則逗扒，這可能會使人奔潰的

• 29、自動填充

像Chrome和Firefox這樣的瀏覽器現(xiàn)在有一個自動填充功能欠橘，用戶可以在一次點擊中填寫標(biāo)準(zhǔn)表單字段
為此矩肩，Chrome / Firefox在“名稱”、“標(biāo)簽”和“占位符”文本中查找上下文線索肃续。因此黍檩，確保你的字段被正確地標(biāo)記上瀏覽器能識別的術(shù)語是很好的做法，例如“email”始锚、“first name”或“city”

image

• 30刽酱、使用里程碑提交

如果用戶愿意提供更多的信息，如何保持表單足夠短而不嚇跑用戶瞧捌，同時捕獲更多的信息?里程碑提交是一種選擇
里程碑提交是一種技術(shù)棵里，允許用戶在表單中達(dá)到某個目的時提交表單，然后繼續(xù)提供更多信息姐呐。Toptal.com使用這個功能可以讓那些愿意回答更多問題的人快速找到答案

image

• 31殿怜、優(yōu)化表單的速度

用戶希望網(wǎng)站和表單快速加載。事實上曙砂，亞馬遜網(wǎng)站的加載速度每提高100毫秒头谜，網(wǎng)站營收就會增長1%。如果您希望增加轉(zhuǎn)化率鸠澈，請確保您的表單盡可能快

• 32柱告、避免自動前進(jìn)(自動跳到下一個問題)

這是意料之外的，而且通常令人困惑

• 33笑陈、使用視覺提示和圖標(biāo)使表單字段更直觀

我們的大腦處理視覺圖像的速度遠(yuǎn)遠(yuǎn)快于文字际度。如下面的市場對比表所示，可以使用視覺提示符來指示應(yīng)該如何填寫字段：

image

輸入驗證和錯誤處理（Input Validation & error handling）

• 34新锈、不要讓你的認(rèn)可太嚴(yán)格

嚴(yán)格的驗證是懶惰編程的一個癥狀甲脏。這對用戶不利，你的公司會為此付出代價
如果用戶回答某個字段的方式有很多變化(例如，響應(yīng)電話號碼+12345678912块请，+44 12345678912,012345678912)娜氏，那么您的程序員應(yīng)該使用一個規(guī)則，將其轉(zhuǎn)換為一致的格式
或者墩新，使用字段占位符清楚地顯示建議的格式

• 35贸弥、不要讓人們確認(rèn)他們的電子郵件或密碼兩次

如果您必須使用電子郵件/密碼確認(rèn)系統(tǒng)，最好在單擊時設(shè)置一個圖標(biāo)或復(fù)選框來顯示或隱藏密碼

image

• 36海渊、如果必須使用驗證绵疲，請確保它是內(nèi)聯(lián)的(在字段的右邊)，并盡早報告錯誤

不要等到用戶點擊提交報告后驗證錯誤臣疑。與此同時盔憨，內(nèi)聯(lián)驗證不應(yīng)該是實時的，因為這可能會在用戶完成字段之前報告錯誤

image

信任和社會認(rèn)同（Trust & Social proof）

• 37讯沈、使你的表單盡可能美觀

事實證明郁岩，人們更信任設(shè)計精美的表單/網(wǎng)站，而不是看上去不那么讓人印象深刻的表單

• 38缺狠、在你的表格旁邊寫上可能的問題

表單設(shè)計使人感到不舒服的原因有很多问慎；例如：我需要花費多長時間來填寫表單？會不會泄漏我的信息卡資料挤茄？會不會竊取到我個人信息如叼？
通過預(yù)先解決這些問題，您可以打破疑問使您的表單更容易使用穷劈。Freshbooks通過顯示“不需要信用卡”來解決用戶的擔(dān)憂笼恰，沒有合同，隨時都可以取消

image

• 39歇终、在接近你的表單的地方顯示強(qiáng)大的社會證明

像“被10萬人使用”這樣的語句挖腰，以及類似情況下其他人的推薦，都是強(qiáng)大的說服技巧练湿，可以讓用戶更信任你，使用你的表單

• 40审轮、小心使用安全印章肥哎，除非你要求付款

使用安全封條要小心，除非你要求付款疾渣，否則人們會把隱私和安全封條與付款聯(lián)系起來篡诽。在下面的A/B測試中，增加支付封條實際上減少了轉(zhuǎn)化率榴捡，因為人們認(rèn)為他們會在一個頁面上購買東西

image

• 41杈女、在窗體的視圖中顯示實時聊天或聯(lián)系信息

盡管Intercom的注冊表單非常簡單，但I(xiàn)ntercom會顯示一個實時聊天窗口，以清晰的視角來回答你在注冊賬戶之前可能遇到的任何問題或異議

image

多步驟表單和進(jìn)度指標(biāo)（Multi-step forms & progress indicators）

• 42达椰、使用多步驟表單時翰蠢，始終不要忘了顯示進(jìn)度條

進(jìn)度條可以清楚的告知還有多久可以完成同時可以鼓勵用戶完成表單從而并減少用戶的焦慮
有趣的是，我們在Leadformly的實驗中發(fā)現(xiàn)啰劲，動畫進(jìn)度條(比如Leadformly.com上的那條)通常比靜態(tài)進(jìn)度條更吸引人的同時能夠增加使用該表單的人數(shù)

• 43梁沧、注意你的過渡速度

我的一個好朋友在多步驟表單上使用5步，但他搞不懂人們?yōu)槭裁磿c擊下一個按鈕蝇裤，然后放棄表單廷支。結(jié)果他們的過渡速度太快了。用戶點擊next按鈕時沒有注意到步驟上的內(nèi)容發(fā)生了變化栓辜，因為它變化得太快了恋拍。通過減慢轉(zhuǎn)換速度后，用戶停留率增加了藕甩。
這是多步驟表單設(shè)計與其他設(shè)計不一樣的地方施敢，也是設(shè)計中遇到的最違反直覺的教訓(xùn)之一；畢竟辛萍，我們經(jīng)常被告知越快越好悯姊；似乎在過渡速度方面并非如此

• 44、指向要明確

進(jìn)度條本身是不夠的贩毕，您還應(yīng)該顯示步驟的總數(shù)悯许，以及用戶當(dāng)前正在執(zhí)行的步驟從而消除用戶可能會產(chǎn)生的任何歧義。在下面的示例中辉阶，您可以看到BrokerNotes如何清楚地告訴用戶先壕，他們正在進(jìn)行第二步中的第一步

image

按鈕及號召性用語（Buttons & Call to actions）

• 45、呼吁行動應(yīng)該完成“我想……”

默認(rèn)情況下谆甜，許多表單想讓用戶觸發(fā)行動時都使用“提交”或“發(fā)送”等無趣按鈕垃僚。應(yīng)該避免這些，并將其替換為用戶希望在完成表單時與實現(xiàn)操作相匹配的用語

一個很好的經(jīng)驗法則是從用戶的角度回答“我想…”這個問題规辱。例如谆棺，如果這是一個免費咨詢的咨詢表格，要求采取行動的電話可以是“請求我的免費咨詢”罕袋。

在這項研究中改淑，Unbounce發(fā)現(xiàn)，即使只是將“開始您的免費試用“改成”開始我的免費試用”浴讯，也會增加90%的點擊量

image

• 46朵夏、確保對動作的調(diào)用是高度對比的

• 47、對操作的調(diào)用應(yīng)該與字段的寬度相同

Uber的表單通過與背景形成高度的對比榆纽，使用了大的全寬調(diào)用仰猖。通過使用與字段寬度相同的按鈕從而消除用戶對按鈕位置的任何疑問

image

有關(guān)如何不這樣做的示例捏肢，請參閱下面提示中的“UPS”表單

• 48、盡量避免使用“清除“或”重置“按鈕

下面是UPS
UPS登記表的截圖饥侵。對actions按鈕的調(diào)用不僅很小鸵赫，而且next按鈕也緊挨著“cancel”按鈕，該按鈕的樣式和位置與“next”按鈕相似

image

這樣做有很大的風(fēng)險就是用戶不小心刪除輸入的所有的信息爆捞；大多數(shù)用戶都知道刷新頁面或重新輸入信息將使他們能夠重新開始奉瘤；因此，應(yīng)該避免取消或重置按鈕

• 49煮甥、按順序羅列你的問題

例如盗温，在詢問信用卡詳細(xì)信息時，請按照通常出現(xiàn)在實體卡上的順序(信用卡號成肘、有效期卖局、安全代碼)詢問信息

• 50、不要在你的按鈕附近放置過于復(fù)雜的法律信息

如果您必須讓您的用戶同意許多復(fù)雜的免責(zé)聲明双霍，請嘗試將它們合并到盡可能少的文件中砚偶，并使法律消息盡可能簡潔

• 51、不要通過自動將用戶注冊到郵件列表中來欺騙用戶

迫使大多數(shù)用戶在選擇退出列表時進(jìn)行額外的點擊洒闸，會得是一種操控性的操作

• 52染坯、清楚地解釋單擊submit按鈕之后的內(nèi)容

當(dāng)有人使用你的表單時，他們可能會想他們需要等待多久丘逸，他們是否需要準(zhǔn)備什么单鹿，或者會發(fā)生什么。

理想的情況是深纲，您的表單應(yīng)該將用戶重定向到一個頁面仲锄，該頁面清楚地告訴用戶接下來會發(fā)生什么，以及他們可以預(yù)期什么

• 53湃鹊、在提交時儒喊，禁止再次按下提交按鈕

這是為了防止重復(fù)提交，并向用戶提供一個額外的信號币呵，表明他們的提交已經(jīng)成功

• 54怀愧、是用戶清楚的知道接下來會發(fā)生什么

您的號召性用語（和登錄界面）應(yīng)該清楚地告訴用戶，一旦他們完成了您的表單余赢，接下來會發(fā)生什么

移動設(shè)備表單優(yōu)化（Mobile form optimisation）

• 55掸驱、使用移動設(shè)備的本機(jī)特性(攝像頭、地理定位没佑、日期選擇器)來簡化任務(wù)

去年，我花了很多時間在一家外匯經(jīng)紀(jì)公司温赔，試圖幫助他們優(yōu)化自己的登錄表單蛤奢。由于監(jiān)管原因，該公司不得不要求用戶提交“KYC”(認(rèn)識您的客戶)文件，比如他們的駕照和最近的賬單啤贩。

在桌面上待秃，這是一個笨拙的過程，在最好的時候痹屹，因為用戶通常必須放棄表單來掃描文檔章郁，然后再上傳它。

對于移動用戶來說志衍，這更加困難暖庄。最終，我們發(fā)現(xiàn)楼肪，點擊移動設(shè)備的攝像頭是最好的用戶體驗培廓，因為它可以讓用戶在不離開表單的情況下為自己的駕照拍照。

我甚至見過這種方法春叫，用戶可以“掃描”他們的信用卡肩钠，而不用手工填寫信用卡信息

image

• 56、問題區(qū)域和按鈕的高度應(yīng)該不少于48px

成人手指墊的平均尺寸約為10毫米寬暂殖。在web術(shù)語中价匠，這大約是48像素。因此呛每，當(dāng)設(shè)計用于移動設(shè)備的表單時踩窖，請確保您的字段至少有48個像素高 web設(shè)計規(guī)范

• 57、所有的表單標(biāo)簽和占位符字體都應(yīng)該在16px以上

去年莉给，我為一個客戶重新設(shè)計了一個完整的用戶界面后毙石，我收到了他們的CEO的一封電子郵件，郵件中寫道:“看上去很棒颓遏，但我什么都看不清!”

字體是14px徐矩，這是一個相當(dāng)標(biāo)準(zhǔn)的字體大小。但我的客戶正在移動設(shè)備上查看這個界面叁幢。在為移動或年長用戶設(shè)計時滤灯，文本的大小應(yīng)該至少為16px。

順便說一句曼玩，當(dāng)點擊16px以下的文本時鳞骤，iOS設(shè)備會放大，但如果文本是16px或以上黍判，就不會放大豫尽，因為這被認(rèn)為是不必要的

• 58、使用特定的HTML輸入類型來顯示正確的鍵盤

你有沒有注意到顷帖，當(dāng)你使用移動設(shè)備時美旧，手機(jī)會顯示不同的鍵盤渤滞，這取決于你問的是哪一個問題?有時會顯示“.com”按鈕，而有時會出現(xiàn)日期選擇器

image

這都要感謝HTML輸入類型;對于移動表單設(shè)計榴嗅，它們非常棒妄呕，你應(yīng)該使用它們;有8種輸入類型與表單設(shè)計相關(guān):
input type=”text” displays the normal mobile device keyboard
input type=”email” displays the normal keyboard plus ‘@’ and ‘.com’
input type=”tel” displays the numeric 0-9 keypad
input type=”number” displays a keyboard with numbers and symbols
input type=”password” this hides characters as they’re typed in the field
input type=”date” this displays the mobile’s date selector
input type=”datetime” this displays the mobile’s date and time selector
input type=”month” this displays the mobile’s month/year selector

58 Form Design Best Practices & Form UX Examples

原文鏈接