云之家审批将公司日常行政管理与业务审批流程电子化

在工作和生活中，我们每天都会接触到表格。 请假要填表，报销表要填，网购要填表，贷款要填表。 在互联网飞速发展的今天，我们不得不线下填写表格。 填写表格已更改为在线或手机上填写表格。 表单主要负责数据收集功能，往往是很多应用程序生存的关键。 优秀的表单设计可以让用户感觉舒适、快速、轻松地完成填写； 糟糕的表单设计会让用户感到沮丧。

云家审批将公司日常行政管理和业务审批流程数字化，通过移动审批进一步提升内部效率。 云之家审批表功能：线下业务审批场景-在线电子审批-离线归档。

审批用户群体分析 企业普通员工：填写单据并提交审批 公司管理者：审核单据并做出决策 审批管理员：管理审批模板、配置审批流程、设置节点等 企业日常审批中存在的问题 员工做不知道如何填写审批表 审批管理员配置流程门槛高，上手难度大。 目标是让员工快速轻松地完成填写，提高审批效率，让企业管理员轻松还原离线审批场景，快速配置审批流程解决方案。

良好的填表体验来源于良好、合理的表单元素和填写流程。 我们通过表单与用户进行对话，分析并合理利用表单的元素，并采用适当的错误提示、实时验证等交互方式帮助用户理解表单内容。 ，快速填写，从而提高审批效率。

表单元素

表单通常由以下元素组成：

标签输入框操作帮助文本错误和提示

标签

标签语言应简洁、清晰，避免产生歧义。 下图左侧，“是否单选”存在歧义。 如果不进行选择，实际上就意味着选择了“多选”，但是很不直观。 单选和多选两个选项是同一级别且互斥的。 显示这两个选项会更直观。

输入框

输入框是表单的核心。 审批表单输入字段包括：单行文本框、多行文本框、单选按钮、多选框、数字输入框、金额输入框、日期、日期范围、人员选择、部门选择、图片、文件等我们使用“默认值”和“输入提醒”来帮助用户完成填写，避免用户面对空白的输入框，避免错误。

我们使用输入组来表示一些复杂输入框的有意义的关联，例如审批条件规则设置。

行动

Web端表单通常包括几个最终动作，即主要动作和次要动作。 主操作是在表单上完成的最重要的操作，例如提交、保存、继续等。第一个操作是撤消输入信息，例如取消、重置或返回。 次要动作通常会导致不良后果，因此为了避免用户误操作，可以削弱次要动作的视觉表现，将潜在的错误率降到最低，从而引导人们成功完成表单。 我们通过按钮的颜色来区分主动作和次动作，并根据填充顺序将按钮与输入框对齐。

帮助文本

用户在填写审批单据时，尤其是审批管理员设置审批节点和审批流程时，会接触到很多专业的标签名称，而且帮助文本内容往往比较大，仅仅使用标签和输入提示是不够的。足够的。 帮助文本的设计方法有多种，应根据情况而定。 直接在表单中显示帮助文本会占用页面很大的面积。 然而，人们通常不会阅读屏幕上的提示。 眼球追踪研究表明，很多人看到表单后会直接跳到第一个输入框。

我们使用用户激活的即时帮助系统——浮动触发文本提示气泡。 将鼠标悬停在问号图标上，标签下方会出现帮助提示气泡。 当鼠标指针移离触发热点时，帮助文本消失。

这里需要注意的是，气泡不要覆盖输入字段。 根据用户从左到右的阅读习惯，问号应该放在标签的右侧，而不是放在输入框旁边。

错误和提示

没有人真正喜欢填写表格。 用户会急于填写表格并直接提交，而不填写必填字段。 他们还会误解表格的含义并犯错误。 当遇到错误时，首要任务是告知用户错误以及如何纠正错误。 如何让用户尽快知道错误？ 错误消息应放置在相应元素旁边，并通过明显的视觉表示来强调。

但我们经常犯的错误是使用模态对话框窗口来提示错误，这在一定程度上对用户造成了干扰。 弹出窗口覆盖了错误表单，用户无法继续操作，直到先关闭对话框。

当表单内容较多，无法一屏显示表单中的所有信息时，应在表单顶部放置一条错误信息，告知用户有几个错误需要更正后再提交。

表单交互的即时验证

防止用户点击提交后开始验证，让用户提前更正错误。 实时、动态更新限制了文本输入量。

智能默认

智能默认设置通过设置大多数人需要的默认选项来帮助用户填写文档。 下图是用户发起审批后进入的填表页面。 系统会自动获取用户的姓名、部门、​​申请日期等数据，并为用户填写这些信息，减少用户的填写时间。

瞬间增加

立即为需要的人添加额外的输入框，而不会阻止不需要的人。 审批流程设置默认无条件。 当用户需要添加条件时，只需点击添加条件块即可。 用户可以根据场景添加多个条件。

总结

表单设计的主要目标是让人们能够快速、轻松地填写表单。 最好的方法是让表单以某种不可见的方式存在，但仍然确保系统和用户同时得到他们想要的东西。 所以，表单设计不仅仅是设计外观，我们还需要解决问题，用不同的视角和方法来解决问题。

作者：莫六一，云之家用户体验部视觉设计师。 一位喜欢挑战、热爱运动的80后设计师。

本文来自大家是产品经理合作媒体@金蝶云家庭体验中心（微信ID：UXD-），作者@莫六一

题图来自，基于CC0协议

TAG标签：微信小程序单选框