杭州UI设计培训在哪|输入框标签设计规范

　　1.顶部对齐

　　在三种标签对齐方式中，顶部对齐标签对减少表单的填充时间贡献最大。

　　因为标签和输入框距离很近，所以很容易处理。填写整个表单又快又容易，因为人们一般只需要向一个方向移动:向下。这也为完成表单提供了一个清晰的路径。

　　顶部对齐的标签还提供了大量的水平空间，可以用来扩展或收缩标签文本，而不会对整个页面布局产生负面影响。与长标签或跨文化本地化标签相比，这尤其有用。同等情况下，法语、德语或荷兰语等语言比英语长，很容易破坏表单布局。大量的横向空间可以用来以各种方式组合相关的输入框，这是顶部对齐标签的另一个优势。由于横向空间的减少，左对齐和右对齐标签对于这种布局不够灵活。

　　但是，顶部对齐标签会占用额外的垂直空间。因此，如果可用的垂直屏幕空间很小，应小心使用顶部对齐标签。顶部标签布局也应采用适当的垂直间距。表单输入框之间的垂直间距过小或过大都会阻碍移动。一般来说，最好用输入框高度的50%到75%作为相邻输入框的间距。

　　顶部对齐的标签表单能够快速填写的原因之一可能是眼球只需要在标签和输入框之间做一次移动。事实上，matteoPenzo在2006年7月进行的眼球运动研究发现，从标签移动到输入框只需要50毫秒，是右对齐标签方法的两倍，后者高达240毫秒。

　　由于完成时间短，完成率高，一些设计师总是推荐使用顶部对齐的标签。毕竟最省力的填表是首要目标，顶对齐标签的速度自然会发挥作用。但是，眼球追踪和现场网站测试使用的是人们熟悉的形式，也就是说，人们一般知道或者可以随时找到这些信息，比如姓名、地址、信用卡号或者电子邮件地址。测试结果是否适用于不熟悉的数据还有待观察。

　　2.右对齐

　　右对齐标签还有一个好处，就是输入框紧邻标签，可以快速填写。

　　但是右对齐布局造成左侧填充，会降低快速浏览表单问题的效率。西方人习惯于从左向右阅读，他们的眼睛喜欢沿着左侧移动。如果标签文本的宽度发生变化，右对齐标签也会导致灵活性问题。如果标签要求两行文字，流量形式会比较困难，这种现象比较普遍。

　　也就是说，如果你想最小化表单占用的垂直屏幕空间，正确的对齐标签可以提供快速的阅读完成时间。MatteoPenzo的眼动研究发现，专家用户和新手用户扫描(眼动)右对齐标签表单的标签和输入框的平均时间分别为170毫秒和240毫秒，填充时间是左对齐标签的两倍。

　　3.向左对齐

　　如果人们对表单要收集的数据不熟悉，或者问题不能分成容易处理的内容组(比如地址部分)，那么浏览带有左对齐标签的表单问题会更容易。人们只需要上下阅读标签的左栏，而不会被输入框打断。

　　但是，一些长标签往往会增加标签和输入框之间的距离，从而延长完成时间。人们必须在各列之间“跳跃”，找到输入框和标签之间的正确连接，然后才能输入答案。与顶部对齐标签相比，左侧对齐标签还具有占用更少垂直屏幕空间的优势。但是，就像右对齐标签一样，它的一个缺点就是标签的长度和输入框的组合灵活性小。

　　三种方案中，左对齐表单的填充速度最慢，可能是因为左对齐表单解析时眼球定位的次数较多。一般来说，人们可以将左对齐布局中的标签与相应的输入框相关联，但这需要很长时间。根据matteoPenzo的研究，“典型的扫视时间为500ms”，这是非常长的时间，表明用户正在经历沉重的认知压力。