辑导语：表单是最常用的信息录入工具，日常生活中，我们每个人都在和各种表单打交道。本文作者结合案例对表单标签的样式及设计注意事项进行了详细的说明，相信对表单标签不熟悉的同学看完后肯定会有不少的收获~

输入设计和表单设计是产品经理与交互设计师的核心技能，你可以把它们用在各类软件和各种平台上。

一、首先什么是标签？

我们先来复习一下文本输入框的构成。

△文本输入框的构成

1. 文本容器/Container—可交互的输入区域
2. 输入文本/Input text—所输入的文本内容
3. 标签文本/Label Text—告诉用户这个表单字段中要输入的内容属性
4. 占位符文本/Placeholder text—输入信息的范例，用户后续需要用自己的内容替代它
5. 帮助和验证（可选）/Helper or Validation text(optional)—提供上下文信息和验证信息
6. 引导图标（可选）/Leading icon(optional)—描述文本字段所需的输入类型和特征
7. 后缀图标（可选）/Trailing icon(optional)—对输入内容进行控制，比如显示和隐藏

我们今天要聊的就是第3点：标签文本/Label Text。

标签应该用人们能明白的语言提出简洁问题，以便于回答。

但依旧依赖于表单元素的布局。

二、标签对齐方式

输入框标签应当顶对齐、右对齐还是左对齐？

先来看看这几种对齐方式的优缺点。

1. 顶对齐标签/Top aligned labels

△顶对齐标签

优点：

• 顶对齐时间最快，由于标签和输入框的位置非常靠近，处理起来毫不费力。清晰的完成路径，只需要往下移动。
• 提供了大量的横向空间，可以用来扩大或者收缩标签文字，而不会对整个页面布局产生负面影响。
• 比如说法语、德语或荷兰语比英语长很多的语言，容易对表单布局产生破坏力。
• 横向空间的富余，可以以多种方式组合相关输入框。

缺点：

eg: Amazon 寄送地址表单的顶对齐标签提供了充裕空间，可水平分组相关内容.

2. 左对齐标签/Left-aligned labels

△左对齐标签

优点：

• 容易浏览标签，只要上下浏览表单问题，不会被输入框打断。
• 垂直空间占用少。

缺点：

• 标签和相关输入框相邻间距过大，延长完成时间。
• 根据马泰奥的研究，“典型扫视时间为500毫秒，很长，说明用户经历着沉重的认知压力。”
• 虽然速度是最慢的，但从辩证的角度来看，完成时间较长并不一定是坏事。
• 有时候我们需要用户谨慎的对待表单的填写，特别是表单含有大量可选输入框，类似“使用偏好”或者高级设置陌生数据时，就可以使用左对齐标签。

3. 右对齐标签/Right-aligned labels

△右对齐标签

优点：

缺点：

• 右对齐布局造成左侧不齐，可读性降低；
• 不够灵活，如果标签需要两行文字进行展示，会导致阅读困难。
• 但如果既要减少表单占用的垂直空间，又要减少填表时间的话，右对齐标签不失为一个较好的选择。

eg: Jira 创建故事表单采用右对齐标签布局

4. 输入框内标签/Label in the input box

优点：

对屏幕的占用空间非常小

缺点：

• 填写输入框时，输入框的标签会消失，因此用户看不到提示；
• 填完后，也无法检查对错。
• 且输入框内的标签要明确的表明自己是标签，而不是已填数据。
• 输入框内标签更适合用于只有一个问题（比如搜索框）或者几个输入框的表单或者问题非常熟悉的表单（比如通讯录）。

eg：Dribbble 搜索页面为输入框内标签

5. 浮动标签/Float label

当用户在Text field中输入内容以后，内嵌Label会浮动到Text field上方，成为顶端对齐。

优点：兼具内嵌Label和顶端对齐的优点

缺点：输入内容后，标签显示过小，对于小屏幕和视力不佳的用户来说是个挑战。

eg：Yahoo登录页面，输入框为浮动标签

三、总结

• 顶对齐标签，能减少填写时间，适用于本地化，标签长度可以灵活多变。
• 右对齐标签，与顶对齐标签类似，但可以减少垂直空间的占用。
• 左对齐标签，要求人们仔细填写或者回答多个问题中的若干特定问题。
• 输入框内标签，表单问题少，屏幕空间非常有限。
• 浮动标签，注意场景与使用者视力问题。
• 注意区分标签与数据。

扩展阅读：

