廢話：
好久沒(méi)寫文章，一方面是業(yè)務(wù)繁重，第二方面是發(fā)現(xiàn)自己的專業(yè)知識(shí)一直都是混沌的，知道了很多，接收了很多，都一股豆腐花地漿在大腦里面。趁著最近在做交互設(shè)計(jì)規(guī)范，開(kāi)始研究起每個(gè)細(xì)小組件的時(shí)候，發(fā)現(xiàn)一個(gè)下拉彈出框的細(xì)節(jié)，足夠?qū)懸黄撐牡难芯苛耍螞r是一個(gè)表單這么復(fù)雜的交互元素。
先一部分慢慢來(lái)整合吧。今天梳理關(guān)于Form的布局的一些研究。
一、Form的布局類型
大家都知道，表單的布局常規(guī)的分為三大類，上下布局，左右布局，還有一種是文本內(nèi)置布局。
二、上下布局
下面幾種場(chǎng)景，會(huì)比較建議用上下模式
1.當(dāng)表單作為搜索條件的情況
2.輸入框數(shù)量比較少的情況
3.整個(gè)頁(yè)面比較依賴左對(duì)齊的情況
4.多列（一般兩列或三列）的表單
下面的圖，表單作為兩列（多列表單的情況）的搜索條件，在這里就不適合用左右布局了。因?yàn)榧纫３州斎肟虻淖髮?duì)齊（頁(yè)面title左對(duì)齊，搜索button左對(duì)齊，嚴(yán)重依賴左對(duì)齊模式），文本字段有長(zhǎng)有短，要頁(yè)面看起來(lái)整齊，而且要提升用戶的瀏覽效率，那么，在這個(gè)場(chǎng)景下用上下模式是比較合適的。
下面這個(gè)案例是對(duì)于多列表單的模式，用上上下布局也是更加清晰明了，雖然這里因?yàn)槲淖衷谏希斎肟蛟谙拢沟每v向的長(zhǎng)度長(zhǎng)了接近一倍，但是因?yàn)殡p（多）列使得表單橫向的空間得到更充分的利用。
三、左右布局
左右布局也很常見(jiàn)，一般適用于下面的場(chǎng)景：
1.整個(gè)頁(yè)面布局趨于居中對(duì)齊
2.超過(guò)一屏的長(zhǎng)表單（非常多的輸入項(xiàng)）的填寫
頁(yè)面布局趨于居中對(duì)齊的情況下，只要輸入框的左邊對(duì)齊，右邊的字段長(zhǎng)短不一，不會(huì)影響整體的信息展示視覺(jué)效果。這時(shí)候畢竟常見(jiàn)的場(chǎng)景是在彈出框的時(shí)候。彈出框一般是居于頁(yè)面的中央位置。盡管在彈出框中，標(biāo)題置于左上角，操作按鈕在右下角，此時(shí)form的布局是左右結(jié)構(gòu)，從視覺(jué)展示層面看來(lái)也是會(huì)比上下機(jī)構(gòu)和諧。
長(zhǎng)頁(yè)面表單輸入的場(chǎng)景下，表單輸入框的長(zhǎng)度可以橫向拉得更長(zhǎng)，以及左右結(jié)構(gòu)在用戶瀏覽的過(guò)程中，不會(huì)占浪費(fèi)掉標(biāo)題字段文本這一行的空間。
四、總結(jié)
那么有沒(méi)有一個(gè)比較簡(jiǎn)單的判斷標(biāo)準(zhǔn)，可以像拋硬幣一樣去決定到底用哪種形式呢？
根據(jù)個(gè)人大量研究表單設(shè)計(jì)周會(huì)，個(gè)人會(huì)這樣建議：
在一個(gè)單一場(chǎng)景下面，如果上面的場(chǎng)景都考慮過(guò)但還是糾結(jié)是上下結(jié)構(gòu)或者左右結(jié)構(gòu)的時(shí)候，當(dāng)縱向空間充裕，橫向空間受限的情況下，首選（左對(duì)齊）上下結(jié)構(gòu)；當(dāng)橫向空間寬裕，縱向空間受限時(shí)，優(yōu)先選擇用左右結(jié)構(gòu)。
僅供參考。
五、后續(xù)
上面僅僅是研究了關(guān)于表單中，「輸入項(xiàng)標(biāo)題」跟「輸入框」的布局。關(guān)于文本內(nèi)置的布局，分別有以下三種形式，接下來(lái)有時(shí)間可以研究這三種形式的使用場(chǎng)景。
--------------
1.text作為提示內(nèi)容，直接被輸入內(nèi)容覆蓋（Hint txet）
2.text作為提示字段，固定在輸入框內(nèi)不被覆蓋
3.text作為提示內(nèi)容，采用floating label text的形式
---------------
