热搜:
编辑导语:在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语音填单场景”在下一篇文章会分享。

标签: 京东