Web端表单设计小总结

时间：2023-10-04 18:36:01 | 来源：网站运营

时间：2023-10-04 18:36:01 来源：网站运营

Web端表单设计小总结：前言

由于近期接触的一些项目，频繁的接触到web端表单设计。然而，自身知识体系的建设不足，对于表单设计的知识点太过零散，在设计的过程中，往往用最直觉的设计经验，去解决一些界面设计的问题。输出的设计稿，总感觉不太友好。

加强对自身知识体系的规划，对于Ui设计来说是非常必要的。接下来的这篇文章，将对近期表单设计中的知识点进行整合，归拢起来，加深自己对表单设计的理解，夯实自己的基础。

【作者】Molly

1.最基础的作用

表单在web或 app 中主要用于数据采集。常见于很多B端后台产品、业务系统等场景，C端注册、登录、个人信息填写、问卷调查等场景中。

所以，大部分起到数据采集功能的模块，我们都可以称其为表单。

2.表单的构成

表单主要由这四类元素组成：标签、输入域、操作按钮、提示信息。

2.1 标签

标签：告诉用户该表单需要填写什么类型的信息。文案需要简洁明了，快速让用户理解。

标签的排列方式有以下几种：

2.1.1 顶对齐：从上到下浏览顺序，有利于用户获取信息，从而减少表单填写时间；增加了横向屏幕的空间，但是也会占用较多的纵向垂直屏幕空间。如果表单内容太多，整张变得则会太长，会增加用户填写表单的压力和视觉偏左的效果。

2.1.2 左对齐：占用垂直空间较少。如果标签长短不一，那么表单标签和输入框距离就会比较远，从而会延长用户从左至右浏览时间。对于一些内容校对，相对敏感的信息，需要减少用户的出错率，放慢用户填写表单的速度时，使用做对齐的方式会比较合适。


2.1.3 右对齐：右对齐和做对齐一样，可以减少表单占用垂直屏幕空间，但是相比于左对齐，标签与输入框相邻，更方便于填写。

但是，布局上会造成左侧参差不齐，影响用户游览表单的效率；若标签文字宽度变宽，右对齐还存在灵活度问题。

如果屏幕上下空间有限，又需要用户快速填写表单，使用右对齐的方式会更合适。


2.1.4 内对齐：将标签放在输入框内部，用作提示用户输入什么内容，这种结构在移动端常见（例如，注册/登录页），移动端屏幕小，这种结构的空间占比很小，对移动端的小屏来说，是非常友好的。但交互如果没有设计好，会有很大的缺陷。表单内容要足够短少，而且通熟易懂的。因为用户在输入内容的时候，内部的标签/提示性文字就会消失，用户需要判断自己输入的信息是否正确。


2.2 输入域

用来收集用户操作的信息。主要包括：文本输入框（单行/多行）、单选框、复选框、开关、滑块、选择器、上传（文件/图片）、数字输入框、金额输入框、等等

2.2.1 输入域限制

限制通常有两种：对表单域输入的信息进行字数限制和属性限制

对输入域做限制，一来可以确定页面的展现形式，二来可以减轻数据库的压力。

字数限制：在输入域右边或者右下角，告知用户最大字数，用户输入过程中，需提醒用户还剩多少字，避免内容过长提交不了。提升用户体验。

属性限制：对数字、文字、字母等输入框做限制，这就极大地增加了用户的错误率。


2.2.1 输入域大小

在真实场景中，大部分输入框是存在理想长度的，而不一样的长短的输入框，能够给客户提供一种心理暗示。在填写输入框时，用户自然地会去思考为什么这样。

虽然不同的长度，会提醒用户在填写的信息的时候进行思考，但是设定太多的宽度，这样会导致表单看起来凌乱；需要设置一个适合的宽度模度值和数量。

首先，根据具体的适用场景，设置一个默认宽度。在这个宽度的基础上，长度做规律的增加，从而定义出不同的模度。


2.2.3 多行文字规则

多行文字一般出现在两个地方：标签和输入框

对于左右结构的表单，标签文字尽可能的要精简，控制在5个字之内，如果出现标签很长，那么需要给文字设定宽度和行高，比如最多五个字，超出部分换行，设定文字行高标。

输入域大小设定时，我们需要给出横向字数宽度，和上下左右的间距。对于一些文本框内容过多的情况，通常有以下几种处理方法：

第一，限定输入框大小。比如，设定显示5行文字，文字超过 5行，输入框大小不变，输入框内上下滚动展示全部内容。设计时需要注意，右边显示滚动条或者输入框底部显示部分遮挡文字，这样可以提醒用户还有未展示的文字。一般采用的方式是对最上方一行文字遮挡一半。

上述情况，可以确定页面的展现形式，文字的多少，不会改变页面的布局，输入框空间占比小。


第二种，不限定输入框大小，自适应高度。同时也要限制一定的字符数，当超过一定的字符时给用户提示。


第三种，自适应高度+滚动条，指定最小行数，和最大行数。超出部分显示滚动条，同时也要限制一定的字符数。

输入框的大小会影响用户对该输入框内容输入多少对判断，输入框尺寸大，在用户潜意识里则会认为可以输入文字很多。

2.3 操作按钮

用户信息录入完成后，点击继续或取消任务的触发器。按钮位置一般位于最后一个输入项后面。一般来说，左边放“取消”按钮，右边放用户最可能点击的按钮。当然【执行/确定】按钮到底是放左，还是放右，其实都可以都可以，只要保证统一即可。

2.4 提示信息

录入提示：帮助用户更具象的理解录入的信息内容；

帮助提示：通常，当标签信息无法让用户完成理解或需强调其重要性，可以在标签前/后加一个帮助提示icon，点击/鼠标悬浮按钮出现有帮助信息的弹窗。

错误提示：提示用户录入信息哪里出错或者怎么修改。

3.表单的使用场景

3.1 弹窗（字段少）

在实际业务中，当表单字段较为简短，并且填写表单不需要关注底部页面的信息，可才有弹窗的形式。

3.2 页面

当表单信息庞大时，可以采用新页面呈现。使用单独页面，能好地展示表单信息减少其它信息的干扰。页面布局主要有以下三种方式：

2.2.1多列布局（较复杂）

当页面空间有限，我们可以将具有相关联字段放在一个卡片区域中进行归类，形成多列排布的暗提示帮助用户更好理解。

2.2.2分组布局（中度复杂）

表单较为复杂，信息量较大，可将具有相关联字段进行分类并以标题区分的形式进行字段分组，并且表单字段都在一个卡片区域内。

2.2.3 卡片分组布局（高度复杂）

上述分组布局，通过留白或者分割线的形式对相关联字段进行分组，当页面要承载更大的表单字段时，我们可以采用卡片分组布局的形式来处理这种更为复杂类型表单。将信息相关性弱的字段拆分为多个部分，并通过多个卡片分组承载不同类型字段。

3. 抽屉式（内容信息较多，且与底部信息强关联）

抽屉表单是从屏幕边缘滑出的浮层面板。抽屉会从屏幕的上下左右任意一侧滑出。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。

抽屉承载的内容比弹窗多，交互的形式比弹窗和页面型表单灵活。信息相对较多且与底部信息关系较强，可以采用此形式的表单。用户在录入表单的过程中，可以根据底部信息来辅助完成，这样能够提高填表的效率和用户体验。

---

欢迎关注技术团队的本站账号我们凭团队实例运作以下专栏， 必须干货！
互联网创业专栏 (我们小伙伴的创业历程)
与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)
互联网产品研发管理 (我们公司对产品结构的管理思路)
产品君的案例库（产品小伙伴深刻总结）