编者按:由于业务量巨大，B端产品往往信息复杂，同时对业务的准确性要求也很高；为B方服务的服务不能出现信息错误。如果你填写了错误的信息，就会造成巨大的问题。本文结合作者自身的工作经验，总结了大型B侧业务中表单的设计方法，供小伙伴参考。

一、形式的定义

表单是添加和输入信息的通用表单。作为获取用户输入的重要交互方式，它还起到了问答匹配的作用。

二、形式的设计原则

设计原则是任何一种解决方案的路灯，体现了解决方案的基本目标。

对于互联网表单设计，我提倡以下原则:

尽量减少痛苦；说明填写完成路径；考虑情境；确保一直沟通。

第三，形式结构

我们先来看看表单的结构。该表格主要由五个部分组成:

标题：这个元素帮助用户引导完成表单填写的整个过程，尤其在你对信息进行分组方便用户填写时，特别有用。标签：告诉用户相对应的输入字段的含义。输入域：包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。提示信息：包含帮助信息、占位符和反馈信息提示。操作按钮：包括提交按钮、保存按钮、复位按钮和一般按钮；用于将表单数据传送到服务器上。

第四，表现形式

1 .标签

根据标签和输入字段之间的位置关系，标签分为左对齐、右对齐、上对齐、内联标签、图标标签和浮动标签。

每种标签样式都有自己的优势和位置。根据不同的场景选择合适的标签样式，可以提高用户的阅读效率，降低填写信息时的错误率。

1)顶部对齐:根据Matteo Penzo发表的关于标签放置的文章，显示顶部对齐标签样式浏览表单的时间最短；如果您希望用户快速扫描和填写表单，顶部对齐标签是一个不错的选择。

顶部对齐结构可以放下较长的标签；然而，这对垂直空是一个挑战。当填写太多信息时，表格会很长。

优点：有最快的浏览和处理速度，同时标签长度弹性大。缺点：非常占纵向空间。

2)左对齐:标签靠左对齐，文字开头根据阅读视线对齐，符合人们的阅读习惯，有利于阅读。

浏览表格需要的时间最长，但是完成率慢并不总是坏事——如果表格需要敏感数据(比如提供驾照、身份证、银行卡号等)。，可以故意减慢用户的填充速度，以保证填充的准确性)。

左对齐结构需要更多的水平空，因此它可能是移动终端呈现中的一个问题。

另外，当屏幕空受到限制时，标签和输入框的长度也会受到一定的限制。

优点：文字开头按阅读视线对齐，方便阅读，节约纵向空间。缺点：填写速度慢，标签长度和输入框弹性小。

3)右对齐:右对齐使标签与输入的距离固定，视觉关联清晰。

对于短表，右对齐标签可以有快速的完成时间；但是，由于标签长度不同，左边缘不均匀，整体扫描表单时不容易理解所有信息。

类似左对齐，在屏幕空受限的情况下，标签和输入框的长度会有一定的限制。

优点：时间较短，节约纵向空间。缺点：整体可读性低，标签长度和输入框弹性小。

4) Inline tag: Inline tag在移动终端的界面设计中经常使用，因为它在空中所占的比例很小；但是如果交互处理不好，就会有很大的缺陷。

内联标签作为提示文本，告诉用户应该填写什么，但当用户填写正确后就会消失；因此，用户不能仔细检查他们是否写下了所需的内容，这增加了出错的可能性。

另一个问题是，用户可能会将占位符文本误认为预先填充的数据，并忽略它(尼尔森诺曼集团的眼睛跟踪研究证实了这一点)。

优点：空间占比小。缺点：在增加错误的可能性。

5)图标标签:图标标签是内嵌标签的进化形式，在一定程度上缓解了用户的困惑和自我怀疑。

然而，就图标而言，用户需要时间来反映它们所代表的含义——如果它们没有表达能力或者不是一种常见的图标风格，用户应该思考和猜测它的含义。

另外，条目多的时候，你要记住那个图标对应的意思。

优点：空间占比小；在一定程度上缓解用户的困惑和自我怀疑。缺点：可能造成用户的认知负担，增加用户记忆成本。

6)浮动标签:用户输入时，内部标题(提示信息)是浮动的，即空保存，提示信息还在。

但相对于其他标签样式，需要一定的开发成本。

优点：空间占比��ҳ���ʦ����小，无需用户对标签进行记忆缺点：需要一定的开发成本

关于标签样式的选择

2.输入域

输入框是表单的核心体，包括文本框、选择器、开关、复选框、单选框、步栏、滑块、上传、tab等控件(按类型划分)。

选择合适的控件样式可以在一定程度上提高表单填充的效率。

在输入字段中，控件样式很多，那么在产品设计过程中，应该如何选择和取舍呢？

