浅谈B端产品的表单元素设计

B端产品老是须要对各类数据进行录入、管理和维护……其中，表单做为承载信息的基本组件，是出现频率最高的元素之一。看似简单、基础的小组件，组合在一块儿却有不少细节须要推敲。

最近在作和数据录入相关的设计，经常会纠结：标签究竟是左对齐仍是右对齐，按钮是放在左边仍是右边，页面是否是要为了统一而采用同样的布局，等等。

为了找到尽量适用的设计方案，我翻阅了许多设计师的分享，也作了一些调研。

尽管远未“精通”，但也算有些心得，所以概括了表单元素的组成以及适用场景，写了这篇短文，但愿能对一样正在作toB产品设计的朋友们有所助益。

表单的元素

表单主要由这四个重要元素组成：标签、输入域、操做按钮、帮助信息。

标签

标签主要是解释输入项的含义，用户会根据标签输入相应的内容，通常不宜太长，须要简洁明了，快速让用户理解。

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

顶对齐

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

优势：当页面字段很少时，标签靠近输入框，这种方式能够保持人眼水平方向集中在一个较小的区域。

用户目光能够更快的从标签移到输入字段， 能够快速完成并减小认知负担。

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

缺点：标签加输入框的样式，占用垂直空间较大。当表单数量过多时会显得页面很是长，让用户感到疲劳。屏幕利用率下降，适用于字段较少的表单。

左对齐

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

优势：占用较少的垂直空间，当标签内容为陌生内容时，左对齐易于阅读，可让用户很容易感知标签和输入框的联系。

缺点：由于标签的长度不一样，左对齐后会致使部分标签和输入框距离很远，须要更多横向空间。标签和输入框之间的空白边缘不一致，不利于用户填写。

右对齐

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

优势：占用较少的垂直空间，标签和输入框的距离一致，有利于用户填写。

缺点：由于标签的长度不一样，左边空白边缘不一致，会下降用户的可阅读性。

表单内对齐

标签显示在输入框内部。

优势：节约空间，不受垂直空间、标签长度的影响，既节省横向空间又节省垂直空间。很是适合用在用户熟悉的字段，方便用户填写。

缺点：在用户输入字符后，内部的标签就会隐藏，不适合较长或较复杂的表单，不利于表单的完成。

表单域

表单域是表单的核心，是录入信息的核心交互部分；为了便于不一样信息的录入，一般会采用不一样的交互组件。

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

操做按钮

一般，表单都会有一个提交动做：点击表单按钮，则表单信息录入完成。而操做动做，一般又分为主要按钮和辅助按钮。

常见的表单按钮有保存、提交、肯定、登陆……这些完成表单必不可少的按钮，称之为主要按钮。

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

为了让用户视觉聚焦和快速完成任务，一般主任务操做为主要按钮，次任务操做为次要按钮，而且一个场景中一般只有一个主按钮。

帮助信息

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

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

帮助提示：通常不是用户填写表单的必须信息，所以只在用户须要的时候出现才有意义。不然，过多的帮助信息反而会形成干扰。

帮助信息的icon、文字连接，通常放在标签的前/后，点击/鼠标悬浮按钮出现帮助信息的弹窗或者tips。

错误提示：用户输入的数据不符合要求，须要帮助用户理解哪里错了和怎么作正确。

结语

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

好的用户体验，可让用户轻松愉悦地理解表单逻辑，快速完成表单信息的录入，也能让产品的使用过程更流畅。

固然，上文介绍的是表单设计的一些基础内容。在实际的表单设计中，须要用户填写的项目可能会不少、很复杂。找到更符合用户认知、更容易被理解的表单设计，其难度也会更大。

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

关注咱们，了解更多表单UI/UE设计的高级玩法

阅读到更多「toB产品设计」的经验分享与最佳实践…请关注 @LigaAI的掘金帐号

进一步了解咱们的产品，请访问[ LigaAI - 新一代智能研发管理平台](www.ligai.cn/?