表單的好壞直接影響著用戶的體驗(yàn)，那么如何才能設(shè)計(jì)出更好更實(shí)用的表單呢？一起來(lái)看看作者分享的幾個(gè)表單設(shè)計(jì)方針。

無(wú)論是注冊(cè)流程、多視點(diǎn)布局、或者是單調(diào)的純數(shù)據(jù)錄入界面，表單都是其中最重要的組成部分，他們的好壞直接決定用戶對(duì)產(chǎn)品的體驗(yàn)。在這里我只針對(duì)于常見(jiàn)的表單設(shè)計(jì)注意事項(xiàng)做一些說(shuō)明，但是請(qǐng)記住，這些都是一般指導(dǎo)方針，在產(chǎn)品設(shè)計(jì)中可能會(huì)因?yàn)榍榫暗牟煌霈F(xiàn)例外。

1、表單應(yīng)盡量設(shè)計(jì)成一列

多列會(huì)擾亂用戶的垂直動(dòng)量

2、頂部對(duì)齊標(biāo)簽

優(yōu)先選擇處理速度快的頂部對(duì)齊標(biāo)簽

數(shù)據(jù)表明：與左對(duì)齊方式的標(biāo)簽相比，用戶處理頂部對(duì)齊形式的標(biāo)簽時(shí)速度更快，頂部對(duì)齊標(biāo)簽也可以應(yīng)用于移動(dòng)端重。

也會(huì)有特殊情況，比如在處理?xiàng)l目數(shù)量較多的大型資料庫(kù)時(shí)，可以考慮左對(duì)齊方式的標(biāo)簽，因?yàn)樗麄兘档土烁叨?，瀏覽時(shí)更容易。

3、組標(biāo)簽及其輸入

使標(biāo)簽和輸入框有組的概念

使標(biāo)簽和輸入框兩兩組合，用間隔的大小來(lái)形成組的概念，否則就會(huì)如右圖所示，分不清楚那個(gè)標(biāo)簽和哪個(gè)輸入框是匹配的，容易產(chǎn)生混淆，是用戶感到困惑。

4、不要全部使用大寫(xiě)字母

不要全部使用大寫(xiě)字母

數(shù)據(jù)表明：與大寫(xiě)字母相比，人對(duì)小寫(xiě)字母具有更高的敏感度和識(shí)別度，比如我們可以輕松的認(rèn)出“Market”，但是卻不能一眼識(shí)別出“MARKET”，因此不要全部使用大寫(xiě)字母作為標(biāo)簽或說(shuō)明文本，識(shí)別度太低，增加用戶的認(rèn)知成本。

5、如果少于6個(gè)，那么顯示出所有的選擇項(xiàng)

顯示所有選擇項(xiàng)

對(duì)于下拉菜單選擇器而言，將選項(xiàng)內(nèi)置，需要點(diǎn)擊兩次查看或隱藏選項(xiàng)，且不直觀，如果少于6個(gè)選擇項(xiàng)，不妨考慮使用標(biāo)簽選擇器。

另外如果有超過(guò)25個(gè)選項(xiàng)，則不能僅僅使用下拉菜單選擇器，還要在下拉列表中結(jié)合上下文進(jìn)行搜索。

6、盡量不使用占位符作為標(biāo)簽

盡量不要占位符做標(biāo)簽

使用占位符文本作為標(biāo)簽來(lái)優(yōu)化空間是誘人的。但是這會(huì)導(dǎo)致許多可用性問(wèn)題，這里不做詳細(xì)說(shuō)明，這些問(wèn)題已經(jīng)被尼爾森諾曼集團(tuán)的Katie Sherwin證實(shí)過(guò)。

7、將復(fù)選框置于下方，以方便進(jìn)行瀏覽。

復(fù)選框置于下方

將復(fù)選框置于標(biāo)簽的下方，更易于用戶的瀏覽。

8、使用號(hào)召性用語(yǔ)（CTA）作為描述

使用號(hào)召性用語(yǔ)（CTA）

使用號(hào)召性用語(yǔ)（CTA）更能激發(fā)用戶的行動(dòng)力和歸屬感。

比如：普通用語(yǔ)“注冊(cè)”，一般是表示動(dòng)作；號(hào)召性用語(yǔ)（CTA）可能表述為“我要免費(fèi)試用”，一般是表示意圖。

9、指定錯(cuò)誤內(nèi)聯(lián)

指定錯(cuò)誤內(nèi)聯(lián)

告知用戶錯(cuò)誤發(fā)生的位置和原因。

這是兩個(gè)要素：位置和原因。

對(duì)于位置而言，要明確告訴用戶具體是那個(gè)地方出現(xiàn)了錯(cuò)誤，而不能只是簡(jiǎn)單告訴用戶有錯(cuò)誤；對(duì)于錯(cuò)誤原因而言，不但要告訴用戶錯(cuò)誤的原因，還要告知解決的方法，引導(dǎo)用戶做出正確的操作。

