Web表单设计—点石成金的艺术（三）之标签

每个表单都至少有三个基本要素：标签、输入框、动作。标签则负责提出问题。

标签除了要简洁清晰让人们明白外，还应具备良好的布局。

一、三种常见的标签对齐方式

输入框标签包括顶对齐、右对齐和左对齐。如下图所示：

左对齐标签

右对齐保签

顶对齐标签

下表中详细列明了三种对齐方式的优缺点：

三种对齐方式优缺点

马泰奥·彭佐的眼动研究发现三种对齐方式的填写速度：

三种对齐方式的速度及试用情景

可见，填写速度分别是顶对齐最快，其次是右对齐，左对齐最慢。

二、输入框内标签

输入框内标签

这种做法可以节省宝贵的屏幕空间，但是填写时输入框内的标签会消失，如果突然忘记了要回答什么问题，可能一时半会找不到标签。因此该方案并不适用于表单太长甚至中等长度的表单。

该方式更适用于问题只有一个的表单如搜索框，或者问题很熟悉如通讯录。

不明显的问题不建议采用输入框内标签。

现在开发人员通常使用placeholder属性来设置输入框内表签。

三、混合对齐方式

如果考虑在同一工具或网站不同表单采用不同的对齐方式，应当平衡情景和一致性。而情景常常比一致性更重要。

同一表单中不建议使用不同标签对齐方式，会破坏明确完成路径，让人们感到迷惑。

Web表单设计—点石成金的艺术（一）

Web表单设计—点石成金的艺术（二）