如何提高B端表单操作效率，这里有7个技巧

辑导语：B端表单若设计不好，则容易导致不佳的用户体验，无法给用户有效的信息反馈。那么，应该如何优化B端表单设计、提高B端表单的操作效率呢？也许你需要在交互形式、表单页面、输入框等方面做好优化。本文作者总结了提高B端表单操作效率的7个技巧，不妨来看一下。

一些同学在设计B端表单时，不知道需要考虑哪些问题，直接使用Ant Design提供的表单模版，或者参考竞品，上线后用户反馈难用，产品反馈拓展性低。

那么该如何提高B端表单操作效率呢？这里有7个技巧分享给大家。

不滥用表单的交互形式；
将复杂表单进行合理的归纳简化；
复杂表单布局要考虑关联性；
表单视觉可以不平衡；
标签对齐方式要选对；
表单页面要考虑适配方式；
输入框不用整齐划一，可以错落有致。

一、不滥用表单的交互形式

表单的交互设计，有时候往往会被设计所忽略，或者所有交互都采用弹窗，本可以气泡卡片一步解决，使用弹窗却要两步完成，本需要界面跳转承载复杂表单，却使用弹窗不停滚动。

在表单设计时，该如何选择合适的交互形式呢？首先我们需要了解常用的交互形式有哪些。

常用的交互形式主要有：原位编辑、气泡卡片、弹窗、抽屉、全屏弹窗、页面跳转等。

表单交互方式的选择，我们可以参考 Ant Design 表单设计规范，从关联性和复杂度进行判断，在选择时，我们优先考虑信息的复杂度，其次在考虑相关性。

1）当信息复杂度低，同时相关性高时，我们可以选择原位编辑/气泡卡片、弹窗的交互方式。

比如钉钉任务详情页面的数据编辑，相关度极高，同时信息不复杂，那么就可选择原位编辑，在使用原位编辑时，需要根据业务进行判断，是否有必要进行原位编辑。

而Ones的筛选，其数据量相对较多，但是相关性极高，那么就可以选择气泡的形式；有赞教育绑定销售员，采用了弹窗的形式，这里也可采取气泡的形式。

2）当信息复杂度高，但关联性也较高时，我们可以使用抽屉、全屏弹窗的交互方式。

比如神策数据，信息量较为复杂，同时有一定相关性，数据创建后即可在列表中查看；但是当数据特别复杂，同时新增入口位置较多时，可采用全屏弹窗的方式，在CRM行业较常见，比如销帮帮。

其优势是，当从详情页进行新增或编辑时，编辑完成后，详情页数据即可展示当前新增的信息，如果是页面表单，需要刷新数据才可以查看到，体验感较低。

3）当信息复杂度高或信息独立时，我们可以使用页面的交互方式。

比如有赞的新增报名，其关联性就不像CRM那么强，因此直接采用页面的交互方式就可以；而阿里巴巴的创建网络信息复杂度较高，同时相对独立，因此也适合采用页面进行交互。

二、将复杂表单进行合理的归纳简化

对于复杂表单，在设计时需要对其进行合理的归纳简化，降低表单填写负荷。

一般来说，表单可分为基础表单、分步表单、锚点定位、标签页这几类。

1）当表单条目数在7个内，表单较为简单，这时候我们一般直接采用基础表单，比如有赞更换负责人页面：

2）当表单条目数在7个以上，可归类到复杂表单，这时候就需要根据表单的复杂度、逻辑性、关联性进行判断，选择合适的分组方式，进行归纳简化，降低表单填写负荷。具体该如何选择呢？

① 如果每个组之间有逻辑先后顺序，那么推荐使用分步表单，比如阿里云的购买。

② 如果每个组之间关联性较强，就不适合分开，推荐使用锚点定位，比如销帮帮的编辑销售机会、新建客户等表单都是采用锚点定位。

③ 如果每个组既没有逻辑先后顺序，也没有关联性时，推荐使用标签分组，比如飞书的发票管理，都是相对独立的表单。

三、复杂表单布局要考虑关联性

上面提到了为复杂表单进行合理的归纳简化，但是归纳简化后采用什么布局方式更合适呢？

