前言

       表单用于通过输入或选择等方式录入信息给系统。表单作为基础通用组件，也是在各个企业级中台中出现频率最高的元素之一。在用户界面中表单无处不在。表单设计是B端产品设计的基础页面，想要做好表单设计首先要搞清楚表单的应用场景。

       表单也是用户采集数据信息的核心场景，同时又通过表单向用户展示数据信息，简而言之表单是用户与数据库之间的桥梁。它可以确保用户按要求填写信息并提交给后台使用或引导用户进行各种设置，好的表单可以帮助用户提升效率增加用户满意度。

       在B端产品中，表单是用户向系统传递和修改数据信息的主要方式，同时也是系统获取用户数据、响应反馈结果的主要方式，可以说表单是人机交互中重要的数据媒介。

       由此可见表单的重要性，今天我们来详细分析一下表单。

       那么，我们为什么需要表单？

       原始的系统或软件是没有用户信息的，用户通过表单来进行数据信息的录入，录入的信息越多，数据库管理的信息就会越多，才能凸显出该系统或软件的数据管理优势才能实现其价值，因此表单是实现产品管理价值的第一步。

       例如我们常用的“飞书”、“teambition”、“语雀”等产品本身是没有数据信息的，想要实现其产品价值就要通过用户录入表单信息到数据库，录入的数据信息越丰富越能体现产品读取/管理数据信息的便捷，所以表单设计的质量高低也影响了整个产品的满意度评价。

1.设计原则

1.1高效性

       我们对信息的标识应简洁且直击目标点，要能将用户的逻辑与表单的逻辑相融合。通过合理的信息输入组件与页面布局和交互方式，使用户快速完成表单页的信息填写任务。

       例如，必填选项与非必填选项标示问题：

当全部为必填项时可以不用标示；

当必填项数量占比极大，非必填项只占很少部分时可直接标注非必填项，降低用户的视觉干扰；

当必填项比重不大则需要标注必填项表识，而非全部加上标注说明。

        我们不难发现，右边表单好的原因是因为——它的选项数量更少了。这样一来，用户接收了更少的信息，却得到了相同的反馈。

1.2准确性

       表单的准确性表现有很多，主要指不要让你传达的信息产生歧义，让所有的用户看到这个信息后的用户行为保持一致，规避用户犯错。

       快速定位表单重要信息和当前填写选项，例如，飞书文档左侧快速定位。

        其实不仅仅是飞书，很多B端表端在设计时，都具备了快速定位的功能，让用户明确自己所处的位置。用户应时时刻刻明白自己当前所处的位置，能与表单不断进行交互，切不可出现空白状态。

1.3一致性

       在对同一页面的组件进行设计时，其中的字号、颜色等都需保持一致，避免给用户造成混淆增加理解成本。

1.4安全性

       要有一定的危险操作保护措施，例如，返回不保存表单的危险提示，或即时保存表单的安全操作，防止数据丢失；同时针对不同的使用场景增加返回上一步、重置填写、撤销填写等帮助用户修改错误的功能。

       这也就是我们通常所说的防错原则。

2.表单结构

1.标题区（Label) 一般是名词为主，主要是给用户一个填写的心理预期。
2.输入区（Body）一般为请输入，当输入内容比较固定时，可明确提示，比如请输入管理员姓名。
3.提示区（Footer）帮助用户正确理解输入内容的含义及填写引发的结果。
4.提交区（Submit）让用户能快速提交本表单。

下面对以上四个区进行举例说明。                        

2.1标题区（Label)

必填/选填
       当产品列表中表单为大量可选项少量必填项时，应只对必填项使用必填项；当产品中存在大量必填项少量可选项时，应只对可选项使用选填项。

       我们将选填项进行标注后，那么就节省了用户的时间，让用户明确主次关系。

2.2输入区（Body）

       输入区（Body）一般为请输入，当输入内容比较固定时，可明确提示，比如请输入管理员姓名。

       也可以增加内容提示，但应注意比较简短，不超过输入框，因为输入文字后提示内容消失，所以内容提示需简洁明了。如：提示选择日期、提示输入金额数字、单选项提示单一内容。

