無(wú)論是網(wǎng)站制作還是APP的UI設(shè)計(jì)，表單都是界面中最常見(jiàn)也是最重要的組成部分之一。它們的應(yīng)用范圍非常廣泛，例如用戶(hù)注冊(cè)、訂閱服務(wù)、用戶(hù)反饋、問(wèn)卷調(diào)查表、商業(yè)交易等，從數(shù)據(jù)錄入到信息搜索，幾乎無(wú)處不在。對(duì)于設(shè)計(jì)師、前端和開(kāi)發(fā)人員來(lái)說(shuō)，需要盡可能多地關(guān)注表單的設(shè)計(jì)，讓表單更易于使用。精心的設(shè)計(jì)將大大增加用戶(hù)體驗(yàn)和交互效率。

在今天的文章中，您會(huì)發(fā)現(xiàn)很多與可用性測(cè)試、現(xiàn)場(chǎng)測(cè)試、用戶(hù)跟蹤和用戶(hù)反饋相關(guān)的表單設(shè)計(jì)實(shí)用建議。

1.理清邏輯，保留必要的

表單是與用戶(hù)交流的語(yǔ)言。與任何對(duì)話一樣，它應(yīng)該有助于雙方以合乎邏輯的方式進(jìn)行交流。所以，你需要做：

保持問(wèn)題的直觀順序。你應(yīng)該從用戶(hù)的角度邏輯地提問(wèn)，而不是根據(jù)程序或數(shù)據(jù)庫(kù)的邏輯。如果問(wèn)題之間沒(méi)有邏輯，可以按字母順序排列。

以直觀的順序組織選項(xiàng)。 For example, when the options are dates, they are ordered by Monday, Tuesday, and Wednesday, not out of order.

時(shí)刻反思從用戶(hù)那里獲取的信息是否必要，如何使用。這樣做是為了消除不必要的選項(xiàng)并提高完成率。

2.使用單列列表布局

一個(gè)多欄的表單填寫(xiě)很容易讓用戶(hù)錯(cuò)過(guò)，打斷填寫(xiě)體驗(yàn)。用戶(hù)需要按照之字形軌跡填寫(xiě)整個(gè)表格，這不僅影響了整個(gè)書(shū)寫(xiě)路徑，降低了效率，還會(huì)產(chǎn)生一定的干擾。但是如果使用單欄形式，這個(gè)填充路徑單一、直接，更直觀高效。

3.減少需要輸入的字段和工作量

減少要輸入的字段數(shù)可以使您的表單更清晰并減少加載時(shí)間，尤其是對(duì)于信息量大的表單。

當(dāng)然，僅僅減少輸入字段的數(shù)量是不夠的。您還需要注意用戶(hù)填寫(xiě)表單的方式、內(nèi)容和工作量。打字內(nèi)容是一種交互性很強(qiáng)的輸入方式，錯(cuò)誤率高，時(shí)間成本高。因此，需要盡量減少用戶(hù)的打字，使用復(fù)選框、單選按鈕、下拉菜單等選項(xiàng)來(lái)降低用戶(hù)出錯(cuò)的概率。

4.匹配輸入框和內(nèi)容的大小

MARD研究所的研究發(fā)現(xiàn)，如果一個(gè)字段相對(duì)于輸入框來(lái)說(shuō)太長(zhǎng)或太短，都會(huì)讓用戶(hù)懷疑自己是否輸入了正確的內(nèi)容。這種情況在輸入CVV（信用卡驗(yàn)證值）等字段時(shí)尤為明顯。

為了良好的可用性，您應(yīng)該盡可能使輸入框的寬度與輸入的長(zhǎng)度相匹配。適當(dāng)?shù)念A(yù)留空間可以讓用戶(hù)更安心。

5.標(biāo)簽放置在相應(yīng)輸入框的上方

用戶(hù)快速瀏覽表單是否足夠方便？如果用戶(hù)難以快速掃描表單，則填寫(xiě)時(shí)間會(huì)更長(zhǎng)。所以，好看和填充是好的表單設(shè)計(jì)的標(biāo)準(zhǔn)。 Matteo Penzo 的文章研究了表單和表單中的輸入框應(yīng)該如何布局，以便用戶(hù)可以更好更快地瀏覽和填寫(xiě)。結(jié)論是標(biāo)簽應(yīng)該放在輸入框上方。

如果您希望用戶(hù)盡可能快地瀏覽，請(qǐng)垂直對(duì)齊標(biāo)簽和輸入字段并左對(duì)齊。請(qǐng)注意，這是快速瀏覽。這種布局的優(yōu)點(diǎn)是不需要太多的水平空間。用戶(hù)只需要向下瀏覽，不需要左右掃視。這種布局更容易形成響應(yīng)式UI，兼容不同的屏幕和不同的應(yīng)用場(chǎng)景。

