网页表单三元素的布局分析
时间：2023-10-06 01:30:02 | 来源：网站运营
时间：2023-10-06 01:30:02 来源：网站运营
网页表单三元素的布局分析：公众号：小法师们
表单是任何网站都难以避免的内容，用户填写任何一个表单都带有目的性，这是用户与网站沟通的一种方式。在设计时，其布局也需要根据内容进行调整,这里将从标签对齐方式与操作栏位置讨论表单的布局。
表单的三个基本要素：标签Label，输入框 Input，动作Action
标 签：解释该字段的内容，提出问题
输入框：提供信息填写位置
动 作：完成表单，将表单信息传给后台
常见的标签对齐方式（顶对齐、右对齐、左对齐、输入框内标签）
- 顶对齐标签（Top-aligned Labels）
上标签下输入框的布局让这两个元素的位置很近，用户可以直观地将两个元素联系起来，便于阅读
优点：
1.标签名称横向可用的空间较大，可以满足大部分场景，有时候可以放下一些辅助文字
2.多平台适配时几乎不用做调整
3.适用于多语言版本
缺点：
1. 垂直空间占用较大
2. 全局扫描标签名称时不够清晰，被输入框本身和框内值干扰
建议：
虽然这种方式下标签与输入框的对应关系歧义较小，但还是建议使用亲密性原则，标签与对应输入框的间距小于该标签与上一个输入框的距离（二者距离关系可参考最小尺寸单位并让其符合一定的倍数关系）
- 右对齐标签（Right-aligned Labels）
标签名称和输入框依然相邻，但左侧标签名称宽度不同
优点：
1.占用的垂直空间较少
2.单行标签名称和输入框靠近，便于填写，检查
缺点：
1. 浏览标签名称时视觉左右来回移动跨度大，可读性降低
2.多语言情况下标签长度难以适应，可能会换行
3.长标签在多平台适配时样式上需要重新调整
- 左对齐标签（Left-aligned Labels）
标签左对齐，与输入框的距离由标签名称长度决定
优点：
1.单独浏览标签时清晰
2.占用的垂直空间较少
缺点：
1. 标签与输入框的间距加大，且受最长标签影响
2. 表单过长填写时需要花时间寻找对应关系，认知压力沉重
3.多语言情况下标签长度难以适应，可能会换行
4.长标签在多平台适配时样式上需要重新调整
标签名称直接放在输入框内
优点：
横向、垂直占用的空间最少
缺点：
1.只适用于文本类字段
2.视觉上像是已被填写内容，用户可能会产生在哪填写的困惑
3.填写内容后标签消失，填写和检查时无参考，可用性差
建议：
标签名称与输入框内字段值应在样式上有所区别
表单动作栏（按钮左对齐、按钮右对齐、按钮居中对齐、顶部按钮）
按钮起着完成表单填写，传送表单数据的重要作用。作为完成表单的最后一步，若在按钮的操作上体验不佳会让用户沮丧，网站受损，下面来分析几种网页表单按钮常见的布局。
符合视觉从上到下的垂直移动的特点，当表单横向空间较小时，这种布局的按钮眼睛移动距离最短，很好的传达了如何完成表格。Luke Wroblewski在他有关眼动研究的报告中证实了单列表单中按钮与输入框左对齐时操作效率最高
（
https://www.lukew.com/ff/entry.asp?571）
此外，在用户放大页面的场景下，左对齐按钮和标签名称都在左侧区域，按钮依然可见。
当表单采用多栏布局时，用户在右侧填写完最后一项内容后需要将视觉移至左侧按钮处，虽然会加长眼睛的移动距离，但符合眼睛移动轨迹，很少出现找不到按钮的情况。
当网站需要用户在填写完表单后优先关注其他提示信息时，可以采用左提示信息右按钮的布局，提高用户对这段提示信息的关注概率。
建议：
右对齐按钮避免出现按钮位置超过输入框最右侧的情况，这样会让用户花费时间去寻找按钮，可用性降低。（在Luke Wroblewski的眼动实验中，这种布局的按钮操作效率最低）
居中对齐多在横向或垂直空间占比较大的表单中使用，这时的按钮为了适应页面上的元素往往较大，再配合上居中对齐的方式，视觉上可以达到平衡且严肃的效果，给用户沉稳的观感，并提高用户对表单内容的关注程度。
例：阿里巴巴采购网的询价表单，从样式上看几乎占满了整个版面从内容上看这份表单相对正式，带有商业性质，需要仔细填写）
按钮放在顶部时可视为其操作是针对页面全局的，适用于表单过长或需要分多个步骤完成时，此时顶部按钮永远保持在用户的视野范围内，给到用户操作暗示。
例如一个表单需要三步完成，在用户刚进入第三步时，就可以看到按钮名称由之前的“下一步”变为“提交”，暗示这是表单的最后一页，一定程度上缓解填写复杂表单的焦躁情绪。
建议：
1.顶部按钮一定要清晰，保证按钮一目了然，减少其他视觉元素对按钮的干扰
2.若一页表单过长需要滚动才能完成时，不要让按钮随表单一起滚动，这样会增加用户寻找按钮的难度，应使用悬浮按钮（Sticky Form Actions），保持可见性。
总结 以上内容从表单单个元素的布局进行了分析，但在实际业务场景中，表单会由单个元素的单一或多种形态组成，很多时候现有的设计理论满足不了业务需求，因此我们可以从上述的几个角度出发，结合实际业务，动态地寻找最合适的解决方案。
欢迎大家关注我的原创公众号，一些ui ux的分享
在线咨询