2.3提示区（Footer)

表单基础提示分为「引导提示」与「校验提示」两种类型。

引导提示
1.用于提示输入过程中需要持续注意的重要事项，默认在底部显示，可针对部分字段配置一段链接
2.底部提示文案宽度不可超过输入框宽度，引导文案不可超过两行。

校验提示
1.用于当前表单进行校验后的结果展示，表单可在输入后即使校验或者在页面提交时统一校验，分为校验态、成功、警告、报错 四种状态。
2.当提示警告或报错时，可针对部分文字配置一段链接。

       

       当然，我们要考虑到过长的校验文本，在不超过输入框宽度的前提下，提示文案长度若超出两行，则缩略展示。

2.4提交区（Submit）

        这个区域设计相对简单，在设置按钮时，考虑到用户的眼动模型和心理认知，以此为基础进行设计。

我们可以参考cta按钮设计原则：一文了解cta按钮。

        除过以上的四大分区，表单也包含其他构成，例如：

标签：表单内容项的名称，说明对应表单含义以及向用户说明应该录入信息的类型。

占位符：一种辅助用户的录入线索，位于输入区。

操作按钮：“完结”表单操作流程的触发器，用于向服务器提交数据或者放弃操作。较复杂表单结构中的按钮也更为复杂。

        当然，操作按钮也隶属于提交区，是其中的一种表现形式。

3.展现形式

3.1标签

       顶部对齐

       标签根据标签与输入域的位置关系，分为：左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

每种标签样式都有自身的优点与局现性，根据不同的场景选择适合的标签样式，能提高用户阅读效率，同时还能降低信息填写时的错误率。

       顶部对齐：根据Matteo Penzo 发布的关于标签放置的文章表明：采用顶部对齐的标签样式，浏览表单所需的时间最短；如果希望用户能快速扫描填写表单，顶部对齐的标签是一个不错的选择。

   

       如果你无法理解以上这个表格，那么眼动模型或许可以给你启发：认识眼动模型

       现实生活中，人们对于左右的反应要弱于对上下，很多人对于分辨左右方向需要一定的反应时间，但对于上下几乎是不假思索的。        

    

       标签位于输入区上方，字段与输入区左对齐。标签和输入区的亲密性强，“I”字型的视觉动线使得用户阅读、填写效果较高。对于标签字符长度大，尤其是外文标签，顶对齐表单的适应性更强。上下排列结构对页面的纵向空间有一定要求。

顶部对齐的结构，使得能放下更长的标签；但对于纵向空间是一个挑战，当填写信息过多时，表单就会很长。

• 优点：有最快的浏览和处理速度，同时标签长度弹性大。

• 缺点：非常占纵向空间。

       

       左对齐

       左对齐标签，文字开头按阅读视线对齐，符合人们的阅读习惯，是有利于阅读的。

浏览表单所需时间最长，但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等，可以故意减缓用户的填写速度，来确保填写的准确性）。

       

       左对齐的结构需要更多的横向空间，因此在移动端的呈现上可能是个问题。此外，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。

       优点：文字开头按阅读视线对齐，方便阅读，节约纵向空间。

       缺点：填写速度慢，标签长度和输入框弹性小。

       右对齐

       右对齐使得标签和输入之间的距离固定，有明确的视觉关联。

对于简短的表格，右对齐的标签可以有很快的完成时间；但由于标签长短不同，左边缘参差不齐，整体扫读表单的时候不容易了解全部信息。

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

优点：时间较短，节约纵向空间。

缺点：整体可读性低，标签长度和输入框弹性小。

       内联标签

       内联标签由于它对空间的占比很小，往往运用于移动端的界面设计中；但如果在交互上处理不好，会有很大的缺陷。

内联标签是用作提示性文字，来告诉用户应该填写什么内容，但用户在填写的适合，它就会消失；因此用户无法仔细检查他们是否写下了所要求的内容，这增加了错误的可能性。

