表单的 9 种设计技巧【上】

2022-09-15 16:37:48 浏览数 (2)

全文 1308 字

阅读时间约 5 分钟

本文首发于码匠技术博客

表单是信息添加、录入的通用形式,合理的表单设计能减轻用户负担。这里码匠提供了一些表单设计的简单技巧。

技巧 1:选择合适的输入框标签对齐

码匠中标签根据标签与输入框的位置关系,可以设置位置和对齐方式:

每种标签对齐都有自身的优点与局限性,根据不同的场景选择合适的标签对齐,能提高用户填写速度,同时还能降低信息填写时的错误率。

根据 Matteo Penzo 研究发布的关于标签对齐的文章:采用顶部左对齐的标签样式,浏览表单所需的时间最短,而左侧左对齐则用时最长。以下为该研究中捕捉到的用户在填写三种对齐方式的表单时的眼动轨迹(圆圈越大,注视时间越长):

可以看到,在顶部左对齐的设计中,用户能够在单次视线移动中同时获取标签和输入字段,可以更快理解表单。而左侧左对齐会迫使用户通过注视更大范围的屏幕空间获取信息,从而拖慢用户的反应速度。

如果希望用户能快速扫描填写表单,那么标签顶部对齐是最佳选择。注意对齐的一致性,所有标签在整个表单中都应该遵循相同的对齐方式。

0 人点赞