無(wú)論是注冊(cè)流程，多視圖步進(jìn)或單調(diào)的數(shù)據(jù)輸入界面，表單都是數(shù)字產(chǎn)品的設(shè)計(jì)中最重要的組成部分之一。本文重點(diǎn)介紹了常見的表單設(shè)計(jì)樣式和要避免的注意事項(xiàng)。但請(qǐng)記住，這些都是一般準(zhǔn)則，每一個(gè)規(guī)則都有例外。

1、表單應(yīng)該排成一列

多列排布會(huì)分散用戶的豎向注意力

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

相比使用左對(duì)齊的標(biāo)簽，使用頂部對(duì)齊的標(biāo)簽后，更高比例的用戶會(huì)完成表單的填寫；頂部對(duì)齊的方式也更適用于小屏幕的手機(jī)。不過(guò)，在面臨多選項(xiàng)多數(shù)據(jù)的輸入時(shí)，盡量還是考慮左對(duì)齊標(biāo)簽，這樣用戶更容易一起瀏覽，

3、將標(biāo)簽跟輸入框作為綁定的一組

把標(biāo)簽和輸入框靠在一起，相鄰輸入框間設(shè)置合適的距離避免用戶困惑

4、避免全部大寫

全部大寫的標(biāo)簽會(huì)造成閱讀和瀏覽上的困難

5、如果可選項(xiàng)少于6個(gè)，全部顯示出來(lái)

若將選項(xiàng)隱藏至下拉列表中，用戶需要執(zhí)行兩次點(diǎn)擊才能完成選擇；這種方法最好在選項(xiàng)數(shù)量多于5個(gè)時(shí)再去使用，當(dāng)數(shù)量甚至超過(guò)25個(gè)時(shí)，最好將搜索也融入其中

6、避免使用占位文本作為標(biāo)簽

使用占位文本確實(shí)能優(yōu)化屏幕空間的利用，但其會(huì)帶來(lái)一些可用性問(wèn)題，詳見這里：https://www.nngroup.com/articles/form-design-placeholders/

7、將復(fù)選框（或單選按鈕組）垂直排列

將復(fù)選框垂直排列易于閱讀

8、使“行為召喚”類按鈕具有描述性

一個(gè)行為召喚類按鈕應(yīng)該描述其目標(biāo)意圖

9、在行內(nèi)指明錯(cuò)誤

在錯(cuò)誤發(fā)生的地方告訴用戶，并指明原因

10、在用戶完成輸入后再執(zhí)行行內(nèi)校驗(yàn)（除非在輸入過(guò)程中執(zhí)行有用）

用戶輸入過(guò)程中不要使用行內(nèi)校驗(yàn)——除非確實(shí)能幫到用戶——比如在設(shè)置密碼、用戶名過(guò)程中字符長(zhǎng)度唱超過(guò)限制時(shí)

11、不要隱藏基本的幫助文本

要盡可能顯示出基本的幫助文本。對(duì)于復(fù)雜的幫助文本，可以考慮在輸入框獲得焦點(diǎn)后將其放置于輸入框旁邊

12、主要選項(xiàng)和輔助選項(xiàng)要做區(qū)分

關(guān)于是否應(yīng)該顯示輔助選項(xiàng)甚至在哲學(xué)界引發(fā)了一場(chǎng)很大的爭(zhēng)論

13、使用合適的輸入框長(zhǎng)度

輸入框的長(zhǎng)度應(yīng)該令用戶可預(yù)見能夠輸入的字符長(zhǎng)度，面對(duì)有明確長(zhǎng)度邊界的字段時(shí)（比如手機(jī)號(hào)、郵編），最好這樣做

14、避開使用*，標(biāo)示出可選項(xiàng)

用戶并不總是知道標(biāo)簽后的*暗示什么，還是最好將可選項(xiàng)標(biāo)示出來(lái)

15、將關(guān)聯(lián)信息分組顯示

批量性的長(zhǎng)表單通常令用戶無(wú)法忍受，通過(guò)將相關(guān)信息分成合理的一組，用戶能夠更快的理解表單元素間的關(guān)聯(lián)
 

譯／三達(dá)不留點(diǎn)gpj

原文鏈接：https://uxdesign.cc/design-better-forms-96fadca0f49c#.q9x1ddl3n