另外一个问题是：用户可能会把占位符文本误认为预填数据，因此忽略它（正如尼尔森诺曼集团的眼动追踪研究所证实的）。

       另一种形式——图标内联式，虽在一定程度上缓解了用户迷茫和怀疑心理，但一些语义性不强的图标也会可能造成用户的认知负担，加大用户学习成本。

优点：空间占比小。

缺点：在增加错误的可能性。

       浮动标签

       用户在输入时，内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在。

但相比其他几种标签样式来说，需要一定的开发成本。

优点：空间占比小，无需用户对标签进行记忆

缺点：需要一定的开发成本

       那么以上的排列方式如此繁多，我们需要选择哪种排列方式呢？这里将每种排列方式适用的场景列举了出来。

3.2输入区

       输入域也是组成表单不可或缺的一部分，包它含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件。选择适合的控件样式，能在一定程度上提高表单填写的效率。

       文本框

       文本框包含了单行文本框和多行文本框。针对单行文本框的设计建议：选择适合的大小，它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

       采用字段掩码，自动匹配特定数字的输入格式。例如：电话、身份证、银行卡等；按照7加减二法则，根据用户的记忆结构来最大化提升阅读体验。

       涉及到金额输入时，当用户输入的金额超过千时，出现最高分位提示，每多输入一位，最高分位随之增加。

       文字输入最好有自动补全、自动建议功能，减少不必要的文字输入，减少出错。

例如：填写地址栏通常是表单中最成问题的部分，像地址自动填充（基于用户的定位和输入提供准确的建议）的工具使用户能以更少打字量完成输入。

       什么是7±2法则？
早在19世纪中叶，爱尔兰哲学家汉米尔顿观察到，有一个神奇的7±2效应；意思就是人们的短时记忆的信息量是7个，可能会上下浮动2个。

      

       针对多行文本框的设计建议：使用可拉伸的文本框比固定框更好，从使用体验讲，可变化的文本框使页面整体效果更统一。

       固定文的文本框当输入文本超过其设置的宽度，会出现内滚动条，当页面上出现两个滚动条时（大页面的滚动条），在使用操作上会带来一定的混乱。

        

       选择框

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

对于选择框有如下几个建议：

1. 避免设置默认值：除非您认为大部分用户将选择该值，尤其是必填字段。

为什么？

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

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

例如：根据定位数据预先选择用户所在的国家/地区。不过，请谨慎使用。

2. 当选项很多时，提供检索功能。

3. 提示信息要明确，要让用户明确自己选择的是什么。

       对控件的选择

       选择框优于输入框。

任何高密度的操作，都会引起用户的不适；因此，在输入项的选择时，用选择来代替键盘输入。

一方面：简化用户的操作，点击次数远小于输入，减少用户的操作密度；

另一方面：减轻用户的认知、记忆负担。

       相较于输入框，选择操作步骤少，相对来说效率较高；同时，用户用思考输入值，也不用承担输入错误要重新输入的风险。

       用户可以通过选择项，清晰明确的知道有哪些值可以选择，对于一些无关紧要，或者用户较难理解的输入项，可以预制默认值，可以照顾到各阶段的用户。

      单选框与下拉选择框。

      单选框较为适合选项较少（少于五个），同时选择项之间较为类似，需要强调或对比时，可以优先考虑单选框。

另外，当选项能见度和快速响应优先时，也建议优先考虑单选框。

       因为相较于下拉选择，用户可以通过展示出来的选项，直接选中目标选项，提升输入效率。

下拉选择框较为适合选项较多（超过五个），有默认选项或者选择项之间有较大差异，同时下拉选择，最好不要引起随后输入项数量以及页面的变化；否则下拉选择的收起以及页面的变化，易引起用户不适。

若选项过多，超过二十个，最好引入模糊匹配以及一定排序规则（首字母排序、数字排序等），方面用户提前预知选项的大致位置，或通过模糊检索找到相应的选项。

