任务设计-表单

设计表单的目的是什么？

目的是为了让用户尽快的完成信息的录入，让后台尽快的能够获取到用户的信息，表单在互联网产品中主要负责的功能是数据的采集。

一个表单基本上由三个步骤部分组成：

1. 表单的标签，是需要写明表单的文本；

2. 用户可以填写的区域叫做表单域，它是可以以文本框、密码框、隐藏于多行文本框、单选框、复选框、下拉选框，各种的控件等等。但凡是需要用户录入的区域就把它称之为表单域；

3. 提交的按钮，它的作用是用于将数据传送到服务器上，或者是取消输入。

这个是一个基本的表单的组成部分。

表单设计准则

表单几乎是每一个数字产品都无法规避的组成部分，它的作用近乎无可替代。 不过，表单这种控件应用范畴极为广泛，应用情况牵涉到方方面面，所以请注意，这里的设计准则都只是一般准则，每一种其实都有例外的情况。不过作为一般准则，它们可以很好地引导你设计出一个可用性极佳的表单，同时，作为设计师的你还需要根据实际情况，灵活地调整细节。

1. 尽量使用单列设计

多列的表单容易让人分心，无法完全垂直浏览一口气完成填写。

2. 顶部标签对齐

顶部标签的表单比左侧标签有更高的完成率。顶部标签的表单也易于移植到移动端。 但是，对于有多种选择项的大量数据列表而言，请考虑使用左侧标签，因为它们在一起更易于浏览，能够减少高度，比顶部标签更贴心。

3. 关联标签和输入框

让相关联的标签和输入框更靠近，组成分组，让不同的分组保持相对大的距离，确保用户不会产生困惑。

4. 避免全大写标签

全大写标签更难阅读和浏览。

5. 低于6个选项就全部展示

当表单中需要选取不同选项的时候，低于6个选项就不要使用下拉选框来选取了，因为下拉选框需要两次点击完成结果的选择,而直接选择来的更快。而超过5个选项的时候,选项过多，适合下拉选框的展示形式。

6. 避免将标签作为占位符使用

为了让布局更紧凑，将标签作为占位符放置于输入框内是很有诱惑力的做法,但是这样存在一定的可用性问题:让部分用户迷惑内容已经被填写;点击输入的时候占位符消失，有的用户会忘记输入内容属性。

7. 表述清晰的行为召唤按钮

行为召唤按钮中的标签必须使用简短而明确的词汇,让用户明确行为的意图和功能。

8. 指明出错的内容

告知用户哪里错了，说明原因。

9. 在用户填写完成后在验证

除了需要在输入过程中进行实时验证，普通的内容输入应当在用户输入完成之后再对内容的格式、属性进行验证，用户输入时避免使用内嵌验证。

10. 不要隐藏基本的帮助提示文案

将基本的帮助文本直接展示出来（除非帮助文本超过100个单词，信息量过大），如果帮助文本内容过长，建议置于靠近标签或者输入框的地方，光标悬停时展示。

11. 区分主次操作项

主要操作的次要操作要进行区分的，而这个要根据使用场景和需求来区分。

12. 用输入框长度来反映内容

输入框的长度应该同输入内容进行对应。如邮政编码，电话号码和银行卡号这样的字段，长度都是固定的，在设计它们的输入框的时候，输入框的长度是很好确定的。

13. 正确区分必填字段和选填字段

用户有的时候并不知道哪些字段是必须填写哪些可以不用填写的,通常会使用星号(*)来区分两者，但是星号有的时候并不能为用户理解，所以尽量用文字来标识差异。