OA系统设计(2):表单
笔者有OA系统的设计经验,本系列将分篇章总结OA中最核心的功能,希望能尽可能全面地记录笔者的经验,和感兴趣的读者交流分享。
这次我们探讨OA系统里另一个重要的功能模块——表单。表单包括行政类单据,如请假单、设备申请单、用车申请单等;统计调查类单据,如人员信息统计表、团建活动报名表、调查问卷等。
线下一般有相应的纸质单据,填写人完成填写后可能经由多级领导审批,最终归口到某部门或某负责人。每种表单会关联一套流程,流程之间可能各不相同。所以表单模块要和流程模块紧密合作才能提供完整的线上服务,这也是为什么我会在上一篇的流程模块之后紧接着写表单模块。
下面具体探讨一下表单模块的设计。
一、表单设计页面
表单设计页面一般包括控件库、设计区、属性面板。如下图所示。
宜搭的表单设计页面
操作方式一般是用鼠标拖拽控件,在设计区合理地摆放控件,在属性面板设置控件和页面的属性。
二、表单样式 1. 互联网式
这种表单样式是我们在互联网上最常见到的,直接看个例子:
用宜搭创建的表单
对于大部分企业而言这种表单形式是极好的选择。它的特点包括绘制简单,只需要把表单控件有序地向下堆叠即可;表单长度可以随意延展,多少字段都能放的下;界面简洁明了,填写体验好。
但如果是面向政府单位的政务系统,这种表单不一定被客户接受,下面的第二种表单样式更被青睐。
2. 线下表单复刻式
这种表单样式完全复制线下纸质表单的样式,常常被用于政府单位,原因包括以下两个方面:
- 有些政府单位有留档的需求,线上表单走完流程之后需要打印出来并归档,所以线上表单样式要和线下的尽量保持一致;
- 政府单位的信息化水平不及长期接触互联网的大众用户,所以政府单位更保守,更愿意沿用以往的工作模式。而且政府单位的领导往往年纪较大,他们已经习惯了纸质表单的样式,使用线下表单的样式可以照顾领导的使用体验。
我们来看下面的例子,来自于致远政务系统的官网。
致远-复制线下样式的线上表单
这种表单的绘制方式有两种:
(1) 基于XML代码
在word中绘制好表单,复制表单并解析成XML代码,在OA系统中根据XML代码渲染出来。然后需要布置单选框、文本框等控件,新增控件其实只是增加了一段XML代码。
当然,这些实现原理是开发团队的业务范畴。
在微调表单的时候这种方式并不方便,而且根据调整操作来修改XML代码的代码逻辑比较复杂,有时甚至需要实施人员手动修改XML代码。
所以产品设计层面需要提供手动修改XML代码的功能,现场实施人员可以通过修改XML代码调整表格的样式。
(2) 基于图片
在word中绘制好表单,导出成图片,把图片导入到OA系统中作为底图。然后把表单控件摆放到合适的单元格内。
这种方式的好处在于快捷,操作难度低。但问题也很明显。
大小不一的表单控件需要被完整地放入单元格线框内,绘制过程并不愉快。项目实施人员要极为专注地调整输入框的大小,像素级精准地调整输入框的位置,效率之低可以想象,更可怕的是一个项目中可能要绘制上百个不同的表单。
在布置控件的时候如果可以自动调整控件大小并吸附到单元格内,上面的问题就迎刃而解了。技术上是可实现的,亲测使用体验很爽。
三、表单控件
常见表单控件的种类和关键属性包括:
1. 布局类
- 栅格:适用于互联网式的表单,用于设置一行有几列以及每列的宽度;
- 分隔线:把表单纵向划分成若干区域。可设置分隔线的名称。
- 单行文本框:可提供校验规则,比如格式是邮箱、手机号、正则表达式、字符长度等;
- 多行文本框:同上;
- 数字框:可校验是整数、小数、正数、负数等;
- 标签:可以用作表单字段的名称,如“姓名”,或备注说明。
- 单选框:可自定义选项,调整选项顺序,选项纵向排列或横向排列;
- 多选框:同上;
- 下拉框:可自定义选项,调整选项顺序,单选或多选;
- 人员选择:用于选择单位内的用户。可设置单选或多选;
- 部门选择:用于选择部门。可设置单选或多选;
- 日期:可设置日期的格式(年月日时分秒的组合),可选范围;
- 日期区间:同上;
- 地区:可设置格式,如省市区、省市、省等;
- 国家:可设置单选或多选;
- 评分:可设置分值范围,是否允许半分。
- 上传图片:可设置最多上传数量,图片分辨率限制;
- 上传附件;可设置最多上传数量,附件大小限制;
- 添加超链接:让用户可以添加超链接,比如部门团建活动建议收集表要求部门成员提交自己的想法,可以附上关于活动场所介绍的网页链接。可设置最多添加数量;
- 图片:放置在表单中的图片。可从本地上传,或指向某个链接地址;
- 超链接:用户点击后打开对应的网页。可以设置链接地址和显示的文案,比如“这是一个链接”。
几乎适用于所有控件的通用属性包括提示文案、默认值。
关于控件是否必填、只读、可编辑、隐藏等设置,在上一篇文章提过,最好在与表单相关联的流程里配置,因为不同流程节点的要求不同。
OA系统设计(1):流程
本文由 @Twincus靓 原创发布于人人都是产品经理。未经许可,禁止转载。
题图来自于Pexels,基于Pexels License
相关文章
-
开源软件脱险!Linux硬核回应美实体清单:已开源软件属于全人类,不受制于EAR
-
小米市占比直逼华为红米6A暴涨126.01%
-
倒计时3天的澎湃新版块,背后是百年“烧脑”史
-
焦点分析|上线电商小程序,抖音不甘心只为他人“做嫁衣”
-
是什么让10万用户选择了星瑞!
-
已正式确认,华为P30采用TOF镜头;国航APP现低价机票bug
-
深度资讯|不止于版权,“体育+娱乐”或许是体育产业的新方向
-
IG夺冠,苹果股价创四年最大单日跌幅巴菲特一夜失30亿
-
“种草”时代下,京东也要培养自己的带货红人
-
只剩下1012头江豚了,阿里技术人想了个法子
-
科技企业“争夺”矿山:百度宣布阿波罗无人矿卡效率达到人工水准
-
解析:iPhone13系列采用的第二代超磁晶面板
-
从雀巢速溶到小众精品,中国人对咖啡越来越讲究?
-
2022年CIA报考指导-如何创建账户和完善个人信息
-
政府与开发者协同不足制约数据应用落地
-
搜索引擎百度已死?百度首度回应,这下口水仗又再升级!
-
ZAO算什么,来看看全球第一成人网站Pornhub的换脸简史
-
郭台铭回应:这是微软和Google之间的竞争,起诉供应商是霸权心态
-
从小米9将采用三摄说开:硬件提升,算法何时不再加码优化?
-
【虎嗅早报】英特尔、微软承诺继续向华为提供支持;OYO中国被曝裁员,部分团队缩减一半
-
今日头条小程序被下架,微信官方回应;接投诉30多起,杭州立案调查有赞公司「996工作制」;苹果为FaceTime漏洞公开道歉,下周推出更新程序
-
款款热销!万能坯半漂只售坯布价!省时,省钱,省力!
-
看金湖夜景,尝精致茶点~大厨出品,星级酒店水准!百元代金券仅需......
-
焦点分析丨拼多多距离“第二大电商”只差临门一脚,但这一步没那么好走
-
微信 8 周年!今天是它陪伴你的第几天?
-
SAPLicense:SAP红字冲销
-
智氪分析丨阿里对拼多多的防守反击战
-
不仅仅是情怀,好的像素游戏就是艺术本身
-
本周你错过的8个牛X黑科技|19.3.8期