10、在用戶填寫(xiě)字段完成后在進(jìn)行內(nèi)聯(lián)驗(yàn)證（除非是在填寫(xiě)的過(guò)程中需要幫助他們）

內(nèi)聯(lián)驗(yàn)證

首先，完成一個(gè)字段后在進(jìn)行內(nèi)聯(lián)驗(yàn)證，比如當(dāng)姓名輸入框失去焦點(diǎn)后，在進(jìn)行內(nèi)聯(lián)驗(yàn)證。

其次，不要在輸入過(guò)程中邊輸入便進(jìn)行內(nèi)聯(lián)驗(yàn)證，比如右側(cè)的Email輸入框，用戶還未輸入完成就進(jìn)行了內(nèi)聯(lián)驗(yàn)證，才會(huì)一直出現(xiàn)錯(cuò)誤，會(huì)讓用戶產(chǎn)生恐懼。

最后如果是需要在填寫(xiě)的過(guò)程中幫助用戶，那么可以邊輸入邊做內(nèi)聯(lián)提示，直到失去焦點(diǎn)后在進(jìn)行內(nèi)聯(lián)驗(yàn)證。比如我們常見(jiàn)的在輸入密碼時(shí)，如果使用了不規(guī)范的字符，系統(tǒng)會(huì)立刻驗(yàn)證告知你出現(xiàn)了錯(cuò)誤，以及該如何避免這種錯(cuò)誤。

11、盡量不要隱藏幫助文本。

幫助文本

在條件允許的情況下，盡量不要隱藏幫助文本，可以將幫助文本置于被幫助項(xiàng)附近，當(dāng)然如果幫助文本過(guò)于復(fù)雜，或者已經(jīng)不僅僅是幫助文本，而是幫助教程的時(shí)候，需要考慮將其隱藏。

12、要區(qū)分主要操作和次要操作

區(qū)分主次

關(guān)于是否需要一個(gè)次要操作，這是一個(gè)更大的問(wèn)題，我們暫不討論，我們討論的是如果不是只有單個(gè)操作，那么一定要區(qū)分主次操作，可以簡(jiǎn)單理解為：比較重要的、我們希望用戶去做的就是主要操作，剩下的就是次要操作。

比如左側(cè)的圖中“登錄”按鈕為主要操作，“取消”按鈕為次要操作，然而右圖中未進(jìn)行祝此操作的區(qū)分。

13、使用字段長(zhǎng)度作為提示

字段長(zhǎng)度作為提示

預(yù)留字段的長(zhǎng)度提供了答案的長(zhǎng)度。對(duì)于具有預(yù)定義的字符數(shù)字，如電話號(hào)碼、身份證號(hào)碼、郵政編碼等，字段的長(zhǎng)度是已知且固定的，那么預(yù)留字段的長(zhǎng)度便能明確表示答案的長(zhǎng)度。

常見(jiàn)的例子還有：支付寶、微信等的六位支付密碼、銀行卡號(hào)···

14、可以考慮不用*表示是否必選和可選字段

是否必填

隨著網(wǎng)絡(luò)的普及，可能大家都能明白*代表著必填的含義，但是不排除有一部分對(duì)網(wǎng)絡(luò)接觸較少的人群并不理解其中的含義，當(dāng)然這不是重點(diǎn)，重點(diǎn)是沒(méi)有必要一定要用*來(lái)表示必填，因?yàn)楹芏鄷r(shí)候我們發(fā)現(xiàn)，幾乎90%的都是必填項(xiàng)，只有個(gè)別是選填項(xiàng)，那么就沒(méi)有必要每個(gè)必填項(xiàng)都加*標(biāo)注，我們完全可以按照左圖所示的思路，只對(duì)選填項(xiàng)做選填標(biāo)注（Optional），對(duì)必填項(xiàng)便不再需要任何特殊標(biāo)記。

15、信息的組相關(guān)（模塊相關(guān)）

組相關(guān)（模塊相關(guān)）

當(dāng)表單內(nèi)哦讓較多或表單過(guò)長(zhǎng)時(shí)，可能會(huì)讓用戶產(chǎn)生壓迫感，且識(shí)別度較低，我們可以通過(guò)對(duì)這些表單元素進(jìn)行分組分類(lèi)模塊化，讓用戶更加清晰易懂。

比如把用戶名、密碼等作為基礎(chǔ)數(shù)據(jù)組，把郵箱、性別、星座等作為補(bǔ)充數(shù)據(jù)組。

以上就是關(guān)于表單設(shè)計(jì)分享的幾點(diǎn)心得，歡迎交流點(diǎn)評(píng)。我跪著寫(xiě)，您坐著看，看完動(dòng)手點(diǎn)個(gè)贊，么么噠！

本文由 @提需求請(qǐng)跪著 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。