表单页面的布局方式，综合起来可分为普通布局、弱分组、区域内分组、卡片分组这四种。

在选择时，和表单的交互方式选择一样，可参考 Ant Design 表单设计规范，从关联性和复杂度进行判断，在选择时，我们优先考虑信息的复杂度，其次再考虑相关性。

1）当条目数在7个内时，仍然使用基础布局，比如网易互客的企业信息资料新增：

2）当表单条目数在7个以上，可归类到复杂表单，这时候仍然根据表单的复杂度、逻辑性、关联性进行判断，选择合适的布局方式，提高表单的浏览效率和屏效需求。

① 当表单空间有限，且相关性较强时，推荐使用弱分组，将多个组合在一行中，形成分组的暗示。

PS：弱分组也可和区域内分组和卡片分组组合使用，从而提高屏效。

② 当条目数在7-15个内时，相关性较强时，使用区域内分组较为适合，比如网易七鱼的新建在线质检模版：

③ 当条目数在15个以上，推荐使用卡片布局较为合适，比如阿里云服务购买表单：

四、表单视觉可以不平衡

在设计表单时，我们总觉得视觉重心偏左，因此在设计时我们总想让视觉变得更平衡。

比如京东云，使用大屏电脑看，信息全集中在左边，感觉视觉有点失衡。而类似飞书的居中设计，视觉会更平衡。

于是我在设计时也在考虑要不要用居中设计的方式呢？但是当我继续查找资料时发现，其实在表单的设计中我们不用过度的追求视觉平衡，首先人的视觉动线遵循F模型，同时根据行业相关信息可读性研究，眼动舒适角度为30度。

因此当表单信息较少，不考虑屏效时，采用从上往下的方式，据研究这是能够最高效完成任务的布局方式。

为了印证这个结论，我收集了近50个B端后台，共507个表单，竟然发现只有2个产品用了视觉重心居中的设计。

这个结果让我挺诧异的，但又在情理之中。一个是飞书设置类表单、一个是百度云购买表单。

设置类表单，数据项较少，相对比较简单，使用居中设计可以让用户更聚焦。

而百度云的表单，虽然也是视觉居中，但是将侧边栏进行收起，在设计上和我们普通网页设计方式类似，从而承载更多的信息。

而其他的CRM、ERP、云产品、OA、项目研发、文档产品、在线教育、HR、BI等系统产品的录入类表单均采用的视觉偏左的设计方式，不管表单拓展多复杂的信息，都不会影响整体的一致性。

所以，在设计表单时不用过度追求视觉平衡，而是需要优先考虑信息操作效率，信息阅读效率。

五、标签对齐方式要选对

标签分为左标签、右标签、顶标签三种，不同的对齐方式，使用场景不同。

具体该如何选择呢？我们需要从3个方面进行考虑：操作效率、标签长度、屏效、视觉对齐。

1. 操作效率

根据Matteo Penzo的研究总结得到的浏览时间表发现，标签移动到输入框的时间，顶部对齐最快只要50ms，其次是右对齐240ms，左对齐耗费时间最长500ms。

因此当以操作效率为主时，推荐使用顶对齐的方式。

2. 标签长度

当标签长度超过8个字，或者需要考虑中英文双版本时，推荐使用顶对齐的方式，其容纳的标签文字更多，拓展性更好，比如Ones的建任务的标签，就采用标签顶对齐的方式：

3. 屏效

如果只考虑屏效，那么标签左对齐右对齐均可，但是如果还考虑表单录入效率，那么推荐使用标签右对齐的方式，比如蜂鸟汇报：

4. 视觉对齐

一般情况我们在设计表单，优先考虑效率和屏效，但在竞品分析中发现，竟然有50%的表单采用了标签左对齐的方式，因为这样可以让标签和其他内容保持对齐，比如神策网：

因此，在进行标签对齐方式的选择时，我们首先要清楚以什么为主，什么是可以牺牲的，比如神策网选择了视觉对齐，而牺牲的是操作效率。

六、表单页面要考虑适配方式

