输入设计和表单设计是产品经理与交互设计师的核心技能，你可以把它们用在各种软件和各种平台上。
一、首先什么是标签？
我们先来复习一下文本输入框的构成。
△文本输入框的构成
我们本日要聊的便是第3点：标签文本/Label Text。
标签该当用人们能明白的措辞提出简洁问题，以便于回答。
但依旧依赖于表单元素的布局。
二、标签对齐办法
输入框标签应该顶对齐、右对齐还是左对齐？
先来看看这几种对齐办法的优缺陷。
1. 顶对齐标签/Top aligned labels
△顶对齐标签
优点：
顶对齐韶光最快，由于标签和输入框的位置非常靠近，处理起来绝不费力。清晰的完成路径，只须要往下移动。供应了大量的横向空间，可以用来扩大或者紧缩标签笔墨，而不会对全体页面布局产生负面影响。比如说法语、德语或荷兰语比英语长很多的措辞，随意马虎对表单布局产生毁坏力。横向空间的富余，可以以多种办法组合干系输入框。缺陷：
eg: Amazon 寄送地址表单的顶对齐标签供应了充裕空间，可水平分组干系内容.
2. 左对齐标签/Left-aligned labels
△左对齐标签
优点：
随意马虎浏览标签，只要高下浏览表单问题，不会被输入框打断。垂直空间占用少。缺陷：
标签和干系输入框相邻间距过大，延长完成韶光。根据马泰奥的研究，“范例扫视韶光为500毫秒，很长，解释用户经历着沉重的认知压力。”虽然速率是最慢的，但从辩证的角度来看，完成韶光较长并不一定是坏事。有时候我们须要用户谨慎的对待表单的填写，特殊是表单含有大量可选输入框，类似“利用偏好”或者高等设置陌生数据时，就可以利用左对齐标签。3. 右对齐标签/Right-aligned labels△右对齐标签
优点：
缺陷：
右对齐布局造成左侧不齐，可读性降落；不足灵巧，如果标签须要两行笔墨进行展示，会导致阅读困难。但如果既要减少表单占用的垂直空间，又要减少填表韶光的话，右对齐标签不失落为一个较好的选择。eg: Jira 创建故事表单采取右对齐标签布局
4. 输入框内标签/Label in the input box
优点：
对屏幕的占用空间非常小
缺陷：
填写输入框时，输入框的标签会消逝，因此用户看不到提示；填完后，也无法检讨对错。且输入框内的标签要明确的表明自己是标签，而不是已填数据。输入框内标签更适宜用于只有一个问题（比如搜索框）或者几个输入框的表单或者问题非常熟习的表单（比如通讯录）。eg：Dribbble 搜索页面为输入框内标签
5. 浮动标签/Float label
当用户在Text field中输入内容往后，内嵌Label会浮动到Text field上方，成为顶端对齐。
优点：兼具内嵌Label和顶端对齐的优点
缺陷：输入内容后，标签显示过小，对付小屏幕和视力不佳的用户来说是个寻衅。
eg：Yahoo登录页面，输入框为浮动标签
三、总结顶对齐标签，能减少填写韶光，适用于本地化，标签长度可以灵巧多变。右对齐标签，与顶对齐标签类似，但可以减少垂直空间的占用。左对齐标签，哀求人们仔细填写或者回答多个问题中的多少特定问题。输入框内标签，表单问题少，屏幕空间非常有限。浮动标签，把稳场景与利用者视力问题。把稳区分标签与数据。
扩展阅读：
能迅速填完顶对齐标签表单的缘故原由之一，是由于眼球只须要在标签和输入框之间进行单一运动。
事实上，马泰奥·彭佐从2006年7月进行的眼动研究创造，顶对齐标签办法从标签移动到输入框只要50毫秒，比左对齐标签办法快了10倍，后者须要500毫秒；比右对齐标签办法快2倍，后者高达240毫秒。
可能以为几百毫秒，以为也没有多少多永劫光，但是一旦涉及到须要填写几百个录入项，韶光也是成倍的。
以是在标签对齐上要根据场景选择得当的办法。
作者：Neko，支付产品经理/UI/UX；公众年夜众号：吱了一声
本文由 @Neko 原创发布于大家都是产品经理，未经作者容许，禁止转载。
题图来自pexels，基于CC0协议