能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行单一运动。

事实上，马泰奥·彭佐从2006年7月进行的眼动研究发现，顶对齐标签方式从标签移动到输入框只要50毫秒，比左对齐标签方式快了10倍，后者需要500毫秒；比右对齐标签方式快2倍，后者高达240毫秒。

可能觉得几百毫秒，觉得也没有多少多长时间，但是一旦涉及到需要填写几百个录入项，时间也是成倍的。

所以在标签对齐上要根据场景选择合适的方式。

作者：Neko，支付产品经理/UI/UX；公众号：吱了一声

本文由 @Neko 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自pexels，基于CC0协议

辑导语：B端表单若设计不好，则容易导致不佳的用户体验，无法给用户有效的信息反馈。那么，应该如何优化B端表单设计、提高B端表单的操作效率呢？也许你需要在交互形式、表单页面、输入框等方面做好优化。本文作者总结了提高B端表单操作效率的7个技巧，不妨来看一下。

一些同学在设计B端表单时，不知道需要考虑哪些问题，直接使用Ant Design提供的表单模版，或者参考竞品，上线后用户反馈难用，产品反馈拓展性低。

那么该如何提高B端表单操作效率呢？这里有7个技巧分享给大家。

目录

1. 不滥用表单的交互形式；
2. 将复杂表单进行合理的归纳简化；
3. 复杂表单布局要考虑关联性；
4. 表单视觉可以不平衡；
5. 标签对齐方式要选对；
6. 表单页面要考虑适配方式；
7. 输入框不用整齐划一，可以错落有致。

一、不滥用表单的交互形式

表单的交互设计，有时候往往会被设计所忽略，或者所有交互都采用弹窗，本可以气泡卡片一步解决，使用弹窗却要两步完成，本需要界面跳转承载复杂表单，却使用弹窗不停滚动。

在表单设计时，该如何选择合适的交互形式呢？首先我们需要了解常用的交互形式有哪些。

常用的交互形式主要有：原位编辑、气泡卡片、弹窗、抽屉、全屏弹窗、页面跳转等。

表单交互方式的选择，我们可以参考 Ant Design 表单设计规范，从关联性和复杂度进行判断，在选择时，我们优先考虑信息的复杂度，其次在考虑相关性。

1）当信息复杂度低，同时相关性高时，我们可以选择原位编辑/气泡卡片、弹窗的交互方式。

比如钉钉任务详情页面的数据编辑，相关度极高，同时信息不复杂，那么就可选择原位编辑，在使用原位编辑时，需要根据业务进行判断，是否有必要进行原位编辑。

而Ones的筛选，其数据量相对较多，但是相关性极高，那么就可以选择气泡的形式；有赞教育绑定销售员，采用了弹窗的形式，这里也可采取气泡的形式。

2）当信息复杂度高，但关联性也较高时，我们可以使用抽屉、全屏弹窗的交互方式。

比如神策数据，信息量较为复杂，同时有一定相关性，数据创建后即可在列表中查看；但是当数据特别复杂，同时新增入口位置较多时，可采用全屏弹窗的方式，在CRM行业较常见，比如销帮帮。

其优势是，当从详情页进行新增或编辑时，编辑完成后，详情页数据即可展示当前新增的信息，如果是页面表单，需要刷新数据才可以查看到，体验感较低。

3）当信息复杂度高或信息独立时，我们可以使用页面的交互方式。

比如有赞的新增报名，其关联性就不像CRM那么强，因此直接采用页面的交互方式就可以；而阿里巴巴的创建网络信息复杂度较高，同时相对独立，因此也适合采用页面进行交互。

二、将复杂表单进行合理的归纳简化

对于复杂表单，在设计时需要对其进行合理的归纳简化，降低表单填写负荷。

一般来说，表单可分为基础表单、分步表单、锚点定位、标签页这几类。

1）当表单条目数在7个内，表单较为简单，这时候我们一般直接采用基础表单，比如有赞更换负责人页面：

2）当表单条目数在7个以上，可归类到复杂表单，这时候就需要根据表单的复杂度、逻辑性、关联性进行判断，选择合适的分组方式，进行归纳简化，降低表单填写负荷。具体该如何选择呢？

① 如果每个组之间有逻辑先后顺序，那么推荐使用分步表单，比如阿里云的购买。

② 如果每个组之间关联性较强，就不适合分开，推荐使用锚点定位，比如销帮帮的编辑销售机会、新建客户等表单都是采用锚点定位。

