可能是最全面的表单设计完全手册！

表单设计可以设界一老常谈的话题，针对它的重性自不必多言。本文结合自身验所看所学所得总结，希望能帮到家。

从「子（构成要件）」度，将表单逐拆分，从而能够全看待。

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

• 结构
• 标签
• 输字段
• 占位符
• 帮
• 操作
• 验证
• 反馈

一、结构 Structure

段序、节奏、观和组织。

1. 问所需

必要而不是全部，简化表单，或许是优化表单最大议。简化办法是追溯个段为什么需要，是否是前最相关信息，如它是可选，最好不要显示。

2. 有理排序

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

3. 从易到难

从用户相抵触信息开始逐渐到隐私信息，而不是开始让用户萌生退意。

4. 组织相关

在繁多段情况下，将相关段按照序进分类组合，并过增加些额空或者主标题将它们分成语义组，增加了页呼吸和节奏感，从而帮助用户更加轻松完成表单。

5. 单列呈

单列，只需眼睛沿自然的方向从至下，便于用户理解操作。多列，眼睛需按照「之」形行浏览，从增加浏览理解认知的时间。

然单列呈现是多列，并绝，需根据页空，表单内容及性质共决定。

6. 提高对比度

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

二、标签 label

标签告诉户需要输入么。

1. 名词标签

名词具有很好的描述性且简洁明了。的字可使大熟悉的图标代替本。

2. 标签位置

左对齐、右对齐、顶对齐、联标签、图标标签和浮标签。

数情况下，谨慎使用内联标签，在用户输，内联标签消失，用户无法判断输的内容是否符合，当在用户熟悉且简单的字段下采用（例登录中只有账号和密码）。针对以上问题，你以采用内联浮动标签决内联标签在输标签消失的弊端。

三、输入字段 Input

承载用户输的区域。

1. 自动对焦（PC端）

进行表单页面，自动对焦一个输字段以引导用户开始进行输。

2. 提供默认值

根据已信息，帮助用户预判内容。例以通 IP 检测出用户的地理位置。

3. 存输的数据

住用户已经填写的内容，以防万一（例页面刷新），从而避免用户需要次输而放弃。

4. 字段约束

为有要求的字段设置。例，最大字符数，电中数字、字母符号等要求，从而有效的避免脏数据。

5. 式化（掩码）输

提供输式，帮助用户理所填内容且减少错误生。常用手机号码、期、银行卡和邮编等。

6. 匹键盘（移动端）

提供合适的键盘，帮助用户快速完成。

7. 区分填

上所述，尽量避免填字段。果不避免，应该做明确区分。根据经验，填和必填的数量少的做标说明。

规做法：必填，使「*」星号符；可填，使「（填）」。

四、占位符 Placeholder

标签的额外描述，帮助户了解可输入的数据类和格式示。

1. 颜色区分

它是容示，而是容。

2. 是有输入框都需要占位符

占位符是对输入容有特殊要求的示或醒，可解为对标签的补充，并是有的输入框都需要占位符。

3. 输入后消失

要在鼠标键入后消失，而是在输入容后消失，这样可在户还未输入的时候，依然帮助到户。

如果提示特别复杂或者重，请使用帮，它会一直显示那里。

五、帮助提示 Tips

明求，解释原因，甚至帮回忆。

1. 三种方式

常驻、按需提供、偶尔需。

2. 给予释

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

六、操作 Submit

对当前用户输数据的提等动。

1. 区分主次

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

2. 理放置

理放置操作的位置，可根据表的排列方式理摆放，避免居中。例如表采用的是顶部对齐，你可以将操作输入字段左对齐，这用户在完成输入的候，轻地操作按钮。

3. 准确命名

晰可预测。应该准确地描述用户击按钮后会发生什么。

4. 行动召

按钮应始终强烈的动词，鼓励用户行动。

为了用户提供足够上下文，在按钮上使用「动词」 +「名词」格，除了保存，关闭，取消或确定等常用操作。

5. 禁用操作

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

七、验证 Required

用户输入数据验证反馈。

1. 前端验证和后端验证

前端验证不需要服务上传验证数据，可以判断，例如手格等；是要记住在用户输入后才进验证，为空不验证；

后端验证，例如机注册输入效验码，通过后才注册成功，需要通过服器判断，才知道用户输入的是否正确。

2. 错在哪，显示在哪

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

3. 结合颜色、图标和文

我们不仅仅需要视觉上区（请考虑色盲用户），需要文说明并告知原和解决办法，而不是简单「输入误」。

4. 请勿除

误段，请勿在键入后接除，请用户在此基础上改会，记住用户才是决定者。

八、反馈 Feedback

用户为反馈，告知前状态。

1. 操作前：标状态

鼠标在屏幕上映射，我们称为标（指针），它会随着操作象及系统状态而呈现出不形状，让用户操作为及结有预先心理感知。

2. 操作：操作反馈

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

3. 操作后：按钮加载

呈按钮的加载过程，不禁止不动，用户会以系统执行操作，从行多次点击，呈加载并禁止用户的后续点击操作。

总结

以便对表单设的一些总结，多的提供一种分析问题的框架，从结构化的思维分析设问题，从能够全面的认识一事并行了解掌握，愿对所帮。

欢迎关注作者微信公众号：「int-PD」