内容采集系统( 什么是表单设计“录入”B端产品常见的任务场景 )

　　内容采集系统(

什么是表单设计“录入”B端产品常见的任务场景

)

　　

　　一、什么是表单设计

　　

　　“入口”是B端产品常见的任务场景，常用于采集或验证用户信息。

　　在设计录入表单时，应尽量减少用户的思考和理解负担，提高表单的操作效率，降低用户出错的概率，从而提高录入任务的完成度和满意度。

　　不同的用户数据需要不同的表单设计，以适用于各种场景功能。

　　

　　表格输入

　　

　　在新零售行业，表单应用场景无处不在

　　二、表格类型1.基本表格

　　基本表单是目前最常用的输入方式，在系统中采用单独的页面来承载表单内容。页面通常收录三个部分：页面标题、表单区域和操作区域。

　　适用范围：适用于条目较少的表格，所有条目都呈现在一页上。

　　动作按钮的位置：

　　1.如果输入项很少小于半屏，可以在表单末尾显示操作按钮，减少鼠标移动路径；

　　2.如果输入项很多，浮页底部会显示操作按钮。

　　2. 分步表格

　　这种类型的表单录入模式通常用于拆分复杂的录入流程。步骤条的显示可以更好地帮助用户了解完成任务所需的步骤和当前阶段。

　　适用范围：适用于输入项多、任务依次填写的表格；只有完成上一个任务的填写后，才能进入下一步。

　　在某些场景下，系统只需要用户输入简单的信息。在这种情况下，您可以考虑使用条目弹出方式。在某些情况下，比如用户在一个任务进程中，当需要进行一些任务操作时，系统需要向用户发送采集信息，但又不想打断用户所在的进程。在这种情况下，可以使用输入弹出窗口。窗口模式，减少页面弹出的感觉。

　　适用范围：通常用于轻量级任务，弹窗可携带少量输入项。

　　防范措施：

　　3. 组表单

　　对于输入项较多的页面，信息按照一定的规则分组呈现，将大大降低用户的理解和运营成本。

　　可以按照以下原则进行分组：

　　按必填项划分：如果表格中有必填项和非必填项，且之前的项目关系不密切，则可以将必填项分成一组优先呈现。这种方法可以帮助用户快速发现他们需要输入的内容。

　　按相关性分类：如果输入项较多，且各个内容之间存在明显的相关性，则可以考虑按内容相关性对信息进行分组。这种方法可以帮助用户理解项目之间的逻辑关系。

　　按运营成本划分：如果录入项的操作存在差异或用户难以获取待录入内容的信息，可将易于录入或易于获取信息的录入项放在表单的顶部，具有优先级。展示。这种方法有助于降低用户的进入门槛。

　　三、表格

　　表单由表单标签、表单域、提示信息和操作按钮组成。

　　

　　1. 标签

　　标签用于提示用户需要输入哪些信息。

　　合理的标签排版结构可以提高用户的阅读效率，降低填写信息时的错误率。常见的标签布局形式有：左右结构、上下结构和内部结构。

　　

　　1.1 左右结构

　　左右结构是目前常见的表单布局，减少了页面的垂直占用空间，增加了水平占用空间。由于PC端横向空间较大，在条目不多的情况下可以使用这种结构。

　　左右结构进一步分为右对齐标签和左对齐标签。

　　

　　左右对齐标签

　　

　　左对齐标签

　　1.2 上下结构

　　上下结构具有很强的信息浏览和填充效率，用户的视觉浏览路径比左右结构短。这种结构适用于需要在一行中放置多个条目的情况，或者适用于标签名称通常很长的表单。

　　

　　上下标签

　　1.3 内部结构

　　内部结构很少出现在 B 侧，有时用于 C 侧。对于用户需要输入的内容，只保留提示文字。当用户输入时，内部标签/提示文字会消失，这会让用户难以判断输入信息是否准确。此表单适用于输入项较少（如登录）的表单。

　　

　　Matteo Penzo 研究了标签对齐的时间线

　　基于Matteo Penzo的对齐方式的时间表总结：单从效率来看，上对齐>右对齐>左对齐。根据不同的业务场景，效率并不是唯一的考虑因素。

　　2. 输入字段

