表單是產(chǎn)品設(shè)計(jì)中常見且重要的組成部分，對(duì) UX/UI 設(shè)計(jì)師來(lái)說(shuō)，構(gòu)建有效的表單至關(guān)重要。

經(jīng)過(guò)思考的表單設(shè)計(jì)，能夠?yàn)橛脩魩?lái)更好的實(shí)用性、包容性，讓填寫體驗(yàn)更流暢。

讓我們一起來(lái)看看在表單設(shè)計(jì)過(guò)程中需要注意的技巧和問(wèn)題點(diǎn)，創(chuàng)建更合理的表單！

1. 最小化字段數(shù)量

通常表單中的字段越多，用戶完成的可能性就越小。

在表單設(shè)計(jì)過(guò)程中我們要盡可能避免展示非必填的字段，尤其是想引導(dǎo)用戶注冊(cè)或者留資的場(chǎng)景中，避免表單中的某個(gè)字段為選填，保證用戶最大程度的留資轉(zhuǎn)化。

2. 明確標(biāo)記可選字段

在同一個(gè)表單中，要確保用戶清楚哪些字段是必填、哪些是選填的。

用星號(hào)標(biāo)記必填字段是設(shè)計(jì)師最常用的方法，但用戶仍有可能無(wú)法很好地理解星號(hào)的含義。

因此，簡(jiǎn)單地用文本（選填）標(biāo)記某些字段通常不會(huì)在視覺上造成負(fù)擔(dān)，并且更清晰。

3. 使用單列布局

盡管單列布局在視覺上可能不太優(yōu)雅，但可以提高用戶理解、減少輸入錯(cuò)誤，提高整體的轉(zhuǎn)化率。

在單列布局中，用戶“遺漏”輸入的可能性會(huì)更小，因?yàn)樵谔顚憜瘟胁季值谋韱螘r(shí)，視線只需要從上至下垂直移動(dòng)。

當(dāng)用戶錯(cuò)過(guò)某個(gè)字段時(shí)，會(huì)破壞用戶不斷填寫表單取得進(jìn)展的節(jié)奏，因?yàn)樗麄冃枰黄鹊雇瞬⑻顚懜绲淖侄?，產(chǎn)生負(fù)面體驗(yàn)。

4. 將標(biāo)簽放在表單上方

在單列布局中，難經(jīng)常看到表單標(biāo)簽放在輸入框左側(cè)的情況。

這意味著用戶的瀏覽視線仍然是 Z 字型，而不是簡(jiǎn)單的垂直向下，這樣會(huì)增加填寫的復(fù)雜性，填寫過(guò)程更緩慢。

5. 對(duì)標(biāo)簽和字段進(jìn)行分組

在表單設(shè)計(jì)過(guò)程中，要確保表單的字段、相關(guān)的標(biāo)簽有著清晰的層級(jí)分組和間距，并與周圍的元素充分分離。

6. 避免將數(shù)字拆分為多個(gè)輸入字段

當(dāng)填寫電話號(hào)碼、身份證、銀行卡、訂單號(hào)等較長(zhǎng)的數(shù)字時(shí)只需要一個(gè)輸入字段，避免將數(shù)字拆分為多個(gè)輸入字段。分成多個(gè)字段雖然看起來(lái)清楚，但需要用戶多次點(diǎn)擊輸入，操作更繁瑣。

7. 在移動(dòng)端中使用默認(rèn)控件

AndROId 和 iOS 都有用于特定類型數(shù)據(jù)輸入的默認(rèn)組件，例如日期選擇器。

在移動(dòng)端設(shè)計(jì)中，盡可能使用這些內(nèi)置的元素，這樣用戶會(huì)更熟悉原生的選項(xiàng)，表現(xiàn)可能會(huì)更好。

8. 保證字段簡(jiǎn)潔

在設(shè)計(jì)表單的標(biāo)簽時(shí)，目標(biāo)是最少的字段和最大的清晰度。

如果考慮到某個(gè)字段有不確定性，可以使用一些簡(jiǎn)短的提示文本，明確說(shuō)明如何填寫這個(gè)字段。

9. 在按鈕上使用準(zhǔn)確的描述

在按鈕中使用點(diǎn)擊后將進(jìn)行的操作，讓用戶能更明確知道點(diǎn)擊之后的操作。按鈕上最常見的描述是“提交”或者“取消”，代表的含義太不夠具體?？梢钥紤]使用“注冊(cè)”、“發(fā)送信息”、“創(chuàng)建帳戶”等文案。

10. 不要使用占位符作為標(biāo)簽

占位符是指點(diǎn)擊輸入前在輸入框中顯示的提示文本。

使用占位符文本作為標(biāo)簽看起來(lái)雖然很簡(jiǎn)潔，但占位符文本的顏色往往是淺灰色，訪問(wèn)性和識(shí)別度弱，不夠明顯。

另外一旦在輸入框內(nèi)填寫信息后，占位符標(biāo)簽就會(huì)消失，用戶可能會(huì)忘記這個(gè)表單的標(biāo)簽或者輸入的具體要求。

11. 使用內(nèi)聯(lián)驗(yàn)證來(lái)確認(rèn)進(jìn)度

使用內(nèi)聯(lián)驗(yàn)證來(lái)確認(rèn)用戶輸入的進(jìn)度以及輸入的內(nèi)容是否正確。

例如用戶填寫完成一個(gè)字段后，在字段旁出現(xiàn)正確的提示，即時(shí)反饋給用戶。

最后

以上是在表單設(shè)計(jì)中高效且實(shí)用的設(shè)計(jì)技巧，希望通過(guò)這些內(nèi)容能讓你對(duì)表單設(shè)計(jì)有更多的學(xué)習(xí)。

慢慢來(lái)比較快，如覺得有幫助，

作者：Clip設(shè)計(jì)夾