【表单标签】要怎么对齐才好？

浏览速度快：可用性测试结果显示，行内标签样式下，人眼从标签移动到域的时间仅为10ms，是几种样式中最快的。视觉路径一路向下，很流畅。

标签文字弹性宽度大，可与域等宽。

节约空间：标签、域合二为一，不单独占空间。

浏览查看、填写均有优势：标签与域的距离接近，同时符合用户从上到下的视觉动线，操作会很连贯、流畅。

标签文字弹性宽度大

页面横向空间节约

Y轴屏效低：对页面纵向空间的利用率会比较低

适合移动端表单填写场景

适用于英文等语言场景，相同意思下需要更多的字符表示，宽度更宽。

web端页面两侧狭长工具栏

希望用户快速填写表单且录入项数量不多时，比如，将复杂的长难表单拆解分步骤填写，每一步骤表单用顶标签表单。

填写优势：标签和域的距离比文字左对齐更近，视觉关联较明确，便于用户填写。

提升Y轴屏效：较于顶标签，节省页面纵向空间。

影响阅读效率：文字右对齐导致左侧参差不齐，不利于快速浏览表单。

标签文字弹性宽度小：标签文字需精简，超过规定宽度出现换行，不适合狭长的空间场景。

常用于web端表单填写场景。

页面纵向空间紧张，但又需要保证填写效率时使用。

快速查看优势：标签文字左侧对齐，方便用户从上到下快速扫视表单整体情况。

提升Y轴屏效：相较于顶标签，节省页面纵向空间。

相较于文字右对齐视觉上更规整。

标签与域的距离最远，人眼从标签移动到域的时间为500ms，视觉动线频繁跳动影响填写表单的效率。

标签文字弹性宽度小：标签文字需精简，超过规定宽度出现换行，不适合狭长的空间场景。

敏感数据表单填写：希望用户进行仔细阅读确认、放慢填写速度时使用，比如，准入资格认证等场景

陌生数据表单填写：表单中含有大量可选的表单域、大量需要高级设置的陌生数据时，或问题无法被分成易处理的内容组，左对齐标签更易于用户多次浏览阅读标签信息。

表单详情查看场景

标签文字弹性宽度大、更灵活

视觉上两端对齐，填写时不容易漏填

纵向空间利用率高

标签与域的距离远，视觉跳动影响填写效率

移动端表单填写

web端两侧狭长工具栏，两端对齐会更美观。

相较于域右对齐，标签、域距离更接近，视觉移动速度更快，从上到下的视觉动线更舒服。

纵向空间利用率高

选择器等类型的表单域，提示图标距离选项较远。

标签文字弹性宽度小，需要宽度限制换行显示。

移动端表单查看/填写