表單設(shè)計(jì)很大程度上影響著用戶的使用體驗(yàn)感，ui設(shè)計(jì)中的表單設(shè)計(jì)也是非常重要的，不過它有一定原則可以遵循，下面我們跟隨小編一起來了解一下表單ui設(shè)計(jì)原則的相關(guān)資料吧。

　　表單ui設(shè)計(jì)原則一頂部標(biāo)簽對(duì)齊

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

表單ui設(shè)計(jì)原則

　　表單ui設(shè)計(jì)原則二關(guān)聯(lián)標(biāo)簽和輸入框

　　多列的表單容易讓人分心，無法完全垂直瀏覽一口氣完成填寫。讓相關(guān)聯(lián)的標(biāo)簽和輸入框更靠近，組成分組，讓不同的分組保持相對(duì)大的距離，確保用戶不會(huì)產(chǎn)生困惑。

　　表單ui設(shè)計(jì)原則三低于6個(gè)選項(xiàng)就全部展示

　　當(dāng)表單中需要選取不同選項(xiàng)的時(shí)候，低于6個(gè)選項(xiàng)就不要使用下拉選框來選取了，因?yàn)橄吕x框需要兩次點(diǎn)擊完成結(jié)果的選擇，而直接選擇來的更快。而超過5個(gè)選項(xiàng)的時(shí)候，選項(xiàng)過多，適合下拉選框的展示形式。

　　表單ui設(shè)計(jì)原則四避免將標(biāo)簽作為占位符使用

　　為了讓布局更緊湊，將標(biāo)簽作為占位符放置于輸入框內(nèi)是很有誘惑力的做法，但是這樣存在一定的可用性問題：讓部分用戶迷惑內(nèi)容已經(jīng)被填寫;點(diǎn)擊輸入的時(shí)候占位符消失，有的用戶會(huì)忘記輸入內(nèi)容屬性。

　　表單ui設(shè)計(jì)原則五讓內(nèi)容長(zhǎng)度和輸入框長(zhǎng)度對(duì)應(yīng)

　　輸入框的長(zhǎng)度應(yīng)該同輸入內(nèi)容進(jìn)行對(duì)應(yīng)。諸如郵政編碼、電話號(hào)碼和銀行卡號(hào)這樣的字段，長(zhǎng)度都是固定的，在設(shè)計(jì)它們的輸入框的時(shí)候，輸入框的長(zhǎng)度是很好確定的。

表單ui設(shè)計(jì)原則

　　表單ui設(shè)計(jì)原則六不要隱藏基本的幫助文本

　　將基本的幫助文本直接展示出來，除非你的幫助文本超過100個(gè)單詞，信息量過大。如果幫助文本內(nèi)容過長(zhǎng)，建議置于靠近標(biāo)簽或者輸入框的地方，光標(biāo)懸停時(shí)展示。

　　表單ui設(shè)計(jì)原則七相關(guān)信息分組

　　過長(zhǎng)的表單常常會(huì)讓用戶感到煩躁和不知所措，應(yīng)當(dāng)根據(jù)特定的邏輯、內(nèi)容屬性將相關(guān)的內(nèi)容分組，強(qiáng)化表單整體的形式感，用戶覺得更容易填寫表單，也更容易完成。

　　相信有了小編為你整理的這一份超級(jí)詳細(xì)且超級(jí)實(shí)用的表單ui設(shè)計(jì)原則以后，一定可以幫助你界面設(shè)計(jì)出更加符合用戶使用需求的ui表單哦!