关于产品经理:浅谈B端产品的表单元素设计

B 端产品总是须要对各种数据进行录入、治理和保护……其中，表单作为承载信息的根本组件，是呈现频率最高的元素之一。看似简略、根底的小组件，组合在一起却有很多细节须要斟酌。

最近在做和数据录入相干的设计，经常会纠结：标签到底是左对齐还是右对齐，按钮是放在右边还是左边，页面是不是要为了对立而采纳一样的布局，等等。

为了找到尽可能实用的设计方案，我翻阅了许多设计师的分享，也做了一些调研。

只管远未“精通”，但也算有些心得，因而演绎了表单元素的组成以及实用场景，写了这篇短文，心愿能对同样正在做 toB 产品设计的敌人们有所助益。

表单次要由这四个重要元素组成：标签、输出域、操作按钮、帮忙信息。

标签次要是解释输出项的含意，用户会依据标签输出相应的内容，个别不宜太长，须要简洁明了，疾速让用户了解。

表单标签的常见展示模式有 4 种，别离是 顶对齐、左对齐、右对齐、表单内对齐。

标签位于输入框上方，并与输入框放弃左对齐。

长处：当页面字段不多时，标签凑近输入框，这种形式能够放弃人眼程度方向集中在一个较小的区域。

用户眼光能够更快的从标签移到输出字段，
能够疾速实现并缩小认知累赘。

同时标签独自占一行，不受长度的影响，更适应产品国际化。

毛病：标签加输入框的款式，占用垂直空间较大。当表单数量过多时会显得页面十分长，让用户感到疲劳。屏幕利用率升高，实用于字段较少的表单。

标签和输入框并排显示，且所有标签左对齐。

长处：占用较少的垂直空间，当标签内容为生疏内容时，左对齐易于浏览，能够让用户很容易感知标签和输入框的分割。

毛病：因为标签的长度不同，左对齐后会导致局部标签和输入框间隔很远，须要更多横向空间。标签和输入框之间的空白边缘不统一，不利于用户填写。

标签和输入框并排显示，且所有标签都右对齐。

长处：占用较少的垂直空间，标签和输入框的间隔统一，有利于用户填写。

毛病：因为标签的长度不同，右边空白边缘不统一，会升高用户的可浏览性。

标签显示在输入框外部。

长处：节约空间，不受垂直空间、标签长度的影响，既节俭横向空间又节俭垂直空间。非常适合用在用户相熟的字段，不便用户填写。

毛病：在用户输出字符后，外部的标签就会暗藏，不适宜较长或较简单的表单，不利于表单的实现。

表单域是表单的外围，是录入信息的外围交互局部；为了便于不同信息的录入，通常会采纳不同的交互组件。

比方：文本框、单选按钮、复选框、下拉菜单、列表框，具体组件能够去查看 Ant design、ElementUI 官网、Material design。

通常，表单都会有一个提交动作：点击表单按钮，则表单信息录入实现。而操作动作，通常又分为次要按钮和辅助按钮。

常见的表单按钮有保留、提交、确定、登录……这些实现表单必不可少的按钮，称之为次要按钮。

还有一些按钮例如预览、重置、撤销等，不属于实现表单的必要操作的按钮，称之为辅助按钮。

为了让用户视觉聚焦和疾速实现工作，通常主工作操作为次要按钮，次工作操作为主要按钮，并且一个场景中通常只有一个主按钮。

帮忙信息，是用来辅助用户输出内容的信息，帮忙信息分为：

录入提醒：在输入框、下拉框内，帮忙用户更具象的了解须要录入什么信息。

帮忙提醒：个别不是用户填写表单的必须信息，因而只在用户须要的时候呈现才有意义。否则，过多的帮忙信息反而会造成烦扰。

帮忙信息的 icon、文字链接，个别放在标签的前 / 后，点击 / 鼠标悬浮按钮呈现帮忙信息的弹窗或者 tips。

谬误提醒：用户输出的数据不符合要求，须要帮忙用户了解哪里错了和怎么做正确。

表单组件在 toB 产品中呈现频次之高，使得其用户体验对一款 toB 产品至关重要。

好的用户体验，能够让用户轻松愉悦地了解表单逻辑，疾速实现表单信息的录入，也能让产品的应用过程更晦涩。

当然，上文介绍的是表单设计的一些根底内容。在理论的表单设计中，须要用户填写的我的项目可能会很多、很简单。找到更合乎用户认知、更容易被了解的表单设计，其难度也会更大。

依据不同场景，如何通过拆、合、减的办法，归类组合以展现更丰盛的信息；如何缩减非必要的字段；如何找到相关性更高的字段，进行信息归类……这些则是更高阶的设计技巧了。

关注「toB 产品 UI」的教训分享与最佳实际…
关注我的思否账号 @LigaAI，继续接管更多干货分享~
进一步理解咱们的产品，请拜访 LigaAI – 新一代智能研发治理平台

表单的元素