设计时如果不考虑适配方式，那么前端可能不考虑，可能用他觉得合理的方式，在实际使用时就会导致体验不好，后面想在调整就得重新等排期了，因此在设计时就需要把适配方式定好。

表单在设计时一般有2种适配方式，一种是固定适配，一种是间距适配。

1. 固定适配，设计需要注意

设计时，需要保证最小分辨率能够正常显示，表单中信息宽度固定，不随分辨率变化而变化。该方式适合用于表单页面的适配中。

当采用弱分组布局时，随分辨率变小，数据项自动掉下来，其他保持不变。

这里最小分辨率大家根据自己公司情况而定，我在设计时设定1366X768为最小分辨率。

下图是百度统计流量研究所，大家可以看看数据，具体以自身公司而定，因为一些单位可能还在使用1280X720的分辨率，那么就设定1280为最小兼容的分辨率。

2. 间距适配，和移动端类似，间距固定，组件自适应

该适应方式在弹窗、抽屉中较为使用，表单页中不太推荐使用该方式，因为当分辨率变大，眼动的视觉变大，不利于信息浏览。

七、输入框不用整齐划一，可以错落有致

表单页在设计时，我们总是纠结到底整齐排列好，还是错落排列好，错落排列又该遵循什么规则呢，这里推荐大家阅读Ant_Design的文章《整齐划一？不如错落有致》。

文章提到，如果表单跟随空间自适应会造成不稳定的情况，线上效果会呈现以下效果。

同时输入框的宽度不应该自适应，而需要根据填写内容的长度来定，减轻判断负担。

最后，错落有致更舒适，整齐划一在视线上有隐性的截断，会感觉缺了一块内容。

如何错落有致呢？有什么规则吗？

Ant_Design设定104px 为原子级宽度尺码 XS，通过倍数+间距叠加的方式（此处计算间距的原因是为了兼顾组合 input 和单个 input 对齐问题）从小到大去依次推导出更大的四种宽度来拟合前面划分的尺码。最终得到如下5种宽度尺码和对齐关系。

通过对比，我们可以明显地看到，错落有致的排列方式更加舒适。

当然，你在设计时，最小原子的宽度不一定设置为104，也可根据业务情况将最小原子XS设置为可容纳6个中文汉字，然后在通过如下规则进行换算。

八、画重点

本文针对如何提高B端表单操作效率，整理了7个技巧：

不滥用表单的交互形式；
将复杂表单进行合理的归纳简化；
复杂表单布局要考虑关联性；
表单视觉可以不平衡；
标签对齐方式要选对；
表单页面要考虑适配方式；
输入框不用整齐划一，可以错落有致。

希望通过本文的分享，让大家有一个更清晰的认知，从而提高表单操作效率。

参考引文：

《且曼B端产品设计之表单设计》

人眼的视角

http://t.hk.uy/Chp

Label Placement in Forms

http://t.hk.uy/Chr

浅谈B端表单设计

https://mp.weixin.qq.com/s/L1bB3qlzstK6T4LkLEPtKQ

Ant Design 表单设计规范

https://ant.design/docs/spec/research-form-cn

Ant Design ProForm 高级表单

https://procomponents.ant.design/components/form

QueryFilter / LightFilter 筛选表单

https://procomponents.ant.design/components/query-filter

整齐划一，不如错落有致

https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html

作者：风筝KK，公众号：海盐社

本文由 @风筝KK 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

我们在浏览网页的时候，经常需要向服务器提交信息，并让后台程序处理。浏览器中使用 GET 和 POST 方法向服务器提交数据。

GET 方法

GET方法将请求的编码信息添加在网址后面，网址与编码信息通过"?"号分隔。如下所示：

http://www.runoob.com/hello?key1=value1&key2=value2

GET方法是浏览器默认传递参数的方法，一些敏感信息，如密码等建议不使用GET方法。

用get时，传输数据的大小有限制（注意不是参数的个数有限制），最大为1024字节。

POST 方法

一些敏感信息，如密码等我们可以通过POST方法传递，POST提交数据是隐式的。

POST提交数据是不可见的，GET是通过在url里面传递的（可以看一下你浏览器的地址栏）。