3.3提示信息

       

       必填提示

       必填提示是在一个表单模块中，用来区分哪些内容项是必填写的，哪些是非必填的。通常用一个红色的“*”表示，过多“*”会造成页面视觉噪点的增多，给本就枯燥的表单页面增加视觉压力；有些情况下，红色作为一种有特殊含义的颜色，会引起用户误解。

       为避免过多的视觉噪点，我们可以利用标签或者占位符来提示用户哪些内容项是必填的，哪些是非必填的。

       错误提示的设计也是我们应该注意的点。

       关于错误提示的最佳位置

       Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息，会给用户的记忆造成较高的认知符合，会强制用户回忆每个错误输入框中的错误消息。

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

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

因此，错误信息提示与错误的字段邻近放置可以获得最佳性能。

下面来看一个简单的例子，如下图：

       当我们在录入客户信息时，假设填写错误手机号码，按照上面的论述，错误提示可以最直观的显示在这4个位置。

哪一个位置是最佳位置呢？

答案是：右边。

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

放在左边则恰恰相反，同时左边与用户期望相违背，因为左侧放置更高优先级的元素，是我们的直觉。

但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。

       2. 对于上边的错误信息提示，有着更高的认知负荷。

当标签顶部对齐时，错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音，用户注意力被分散，很难专注于其中一个，并且可能混淆它们。

       3. 放置下边的错误信息提示，虽然不符合从左到右的阅读习惯，但它确与自然的从上倒下的阅读流程相对应。

手机屏幕缺少水平空间，把错误信息提示放置在下方是个不错的选择。

       虽然它可能会增加用户阅读文本时的认知负荷（与类比上边的错误信息提示），但可以通过将它们隔开足够的间隔来防止这种情况。

       帮助信息

       有时候需要帮助性信息，来辅助用户完成表单填写。

当文本简短的时候，可以直接放在改输入框的附近。

当文案过长的时候，就需要做气泡框——获取鼠标焦点，则展开信息，失去焦点则消失（在气泡展开时，切忌勿挡住input输入框）。

也有些产品是将帮助信息放在页面顶部，如果是针对全局帮助性信息，则可以采用这种方式。

如果只是针对某个元素提醒，则应将两者放在一起，让用户知道当前处于什么地方，在针对什么进行引导、辅助。

       反馈提示

       反馈提示是在用户输入时或输入后对输入内容进行的反馈，提示当前输入域所填写的内容是否符合填写规则，一般有正确、错误、警告三种状态。

       其中，正确状态通常不给予任何提示，也可采用图标进行反馈，让用户感受更加直观；反之当用户录入的内容与规则不符时，给予错误提示信息。警告状态往往与文本框相结合，当字数超过规则的限制时，给出相对应的反馈。

4.布局方式

1.单列布局

在表单页面横向方向上放置一列表单，比较符合人们的阅读习惯，“I”字型的视觉动线引导用户从上到下浏览、填写表单，内容项不多的前提下，是表单操作效率最高的布局方式。

2.多列布局

在表单页面横向方向上放置两列或多列表单，这样的布局会让页面的利用率得到提升，但“Z”字型的视觉动线引导用户从左到右，再从上到下的阅读，会使操作效率和用户体验在一定程度上打折扣。

3.分步式布局

适用于内容项复杂、有明确先后顺序的的表单内容，将其按照一定的逻辑关系组织成线性流程，利用步骤条告知用户完整流程和进度，当前流程只展示此流程下的表单内容，数据校验也在此流程结束时完成。也是将复杂表单任务切割，提高录入效率，提升用户体验的常用方式。

4.tab页签表单

适用于内容项复杂，且不同内容可以通过一定的逻辑进行分类归纳的表单内容，不同类别之间相互独立，用户可以切换不同类别浏览填写所有表单数据，表单footer区放置具有“完结”流程属性的操作按钮。也属于一种将复杂表单简单化的方案。

5.此外，还有通栏式，左右式和左中右式。

这里再阐述一下设计的规范：

统一尺寸

据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。

适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。

页面框架

页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

栅格布局

栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。

需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。

谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。

尺寸设定

一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度  200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。

相对间隔

定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。

       那么以上就是关于对B端表单的的分析，非常感谢大家的观看！