作者網(wǎng)址：https://uxdesign.cc/@CoyleAndrew

原文地址：Design Better Forms

譯者：mantfly

此文由非專業(yè)人士翻譯自Medium，仍在不斷修訂中。

在設(shè)計(jì)表單的過程中，設(shè)計(jì)師常常遇到的問題，以及如何解決它們。

表單最好是一列

多列表單會影響用戶的垂直方向感

標(biāo)簽和表格對齊

標(biāo)簽頂部對齊的表格比左對齊讓用戶完成度更高，并且頂部對齊的標(biāo)簽在移動端更容易轉(zhuǎn)換。然而，為了更容易瀏覽，多數(shù)據(jù)多選擇入口用左對齊的標(biāo)簽，相比頂對齊標(biāo)簽，可以減少高度，做更多提示。

將標(biāo)簽和輸入框分組

標(biāo)簽和輸入框放在一起，確保組與組之間空間足夠大讓用戶不會混淆。

避免全大寫

全大寫不容易閱讀瀏覽。

選項(xiàng)少于6個(gè)可以全部展示

下拉列表需要兩次點(diǎn)擊并且隱藏了選項(xiàng)，超過5個(gè)選項(xiàng)就使用輸入選擇器，超過25個(gè)選項(xiàng)就用相關(guān)搜索的下拉菜單。

不要把標(biāo)簽放在輸入框里

把標(biāo)簽放輸入框可以優(yōu)化空間，尼爾森諾曼集團(tuán)的Katie Sherwin總結(jié)過這個(gè)方式導(dǎo)致的一些使用問題。

把復(fù)選框（和單選按鈕）一行行列出來以便瀏覽

給出明確響應(yīng)的描述（CTAs: call to action）

明確的響應(yīng)表明意圖。

標(biāo)明填寫的錯(cuò)誤

給用戶標(biāo)出哪里出錯(cuò)了并給出原因。

當(dāng)用戶打字的時(shí)候不要給錯(cuò)誤提示（除非對他們打字過程有幫助）

不要隱藏基礎(chǔ)的提示信息

盡可能保留基本的幫助信息。對于復(fù)雜的幫助信息，可以在點(diǎn)擊輸入框后出現(xiàn)在輸入框后面。

把主要步驟和次要步驟區(qū)分開來

使用字段長度作為輸入框長度

輸入框的長度容納內(nèi)容的長度。類似電話號碼、郵編等等可以用到。

不要用*號來表示必填項(xiàng)目

用戶常常不知道*表達(dá)的是什么，相反，去設(shè)置可選填的會更好。

把相關(guān)的信息放在一起

用戶的思考的時(shí)間是集中的，太長的表單會讓人疲勞。有邏輯的分組會讓用戶更快熟悉表單。