編者按：表單可能是日常UI設(shè)計中最常見的設(shè)計元素了,，它廣泛的應(yīng)用范疇、多年來的積淀使得表單設(shè)計牽涉到大量的,、約定俗成的設(shè)計規(guī)則,。今天我們來聊聊這些最常見的表單設(shè)計準則~

無論是注冊網(wǎng)站還是內(nèi)容輸入，總是回避不了表單這種UI控件,。表單幾乎是每一個數(shù)字產(chǎn)品都無法規(guī)避的組成部分,，它的作用近乎無可替代。不過,，表單這種控件應(yīng)用范疇極為廣泛,，應(yīng)用情況牽涉到方方面面，所以請注意,，今天的文章里我們所提及的設(shè)計準則都只是一般準則,，每一種其實都有例外的情況。不過作為一般準則,，它們可以很好地引導(dǎo)你設(shè)計出一個可用性極佳的表單，同時,，作為設(shè)計師的你還需要根據(jù)實際情況,，靈活地調(diào)整細節(jié)。

接下來,，我們一起來看看這些準則都包含了哪些內(nèi)容吧,。

盡量使用單列設(shè)計

多列的表單容易讓人分心，無法完全垂直瀏覽一口氣完成填寫,。

頂部標簽對齊

標簽和輸入框縱向排列靠左對齊的設(shè)計,，比起兩者并排擺放效果更好。一方面,，這種設(shè)計在桌面端和移動端都足夠友好,，另一方面,，這樣的設(shè)計可以更好兼容不同類型、長短的標簽,，便于用戶視線的縱向掃視,。不過標簽置于輸入框左邊的設(shè)計也有其優(yōu)勢所在：布局更為緊湊，表單長度被壓縮,，顯得更短,，在特定的頁面布局需求下，可能是更好的選擇,。

關(guān)聯(lián)標簽和輸入框

讓相互關(guān)聯(lián)的標簽和輸入框更加靠近,，組成分組，讓不同的分組保持相對較大的距離,，確保用戶不會產(chǎn)生迷惑,。

避免字母全大寫

全部字母大寫會難于閱讀和快速掃視。

低于6個選項就全部展示

當表單中需要選取不同選項的時候,，低于6個選項就不要使用下拉選框來選取了,，因為下拉選框需要兩次點擊完成結(jié)果的選擇，而直接選擇來的更快,。而超過5個選項的時候,，選項過多，適合下拉選框的展示形式,。

你以為只有這些么,？其實表單設(shè)計還有很多細節(jié)需要注意。

更多細節(jié)戳