表單是比較常見的信息錄入工具。表單的基本三要素：標(biāo)簽（lable）、輸入框（input）、提示語（placeholder）。看似簡單的表單設(shè)計，其實包含了很多的道道。（無知限制了我的想象，看了前輩的總結(jié)，才發(fā)現(xiàn)表單設(shè)計的藝術(shù)所在！當(dāng)你不思考，一味地模范，抄襲，你會覺得ui設(shè)計很簡單；但當(dāng)你懂得越多思考的越多，曾經(jīng)所謂的“簡單”就不在簡單！有一個公眾號“王M爭”寫了很多設(shè)計總結(jié)，還有一本英譯的書《web表單設(shè)計++點石成金的藝術(shù)》，雖然年頭有點早，但內(nèi)容真心棒?。?。

      根據(jù)label標(biāo)簽的位置將表單設(shè)計分為：頂對齊標(biāo)簽、左對齊標(biāo)簽、右對齊標(biāo)簽、行內(nèi)標(biāo)簽。設(shè)計沒有對錯，而任何設(shè)計問題正確的解決方案都取決于具體目標(biāo)、制約因素、特定情景。

頂對齊標(biāo)簽

      在標(biāo)簽對齊方式中，填寫頂對齊標(biāo)簽表單所花的時間最少。因為該對齊方式為表單填寫提供了清晰的完成路徑，人們在填寫時的視覺瀏覽線只需向下移動。這個特點可以被用在希望用戶快速填完表單，快速完成轉(zhuǎn)換率的情境中，比如支付表單頁。

      不管對于標(biāo)簽、還是輸入框而言，頂對齊標(biāo)簽提供了大量的橫向空間，不容易出現(xiàn)字段過程換行導(dǎo)致整個頁面布局混亂或者易讀性降低。

      比如我做過的一個很長的且文字沒辦法在精簡的標(biāo)簽“社會信用代碼證/組織機(jī)構(gòu)證”。再比如我們需要在輸入框中輸入地址，地址也是一個很長的字段。這兩種情況如果在左對齊或者右對齊標(biāo)簽中就可能無法展示完整的信息。

      大量的橫向空間甚至可用于組合相關(guān)輸入框，這是頂對齊標(biāo)簽另一優(yōu)點。（現(xiàn)在這種排版估計不常見）左對齊跟右對齊由于橫向空間減小，對這種布局靈活性不足。

      頂對齊標(biāo)簽的缺點是會占用額外的垂直空間。頂對齊標(biāo)簽的布局設(shè)計上還要注意采用合適的垂直間距，就是同一組的標(biāo)簽和輸入框要緊密，與下一組的間距最好設(shè)計在輸入框50%-75%的高度（這個數(shù)值來自上面說的那本書，我通常輸入框高度會設(shè)置30px,間距20px，這樣算也將近70%。）

右對齊標(biāo)簽

      右對齊標(biāo)簽是比較常見的一種標(biāo)簽樣式，至少我自己在做后臺界面時都采用這種。（任何設(shè)計樣式?jīng)]有對錯，選擇哪種關(guān)鍵取決于場景和具體目標(biāo)，比如手機(jī)端的界面有限，這種表單排版就不適用）

      右對齊標(biāo)簽同樣具有標(biāo)簽跟輸入框相鄰，也能快速填完。但左側(cè)不對齊的緣故，瀏覽的速率低于頂對齊。畢竟我們的閱讀習(xí)慣是從左往右。也就是說如果既要減少垂直空間，有要保證較快的完成表達(dá)，右對齊是不錯的選擇。

      如果標(biāo)簽的文字過多，出現(xiàn)換行，表單的易讀性將降低，這種情況還是比較常見的。還有就是上面提及的，由于左側(cè)標(biāo)簽占用了大量空間，輸入框的內(nèi)容可能會展示不完整，用戶無法確認(rèn)自己輸入的信息，會造成整個操作流程中斷。

左對齊標(biāo)簽

      當(dāng)人們不熟悉表單要收集的數(shù)據(jù)，單純的瀏覽表單的標(biāo)簽，即單純上上下下閱讀標(biāo)簽左欄，不會被輸入框打擾。

      標(biāo)簽跟輸入框的距離較遠(yuǎn)，完成表單的速率最慢。如果希望人們放慢速度，仔細(xì)考慮每一個輸入框，那左對齊標(biāo)簽是一個好辦法。

行內(nèi)標(biāo)簽

      當(dāng)屏幕空間有限，將標(biāo)簽跟輸入框組合成單一的元素，這種就是行內(nèi)標(biāo)簽，這種布局為移動端設(shè)計而生。

      此樣式在用戶輸入內(nèi)容時，標(biāo)簽就消失，用戶可能會忘記需要填寫的到底是什么東東。于是就有在行內(nèi)標(biāo)簽的前面加一個圖標(biāo)，既美觀又不占空間，標(biāo)識度也提高。

      如果表單項很多，還包含一些無法用圖標(biāo)來準(zhǔn)確表達(dá)標(biāo)簽含義（畢竟文字是最能準(zhǔn)確表達(dá)含義，圖標(biāo)只是增強(qiáng)識別性及記憶），那這個行內(nèi)標(biāo)簽就不是好的解決方案。

      還有一個需要注意的是輸入框內(nèi)標(biāo)簽應(yīng)當(dāng)清晰表明是標(biāo)簽，而不是數(shù)據(jù)或者選項。可以前后加“-”來區(qū)分。

Ps:

1. 表單標(biāo)簽應(yīng)當(dāng)使用簡介、直觀、易懂的語言

2. 如果要減少填寫時間，標(biāo)簽長度又靈活多變，可采用頂對齊

3. 如果要減少填寫時間，且垂直空間有限，可采用右對齊

4. 如果希望人們?yōu)g覽表單標(biāo)簽，知道必填問題或者回答多個特定問題，可采用左對齊

5. 表單項少，屏幕空間有限，可采用行內(nèi)標(biāo)簽，注意合適的交互和情境