　　输入域用于采集用户数据信息的核心内容，每个输入域域收录一种数据信息。

　　选择合适的输入字段：对于用户来说，最好的表单填写体验会造成一定的负担，所以在设计表单时，尽量减少用户的思考和理解，选择合适的输入字段类型，提高输入效率表格 。

　　

　　四、表单设计原则

　　通过SaaS新零售形式设计总结出形式设计的三大原则：清晰、高效、安全感

　　

　　1. 显式

　　1.1 视觉降噪

　　根据倒金字塔的设计原则，首先呈现最重要的信息，然后呈现附加的详细信息。重要性依次递减，可以快速传递重要信息，提高浏览效率。

　　通过合理的信息输入组件&页面布局&交互，用户可以快速完成表单和表单的信息填写任务。

　　示例：必填项和非必填项加星（此规则非必填，0根据不同业务属性灵活调整

　　

　　1.2 准确度

　　输入框的长度根据用户输入的信息量智能设置。在非必要的情况下，输入框的长度没有必要保持一致，但太长或太短。需要根据实际情况设定长度并提前给用户。心理预期。输入框过长会增加用户的负担。

　　演示文稿应提供有用的线索供用户填写，使用不同长度的文本框提供提示。

　　

　　不同长度的输入框比相同大小的输入框看起来更和谐

　　注意：根据产品的模量值设置几个常用的长度，宽度不要设置太多，会使表格显得凌乱。

　　Tips：什么是模数？受勒柯布西耶模数的启发，追求“秩序之美”，Ant Design 提取了一组数组，可用于 UI 布局空间决策。它们都保持了8倍数的原则，并具有动态的节奏感。经过验证，在一定程度上可以帮助我们在布局空间上实现更快更好的设计决策。模数是在设计中专门实现的。先梳理一下产品中常见的表单类型，然后这里设置一个默认宽度使用。根据模数规则，设置了XS、S、M、L、XL五种尺寸。根据输入内容选择不同长度的输入框。

　　

　　如何确定输入框的长度

　　2. 高效

　　根据尼尔森灵活、高效、记忆辅助的十大可用性原则，灵活、易用、高效、智能，最大限度地减少用户对操作目标的记忆负荷。

　　2.1 设置合理的默认值

　　系统还可以自动为用户填写一些表格，从而降低录入成本，让用户减少操作步骤，提高操作效率

　　

　　给一些输入框赋予默认值会提高表单提交的效率

　　2.2 自动获取/搜索

　　在某些业务场景中，用户可能会将之前填充的内容作为模板重用，并对其稍作修改。这时候在新建的入口页面默认可以导入用户之前的数据。

　　系统根据上下文或搜索自动获取和填写信息，减少用户的记忆负荷，提高效率。

　　在新零售业务场景中，这类输入通常是产品名称或产品名称，我们采用“模糊搜索”的方式。

　　

　　2.3 智能入口

　　对于一些标准证书信息的录入，可以通过OCR来识别文件的内容。用户上传图片后，利用图像识别技术提取关键信息并自动填写结果。值得注意的是，如果图片不清晰或者有水印，识别准确率会大打折扣。此时，应该提供一个更正通道，让用户对文本内容进行逐一校对和修改。

　　2.4 组件化设计

　　设计评审定稿后，细化规范，形成标准，提取组合使用，覆盖各种业务场景。实现设计与开发一体化，让设计面向开发，让开发贴近设计，减少设计和开发人员的额外工作量，让工作变得非常高效。

　　目前的工作阶段是平台全面改版的中间阶段。改版中最大的问题是组件库的实现。在我们的实际工作中，我们总结整理了将通用组件库与实际业务场景相结合的自定义组件库，然后按照下图跟进实际开发。.

　　

　　3. 受信任

　　根据尼尔森可用性十大原则中的容错、防错和反馈原则，分别在操作前、操作中和操作后进行防错、实时反馈、提醒和纠错。比发生错误时弹出提醒更好的设计方法是在错误发生之前避免错误。可以帮助用户排除一些容易出错的情况，或者在提交前给用户一个确认选项。在此，当用户操作具有破坏性的功能时，应特别注意提示，以免用户犯下无法弥补的错误。

　　

　　1.错误预防