JSP使用getParameter()来获得传递的参数，getInputStream()方法用来处理客户端的二进制数据流的请求。

JSP 读取表单数据

getParameter(): 使用 request.getParameter() 方法来获取表单参数的值。
getParameterValues(): 获得如checkbox类（名字相同，但值有多个）的数据。接收数组变量，如checkbox类型
getParameterNames():该方法可以取得所有变量的名称，该方法返回一个Emumeration。
getInputStream():调用此方法来读取来自客户端的二进制数据流。

使用URL的 GET 方法实例

以下是一个简单的URL,并使用GET方法来传递URL中的参数：

http://localhost:8080/testjsp/main.jsp?name=菜鸟教程&url=http://ww.runoob.com

testjsp 为项目地址。

以下是 main.jsp 文件的JSP程序用于处理客户端提交的表单数据，我们使用getParameter()方法来获取提交的数据：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.*,java.util.*" %>

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>使用 GET 方法读取数据</h1>

<ul>

<%= request.getParameter("name")%>

</p></li>

<%= request.getParameter("url")%>

</p></li>

</ul>

</body>

</html>

接下来我们通过浏览器访问 http://localhost:8080/testjsp/main.jsp?name=菜鸟教程&url=http://ww.runoob.com 输出结果如下所示：

使用表单的 GET 方法实例

以下是一个简单的 HTML 表单，该表单通过GET方法将客户端数据提交到 main.jsp 文件中：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

站点名: <input type="text" name="name">

<br />

网址: <input type="text" name="url" />

</form>

</body>

</html>

将以上HTML代码保存到test.htm文件中。将该文件放置于当前jsp项目的 WebContent 目录下（与 main.jsp 同一个目录）。

通过访问 http://localhost:8080/testjsp/test.html 提交表单数据到 main.jsp 文件，演示 Gif 图如下所示：

在 "站点名" 与 "网址" 两个表单中填入信息，并点击 "提交" 按钮，它将输出结果。

使用表单的 POST 方法实例

接下来让我们使用POST方法来传递表单数据，修改main.jsp与Hello.htm文件代码，如下所示：

main.jsp文件代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.*,java.util.*" %>

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>使用 POST 方法读取数据</h1>

<ul>

// 解决中文乱码的问题

String name = new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8");

<%=name%>

</p></li>

<%= request.getParameter("url")%>

</p></li>

</ul>

</body>

</html>

代码中我们使用 new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8")来转换编码，防止中文乱码的发生。

以下是test.htm修改后的代码：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

站点名: <input type="text" name="name">

<br />

网址: <input type="text" name="url" />

</form>

</body>

</html>

通过访问 http://localhost:8080/testjsp/test.html 提交表单数据到 main.jsp 文件，演示 Gif 图如下所示：

传递 Checkbox 数据到JSP程序

复选框 checkbox 可以传递一个甚至多个数据。

以下是一个简单的HTML代码，并将代码保存在test.htm文件中：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<input type="checkbox" name="google" checked="checked" /> Google

<input type="checkbox" name="runoob" /> 菜鸟教程

淘宝

</form>

</body>

</html>

以上代码在浏览器访问如下所示：

以下为main.jsp文件代码，用于处理复选框数据：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.*,java.util.*" %>

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>从复选框中读取数据</h1>

<ul>

<li><p><b>Google 是否选中:</b>

<%= request.getParameter("google")%>

</p></li>

<li><p><b>菜鸟教程是否选中:</b>

<%= request.getParameter("runoob")%>

</p></li>

<li><p><b>淘宝是否选中:</b>

<%= request.getParameter("taobao")%>

</p></li>

</ul>

</body>

</html>

通过访问 http://localhost:8080/testjsp/test.html 提交表单数据到 main.jsp 文件，演示 Gif 图如下所示：

读取所有表单参数

以下我们将使用 HttpServletRequest 的 getParameterNames() 来读取所有表单参数,该方法可以取得所有变量的名称，该方法返回一个枚举。

一旦我们有了一个 Enumeration（枚举），我们就可以调用 hasMoreElements() 方法来确定是否还有元素，以及使用nextElement（）方法来获得每个参数的名称。

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.*,java.util.*" %>

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>读取所有表单参数</h1>

