[交互设计]表单-Form的布局研究（上下、左右、内置）

废话：

好久没写文章，一方面是业务繁重，第二方面是发现自己的专业知识一直都是混沌的，知道了很多，接收了很多，都一股豆腐花地浆在大脑里面。趁着最近在做交互设计规范，开始研究起每个细小组件的时候，发现一个下拉弹出框的细节，足够写一片论文的研究了，更何况是一个表单这么复杂的交互元素。

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

一、Form的布局类型

大家都知道，表单的布局常规的分为三大类，上下布局，左右布局，还有一种是文本内置布局。

上下布局

左右布局

文本内置的布局

二、上下布局

下面几种场景，会比较建议用上下模式

1.当表单作为搜索条件的情况

2.输入框数量比较少的情况

3.整个页面比较依赖左对齐的情况

4.多列（一般两列或三列）的表单

下面的图，表单作为两列（多列表单的情况）的搜索条件，在这里就不适合用左右布局了。因为既要保持输入框的左对齐（页面title左对齐，搜索button左对齐，严重依赖左对齐模式），文本字段有长有短，要页面看起来整齐，而且要提升用户的浏览效率，那么，在这个场景下用上下模式是比较合适的。

上下布局会比左右布局更优

下面这个案例是对于多列表单的模式，用上上下布局也是更加清晰明了，虽然这里因为文字在上，输入框在下，使得纵向的长度长了接近一倍，但是因为双（多）列使得表单横向的空间得到更充分的利用。

三、左右布局

左右布局也很常见，一般适用于下面的场景：

1.整个页面布局趋于居中对齐

2.超过一屏的长表单（非常多的输入项）的填写

页面布局趋于居中对齐的情况下，只要输入框的左边对齐，右边的字段长短不一，不会影响整体的信息展示视觉效果。这时候毕竟常见的场景是在弹出框的时候。弹出框一般是居于页面的中央位置。尽管在弹出框中，标题置于左上角，操作按钮在右下角，此时form的布局是左右结构，从视觉展示层面看来也是会比上下机构和谐。

弹出框

长页面表单输入的场景下，表单输入框的长度可以横向拉得更长，以及左右结构在用户浏览的过程中，不会占浪费掉标题字段文本这一行的空间。

长表单-建议左右形式

长表单，不建议上下布局

四、总结

那么有没有一个比较简单的判断标准，可以像抛硬币一样去决定到底用哪种形式呢？

根据个人大量研究表单设计周会，个人会这样建议：

在一个单一场景下面，如果上面的场景都考虑过但还是纠结是上下结构或者左右结构的时候，当纵向空间充裕，横向空间受限的情况下，首选（左对齐）上下结构；当横向空间宽裕，纵向空间受限时，优先选择用左右结构。

仅供参考。

五、后续

上面仅仅是研究了关于表单中，「输入项标题」跟「输入框」的布局。关于文本内置的布局，分别有以下三种形式，接下来有时间可以研究这三种形式的使用场景。

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

1.text作为提示内容，直接被输入内容覆盖（Hint txet）

2.text作为提示字段，固定在输入框内不被覆盖

3.text作为提示内容，采用floating label text的形式

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