③ 如果每个组既没有逻辑先后顺序，也没有关联性时，推荐使用标签分组，比如飞书的发票管理，都是相对独立的表单。

三、复杂表单布局要考虑关联性

上面提到了为复杂表单进行合理的归纳简化，但是归纳简化后采用什么布局方式更合适呢？

表单页面的布局方式，综合起来可分为普通布局、弱分组、区域内分组、卡片分组这四种。

在选择时，和表单的交互方式选择一样，可参考 Ant Design 表单设计规范，从关联性和复杂度进行判断，在选择时，我们优先考虑信息的复杂度，其次再考虑相关性。

1）当条目数在7个内时，仍然使用基础布局，比如网易互客的企业信息资料新增：

2）当表单条目数在7个以上，可归类到复杂表单，这时候仍然根据表单的复杂度、逻辑性、关联性进行判断，选择合适的布局方式，提高表单的浏览效率和屏效需求。

① 当表单空间有限，且相关性较强时，推荐使用弱分组，将多个组合在一行中，形成分组的暗示。

PS：弱分组也可和区域内分组和卡片分组组合使用，从而提高屏效。

② 当条目数在7-15个内时，相关性较强时，使用区域内分组较为适合，比如网易七鱼的新建在线质检模版：

③ 当条目数在15个以上，推荐使用卡片布局较为合适，比如阿里云服务购买表单：

四、表单视觉可以不平衡

在设计表单时，我们总觉得视觉重心偏左，因此在设计时我们总想让视觉变得更平衡。

比如京东云，使用大屏电脑看，信息全集中在左边，感觉视觉有点失衡。而类似飞书的居中设计，视觉会更平衡。

于是我在设计时也在考虑要不要用居中设计的方式呢？但是当我继续查找资料时发现，其实在表单的设计中我们不用过度的追求视觉平衡，首先人的视觉动线遵循F模型，同时根据行业相关信息可读性研究，眼动舒适角度为30度。

因此当表单信息较少，不考虑屏效时，采用从上往下的方式，据研究这是能够最高效完成任务的布局方式。

为了印证这个结论，我收集了近50个B端后台，共507个表单，竟然发现只有2个产品用了视觉重心居中的设计。

这个结果让我挺诧异的，但又在情理之中。一个是飞书设置类表单、一个是百度云购买表单。

设置类表单，数据项较少，相对比较简单，使用居中设计可以让用户更聚焦。

而百度云的表单，虽然也是视觉居中，但是将侧边栏进行收起，在设计上和我们普通网页设计方式类似，从而承载更多的信息。

而其他的CRM、ERP、云产品、OA、项目研发、文档产品、在线教育、HR、BI等系统产品的录入类表单均采用的视觉偏左的设计方式，不管表单拓展多复杂的信息，都不会影响整体的一致性。

所以，在设计表单时不用过度追求视觉平衡，而是需要优先考虑信息操作效率，信息阅读效率。

五、标签对齐方式要选对

标签分为左标签、右标签、顶标签三种，不同的对齐方式，使用场景不同。

具体该如何选择呢？我们需要从3个方面进行考虑：操作效率、标签长度、屏效、视觉对齐。

1. 操作效率

根据Matteo Penzo的研究总结得到的浏览时间表发现，标签移动到输入框的时间，顶部对齐最快只要50ms，其次是右对齐240ms，左对齐耗费时间最长500ms。

因此当以操作效率为主时，推荐使用顶对齐的方式。

2. 标签长度

当标签长度超过8个字，或者需要考虑中英文双版本时，推荐使用顶对齐的方式，其容纳的标签文字更多，拓展性更好，比如Ones的建任务的标签，就采用标签顶对齐的方式：

3. 屏效

如果只考虑屏效，那么标签左对齐右对齐均可，但是如果还考虑表单录入效率，那么推荐使用标签右对齐的方式，比如蜂鸟汇报：

4. 视觉对齐

一般情况我们在设计表单，优先考虑效率和屏效，但在竞品分析中发现，竟然有50%的表单采用了标签左对齐的方式，因为这样可以让标签和其他内容保持对齐，比如神策网：

因此，在进行标签对齐方式的选择时，我们首先要清楚以什么为主，什么是可以牺牲的，比如神策网选择了视觉对齐，而牺牲的是操作效率。

六、表单页面要考虑适配方式