以下是我在日常工作中的一些探索，包括前辈的一些经验。供你参考。

1)文本框

文本框包括单行文本框和多行文本框。

单行文本框的设计建议:

A.选择合适的大小，其宽度应该暗示用户所需输入内容的长度，以减轻判断负担。

下图是典型案例。如果在左图中对一个实际花费不多的金额输入框进行等宽处理，很容易误导用户判断需要的输入金额，造成极大的不安全性。

b、采用字段掩码自动匹配特定数字的输入格式。

比如:电话、身份证、银行卡等。；按照7+2的规则，根据用户的记忆结构，最大化阅读体验。

C.弹出键盘应该与要输入的文本类型相匹配(移动终端)。

D.涉及金额输入时，当用户输入的金额超过1000时，会出现最高分的提示，最高分会随着每增加一个输入而增加。

E.文本输入应该具有自动完成和建议功能，以减少不必要的文本输入和错误。

例如，填写地址栏通常是表单中最有问题的部分，而地址自动填写(根据用户的位置和输入提供准确的建议)等工具使用户能够用更少的输入完成输入。

F.在输入有限的情况下，给用户一个清晰的提示，增加用户的感知，降低出错率。

知识拓展:7加减2的规律是什么？

早在19世纪中叶，爱尔兰哲学家汉密尔顿就观察到有一种神奇的7 2效应；意味着人的短时记忆中的信息量是7，可能波动2。

多行文本框的设计建议:

用可拉伸的文本框比用固定的好。从体验来看，可变的文本框使页面的整体效果更加统一。

当输入文本超过其设定宽度时，内部滚动条将出现在带有固定文本的文本框中。当页面上有两个滚动条(大页面的滚动条)时，会给操作带来一些混乱。

2)选择框

包括下拉列表、复选框、开关、日期选择器等。

对选择框有几个建议:

A.避免设置默认值:除非您认为大多数用户会选择该值，尤其是必填字段。

为什么？

因为您可能会添加错误，并且用户会快速扫描表单，所以他们可能会跳过一些已经有默认值的字段。

但是，此规则不适用于智能默认值，即根据用户信息设置的默认值；因为智能默认值可以使表单完成得更快、更准确。

例如，根据定位数据预先选择用户所在的国家/地区。

但是，请谨慎使用。

B.当有许多选项时，提供检索功能。

C.提示信息应该清楚，用户应该清楚他们选择了什么。

3)无线电盒和复选框

A.根据一定的逻辑对选项进行排序，例如，根据可能性、难度和风险。

B.选项应该易于理解和区分。

C.尽可能提供默认选项。

4)关于控件的选择

A.选择框比输入框好。

任何高密度操作都会给用户带来不适；因此，当输入项目的选择时，键盘输入被选择所代替。

一方面：简化用户的操作，点击次数远小于输入，减少用户的操作密度；另一方面：减轻用户的认知、记忆负担。

与输入框相比，选择操作步骤少，效率相对较高；同时，用户通过思考输入值，不必承担重新输入错误的风险。

用户可以通过选择项目清楚的知道哪些值可以选择，对于一些不重要或者难以理解的输入项目可以预设默认值，可以照顾到各个阶段的用户。

B.单选框和下拉选择框。

收音盒比较合适。选项比较少(不到五个)，选项也差不多。当需要强调或比较时，可以优先考虑无线电盒。

另外，当首选选项的可见性和快速响应性时，也建议优先选择单选框。

与下拉选择相比，用户可以通过显示的选项直接选择目标选项，从而提高输入效率。

下拉选择框适用于很多选项(五个以上)，有默认选项或选项间差异较大。同时下拉选择，最好不要引起后续条目和页面数量的变化；否则，下拉选择的折叠和页面的改变很容易引起用户的不适。

如果选项太多，二十个以上，最好引入模糊匹配和一定的排序规则(首字母排序、数字排序等)。)，让用户可以提前预测选项的大概位置，或者通过模糊检索找到对应的选项。

5)关于必填项

大多数情况下，所有字段都是必填的，只有少数字段是可选的，必填字段一般标有“*”。

但是星号并不适合所有类型的用户。还记得以前客户问星号的吗？

是页面中的标签还是描述中的标签；同时，红色会从用户端造成负相关，因为红色表示错误。

为了避免这种误解，我们可以使用文本框中的暗提示。

也是标示所需物品的一种明确方式，可以节省空，也可以在一定程度上起到视觉降噪的作用。

3.提示信息

提示信息可分为引导提示(帮助文本、输入框提示、错误提示)和反馈提示。

这里我主要想说一下错误提示的设计:

1)关于错误提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现，在表单顶部显示所有错误信息会给用户更高的认知一致性，迫使用户回忆起每个错误输入框中的错误信息。

