上篇文章介绍了文本框的拆解，接下来就看看基础的文本框布局方式。内容有点多，都是个人的学习总结，大家可以简单看一下。

二、基础的文本框布局方式

我自认为，激励设计师不停探索文本框新的交互形式的根本原因之一，一定包含总让人头疼的排版问题。在解决了基本视觉问题之后，才是思考如何设计文本框来提升用户的填写和使用效率。

例如前面我们所看到的最基础的文本框样式，如果简单地进行单列布局，自然而然会出现让众多设计师纠结的一个问题：标签文本究竟应该如何对齐？
如果标签文本采用右对齐，标签文本的长短问题容易导致左侧的视觉隐形边界错乱，用户的规律眼动容易被打乱；

如果标签文本采用左对齐，文本的长短问题又会导致部分较短标签文本与容器间距增大，让用户从左至右浏览的效率降低，并且看起来不够协调。

于是乎文本框的布局方式有了进一步的演变：标签文本与容器顶端对齐。
顶端对齐的方式使得用户眼动变得十分规律，竖直向下浏览可以便捷地理解标签文本并进行填写，文本的长短问题不再成为干扰设计师进行排版的一个纠结点。

但纵向布局的的方式只是把问题迁移到了另一个维度，那就是在表单数据量过多时，纵向布局会使得纵向空间耗损增加，用户需要不停地滑动页面才能实现表单的完整填写。

这么看来，文本框的布局需要多方位评估标签文本长度、表单数据量等问题，才能对具体场景进行有效设计。

关于基础的文本框布局方式就先讲到这里了，接下来要总结的内容就是：文本框的改良。由于篇幅较长，会在下篇文章中进行介绍，继续去看看吧！

以上就是“交互设计拆解——文本框（二）”的内容了，如果你还想了解其他相关内容，可以来产品壹佰官方网站。