表单的对齐方式

| 什么是表单?

百度百科的解释是表单在网页中主要负责数据采集功能。用通俗易懂的话来说,就是我们看到的页面需要填写较多相关信息的页面,都叫做表单,如下图。


| 表单的内容

从设计的范围上来看,包含了两个方面:
1.表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
2.表单按钮:包括提交按钮、复位按钮和一般按钮;

| 表单的对齐方式

今天来说说表单的对齐方式,一般情况下表单有如下几种对齐方式:


A类型


优点:
1.Label和Content关系紧密,容易识别和理解;
2.适合需要多语言切换的情况,能够兼容不同长度的文字(因为同一个词语不同语言翻译起来长短不一样,以日语和西班牙语最长),使得界面布局稳定;

缺点:
1.占用纵向空间比较多;
2.当采用多栏排版时,去过其中某一项内容比较长存在换行时会在一定程度上影响布局稳定性。

B类型


优点:
1.Label和Content关系紧密,容易识别和理解;
2.适合单栏排版;
缺点:
1.占用横向空间比较多,特别是当存在比较长的Label时;
2.在需要多语言切换时,有可能破坏布局视觉效果;

C类型


优点:
1.Label的扫描和阅读比较快;
2.适合单栏排版;

缺点:
1.占用横向空间比较多;
2.在某些语言下,一部分的Label和Content之间的距离会比较远;

D类型


优点:
1.节省空间;

缺点:
1.Label和Content不易区分,影响阅读;

| 选哪种比较合适?

个人整体感觉来看,D类的基本使用不到,国内如果不考虑多语言的话,B类对齐方式使用的频率最高,如果考虑海外场景的话,A最有普适性。

往期精彩文章
《关于交互设计的思维抽象》
《在家办公是要写日报的》
《B端设计之导航》
《Lottie - 让动画的实现变得如此简单》

推荐阅读更多精彩内容