表单设计可以说是设计界一个老生常谈的话题，针对它的重要性自不必多言。本文结合自身经验和所看所学所得总结至此。

从“因子（构成要件）”的角度，将表单逐一拆分，从而能够全面的看待。

如下，大卸八块，一一道来：

1. 结构 
2. 标签 
3. 输入字段 
4. 占位符 
5. 帮助 
6. 操作 
7. 验证 
8. 反馈

一. 结构 Structure
字段的顺序、节奏、外观和组织

只问所需

必要而不是全部，简化表单，或许是优化表单的最大建议。简化的办法之一就是追溯每个字段为什么需要，是否是当前最相关的信息，如果它是可选的，最好不要显示。

有理排序

先问什么，再问什么，前后字段根据相关性循循渐进。

从易到难

从用户相对无抵触的信息开始逐渐到隐私的信息，而不是一开始就让用户萌生退意。

组织相关

在繁多字段的情况下，将相关字段按照顺序进行分类组合，并通过增加一些额外的空间或者组标题将它们分成语义组，增加了页面呼吸和节奏感，从而帮助用户更加轻松完成表单。

单列呈现

单列，只需眼睛沿着自然的方向从上至下，便于用户理解操作。多列，眼睛需要按照“之”形进行浏览，从而增加浏览和理解认知的时间。
当然单列呈现还是多列，并非绝对，需根据页面空间，表单内容及性质共同决定。

提高对比度

提高颜色的对比度，你的用户群体可不是高清屏，飞行员。

二. 标签 label
标签告诉用户需要输入什么

名词标签
名词具有很好的描述性且简洁明了。常用的字段可以使用大家熟悉的图标代替文本。

标签位置

左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签

多数情况下，谨慎使用内联标签，在用户输入后，内联标签会消失，用户无法判断输入的内容是否符合，当然在用户熟悉且简单的字段的下可采用（例如登录中只有账号和密码）。针对以上问题，你可以采用内联浮动标签解决内联标签在输入后标签消失的弊端。
表单的标签位置
为什么占位符有问题的11个原因

三. 输入字段 Input
承载用户输入的区域

自动对焦（PC端）
进行表单页面，自动对焦第一个输入字段可以引导用户开始进行输入。

提供默认值
可根据已知信息，帮助用户预判内容。例如可以通过IP检测出用户的地理位置

保存输入的数据
记住用户已经填写的内容，以防万一（例如页面刷新），从而避免用户需要再次输入而放弃。

字段约束
为有要求的字段设置限制。例如，最大字符数，电话中数字、字母符号等要求，从而有效的避免脏数据。

格式化（掩码）输入
提供输入格式，帮助用户理解所填内容且减少错误发生。常用于手机号码、日期、银行卡和邮编等

匹配键盘（移动端）
提供合适的键盘，帮助用户快速完成。
使用 HTML5 input 类型提升移动端输入体验

区分可填
如上所述，尽量避免可填字段。如果不可避免，应该做明确区分。根据经验，可填和必填的数量少的做标记说明。
常规做法：必填，使用“*”星号符；可填，使用“（选填）”。

四. 占位符 Placeholder
标签的额外描述，帮助用户了解可输入的数据类型和格式提示

颜色区分
它是内容提示，而不是内容。

不是所有输入框都需要占位符
占位符是对输入内容有特殊要求的提示或提醒，也可理解为对标签的补充，并不是所有的输入框都需要占位符。

输入后消失
不要在鼠标键入后消失，而是在输入内容后消失，这样可以在用户还未输入的时候，依然帮助到用户。
如果提示特别复杂或者重要，请使用帮助，它会一直显示在那里。

五. 帮助提示 Tips
说明要求，解释原因，甚至帮助回忆

三种方式

常驻、按需提供、偶尔需要

给予解释

当前需要用户填写相对隐私的信息时，请给予解释这么做的原因及目的。

六. 操作 Submit
对当前用户输入数据的提交等动作

区分主次
主操作，是我们期望用户的使用途径，应该在视觉上与次操作做出明显的区分，以突显号召用户点击。

合理放置
合理放置操作的位置，可根据表单的排列方式合理摆放，避免居中。例如表单采用的是顶部对齐，你可以将操作与输入字段左对齐，这样用户在完成输入的时候，轻松地看到操作按钮。

准确命名
清晰可预测。应该准确地描述用户点击按钮后会发生什么。

行动号召
按钮应始终带有强烈的动词，鼓励用户行动。
为了给用户提供足够的上下文，在按钮上使用 {动词} + {名词} 格式，除了保存，关闭，取消或确定等常用操作。

禁用操作
在未完成必填字段，禁用操作按钮，通过直观的视觉上告诉用户是否完成了要求，并在恰当的时刻（表单填写完成，按钮被激活）将用户的视线吸引到按钮上。

七. 验证 Required
对用户输入数据的验证反馈

前端验证和后端验证
前端验证至不需要服务器上传验证的数据，就可以判断，例如手机格式等；但是要记住在用户输入键入出才进行验证，为空不验证；
后端验证，例如手机注册输入效验码，通过后才注册成功，需要通过服务器判断，才知道用户输入的是否正确。
表单内联验证 - 设计体验

错在哪里，显示在哪里

就近原则，方便用户发现并修改操作

结合颜色、图标和文字

我们不仅仅需要视觉上的区别（请考虑色盲用户），还需要文字说明并告知原因和解决办法，而不是简单的“输入错误”。

请勿清除

错误的字段，请勿在键入后直接清除，请给用户在此基础上修改的机会，记住用户才是决定者。

八. 反馈 Feedback
对用户行为的反馈，告知当前状态

操作前：光标状态

鼠标在屏幕上的映射，我们称之为光标（指针），它会随着操作对象及系统状态而呈现出不同形状，让用户对操作的行为及结果有预先的心里感知。
被你忽略的交互-鼠标指针

操作中：操作反馈

如default，disabled，hover，fouce，pressed，active，error，success等。例如输入框的悬停和键入的视觉反馈，从而帮助用户聚焦

操作后：按钮加载

呈现按钮的加载过程，而不是禁止不动，用户会以为系统没有执行操作，从而进行多次点击，呈现加载并禁止用户的后续点击操作。

总结：

以上便是对表单设计的一些总结，更多的是提供一种分析问题的框架，从结构化的思维分析设计问题，从而能够全面的认识一个事物并进行了解掌握，愿对你有所帮助！

推荐阅读：

组件-设计完全手册

内容策略-设计完全手册1

内容策略-设计完全手册2

表格-设计完全手册

Powered by Froala Editor