Day71 《Web表单设计》读书笔记

每个表单都至少有三个要素:标签、输入框和动作。

  • 标签:负责提出问题
  • 输入框:供人们填写信息
  • 动作:允许人们提交答案

标签对齐

标签使用哪种对齐方式,取决于具体目标和制约因素。

顶对齐标签

优点

  • 对减少表单填写时间贡献最大
  • 标签在上,输入框在下,填写过程只需向一个方向移动,填写路径清晰
  • 提供了充足的横向空间,对国际化的标签适应性强
  • 大量横向空间可以用于多种方式组合不同的输入框

缺点

  • 占用较多的纵向空间,如果纵向空间较小,应谨慎使用

注意事项

  • 采用顶对齐标签,最好使用输入框50%-75%的高度作为纵向相邻输入框的间距

右对齐标签

优点

  • 输入框与标签相邻,也能促使用户快速填写表单
  • 可节省纵向空间
  • 眼动实验证明右对齐比左对齐的填写效率快两倍

缺点

  • 大多数人都是从左往右阅读,左侧参差不齐会降低浏览表单效率,特别是标签需要两行显示的时候
  • 标签和输入框组合弹性较小

左对齐标签

优点

  • 人们面对不熟悉的,或者无法轻易分辨内容组的表单,左对齐方式浏览起来会更容易
  • 可节省纵向空间

缺点

  • 长标签会增加标签和输入框之间的距离,降低填写效率
  • 标签和输入框组合弹性较小
  • 填写效率是三种方式中最低的,因为左对齐表单解析问题时眼球定位次数最多
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容