不知你是否遇到过这种情况：分明对表单设计已经有了一定了解与熟悉，但在实际操作中却又不禁陷入困扰和纠结。基于此，本文作者总结了表格设计中遇到的常见困扰点，在本篇文章中讲解了标签的疑问设计指南与表单域的设计疑问指南，希望能为你解决困惑。
有一些朋友私信跟我说
已经很了解表单的基础知识了，但是在设计的时候，还是总是存在纠结困扰的地方。我感同身受，做了几年的表单设计以后，我对各类表单及设计点很清晰，但是当我开始设计新产品的表单的时候，还是经常陷入困扰、纠结，经常为了一两个很小的设计点方案和产品经理争论半天；每次坚持自己想法的时候，甚至不能很清晰且有理有据的说明，这让我一度感到很焦虑。为此我查阅大量资料，文章，就是为了解决这种说不出为什么的尴尬无力感。
本文探讨了电话号码格式从固定电话到手机号码的演变。重点介绍了国际拨 电话号码库 号代码和区号如何适应不断变化的通信需求。本文讨论了数字化转型对电话号码系统的影响，并讨论了未来跨不同平台统一编号的可能性。
我总结出来，一些我在设计中常遇到的困扰及纠结的设计点，分享给大家。
标签的设计疑问指南
这个问题基本是在新建一个产品的时候才会出现，如果你做的产品已有明确的规范和使用场景，那么统一表单标签对齐方式即可。
但是，如果你需要重新定义一个新的表单规范时，那么你就需要考虑哪种标签对齐方式更好，怎样区分使用场景！很多的前辈们通过科学实验发现，无论是在眼动仪的热图，还是在许多可用性测试的观察结果中，用户在填写网页表单时视线主要集中在输入框的左侧。他们的视线几乎不会落到输入框的右侧，甚至都不会瞟上一眼。
以此为基础，我们在网页表单设计中有4种最常见的标签对齐方式：顶对齐标签、右对齐标签、左对齐标签、行内标签。另外还有混合对齐标签、内联标签、图标标签等，它们基本是在这4种形式上变化，不脱离本质。
每一种对齐方式都有一定的优点和局限性；因此在合适的场景下选择合适的标签对齐样式，可以提升用户的输入效率，下面我们来展开说说：
顶对齐标签（Top aligned labels）: 顶部对齐是标签在输入域的上方，与输入域进行左对齐，这样可以节省横向空间的使用，标签和输入框位置最为靠近，用户在填写时也比较方便，移动端产品的设计中下拉的交互比左右滑动的交互更为便捷所以采用顶部标签较为常见。
从2006年7月起马泰奥·彭佐进行眼动研究，结果表明，从标签移动到输入框，顶对其最短需要50毫秒，左对齐需要500毫秒，是顶对齐的10倍，右对齐是240毫秒。
我们通过眼动数据可以看到，顶对齐是效率最高的表单填写样式，因为眼球只需要在标签和输入框之间进行上下单向运动。
优点：标签和输入框位置最为靠近，表单填写时间最短；用户视线固定，动线一直向下具有清晰的完成路径；节省大量横向空间，另外与输入框对齐视觉更舒适。
缺点：占用额外的垂直空间，如果可提供使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签，若表单选项较多的时候会增加表单长度并使页面滚动。
适用于场景：可用于以多种方式组合的相关输入框；希望用户快速填写表单并完成任务的情况；页面空间纵向空间充足，标签长度难以限定简化、拓展性要求较高的表单；更适合有国际化的需求比如说法语、德语或荷兰语比英语长很多的语言；
当垂直屏幕空间大，表单有组合需求时，顶部标签是不错的选择，比如飞书的基本信息页面：
右对齐标签（Align label right）
最为常见的表单标签，该标签形式中文字标签与输入域的距离是固定的，有明确的视觉关联。
马泰奥·彭佐的眼动研究发现，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在170毫秒和240毫秒，而填写完成时间比左对齐快2倍。
优点：标签和输入框之间距离固定，有明确的关联，有利于用户填写，同时节约垂直空间。
缺点：左边标签参差不齐，视觉上不够美观，浏览标签造成一定障碍，降低了表单的可读性，横向占用空间大，不利于狭长页面布局，标签长度和输入框弹性小。
适用场景：标签和输入域的弹 4pl 对品牌和零售商的利弊 性长度较小，比较适用于既要减少垂直空间，又要加快填写速度的业务场景，比如账号的基本信息。且适合数据内容多、逻辑关系简单、标题字数少的情况（如筛选条件）。
右对齐标签有利于用户的填写，但是不利于用户对标签信息的查看，如下图，当标签长短不一时，左边的标签就很难对齐：
左对齐标签（Align label right）
左对齐标签也是最常用的一种标签，采用文字左对齐的方式将标签文本放置在输入域的左边，这种结构有利于用户对标签整体的查看，从整体上对表单所需要填写的内容更加清晰。
根据马泰奥的研究，左对齐标签“典型扫视时间为500毫秒，时间很长，说明用户经历着沉重的认知压力。”左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在顶、右、左三种方案中，左对齐表单填写速度最慢。
优点：标签开头阅读视线对齐，符合用户的阅读模式，比较方便用户浏览表单，也比较节约垂直空间；
缺点：由于标签长短不一，有些标签距 sv列表 离输入框较远，视觉跳动较大，使标签与其输入框亲密性降低导致用户填写费力，用户存留时间较长。标签和输入域的弹性长度小，横向占用空间较大，所以不适用于横向空间狭小的表单页面。
适用场景：适合表单中存在较多的复杂敏感数据，需要用户谨慎的对待表单的填写，特别是表单含有大量可选输入框，类似“使用偏好”或者高级设置陌生数据时，就可以使用左对齐标签。
上图可以看出，右对齐标签填写速度要比左对齐标签快一倍。左对齐标签中用户眼球定位时间长，需要反复建立标签和输入框的联系，但同时文字左对齐也让标签侧的浏览变得容易。反之，右对齐则与之相反。
需要注意：左对齐受限于标签字数的长短，造成右边的视线不能够统一。与输入域视觉间距大小不一。标签越短，与输入域的间距越大。
根据菲茨定律，既起始位置离目标位置距离越远，我们到达目标位置所花费的时间就越长。反之，离目标位置越近，我们所花费的时间就越短。所以对于整个表单的浏览速度也会变得缓慢一些。
需要要注意的是，虽然速度是最慢的，但从辩证的角度来看，B端业务设计中，【缓慢完成率】并不总是一件坏事，如果表单数据复杂且安全性高，可以故意减缓用户的填写速度，来确保填写的准确性。
这是一种较为柔和的方式使用户的读取速度变慢，让用户认真的阅读，保证信息采集的准确性。在一些注册类、管理后台类表单中较多使用。
当你的产品业务数据信息比较敏感或很重要需要用户仔细斟酌表单内容，谨慎填写时，左对齐标签是不错的选择。若表单内容简单易理解，那么可以使用右对齐标签来提升效率。
如下图小鹅通的组织架构填写的部分：
内联标签（inline tag）
内联标签是将文本标签内置于输入域内部显示，原本显示输入提示的位置用来显示输入标签，在输入前告知用户输入域输入的数据内容，输入的时候标签消失。最常见于登录注册的场景。
优点：如果屏幕空间十分有限，行内标签是最常使用的方法，同时节省了横向和纵向的页面空间；
缺点：输入的时候标签会消失，会让用户产生困惑，使用体验较差，而且拓展性也较差；一般用户记忆标签等信息使用的是大脑的短时记忆，一般不会刻意去记忆输入标签，所以极易导致用户忘记刚刚记住的标签而不知所措感到困惑；
适用场景：某种通用的固定场景，例如登录注册等，或者表单录入项较少时可以考虑使用，建议不超过3个输入项 比如UI中国，站酷等登录的页面。
注意：人在短时间内只能记住5～9个单位，即“7加减2”法则，这是大部分用户的极限，但设计一般不会去挑战极限，而是要思考，还有一部分用户是远远达不到“7加减2”这个范畴，因此，在设计的时候，就需要降低用户的记忆门槛，采用更加适用的“2加减1”原则，当用户需要输入的字段多余三个的时候，就必须给表单留下标签，用来提示用户。
行内标签虽然可以大大节省横向和纵向的空间，但当提示信息消失的缺点也很明显，所以关于内联标签升级出了两种类型：
浮动标签
浮动标签也是内联标签的一种演化形式，标签在输入前位于输入区类似占位符，在用户输入数据时，内部标签（输入提示信息）会发生位移和大小的变换，浮动到输入域的上面。
优点：除了具备内联标签的优点节省水平和垂直的空间外，还无需用户对输入标签进行记忆，保障了用户录入信息的准确性。
缺点：需要一定的开发成本。
适用场景：除了适用与内联标签的应用场景外，还适用于一些具有一定复杂度表单，输入项较少的简易表单；这种方式比较常见于登录注册的场景中，例如下图花瓣网就是采用该形式。图标标签也是内联标签的一种演化形式，采用图形图像的方法来替代内联标签中的文本标签，以此来提示输入域中需要填写的内容，如注册登陆等表单。
优点：同时能够节省水平和垂直的页面空间，标签设计成图标，使表单更灵活和简洁。
缺点：抽象的图标标签，增加认知负担和记忆成本。
适用场景：录入项信息区分较大，不易混淆，能用图形轻松识别内容，或某些固定的场景或业务模式以及不超过3个录入项的简易表单。
关于表单对齐方式这个问题是在设计师发问频率较高的一个问题。其实，不论是哪种方式都有相对的利弊，需要根据实际业务场景提供不同的解决方案。当然，为了保证设计语言的一致性，在同一个表单下选择使用一种便好。
根据马泰奥·彭佐的对齐方式研究出的时间表总结：单从效率角度看，顶对齐>右对齐>左对齐，根据不同的业务场景，效率并不是唯一的考虑指标。
基于上表，得到以下几点建议：如果你希望用户放慢速度，仔细思考表单中每个表单项，左对齐标签是个好选择，特别是含有大量可选输入框或高级设置的陌生数据时；
而顶对齐标签在一些国际化产品的表单设计时，会有更好的延展性；
至于，右对齐标签虽然与表单域联系紧密，便于用户填写，但是要考虑好标签的长短不齐如何解决。能否精简标签内容，以及确定好表单与界面的边距。
pc端和移动端，选择表单方式
在网页端我们大多看到的都是左右结构（右对齐和左对齐），这是因为有空间占比的原因。在 pc 端，横向空间很大，需要考虑到协调的关系，如果采用上下结构，在内容过多的情况下，就会出现重心偏左的视觉效果。并且，视线距离屏幕较远，视觉聚焦面积更大，因此视觉路径较长的这一点就被中和掉了。
移动端
移动端的限制是屏幕太小，一个横屏展示不开，特别是在标签名字很长的时候，弊端更加明显，当然缺点除了识别度会降低，视觉路径增长之外，纵向空间占比也会增加，本身一屏就能展示完，现在需要两屏甚至更多。所以在移动端更多的是使用上下结构。
必填与可选字段的标记如何选择？
如果表单中的大多数字段或全部都是必填的，我们是否仍然应该标记它们？一般情况下，设计师可能会觉得每个必填字段都有一个标记是重复、不好看，造成页面视觉噪点的增多，甚至可能看起来很扰乱（有认知负担），确实有些情况下，红色作为一种有特殊含义的颜色，会引起用户误解。
