表单作为 B 端产品重要的信息载体，有着举足轻重的作用，通过设计的手段来提高表单的易用性不仅能够改善用户体验，降低错误率，提高填写效率，还能增加用户参与度和完成率，同时对企业或组织而言提高效率和减少成本。
- 提升用户体验：易用性是用户体验的核心要素之一。通过设计易用的表单，用户在填写表单的过程中将更加轻松、愉快，减少用户的困惑和不满意，从而提升用户对产品或服务的整体感受。
- 降低用户错误率：易用的表单设计可以减少用户填写时的错误率。通过清晰的标签、合理的表单验证和错误提示等设计，可以引导用户正确填写信息，提高数据的准确性和完整性。
- 提高填写效率：易用的表单设计可以简化填写过程，减少用户填写的工作量和时间消耗。例如，使用默认值、预填选项、自动填充等技术，可以快速填写常见、重复的信息，提高填写效率。
- 增加用户参与度和完成率：易用的表单设计可以降低用户的参与门槛，激发用户的积极性和参与度。通过减少复杂度、提供指导和帮助，可以鼓励用户完成表单填写，降低填写过程中的放弃率。
- 对企业或组织而言提高效率和减少成本：易用的表单设计可以减少用户填写过程中的错误和纠正，从而减少后续的沟通和处理成本。同时，易用的表单设计还可以提高数据的准确性和可用性，为企业或组织提供更精确和有用的信息。
①当表单中仅有极少数是选填，其他都是必填时，可以通过去掉提示符来进行降噪处理。
左：降噪前 右：降噪后
②隐藏非必填的字段，只保留用户必须填写的信息，如下图，把选填项收进“展示更多”。
左：隐藏前 右：隐藏后
即使明知用户没有强烈意愿填写非必填项，设置选填项也是有一定原因的：
- 提供更多信息的机会：一些用户可能有意愿提供更多的信息，以便获得更个性化的服务或更符合其需求的产品。因此，设置选填项可以为有意愿的用户提供一个自由填写的空间，从而更好地满足其需求。
- 降低填写压力：明确标识哪些项目是必填项，哪些是选填项，可以减轻用户的填写压力，让用户更轻松地填写表单。有时候用户可能会觉得需要填写的信息太多或太麻烦，设置选填项可以减少用户对表单填写的抗拒感。
- 用户意愿变化：有些用户一开始可能没有意愿填写选填项，但在填写过程中可能会因为某些原因发生变化，因此设置选填项给予了用户更多的选择灵活性。
- 收集额外信息：对于企业或产品方面来讲，收集一些额外的信息可能有助于更好地了解用户需求、行为和喜好，进行更精准的定制推荐或个性化服务。
在表单设计中保证清晰明了的标签和填写指引是至关重要的：
- 帮助用户理解：清晰的标签和填写指引可以帮助用户准确理解每个字段的含义和填写规则，降低用户填写时的困惑和错误率。
- 提升用户体验：用户在填写表单时，如果能够清晰地知道每个字段的作用和要求，将会感受到更加愉快和轻松的用户体验。
- 降低填写难度：对于一些复杂的表单或需要填写大量信息的表单而言，清晰的标签和填写指引可以降低用户的填写难度，让用户更容易完成填写。
- 减少错误和纠正：如果用户填写表单时存在理解上的偏差或误解，可能会导致填写错误。清晰的标签和指引可以减少用户填写错误的可能性，降低后续纠正的成本和工作量。
因此，保证表单中的标签清晰明了、填写指引清晰易懂是设计表单时必须要考虑的重要因素，它直接影响到用户填写体验的质量和表单数据的准确性。
当用户面临一个长表单时，巨量的填写内容会给用户造成填写压力。如果业务本身具有流程化的特性（如注册、认证、发布等），将表单分成多个步骤并提供清晰的导航，以逐步引导用户填写信息，就可以降低填写压力，提升用户体验。
但是分步填写也有个小缺点，即用户无法第一时间感知所有的填写项，必须完成当前这一步操作才能看到下一步操作。
分步填写
分页（左侧分页导航）填写
在用户输入内容后，实时对用户的输入进行验证，及时就近反馈用户填写错误或格式不正确，并提供相应的修正建议，这样能让用户准确的获取到错误提示，并快速定位到相关项。
基础表单验证提示
高级表单验证提示
即时反馈可避免用户提交后再进行大量修改
为一些常见的选项设置默认值，或者根据用户之前的选择自动填入相关字段，能够减少用户的输入操作，提高填写效率。
关于表单域默认数值的讲解可见上篇分享 《B端数据可视化设计经验分享第二弹：表单设计（上）》 的 2.3.2 处。
合理的利用智能辅助可以有效的提高数据收集效率和准确性，还能显著改善用户的填写体验，减少用户的挫败感和放弃率。常见的智能场景有：
① 根据缓存或上下文信息自动填充
利用浏览器已存储的信息或者数据库中的相关数据来预测和自动填充表单字段，例如根据手机号带出用户姓名；根据地址带出邮政编码；根据身份信息带出生日。
根据身份证号带出生日
② 根据条件逻辑进行展示或隐藏表单的特定部分
如例图，如果用户选择“是”选项，则展开填写开启寄售信息的相关字段；如果选择“否”，则这部分字段隐藏。
根据是 or 否的条件逻辑进行展示或隐藏表单的特定部分
③ OCR 识别文件内容
对于一些标准证件信息的录入，如身份证件、特定类型发票等，可以通过 OCR 识别文件内容。当用户上传图片后，运用图像识别技术提取关键信息并自动填入结果。OCR （Optical Character Recognition，光学字符识别）是指电子设备检查纸上打印的字符，通过检测暗、亮的模式确定其形状，然后用字符识别方法将形状翻译成计算机文字的过程。
发票识别
证件识别
采用响应式设计能确保表单在不同设备上都能够正常显示，以适应不同屏幕尺寸和分辨率，提供一致的用户体验。
B 端设计师如果设计时不考虑适配，前端工程师就会站在他的角度根据自己的认为合理的方式进行适配，在实际使用时就会导致体验不好，后面想在调整就得重新等排期了，因此在设计时就需要根据使用场景把适配方式定好，例如只会在有台式机或笔记本的情况下操作，那么一套适配即可；如果既可以在电脑上操作又可以在移动端上操作，那就要做多端适配。 表单在设计时一般有 2 种适配方式，一种是固定适配，一种是间距适配。
① 固定适配
固定适配指表单中信息宽度固定不随分辨率变化而变化，要保证最小分辨率能够正常显示。所谓最小分辨率是指客户公司使用的最小屏幕分辨率。比如客户公司用的统一是高配 4K 显示器的电脑，那么就设定最小兼容分辨率是 3840；如果客户公司除了高配 4K 还有较老的显示设备，如 1280×720，那么最小兼容分辨率就要设计为 1280；如果客户要求在移动端也能使用，那么就应该按照移动端的设计规范重新设计单独适配。
随分辨率变小，数据项自动掉下来
②间距适配
间距适配就是使用固定的左右间距，不跟随页面的宽度变化。当页面宽度变大时，组件自适应变宽。
该适应方式在弹窗、抽屉中较为使用，表单页中不太推荐使用该方式，因为当分辨率变大，眼动的视觉变大，不利于信息浏览。
我见过许多 B 端产品，在移动端上套用 PC 端的组件，非常难用的同时还特别容易出现 bug。Android 和 iOS 都有用于特定类型数据输入的默认组件，尽可能使用这些内置的组件，这样用户会更熟悉原生的选项，表现和体验会更好。
在设计表单的标签时，目标是最少的字段和最大的清晰度。日常项目中的产品原型中，会遇到一些标签字段特别长的情况，这时设计师就需要研究如何用更简洁的语言来表达。
当填写电话号码、身份证、银行卡、订单号等较长的数字时只需要一个输入字段，避免将数字拆分为多个输入字段。分成多个字段虽然看起来清楚，但需要用户多次点击输入，操作更繁琐。而且考虑有复制字段的场景，更不能分为多个字段。
所谓防错纠错，就是通过对表单字段格式的限制，来减少用户输入的误差。
① 字段格式限制：
比如像手机号、银行卡号、金额等纯数字字段，在开发阶段就要对格式加上限制，即该字段的输入框内只能输入 0-9 的阿拉伯数字，输入其他字符无效，且要限制不同字段的数字上限，如手机号码 11 位，身份证号 18 位等，这样就可以极大的避免误输入其他字符的情况。
又比如车牌号这种字段，是没有 I 和 O 的，同时为了避免省份简称输入错误，需要用车牌号专用虚拟键盘来输入，可以极大的避免输入错误。
车牌输入专用虚拟键盘
② 封闭不正确道路
封闭不正确道路是指把有可能进行误操作的路径堵死，此路不通。例如客户需要配置一个 banner，这个 banner 的时效是未来 N 天，那么为了数据的真实有效，就需要将超出时间选择范围的日期置灰，避免把开始时间或结束时间配成今天之前的无效时间。
配置时段时，将无用时段无效化
“需要在哪里输出，就要允许在哪里输入”这句话是交互之父阿兰·库珀（Alan Cooper）说的。
阿兰·库珀
在一些列表中，有时候需要对字段内容进行编辑，比如修改数据或者修改备注等信息，虽然大多时候需要弹编辑框口或跳转到编辑页，但在可编辑数据量不大的情况下，最好的方式是在当前列表中直接修改编辑，这样整个操作都在用户的视线内完成，无需进行页面跳转打断当前注意力。
试想一下，当你花了十几个小时编辑了一篇文章，啪，很快啊，停电了；继续想一下，你小心翼翼的把一个巨量信息的表单填完了还没点提交，结果鼠标误点了一个 button，啪，很快啊，加载出了一个新页面。怎么样？血压有没有升高？有没有同时想起被 PS 的保存机制支配的恐惧？
表单设计中要做自动保存功能有几个重要原因：
- 防止数据丢失：自动保存功能可以在用户填写表单时定期保存其输入的内容。这样，即使用户在填写过程中意外关闭了页面或浏览器，也能够保证填写的数据不会丢失，从而提高用户的填写体验和满意度。
- 减少用户操作：自动保存功能可以减少用户手动保存的需求，节省用户的操作时间和精力。用户不需要担心频繁地手动保存，而是可以专注于填写表单，提高填写的效率和顺畅度。
- 增强用户信心：有了自动保存功能，用户填写表单时会感到更加放心，因为他们知道即使发生意外情况，他们的数据也能够被安全地保存下来。这种信心可以促使用户更倾向于完成表单填写，而不会因为担心数据丢失而中途放弃。
- 提升用户体验：自动保存功能可以提升用户的整体填写体验。用户不必担心数据丢失或重复填写，填写过程更加流畅和愉快，从而增加用户对产品的好感度和满意度。
常见保存分为三类，手动保存、自动保存、提示保存。其中手动保存是主动行为，这里就不介绍了，着重聊下自动保存和提示保存。
常见的三种保存方式
① 延迟草稿存储
目前市面上大部分产品都具备延迟存储功能，例如：Word、Axure、Xmind、ZBrush、CAD、PohtoShop 等等；特点：
- 在工作暂停间隙间自动保存；
- 如果连续工作没有暂停，则每隔 X 分钟自动保存一次（时间可由用户设置）；
- 在后台默默地保存，没有提示和进度条，不会干扰用户；
② 随机草稿存储
特点：
- 每隔几秒自动保存一次；
- 可以看到上次自动保存的时间，并且可以手动保存；
- 所有自动保存的版本都留着，可以随时回退到其中的任何一个版本(如 figma)；
- 在站酷上撰写和编辑帖子和页面时，所做的更改每隔几秒钟会自动保存一次。
站酷是每 5 秒触发一次自动保存
③ 条件草稿存储
条件存储顾名思义就是由某个条件触发从而达到保存的目的，比如 PohtoShop 中的历史记录功能。特点：
- 每隔一段时间或者一个触发条件自动保存一次；
- 当用户手动关闭文档之后，自动保存的版本会被清空（部分可选择是否保存历史记录）；
- 如果是非正常关闭，如电脑死机或者断电，异常自动保存的版本会保存在硬盘上；
- 当你打开文件时，如果检测到一个异常自动保存的文件，它会提示你保存或者打开该文件；
④ 提示保存
设计师常见的提示保存
提示保存是 B 端设计中非常重要的保存方式。它和自动保存不同的是，自动保存是帮你兜底，而提示保存是防止你误操作。因为复杂的 B 端系统到处都是可点击项，一不小心误操作发生页面跳转，没有保存的前提下必然会导致已编辑的内容丢失。
当监测到用户有编辑行为但没有保存就想跳转或离开当前页面的时候，弹出一个温馨的提示：您是否需要保存呢？用户可以选择去保存或者直接离开，用提示保存的办法就可以基本杜绝用户忘记保存的问题。
表单页可以对填写的物料内容进行映射，展示真实的效果预览。在设计中，可以利用开发工具或框架支持的预览功能，确保在移动端、网页、小程序等不同的平台或设备上都能准确地展现填写后的最终效果。同时，该预览功能可以降低用户对操作结果不确定性的心理负担，提升用户体验。
如图例，左栏用于选择组件，中间栏显示可视化的表单编辑区，右栏则用来对选中的组件进行具体的编辑和设置。这种布局有助于清晰地看到编辑内容与表单结构的关系。
在 CMS 系统的富文本编辑器中，也可以加入不同端的预览模式，能做到编辑器中排版的样式即时预览，可极大提高用户体验。
对表单进行用户测试，或者收集用户反馈，了解用户在填写表单过程中遇到的问题，以持续优化和改进表单设计。
使用 B 端的人，通常是该行业最前线的人，他们非常了解自己的业务流程，也知道使用 B 端产品中会有哪些痛点，B 端产品设计师需要积极的从用户那收集反馈，使表单更符合用户的使用习惯，只有不断的打磨，才能让产品更完美，更高效，更安全。
如下面的贷款审核模块，优化前审核人员只能一个订单一个订单的进行审核，不断重复“查看-审核-提交-关闭-查看”的动作。
优化前：逐个审核
听取审核人员建议后，新增审核模式，可以对未审核的订单进行批量审核，减少了不必要的操作路径，极大的提高了审核效率。
优化后：批量审核
总而言之，表单作为B端产品最重要的数据桥梁，其设计优劣直接决定了信息流转的效率与质量。本文探讨的14个要点，从清晰的标签指引到智能的防错保存，共同构筑了一个以用户为中心、以效率为目标的表单设计体系。掌握这些原则，意味着你的设计将从“功能实现”迈向“体验卓越”，真正为业务赋能。
