表单设计-标签小结

程大牌

上海/UI设计师/6年前/749浏览

版权

表单设计-标签小结

程大牌

“真正的交互性不是关于单击图标或下载文件，而是在鼓励交流。” - 埃德·斯科尔斯伯格

什么是标签？标签负责提出问题。用户所有的操作都要由标签获得信息，从而进行下一步操作。

我们在做弹框设计的时候会涉及到很多标签选项需要用户去填写，这个时候设计师都会有一个疑问，所有的标签应该如何对齐？为什么要选择这种标签对齐方式？我们能遇到各种各样的客户和情境，有时候你想让他们快速填完，有的时候你想让他们深思熟虑后再去填写，那我们如何去判定这些因素，作出更符合当下情境的设计那？

顶部对齐

左对齐

右对齐

输入框内标签对齐

应用场景

顶部对齐标签

关键词：时间短可适性强

下图则为顶部对齐方式，由于标签和输入框的位置非常靠近，用户只需要往一个方向移动自己的视线：向下。这样用户路径非常清晰。顶部标签还能很好的处理标签字段长度，加长或者缩短标签文字并不会对整体页面布局产生负面影响。

像我们比较常见的快递表单来说，地址可能分为省市区等多个维度，这样以来顶部对齐方式就能更好的节省空间。总体来说，当表单内容非常熟悉且没有学习成本的时候，顶部对齐方式，就是最好的选择。

路径非常清晰

顺丰的寄件单采用的顶部对齐

右对齐标签

关键词：时间较短节省垂直空间

右对齐标签与我们的输入框离的也很近，在熟悉的情况下，也是可以快速填写完成的。但是右对齐的布局会造成左侧视觉效果混乱，读写路径也由一直向下变为：左➡️右左➡️右。如果标签文字发生变化，可适性比较差。若字段过长，甚至要分两行的时候，表单的浏览会更加困难。如果我们垂直空间有限，右对齐标签则是很好的选择。

左对齐标签

关键词：增加用户理解节省垂直空间

如果人们不熟悉表单要收集的数据，或者问题无法分成易处理的内容组，左对齐标签浏览表单会更好一些。比如顺丰快递网页版，在寄件的页面，同样也使用了左对齐的额方式。左对齐的方式会让大家阅读标签更容易，能对页面的大致内容有初步了解。但是，由于左对齐会增加标签与输入框的距离，所以用户关联两者关系可能会耗费一定的时间。同样的，与右对齐一样，标签长度的可适性较差。

左对齐是表单填写中速度最慢的一种。

输入框标签

关键词：节省空间简易表单

将标签和输入框组合成单一的用户界面元素，可以最大限度的节省空间。在空间紧缺时，一定是大家首先想到的方法。但是在我们的光标点击输入框时，提示文字也会消失，如果用户对标签不熟悉，则会影响用户的下一步操作。输入框内标签更适用于只有一个问题（如搜索）或者几个输入框的表单或者问题非常熟悉的表单。最后一点，输入框内的标签应当清晰的表明它们是标签而不是数据。如一个筛选框，最好标签命名就让用户理解，你要去选择或者去搜索。