编辑导语：在TO B产品中，经常会遇到填写表单的设计，从各种表单场景到生成表单等等步骤都是TO B场景中最基础的，设计表单的不同场景以及设计要点也要区分和注意；本文作者分享了8种填单场景和设计要点，我们一起来学习一下。

俗语有言：管中窥豹可见一斑。

填单是TO B产品设计中最普遍的功能，本文通过剖析8种填单场景，讨论其发生原因、原型实现、设计要素，从而总结TO B产品的点滴设计方法。

TO B，我们在路上~~

一、TO B产品和TO C产品的设计差别

郭麒麟在德云社有一句调侃自己父亲的话，我觉得可作为本文的开篇定调——爸爸的快乐你想象不到。

调侃归调侃，话糙理不糙；不同生活环境下的人，价值观截然不同；同理、TO B产品和TO C产品这两种属于不同生活情境下的产物，就生发出不同的价值观。

填单虽然是两种情境下共有的功能，但是两者的产品理念、产品设计就谬以千里；填单场景共8种，本文展现的是TO B情境下的前5种填单场景；每种都在项目中践行过，有场景研究、有原型设计、有要点总结、有方法思考。

这5种填单场景是TO B场景中最为基础的内容，分别为“基础填单场景、自动生成场景、模板填单场景、导入填单场景、复制填单场景”。

二、TO B产品8种填单场景KANO模型图

我们采用KANO模型来归类这8种填单场景，8种填单场景的建设顺序也可按照这个金字塔从下至上逐步进行。

不同的地方在于，TO C做好基本型即可，而TO B因为角色太多、场景太多，所以必须将基本型和期望型均要建设好。

三、基础填单场景

1. 概念解说

基础填单场景是大家最喜闻乐见的填单形式，简言之就是打开一张空白页从零进行填单，这种填单场景我一般将之分为“一页填单”和“分页填单”两类设计形式。

这两类设计形式绝对不是随便乱用的，在多个项目实践我们总结了一些要点可供大家参考。

下面我将围绕“长什么样子？什么条件下用？设计要点？”这3个步骤来分别解说。

2. 一页填单

什么样子？

下面是“一页填单”的设计案例：

什么条件下用？

该种设计形式内容非常简单、一般应用在如下的情况下：

• 各区域之间字段有联动关系；
• 无明确的填单顺序，可以先填写下半部分内容后再上滑填写上半部分内容；
• 填写内容较少；

设计要点？

• 整个填单页要分区域，且区域要有明确的归类名，方便运维服务中定位；
• 要将首先填写的字段，用提示或标志做告知；或者，将首先填写字段做默认设置，默认为上一次填单内容；
• 所有填单内容尽可能压缩在两页内布局，否则用户就会失去耐心和信心；
• 若下半部分内容与上半部分内容存在联动关系，则可先将下面内容做隐藏，可减少用户的填单困惑；

2. 分页填单

什么样子？

下面是“分页填单”的设计案例：

什么条件下用？

• 各区域之间字段没有联动关系，比如不存在修改了第二步内容，还需返回第一步去修改内容；
• 整个填单页有明确的填单顺序，必须先填写顶部内容，再填写尾部内容，则适合分页填单；
• 有明确的必填和非必填之分；非必填内容不填，也不影响产品的正常使用；

设计要点？

• 每一页的步骤名要足够精准；
• 必填内容放置第一页，非必填内容放置第二页；方便用户快速使用产品；
• 每一页不要包含太多内容，尽量不上下拉动页面即可完成一页填单；

四、自动生成填单场景

1. 为何需要自动生成填单场景

填单的最高境界就是“不填单”。

在TO B产品设计中，每一张单都是一次成本的挑战之旅；从端到端数据流转角度，最理想的所有数据会自动归集，而无需人工录入；可现在因为烟囱式的系统架构，数据都是割裂在各个系统内，所以人工录入被迫成为必然。

自动生成填单场景就是数据的自动归集。虽然现实很残酷，但是梦想依然有。

比如客户数据、项目数据、供应商数据等基础数据，就可无需在多个系统内维护；每个系统建立开放API体系。降低边缘系统的数据维护成本，就是TO B产品的必备设计形式。

2. 自动生成填单场景的设计要点

自动生成填单场景有很多场景，我们总结其要点如下：

• 每个TO B系统都必须开放API；在TO B没有一套系统是独大是缺一不可的，所有系统相通才可全面的服务好企业员工。
• 在实施过程中，基础数据最好统一归集在数据中台，可提升数据的稳定性，减少API；

五、模板填单场景

1. 为何需要模板填单场景

在B端场景下，有如下3个原因造成填单人必须要有模板填单场景。

1. 业务发生频次低，可能一年才有1~2次，所以填单人经常会忘记上一次填单的填写内容；那么填单人只需要按照上一次填单内容进行填写即可；
2. 企业内填单人的岗位固定，填单人的工作内容固定，所以只需要维护特定的几个模板即可。
3. B端系统非常复杂，填单人并无动力去学习产品操作，填单的时候才临时抱佛脚。

2. 模板填单设计要点

如何设计模板填单太过简单，我就不贴产品原型图了。只列一下模板填单设计的关键要点。

1. 模板填单的基础功能为：新增（在填单页和单据详情页有一键生成模板功能）、编辑、单个删除、单个导出、重命名；
2. 模板填单的拓展功能为：分类、分享、批量删除、批量导出；分类针对的是模板过多情况，可根据运营数据来看；分享可以和本文的“分享填单场景”一并考虑；
3. 模板填单必须嵌入到填单入口，因为模板填单若独立，则会造成该功能发现不了；

六、导入填单场景

1. 为什么要导入填单场景

导入填单场景是指通过表格导入的方式实现单据内容填充，导入填单场景的必然性就是由“一张单中填写内容过多”所造成。

2. 导入填单场景设计要点

导入填单场景不外乎就是将一个EXCEL表按照固定格式导入到平台中，原型也没必要放，浪费大家流量。直接进入关键要点：

1. EXCEL表的模板必须在线，也就是模板下载位置和导入位置要在一个区，且模板内要明确标识出必填内容、填写样例；
2. 导入前必须做校验；非常不建议部分校验通过就允许导入。这会提升表格维护成本。
3. 支持导入后的内容，一键清除；

七、复制填单场景

1. 为什么要复制填单场景

复制填单是指在对单据执行一键复制动作，该动作可复制单据所有内容，从而降低用户填单成本；“复制填单场景”和“模板填单场景”比较雷同，区别点是前者聚焦单的特异性，需全面复制该单的特异性填写内容；而后者聚焦单的类别性，是为了归纳某类单据类型。

2. 复制填单场景设计要点

• 复制填单的按钮一般都在历史单据列表页中体现，位置为每一单的操作区；
• 复制原页面的时候，要尽可能复制全面一点；因为你不知道用户是那一块区域不知道填、不想填；或许用户复制原页面，只是因为摘要内容不想自己再写一遍呢。
• 复制填单是辅助流程、要嵌入到填单流程中，才可真正激活；

剩余的“业务发生源、分享填单场景、AI语音填单场景”在下一篇文章会分享。

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

题图来自Unsplash，基于CC0协议