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

leahleahleah

长沙/设计爱好者/208天前/368浏览

版权

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

leahleahleah

表单作为b端系统最常见的组件之一，一些常见的do、don't想必大家已经十分熟悉。今天我们唠一唠【表单标签】这个细节。

在一些成熟的组件库中，大都提供了上下布局的顶标签、左右布局的左标签等样式可供选择。

左标签样式，在不同的产品中，又存在标签文字左对齐、右对齐的情况，那它们之间差异在哪呢?如何选择呢？

最近工作中，正好在梳理相关的规范，于是把自己的一些思考及处理经验整理了一下，分享出来~

先对齐一下语言：表单标签、表单域

Collect

会从这几个维度进行比较，放一个简易版表格，下文细说。

Collect

1. 行内标签

Collect

优势

：

浏览速度快：可用性测试结果显示，行内标签样式下，人眼从标签移动到域的时间仅为10ms，是几种样式中最快的。视觉路径一路向下，很流畅。
标签文字弹性宽度大，可与域等宽。
节约空间：标签、域合二为一，不单独占空间。

劣势

：

用户操作阻塞：如输入框聚焦，输入内容时，行内标签隐藏，用户操作会受阻。

使用场景

：

一般用于用户心智已经十分成熟的页面，比如登录页、注册页等。

2. 顶标签

Collect

优势：

浏览查看、填写均有优势：标签与域的距离接近，同时符合用户从上到下的视觉动线，操作会很连贯、流畅。
标签文字弹性宽度大
页面横向空间节约

劣势：

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

使用场景：

适合移动端表单填写场景
适用于英文等语言场景，相同意思下需要更多的字符表示，宽度更宽。
web端页面两侧狭长工具栏
希望用户快速填写表单且录入项数量不多时，比如，将复杂的长难表单拆解分步骤填写，每一步骤表单用顶标签表单。

3. 左标签文字右对齐

Collect

优势：

填写优势：标签和域的距离比文字左对齐更近，视觉关联较明确，便于用户填写。
提升Y轴屏效：较于顶标签，节省页面纵向空间。

劣势：

影响阅读效率：文字右对齐导致左侧参差不齐，不利于快速浏览表单。
标签文字弹性宽度小：标签文字需精简，超过规定宽度出现换行，不适合狭长的空间场景。

使用场景：

常用于web端表单填写场景。
页面纵向空间紧张，但又需要保证填写效率时使用。

4. 左标签-文字左对齐

Collect

优势：

快速查看优势：标签文字左侧对齐，方便用户从上到下快速扫视表单整体情况。
提升Y轴屏效：相较于顶标签，节省页面纵向空间。
相较于文字右对齐视觉上更规整。

劣势：

标签与域的距离最远，人眼从标签移动到域的时间为500ms，视觉动线频繁跳动影响填写表单的效率。
标签文字弹性宽度小：标签文字需精简，超过规定宽度出现换行，不适合狭长的空间场景。

使用场景：

敏感数据表单填写：希望用户进行仔细阅读确认、放慢填写速度时使用，比如，准入资格认证等场景
陌生数据表单填写：表单中含有大量可选的表单域、大量需要高级设置的陌生数据时，或问题无法被分成易处理的内容组，左对齐标签更易于用户多次浏览阅读标签信息。
表单详情查看场景

表单域也分左、右对齐，常见于移动端，两种对齐方式也一起对比一下。

1.域右对齐

Collect

优势：

标签文字弹性宽度大、更灵活
视觉上两端对齐，填写时不容易漏填
纵向空间利用率高

劣势：

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

使用场景：

移动端表单填写
web端两侧狭长工具栏，两端对齐会更美观。

2.域左对齐

Collect

优势：

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

劣势：

选择器等类型的表单域，提示图标距离选项较远。
标签文字弹性宽度小，需要宽度限制换行显示。

使用场景：

移动端表单查看/填写

以上就是全部内容啦~

在调研的过程中，还发现了移动端的表单标签有些开源的组件支持左标签文字居中对齐，这似乎很少见啊，有小伙伴知道在什么场景下使用吗？

欢迎留言交流~

Report

声明

原创Article UI 表单表单设计 B端