表单元素的对齐方式

摘自《web表单设计-点石成金的艺术》

1. 标签顶对齐(即上标签下输入框)

  a.好处:用户眼睛只需从上往下移动,这样可以快速完成表单

  b.坏处:占用多过垂直空间,导到用户需要向下滚轮

2. 左标签右输入框,标签右对齐

  a.好处:由于标签右对齐,存在一条虚拟的中间线;所以用户眼球基本上仍只需从上往下移,完成表单速度仍然较快

  b.坏处:标签没有左对齐,不利于快速读完标签内容(因为人们习惯读左对齐的文本);当一个标签本身要占两行时,这个问题更严重

3. 左标签右输入框,标签
对齐

  a.好处:可以快速读完标签内容

  b.好处:用户的眼球既要上下滚,又要左右滚,影响表单填写速度

4. 标签以灰色字体放在文本框里作为提示

  a.好处:非常节省空间

  b.坏处:缺乏始终在场的指导,对健忘的人不利

附作者提供的最佳实践:

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.