通过在输入框之间显示错误信息是减少记忆认知负荷的有效方法。

可以帮助当场识别错误而不是记忆错误，缩短反应时间，提高填表效率。

因此，通过将错误消息提示放在错误字段的旁边，可以获得最佳性能。

让我们看一个简单的例子，如下所示:

当我们输入客户信息时，假设填写了错误的手机号码。根据上面的讨论，错误提示可以最直观的显示在这四个位置。

哪个位置最好？

答案是:对。原因如下:

A.错误信息提示右侧，从左到右符合人们的阅读习惯；用户的视觉路径自然流畅，大大减少了用户的精力和视觉工作。

放在左边正好相反。同时也与用户的预期相反，因为把优先级更高的元素放在左边是我们的直觉。

但实际上，用户需要专注于纠正自己的输入，所以输入框应该是更重要的元素。

B.上述错误信息的认知负荷较高。

标签顶部对齐时，错误提示和输入框中的提示靠得很近，会产生视觉噪音，会分散用户的注意力，难以集中其中一个，可能会混淆。

C.将错误信息放在底部。虽然不符合从左到右的阅读习惯，但确实符合自上而下的自然阅读过程。

手机屏幕缺少横空，下面放错误信息是个不错的选择。

虽然在阅读文本时可能会增加用户的认知负荷(与上述错误信息提示相比)，但可以通过充分分离来防止。

综上所述，如果是web终端，请选择放置在右侧，如果是移动终端，请放置在下方。

当然如果开发时间有限，可以选择放在下面，方便改编。

2)帮助信息

有时需要有用的信息来帮助用户完成表单。

当文本很短时，可以直接放在输入框附近。

当复制过长时，需要制作气泡框——得到鼠标焦点时，展开信息，失去焦点时，消失(气泡展开时，千万不要遮挡输入框)。

还有一些产品把帮助信息放在页面的顶部。如果是为了全局帮助信息，可以采用这种方法。

如果你只提醒一个元素，你应该把它们放在一起，让用户知道你在哪里，你在引导和帮助什么。

动词 （verb的缩写）探索复杂商业形态的布局结构

在复杂业务表单的设计中，采用单列布局。你有没有遇到过类似的问题，比如:

客户1：“单列右侧空白区域过大，留白多，表单太长啦。”客户2：“单列纵向占比大，表单太长，我看不到全部内容。”客户3：“怎么不采用多列，多列我能看的内容多啊”等等…

为了解决这些问题，我们团队从自身业务出发，探索了复杂业务形态的布局。

1.多柱单柱勘探

首先，根据下图中的规则，我们对复杂业务的表单布局进行了多方案实验:

方案1:采用4列布局，顶部标签对齐。

那为什么标签不对？

四列布局，页面已经很拥挤，标签长度不一样，无法确定最大长度(用户自定义)，所以采用标签顶部对齐放置。

总的来说，缩减的长图并不理想。

方案二:三列布局，标签右对齐。

由于三列布局，页面空比较大，尽量将标签靠右对齐，一般可以达到减少表格长度的目的。

但是，如果字段中断，页面信息模块就会混乱。

根据CXL研究院的发现，单表表单比多表表单完成的更快。在这项研究中，参加测试的人的平均速度比多份名单的人快15.4秒；多栏布局减少了表格的长度，提高了空之间的利用率，但整体填充效率下降，这与表格设计原则相悖。

同时，从开发效率来看，单个栏目成本低(多个栏目需要有响应)；从服务承载的角度来看，单列更具扩展性，适合复杂多样的业务场景(多列适合单个场景)。

综上所述，最后采用单列布局。

2.单列布局在复杂业务中的应用

怎么解决问题？

我们团队重新审核了客户的这些反馈:空白色区域太大，空格太大，表格太长，我看不全，不知道什么时候可以填，等等。

我们试着把这些问题翻译成:我无法预测表单的填充内容。不知道用空这个白色的地方能不能看完整个表格。

如果是这样的话，用户的本质需求就是想要一种掌控感。

现有的单列布局处理如下:

a. 采用卡片式布局，区分内容；b. 增加引导式的定位锚点；c. 在锚处加入微动效反馈，给予用户确定感。

感谢阅读！本文为表单设计提供了基本的指导。在具体项目中，您可能需要根据产品特点和用户需求进行调整。

如果有什么好的想法和建议，可以在评论里留言讨论。

参考文献:

http://www.woshipm.com/pd/1058591.html

http://www.woshipm.com/pd/4083149.html

http://www.woshipm.com/pd/3854174.html

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

https://medium . com/nextux/form-design-for-complex-applications-D8 a1 d 025 EBA 6

https://www.jianshu.com/p/bcd76917753e