网页设计中表单设计 第1篇
根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：
① 输入时即时验证，即时报错
用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。
优点：可以实时告知用户表单的填写时候符合规范
缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感
使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码
② 失去焦点后即时报错
优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。
网页设计中表单设计 第2篇
一般来说，单据类表单的打印按钮设置在记录该单据数据的活动界面上，这样就不需要条件设定的界面了，参加图4。
在图4（a）“合同签订”界面上设置了“打印”按钮，在一个界面上就同时可以完成输入数据、打印“采购合同”单据工作，参见图4（b）。
从这个案例还可以看出，对应与1张表单功能，需要用有2个功能来对应，项目经理在统计设计工作量时要注意。
可以看出活动和表单两个功能的名称不一样，这是因为活动的名称通常使用“名动词”，表单的名称使用“名词”带来的。
三、应用设计
由于表单不是窗口形式的界面，只有数据、格式等内容，所以表单不需要特别进行应用设计，业务设计的结果（数据的构成、界面布局等）与开发完成后的效果应该是一致的。
四、记录模板
表单设计结果的记录形式也采用“设计4件套”的模板，请参考本系列第二篇“活动功能的设计”相关部分。
五、小结
4种业务功能（活动、字典、看板、表单）的设计方法介绍完了，关于设计难度没有统一的标准可供参考，由于这4种功能有很多的差异不容易直接进行比较。
这个评估涉及到项目规模、业务与技术的复杂性以及设计师能力定义等内容，作为项目经理/产品经理对资源进行调配时的依据提出一些参考建议（仅作为参考）。
1. 看板
需要能够从企业的不同视角（组织、岗位、领域等）来理解如何充分地利用数据、信息向用户展示。
企业领导层、管理层都会特别关注看板的设计，因为这是他们的重要信息获取来源之一，设计看板不但需要有业务知识、还要有一定系统知识、美工知识等。
2. 表单
复杂表单的设计对业务能力要求较高，它的数据来源会非常的多、计算公式复杂且可能需要多重计算才能得到结果，如果是二维的表格，字段数、计算式以及对结果的测试等工作量都会很大。
3. 字典
需要对企业的业务知识、基础数据、标准化方法、字典设计方法等有比较丰富的知识和经验，初学者比较难以胜任这个工作。
4. 活动
活动的设计工作量是最大的（可能在70%以上），但由于它以输入原始数据为主，不需要很多中间的复杂计算和处理，因此相对来说难度会小一些（它的特点是承载着管理规则）。
参考结论，4种功能设计难度的参考顺序为（从高到低）：看板＞表单＞字典＞活动。
参考阅读：
界面设计方法（1）：界面的概念与分类
界面设计方法（2）：活动功能的设计
界面设计方法（3）：字典功能的设计
界面设计方法（4）：看板功能的设计
网页设计中表单设计 第3篇
报表通常都是由从事某个业务的用户对象根据该业务的要求提出来的，报表是用户查看数据的重要形式，所以报表的原型确定需要与用户进行细致的协商，最好要符合用户的日常习惯，通常业务设计师在报表功能设计时自由发挥的余地不太大。
参见图2，报表中的数据量比较大，一般是多条数据的集成。
图2 报表类表单示意原型
网页设计中表单设计 第4篇
① 布局方式
在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：
1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。
2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。
但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。
网页设计中表单设计 第5篇
标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。
粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。
网页设计中表单设计 第6篇
研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。
优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。
劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）
建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。
网页设计中表单设计 第7篇
为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。
① 前端校验：
主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。
② 后端校验：
与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。
③ 校验触发条件：
④ 报错方式：
网页设计中表单设计 第8篇
基础表单中会有以下六个元素：
1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。
2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。
3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等
4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……
5. 提示：描述该输入项需要的输入类型，如：上传的文件类型
当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：
网页设计中表单设计 第9篇
在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。
优势：易浏览标签；占用纵向空间较少
劣势：标签和输入框距离较大，表单填写效率低
建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局
网页设计中表单设计 第10篇
表单根据录入模式可以分为：单步表单、分步表单和高级表单
① 单步表单：
单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。
② 分步表单：
内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。
③ 高级表单（分组表单）：
高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。