6.支持靈活多樣的格式

一些字段要求用戶(hù)準(zhǔn)確填寫(xiě)，但當(dāng)要求用戶(hù)輸入特別精確或格式化的內(nèi)容時(shí)，可用性可能會(huì)有點(diǎn)問(wèn)題。如果要求用戶(hù)輸入數(shù)字內(nèi)容（比如電話號(hào)碼），最好靈活一點(diǎn)，支持多種不同的輸入法和顯示方式，這樣更容易讓人查看（而不是機(jī)器）和防止錯(cuò)誤。

例如，固定電話的格式往往是（777）666-5544，這樣更便于用戶(hù)查看、記錄和記憶。

7.不要混合占位符和字段標(biāo)簽

設(shè)計(jì)人員經(jīng)常在表單中放置文本占位符，以額外提醒用戶(hù)如何填寫(xiě)示例。當(dāng)用戶(hù)開(kāi)始輸入時(shí)，占位符文本將消失。

一些設(shè)計(jì)人員將標(biāo)簽直接放在輸入字段中作為占位符，以減少表單長(zhǎng)度和視覺(jué)混亂。對(duì)于簡(jiǎn)單的表單設(shè)計(jì)，這種設(shè)計(jì)影響不大。當(dāng)表單信息量大，內(nèi)容類(lèi)型多樣時(shí)，這種設(shè)計(jì)就不合適了。這種設(shè)計(jì)的缺點(diǎn)是：

一旦用戶(hù)點(diǎn)擊輸入框，標(biāo)簽就會(huì)消失，用戶(hù)很容易忘記輸入的內(nèi)容和形式。當(dāng)用戶(hù)看到輸入框被填充內(nèi)容時(shí)，會(huì)誤以為該字段被填充而沒(méi)有輸入。

如果您的表單中仍然需要占位符，您也可以將它們作為浮動(dòng)標(biāo)簽存在。顯示默認(rèn)占位符，它作為標(biāo)簽浮動(dòng)以在用戶(hù)鍵入時(shí)提醒用戶(hù)。

8.混淆可選和必填字段

正如我之前所說(shuō)，盡量避免在表單中添加可選字段。但如果你必須加入，至少知道哪些字段是可選的，哪些是

　　9.不要使用重置按鈕

　　“重置”使用戶(hù)可以很容易地刪除表單上的所有內(nèi)容并從頭開(kāi)始。這個(gè)風(fēng)險(xiǎn)太大了。在現(xiàn)實(shí)生活中，這個(gè)按鈕從來(lái)不會(huì)幫助用戶(hù)。反而因?yàn)椴恍⌒挠|碰而更疼。

　　10.提供高可見(jiàn)性和特定的錯(cuò)誤信息

　　理想情況下，用戶(hù)可以通過(guò)填寫(xiě)表單并上傳來(lái)完成任務(wù)。但現(xiàn)實(shí)中，錯(cuò)誤是不可避免的。因此，當(dāng)錯(cuò)誤發(fā)生時(shí)，您應(yīng)該以高度可用和可見(jiàn)的形式通知用戶(hù)發(fā)生了什么。因此，您提供的錯(cuò)誤信息應(yīng)符合以下規(guī)則:

　　當(dāng)用戶(hù)輸入字段時(shí)，應(yīng)該實(shí)時(shí)告訴他們所填寫(xiě)的信息是對(duì)還是錯(cuò)，而不是等他們填寫(xiě)完所有信息后才告訴他們出錯(cuò)了。

　　錯(cuò)誤信息應(yīng)該一目了然，突出顯示顏色、圖標(biāo)和文本，錯(cuò)誤信息應(yīng)該靠近輸入框，而不是表單的底部或頂部或鍵的旁邊。

　　如果輸入格式是特定的，應(yīng)該提前聲明。

　　出現(xiàn)錯(cuò)誤后，不要清空已完成的表單。

　　總結(jié)

　　在填寫(xiě)表單時(shí)，用戶(hù)的猶豫是不可避免的。我們應(yīng)該盡力使這個(gè)過(guò)程變得方便和容易。我們應(yīng)該讓形式設(shè)計(jì)成為優(yōu)勢(shì)，而不是劣勢(shì)。極具針對(duì)性的表單設(shè)計(jì)、周到的細(xì)節(jié)和體驗(yàn)、持續(xù)的改進(jìn)和調(diào)整、高效快捷的提交、流暢的流程是一份優(yōu)秀表單的特征。

我們專(zhuān)注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類(lèi)API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！