</tr>

Enumeration paramNames = request.getParameterNames();

while(paramNames.hasMoreElements()) {

String paramName = (String)paramNames.nextElement();

out.print("<tr><td>" + paramName + "</td>\n");

String paramValue = request.getParameter(paramName);

out.println("<td> " + paramValue + "</td></tr>\n");

}

</table>

</body>

</html>

以下是test.htm文件的内容:

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<input type="checkbox" name="google" checked="checked" /> Google

<input type="checkbox" name="runoob" /> 菜鸟教程

淘宝

</form>

</body>

</html>

现在我们通过浏览器访问 test.htm 文件提交数据，输出结果如下：

通过访问 http://localhost:8080/testjsp/test.html 提交表单数据到 main.jsp 文件，演示 Gif 图如下所示：

你可以尝试使用以上的JSP代码读取其它对象，如文本框，单选按钮或下拉框等等其他形式的数据。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

要收集和录入数据时，表单必不可少，而表单，也是B端设计师的必备能力之一。对此，本文从表单是什么，为什么重要？表单的主要应用场景、表单的主要结构和类型三个方面做了介绍和分析，一起来看看吧。

之前我们已经分享过成套的表格设计思路，接下来我们就聚焦在表单部分的干货整理和分享中，帮助大家更好的理解和设计表单。

一、表单是什么，为什么重要

表单这个词汇虽然很常见，但相信不少同学对这个词汇本身的理解是很陌生的、一知半解的。所以我们首要目标就是认识它是什么，以及它在B端项目中的作用、使用场景。

和表格类似，表单也是现代电子计算机系统中最重要的组成部分之一，但和表格不同的是，从我们9年义务教育开学的第一天，甚至更早，就已经在接触和使用表单了。

表单就是用来收集和录入数据的列表清单，是我们过去填写的试卷、个人资料、业务办理等纸质清单的数字化应用方式。

比如登陆流程的账号密码填写，注册流程的邮箱、用户名等信息填写，都是表单应用的常见案例，计算机需要通过它来收集用户指定的数据信息。

输入框、选择控件等都是表单的一部分，但要注意的是，表单是一个合集概念，是一个整体的 “清单”，而不是单一的功能控件、组件。比如上图的登陆表单、注册表单，都包含了若干的输入控件。

在软件编程中，通常也需要先定义出表单的整体对象，再去创建下级的控件。比如 HTML 需要先添加 <Form> 表单标签，再在它的下级定义相关的输入框、下拉菜单、选项、按钮等元素。

<form value=”注册表单”>
<input type=”text”>用户名br>
<input type=”password”>密码br>
<button type=”button”>注册按钮</button>
</form>

这和现实逻辑是高度一致的，也就是每个表单都会有相关的顶级目标，不管是收集个人信息、健康状况、工作经验亦或消费记录。然后再根据这个目标所需的具体明细罗列出相关的数据清单，例如个人信息收集所需的姓名、性别、年龄、身高、体重等等。

表单设计，就是根据收集目标，设计若干数据收集控件的合集。

而它之所以重要，就是因为除了使用表格、图表等模块查看信息之外，还包含大量的数据录入需求。有相当一部分项目中所产生的数据，都是通过系统内的表单输入的，它们会占用用户大量的精力和时间。

所以优秀的表单设计除了提升基础的视觉效果外，还可以非常好的提升表单操作过程的体验和效率，是 B 端设计师的必备能力之一。

二、表单的主要应用场景

表单是用来收集数据的前面我们已经解释了，但收集数据这个目标并不是只有把你填的内容记录到数据库中这一个而已，还包含执行特定程序时的必要数据收集。

所以，我把表单应用的主要场景拆分成4个大类：

1. 数据录入

就是最基础的用来将数据收集并保存到数据库的场景，主要应用在对特定数据对象的创建和编辑上。

2. 数据筛选

即通过若干的条件来筛选出指定的对象和数据内容，常见于表格和列表数据的筛选。

3. 功能设置