设计时如果不考虑适配方式，那么前端可能不考虑，可能用他觉得合理的方式，在实际使用时就会导致体验不好，后面想在调整就得重新等排期了，因此在设计时就需要把适配方式定好。

表单在设计时一般有2种适配方式，一种是固定适配，一种是间距适配。

1. 固定适配，设计需要注意

设计时，需要保证最小分辨率能够正常显示，表单中信息宽度固定，不随分辨率变化而变化。该方式适合用于表单页面的适配中。

当采用弱分组布局时，随分辨率变小，数据项自动掉下来，其他保持不变。

这里最小分辨率大家根据自己公司情况而定，我在设计时设定1366X768为最小分辨率。

下图是百度统计流量研究所，大家可以看看数据，具体以自身公司而定，因为一些单位可能还在使用1280X720的分辨率，那么就设定1280为最小兼容的分辨率。

2. 间距适配，和移动端类似，间距固定，组件自适应

该适应方式在弹窗、抽屉中较为使用，表单页中不太推荐使用该方式，因为当分辨率变大，眼动的视觉变大，不利于信息浏览。

七、输入框不用整齐划一，可以错落有致

表单页在设计时，我们总是纠结到底整齐排列好，还是错落排列好，错落排列又该遵循什么规则呢，这里推荐大家阅读Ant_Design的文章《整齐划一？不如错落有致》。

文章提到，如果表单跟随空间自适应会造成不稳定的情况，线上效果会呈现以下效果。

同时输入框的宽度不应该自适应，而需要根据填写内容的长度来定，减轻判断负担。

最后，错落有致更舒适，整齐划一在视线上有隐性的截断，会感觉缺了一块内容。

如何错落有致呢？有什么规则吗？

Ant_Design设定104px 为原子级宽度尺码 XS，通过倍数+间距叠加的方式（此处计算间距的原因是为了兼顾组合 input 和单个 input 对齐问题）从小到大去依次推导出更大的四种宽度来拟合前面划分的尺码。最终得到如下5种宽度尺码和对齐关系。

通过对比，我们可以明显地看到，错落有致的排列方式更加舒适。

当然，你在设计时，最小原子的宽度不一定设置为104，也可根据业务情况将最小原子XS设置为可容纳6个中文汉字，然后在通过如下规则进行换算。

八、画重点

本文针对如何提高B端表单操作效率，整理了7个技巧：

1. 不滥用表单的交互形式；
2. 将复杂表单进行合理的归纳简化；
3. 复杂表单布局要考虑关联性；
4. 表单视觉可以不平衡；
5. 标签对齐方式要选对；
6. 表单页面要考虑适配方式；
7. 输入框不用整齐划一，可以错落有致。

希望通过本文的分享，让大家有一个更清晰的认知，从而提高表单操作效率。

参考引文：

《且曼B端产品设计之表单设计》

人眼的视角

http://t.hk.uy/Chp

Label Placement in Forms

http://t.hk.uy/Chr

浅谈B端表单设计

https://mp.weixin.qq.com/s/L1bB3qlzstK6T4LkLEPtKQ

Ant Design 表单设计规范

https://ant.design/docs/spec/research-form-cn

Ant Design ProForm 高级表单

https://procomponents.ant.design/components/form

QueryFilter / LightFilter 筛选表单

https://procomponents.ant.design/components/query-filter

整齐划一，不如错落有致

https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html

作者：风筝KK，公众号：海盐社

本文由 @风筝KK 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

签制作软件中在进行绘制文字的时候，其中文字的排版对齐方式有好几种，今天就给大家分享一下都有哪些文字对齐方式。

首先打开标签制作软件，新建标签，设置标签尺寸，然后点击“查看”—“对齐”就可以看到软件的对齐方式有那几种了。

左对齐：非常好理解就选中文字之后排版的样式就是左对齐了。其余的右对齐、顶对齐、底对齐、都可以按照这种方式去进行理解排版样式。比如说在软件中绘制一个文字，选中右对齐之后点击确认，效果如下：

看了上面的效果就理解了右对齐方式。就是在绘制的文字蓝色区域的框框中文字排版样式是右对齐。

除了上面的对齐方式之外，还有一种文字的对齐方式是普通文本中“两端对齐”的方式，接下来我将绘制的普通文本设置对齐方式为两端对齐，并设置一下“字符等宽” ，点击确认之后就可以看到效果。

以上就是在标签制作软件中绘制绘制文字时候的几种对齐方式了，有需要的可根据实际的需求去进行自定义设置。