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

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

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

nerror="javascript:errorimg.call(this);">

优势：

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

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

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

优势：

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

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

③ 左标签-文字右对齐

劣势：

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

④ 左标签-文字左对齐

劣势：

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

⑤ 域-右对齐

nerror="javascript:errorimg.call(this);">

劣势：

• 标签与域的距离远，视觉跳动影响填写效率。
• 使用场景：
• 移动端表单填写。
• web端两侧狭长工具栏，两端对齐会更美观。

优势：

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

劣势：

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

本文由人人都是产品经理作者【Clippp】，微信公众号：【Clip设计夹】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议。