专题设计篇4——表单设计（上）
表单应用场景：
场景一：购物场景
想要购物，打开购物网站，下单的第一步就是登陆获取身份信息，需要填写以下信息：用户名、密码，然后点击“登陆”按钮。
场景二：找工作
找工作，登陆招聘网站，需要完善个人资料，需要填写以下几组信息：
基本信息组：姓名、电话、邮箱等信息；
学历组：学历、外语及等级等信息；
工作经历组：就业企业、工作项目、项目描述、职位等信息。
兴趣、链接等信息组。
场景三：业务系统
在企业内部，各部门均需要登陆内部信息系统，通过填写业务流程配置的业务表单，最终完成各部门业务数据上报，以及业务数据探索/分析/决策。
通过以上日常工作场景，我们不难发现随着网络的普及、技术的发展，生活渐渐趋于物联网化。我们的日常业务工作就是完成一个个业务表单的填写、提交以及表单完成、提交的相关通知的分配、下发以及接收，最终完成信息闭环、业务闭环以及物-物闭环管理。
表单管理：
B端&C端系统区别之一，就是通过抽象思维，提取可共享、可复用的信息，并通过组件化、模块化的手段最终实现组件/模块的服务化管理。
通过总结→推演→抽象，我们将日常业务抽象成了一个个业务表单，为了实现表单的快速生成、不同业务的个性化完美匹配，我们通过“表单引擎”实现。接下来讲讲表单的配置设计。
表单结构：
表单结构：表单标题、表单业务信息、业务操作；
对于表单业务信息，大致可以从以下几个维度描述其抽象配置设计：数据录入、数据呈现展示、数据间关系、数据关系通过表单操作表达、实现以及完成；
表单的管理，通过表单引擎管理控件、操作等完成表单结构的配置；这些控件的管理与前端技术、交互设计息息相关。
表单的数据录入主要表现为以下两大类：
- 输入控件：
没有待选项，完全基于主观意愿录入业务数据信息，其设计抽象表现如下：
基于内容量：单行、多行输入；
基于内容格式：文本、数字、附件、进度、等级、结构化数据（表格方式）等；
基于表现形式：文本输入框、数字输入框、进度条、等级选项、表格、上传附件等；
2.选择控件：
有确定的待选项，基于选择内置的选项录入业务数据信息，其设计抽象表现如下：
基于选项数量：单选、多选、级联；
基于表现形式：下拉选择框、单选框、复选框、穿梭框等；
业务数据信息设计如下图所示：
表单数据呈现展示，主要表现如下：
- 基于数据结构：
单值结构、连续结构、间断结构；
2.基于数据类型：
键-值类、时序类、类比/比对类、状态类、统计类、导航类、分组类等；
3.基于表达方式：
图表形式、结构化树形式、状态形式
表现示例如下图所示：
表单整体结构配置管理布局，配置设计如下所示：
- 组成部分：标题、内容、操作；
- 内容排版形式：一/两/多栏；
- 对齐方式：左/中/右对齐方式；
表现示例如下图所示：
表单关系：
对于表单的结构组成：表单操作，基于表单的关系，通过##维度、##维度、##维度描述其抽象配置设计。
表单的关系主要表现为以下几种情况：
情况一：
业务关联关系，主要体现业务之间的顺序/逻辑/相关/因果等关系。
实现方式，通过表单操作：“按钮”方式实现；
情况二：
数据联动关系，主要表现为数据的创建/更新联动；
实现方式，通过表单操作：“按钮”方式、超文本超链接、数据库等组合方式实现；
情况三：
数据统计可视化表达管理，主要表现为量/对比/趋势等统计；
实现方式，通过数据库、规则库配置规则等组合方式实现；
表现示例如下图所示：
表单反馈配置：
表单的反馈主要表现为如下几种情况：
- 校验反馈：
数据类型校验，主要包含必填/非必填校验、字段值校验（格式/值/业务逻辑/业务规则等）、字段间联动关系校验（创建/更新）。
2.校验触发执行
校验触发主要通过以下两种方式：前端、后台。
关于这两种校验的实现及性能评估，可通过文章“专题设计篇2——数据表格设计（下）”里面的“查”设计了解。
monica：专题设计篇2—数据表格设计（下）zhuanlan.zhihu.com
表单设计脉络如下所示：
表单设计整体脉络shimo.im
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
