设计更好的表单阅读笔记

原文

做了好多的表单在使用的过程中总会感觉有点小缺憾,这篇文章点出了平常一下我们需要注意的细节。
用户体验感觉更棒了

建议性规则

  • 表单应该只有一列
  • 标签顶部对齐(常见的是左边对齐)
  • 给标签和输入框分组(中间label和input之间不设置margin或者padding属性,两者作为一体化)
  • 避免字母全部大写、首写字母大写,更好阅读
  • 如果可选项少于6个,则显示全部(使用标签这种展现形式)5-25:下拉框内采用上下文搜索 >25:【输入选择器】autoComplete
  • 避免把占位符当做标签
  • 为方便浏览,将复选框(和单选框)上下放置(纵向排列)
  • 让按钮功能更具体(注册提交表单按钮更好叫注册而非提交)
  • 表单校验错误明确指出哪个出错
  • 在用户填写完字段后再验证(除非在输入过程对用户有帮助)
  • 尽可能显示基本的帮助文字
  • 区分主要和次要的操作(注册和关闭按钮应该需要区分)
  • 用字段长度作为说明(手机注册码,字段长度6,输入框的长度应为6位左右)
  • 不要用星号 *,标出选填字段(如果大部分是必填,则标出选填字段,工程建议统一)
  • 将相关信息分组
  • 要有趣,省略选填字段(可以使用省略等字段)