廢話：

好久沒寫文章，一方面是業(yè)務繁重，第二方面是發(fā)現(xiàn)自己的專業(yè)知識一直都是混沌的，知道了很多，接收了很多，都一股豆腐花地漿在大腦里面。趁著最近在做交互設計規(guī)范，開始研究起每個細小組件的時候，發(fā)現(xiàn)一個下拉彈出框的細節(jié)，足夠寫一片論文的研究了，更何況是一個表單這么復雜的交互元素。

先一部分慢慢來整合吧。今天梳理關于Form的布局的一些研究。

一、Form的布局類型

大家都知道，表單的布局常規(guī)的分為三大類，上下布局，左右布局，還有一種是文本內置布局。

上下布局

左右布局

文本內置的布局

二、上下布局

下面幾種場景，會比較建議用上下模式

1.當表單作為搜索條件的情況

2.輸入框數(shù)量比較少的情況

3.整個頁面比較依賴左對齊的情況

4.多列（一般兩列或三列）的表單

下面的圖，表單作為兩列（多列表單的情況）的搜索條件，在這里就不適合用左右布局了。因為既要保持輸入框的左對齊（頁面title左對齊，搜索button左對齊，嚴重依賴左對齊模式），文本字段有長有短，要頁面看起來整齊，而且要提升用戶的瀏覽效率，那么，在這個場景下用上下模式是比較合適的。

上下布局會比左右布局更優(yōu)

下面這個案例是對于多列表單的模式，用上上下布局也是更加清晰明了，雖然這里因為文字在上，輸入框在下，使得縱向的長度長了接近一倍，但是因為雙（多）列使得表單橫向的空間得到更充分的利用。

三、左右布局

左右布局也很常見，一般適用于下面的場景：

1.整個頁面布局趨于居中對齊

2.超過一屏的長表單（非常多的輸入項）的填寫

頁面布局趨于居中對齊的情況下，只要輸入框的左邊對齊，右邊的字段長短不一，不會影響整體的信息展示視覺效果。這時候畢竟常見的場景是在彈出框的時候。彈出框一般是居于頁面的中央位置。盡管在彈出框中，標題置于左上角，操作按鈕在右下角，此時form的布局是左右結構，從視覺展示層面看來也是會比上下機構和諧。

彈出框

長頁面表單輸入的場景下，表單輸入框的長度可以橫向拉得更長，以及左右結構在用戶瀏覽的過程中，不會占浪費掉標題字段文本這一行的空間。

長表單-建議左右形式

長表單，不建議上下布局

四、總結

那么有沒有一個比較簡單的判斷標準，可以像拋硬幣一樣去決定到底用哪種形式呢？

根據(jù)個人大量研究表單設計周會，個人會這樣建議：

在一個單一場景下面，如果上面的場景都考慮過但還是糾結是上下結構或者左右結構的時候，當縱向空間充裕，橫向空間受限的情況下，首選（左對齊）上下結構；當橫向空間寬裕，縱向空間受限時，優(yōu)先選擇用左右結構。

僅供參考。

五、后續(xù)

上面僅僅是研究了關于表單中，「輸入項標題」跟「輸入框」的布局。關于文本內置的布局，分別有以下三種形式，接下來有時間可以研究這三種形式的使用場景。

--------------

1.text作為提示內容，直接被輸入內容覆蓋（Hint txet）

2.text作為提示字段，固定在輸入框內不被覆蓋

3.text作為提示內容，采用floating label text的形式

---------------