一、表单的构成

一个基础的表单通常由标签、表单域、提示信息、校验信息和操作按钮等基础组件构成。

1、标签

标签主要⽤于告知⽤户要录⼊的内容，通常需要简明扼要便于⽤户理解。

标签的放置分三种形式⽔平排列（右标签），上下排列（顶标签），显示输⼊框内（⾏内标签）。

2、表单域

表单域包含文本框、多行文本框、单选框、复选框和下拉选择框等，用于采集用户输入或选择的数据。根据不同类型的数据，选择与之对应的录入方式能够提高表单操作的效率和用户体验。

3、提示与反馈

在用户进行任务操作的过程中，适当的反馈能够让用户了解当前的状态，并引导用户进行正确的交互行为。对于操作结果的反馈方式，我们也可以采用校验反馈、全局提示、通知提醒框、Modal对话框、Popconfirm气泡确认框、页面反馈等。在整个表单填写过程中，及时给予用户相应的提示与反馈，可以显著提高填写的效率。

4、表单操作按钮布局

对于操作结果的反馈方式，我们也可以采用校验反馈、全局提示、通知提醒框、Modal对话框、Popconfirm气泡确认框、页面反馈等。在整个表单填写过程中，及时给予用户相应的提示与反馈，可以显著提高填写的效率。

按钮之间需要区分主次关系，按钮作为主要的视觉引导，在⼀个焦点任务中最多只使⽤⼀个主按钮。同时存在多个主按钮会让⽤户失去操作焦点，造成信息⼲扰。

二、表单的布局

在表单设计时，我们通常会根据信息的容量以及内容的关联性来选择合适的内容组织形式。内容组织形式分为三种基础表单、分布表单、分组表单。

1、基础表单

基础表单是最简单的布局形式，将所有需填写表单内容项直接罗列在⻚⾯上。

2、分组表单

在基础平铺的基础上，将表单项中相关联的表单项进行分组，使表单显得更有规律和组织性。即使表单项较多，也不会显得杂乱无章，减轻了用户的心理压力和视觉疲劳，提高了操作体验。

3、分步表单

将⽤户需要录⼊的复杂信息按照线性流程组织拆解，利⽤步骤条告知⽤户完整流程和进度。分步表单的流程化明显，后⼀步填写的内容常基于前⼀步来填写。

三、如何设计一份用户体验好的表单

1、尽可能删除表单中的多余字段

让用户不设防、填写还不被打断，流程就需要足够精简，让用户顺畅地完成信息采集，同时确保产品所有表单页面操作的一致性。

如果填写信息分为多页，需要有进程提示，以便用户知道自己填写信息的位置、剩余步骤，使用 Tab 键要能跳转到下一个输入框。

2、给表单的设计加入微交互

你需要记住你正在为谁而设计，无论是否对表单加入微交互，都应该考虑清楚它们是否适合你的项目。

3、选择合适的输入框

输入框的类型

输入框是提供回答问题的方式，有输入框和输入框组之分。

输入框主要有复选框、单选钮、下拉菜单、文本框、列表框（极少使用）；输入框组类型有复合输入框、关联输入框、父子输入框等。

标签、输入框的对齐

标签对齐的方式有四种：左对齐、右对齐、顶对齐和输入框内标签。

慎用框内提示，当输入内容过多时，可能会忘记这个提示，适用于简单的输入框，如注册、登录界面的表单。输入框的长度会暗示填写信息的长度，预先需做好表单中输入框长度归类。

4、从全局出发思考表单的作用

设计出好的表单不仅仅是把关注点停留在元素或组件上，还应该找到是什么原因导致用户在使用的过程中遇到了问题，乃至在填写表单的过程中被困扰。思考你的表单的设计策略以及它如何融入你的项目中，这将会真正地让你的工作、团队以及目标用户受益

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。