通过若干的条件设置来实现对应的功能或服务，比如在 CMS 系统设置推送消息条件，或设置相关的程序、机器的运作执行条件。

4. 数据校验

即针对特定数据信息进行验证的场景，例如账号登陆，非机器人验证，财务、删除的二次确认等等。

这4个场景的目标不同，自然在设计的样式和交互上会有一定的差异，后面我们会分别对它们展开讲解，先能理解并分辨它们即可。

三、表单的主要结构和类型

一个完整的表单通常会包含3个要素，标题、数据项、按钮。

标题就是这个表单的名称，让用户理解填写数据的目的。数据项则是该表单内每一条要收集的数据对象，根据数据类型和特征会有不同的控件类型和交互形式。按钮则是针对整个表单的操作（不是针对某个数据项），例如发布、重制、恢复默认等。

数据项是我们要重点探讨的对象，每一个数据项都包含三个基础的要素，数据名称、数据内容、操作对象。

数据名称就是该项的命名，让用户识别操作的数据是什么，它可以独立显示在画布中，也可以置入到输入框等操作对象内。

数据内容，则是该数据项中要收集的数据特征，这是最核心的设计需求来源。数据特征是个总称，里面包含很多要素，比如最基础的一环 —— 数据类型。

这是一个开发术语，任何数据要被记录，都会定义它的类型再进行存储和使用。常见的数据类型包含数值（Number）、字符串（String）、日期（data）三个大类，且每个大类根据具体使用场景还会拆分出细分类型，比如下面的案例：

技术上的概念并不需要太深入理解，只要知道它从属于哪个大类即可。更进一步，技术上的数据类型划分在实际应用上仍是有局限性的，比如用户名和密码，本质上它们都以字符串的形式保存，但它们从工作中的称呼、样式的设计都是全然不同的。

除了数据类型，还有一个特别重要的就是数据内容，每个数据项都会明确想要获取的数据结果是什么样的。有可能是用户手动输入的，也可能是在已经存在的选项中挑选出来。还有对数据内容的长度、格式、数量、递进、范围、过滤的要求等。

在稍微复杂点的项目中，产品经理都会根据业务需要对数据类型进行定义，并在设计表单需求的时候，具体的规划每个数据项的数据类型，比如创建一个下面的表格来描述。

之所以这个要讲这个，因为对数据内容的整理决定了最终应该设计什么样的——操作对象。

操作对象就是该数据项的具体表现形式，包括了视觉样式和交互方法。比如上方的商品名，就是一个简单的输入框，但是因为商品名动辄字数非常多，这个输入框的设计肯定不会像用户名一样短。

商品分类中，要从既定的选项中选择，而商品分类库本身是树状结构的，那么这个选择必然要支持层级的表现，同时还要支持多选，所以应该使用下拉的树状选择菜单。

如果光看上面这个案例，可能觉得太简单根本不用想那么多背后的需求。但在一些专业性更高，包含数十条复杂数据项的表单中，是必然要做出充分理解和分析，才能确保设计的有效性。

后面我们会从常规表单的控件和组件类型入手，掌握基础的知识后再学习如何结合数据需求进行有效的设计。

作者：酸梅干超人；公众号：超人的电话亭（ID：Superman_Call）

本文由 @超人的电话亭原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash ，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

在线咨询

上一篇：Playwright执行 JavaScript 脚本：探索浏览器自动化的新境界
下一篇：html实现雪花飘飘效果

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何提高B端表单操作效率，这里有7个技巧

一、不滥用表单的交互形式

二、将复杂表单进行合理的归纳简化

三、复杂表单布局要考虑关联性

四、表单视觉可以不平衡

五、标签对齐方式要选对

1. 操作效率

2. 标签长度

3. 屏效

4. 视觉对齐

六、表单页面要考虑适配方式

1. 固定适配，设计需要注意

2. 间距适配，和移动端类似，间距固定，组件自适应

七、输入框不用整齐划一，可以错落有致

八、画重点

一、表单是什么，为什么重要

二、表单的主要应用场景

1. 数据录入

2. 数据筛选

3. 功能设置

4. 数据校验

三、表单的主要结构和类型

您的项目需求