2B产品设计套路一：表单设计

校验方式可以分为前端校验和后端校验两种，前端校验可以实现有无输入、输入格式（要求输入数字但输入了文本、邮箱格式、手机号格式等）的校验，后端校验实现用户名是否存在、密码是否正确等需要比对数据库的校验。

触发校验的条件可以是每填写完一项时校验，也可以是点击“提交”时统一校验。由于有一些后端校验（比如校验用户名、密码是否正确）需要多项内容填写完才能进行，为了统一我一般都会选择点击“提交”触发校验。

错误的显示形式，为了让用户更直观的找到错误项，一般是在输入/选择框的下方用红色文字提示，如下：

（4）帮助

2B业务中有些字段信息比较专业，用户可能一下理解不了，所以我们需要给用户一些指引，教给用户填写什么。

帮助的显示形式主要是【？】图标+ 鼠标 hover 显示帮助信息，或者是直接用灰色文字显示在输入框下方。第一种hover显示的方式可以展示更多的内容，输入框下方显示的方式更加直观。

我一般会选择第一种形式，除了对输入内容进行描述外，一般会给出一个栗子，这样的帮助更加直观一点。第二种形式的帮助在输入框比较多的时候会让整个页面显得比较乱，而且还要处理和错误校验信息显示的关系，所以我一般不会用这种方式展示帮助信息。

（5）搜索、联想与推荐

如果以下拉框选择形式填写信息，但是选项非常多，用户会很难找到想要的选项。所以一旦选项需要滚动查找，就最好加上搜索选项的功能。当然最好可以把用户使用次数较多的选项放在最前面“常用选项/热门选项”里，形成一个小的推荐功能。

前边在“怎么输入”中说到“能选择的尽量不输入”，必须输入时最好也可以联想之前填写过的信息，减少用户的输入量。比如“资产名称”有千千万没法用选择输入，但之前在系统中用户可能输入过一些饮水机、电脑、办公桌等名称，之后很有可能还会再输入这些名称。当然上边说的推荐常用输入的功能也同样使用于输入框。

（6）enter换行

enter换行是我觉得非常能提升用户体验的小功能。在填写完一个输入框后，键盘输入enter，光标跳转到下一个输入框。在输入内容较多时，每次填写完一个空都要鼠标选中下一个输入框亲测很容易让人失去耐心。

5. 参考

elementUI：https://element.eleme.cn/#/zh-CN/component/installation

antDesgin：https://ant.design/docs/spec/introduce-cn

本文素材来自互联网

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!