ideahtml标签不提示_表单标签设计规范

本文共1k字，阅读时长5min，文章将分为以下部分：1.什么是表单标签，分别有哪几种样式 2.不同样式的优缺点是什么，适用于什么场景。

适用人群：对web端、移动端设计规范不甚熟悉的初学者

解决的问题：表单是左对齐还是右对齐，竖排还是横排？

一、表单标签

1. 什么是表单：表单由问题标签和输入框组成，让用户填写信息而生，如注册表单，登录表单等。说人话，即：按网站要求所填写的信息

表单样式（顶对齐标签）

3.、4种表单标签样式

如上图所示，问题即标签（这些定义不是我定义的哦，可参考《web表单设计》，和一些设计规范网站，都是如此定义的。表单标签的形式分为以下四种

（1）顶对齐

（2）左对齐

（3）右对齐

（4）输入框内标签

二、四种表单标签样式介绍

1.顶对齐标签（如上图）

优点：（1）可以快速填写，因为用户的目光只在标签和输入框上下一个方向移动（2）提供了大量可扩展横向空间，

缺点：占用大量的垂直空间

使用场景：适用于标签过长，或者组合式标签（如下图）

混合标签

1.右对齐标签

右对齐标签

优点：标签与输入框相邻，因此也可快速填写，可以节省垂直空间

缺点：可以试想一下，如果第一个标签有5-6个字符，第二个标签有2个字符，第三个标签有3个字符，组合起来可能不是很灵活，标签长度和输入框组合弹性较小

3.左对齐标签

左对齐标签

优点：和右对齐一样节省垂直空间

缺点：标签和输入框之间的距离会拉大，会延长完成时间（三种对齐方式里，阅读速度最慢的）；标签和输入框组合弹性较小

使用场景：希望用户仔细阅读完成表单，那么左对齐再合适比不过；同时也适用于用户在填表前大致浏览需要填什么内容（方便阅读标签）

（4）输入框内标签

输入框内标签

优点：将标签放入输入框内，可大量节省垂直、水平空间

缺点：填写内容时，输入框内的情景提示会消失，用户可能忘记要填写的内容。如果表单内容较长，用户填完后不方便检验

适用场景：只有单一问题（如搜索框）、只有1-3个输入框时、用户十分熟悉的问题时

小结

不论标签是采用顶对，左对齐，右对齐，亦或是输入框内提示，都没有绝对的正确错误之分，最重要的是符合用户场景

其他

笔者曾在校招面试中遇到此类的问题，面试官结合公司的业务场景将四种标签对齐方式都列出来，问这几种方式哪个好。

这些都是表单的设计规范问题，如果你是一位新入门的交互设计师，建议一定要看以下书籍和网站

《web表单设计—点石成金的艺术》*（b端同学必读）

Ant Design —— 蚂蚁金服 网页规范 官网：https://ant.design/components/overview-cn/

Material Design —— Google（谷歌）官网：Introduction - Material Design，中文翻译：https://www.mdui.org/design/style/color.html#

参考文献：《web表单设计—点石成金的艺术》Luke Wroblewski