無論是網(wǎng)站制作還是APP UI設(shè)計(jì)，表單都是界面中最常見也是最重要的組件之一。它們有廣泛的應(yīng)用，如用戶注冊、訂閱服務(wù)、用戶反饋、問卷調(diào)查、商業(yè)交易等。從數(shù)據(jù)輸入到信息搜索，幾乎無處不在。對(duì)于設(shè)計(jì)師、前端、開發(fā)者來說，要盡可能的重視表單的設(shè)計(jì)，讓它們更容易使用。精心的設(shè)計(jì)會(huì)大大增加用戶體驗(yàn)和交互效率。

在今天的文章中，你會(huì)看到許多關(guān)于表單設(shè)計(jì)的實(shí)用建議，這些建議涉及可用性測試、現(xiàn)場測試、用戶跟蹤和用戶反饋。

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

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

保持問題的直觀順序。你應(yīng)該站在用戶的角度邏輯地提問，而不是按照程序或者數(shù)據(jù)庫的邏輯。如果問題之間沒有邏輯，可以按字母順序排列。

以直觀的順序組織選項(xiàng)。比如選項(xiàng)是日期的時(shí)候，是按照周一周二周三的順序排列的，不會(huì)亂序。

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

2.使用單列列表布局

要填寫的多列表表單容易讓用戶錯(cuò)過，打斷填寫體驗(yàn)。用戶需要按照之字形軌跡填寫整個(gè)表格，不僅影響整個(gè)書寫路徑，降低效率，還會(huì)產(chǎn)生一些干擾。但是，如果使用單個(gè)列，則這種填充路徑是單一的、直接的，并且更加直觀和高效。

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

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

當(dāng)然，僅僅減少輸入字段的數(shù)量是不夠的。你也要注意用戶填表的方式、內(nèi)容和工作量。打字是一種高交互的輸入法，錯(cuò)誤率高，時(shí)間成本高。所以要盡量減少用戶的打字，使用復(fù)選框、單選按鈕、下拉菜單等選項(xiàng)，減少用戶出錯(cuò)的概率。

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

MARD研究所的研究發(fā)現(xiàn)，如果一個(gè)字段與輸入框相比過長或過短，用戶會(huì)懷疑自己輸入的內(nèi)容是否正確，尤其是在輸入CVV(信用卡驗(yàn)證值)等字段時(shí)。

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

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

對(duì)于用戶快速瀏覽表單是否足夠方便？如果用戶很難快速瀏覽表單，那么填寫表單的時(shí)間會(huì)更長。所以，好看和填充是好的形態(tài)設(shè)計(jì)的原則。Matteo Penzo的文章研究了表單和表單中的輸入框應(yīng)該如何布局，以便用戶可以更好更快地瀏覽和填寫。結(jié)論是標(biāo)簽應(yīng)該放在輸入框上方。

如果你想讓用戶盡快瀏覽，把標(biāo)簽和輸入框垂直排列，靠左對(duì)齊。請(qǐng)注意，這是關(guān)于快速瀏覽。這種布局的優(yōu)點(diǎn)是不需要太多的水平空間。用戶只需向下瀏覽，無需左顧右盼。這種布局更容易形成響應(yīng)式UI，兼容不同屏幕，不同應(yīng)用場景。

6.支持靈活多樣的格式

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

比如座機(jī)電話的格式往往是(777)6665544，更方便用戶查看、記錄和記憶。

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

設(shè)計(jì)師通常在表單中放置文本占位符，作為額外的提醒，告訴用戶如何填寫示例。當(dāng)用戶開始鍵入時(shí)，占位符文本將會(huì)消失。

有些設(shè)計(jì)師會(huì)把標(biāo)簽直接作為占位符放在輸入框中，以減少表單的長度和視覺混亂。對(duì)于簡單的表單設(shè)計(jì)，這種設(shè)計(jì)影響不大。當(dāng)表單的信息量很大且內(nèi)容類型多種多樣時(shí)，這種設(shè)計(jì)并不合適。這種設(shè)計(jì)的缺點(diǎn)是：

一旦用戶點(diǎn)擊了輸入框，標(biāo)簽就會(huì)消失，用戶很容易忘記談需要輸入的內(nèi)容和形式。當(dāng)用戶看到輸入框填充內(nèi)容時(shí)，會(huì)誤以為這個(gè)字段是填充的，沒有輸入。

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

8.混淆可選和必填字段

正如我之前所說，盡量避免在表單中添加可選字段。但如果非要加入，至少要知道哪些字段是可選的，哪些是必填的?？蛇x字段數(shù)量控制在1~2個(gè)以內(nèi)，明確告知用戶可選。

9.不要使用重置按鈕

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

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

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

用戶在輸入字段時(shí)，應(yīng)該實(shí)時(shí)告訴用戶填寫的信息是對(duì)還是錯(cuò)，而不是等用戶填寫完所有信息后，才告訴用戶有錯(cuò)誤。

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

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

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

總結(jié)

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

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