可用性设计-表单框架

设计原则最佳实践场景 表单效率优先减少表单填写时间测试用户完成一个表单需要多少时间？ 避免用户在键盘和鼠标之间切换 tab可切换tabIndex顺序一致 表单名称符合期望 保证清晰的阅读顺序 1、标签使用简洁的自然语言，直观，易理解 大小写一致 优点缺点 1、顶对齐标签"能减少填写时间； 出于本地化原因，标签长度需要灵活多变"增加了垂直距离 2、右对齐标签与顶对齐类似，但节约垂直屏幕空间 3、左对齐标签容易浏览标签，用户不熟悉表单要收集的数据长标签会增加其他标签和输入框的距离 4、输入框内标签"会减少一半表单空间。 如果表单屏幕空间极其有限时使用，同时保持合适的交互和情境。""填写时，输入框内标签会消失， 标签与数据有明显区分，比如：select选择框“--请选择月--”" 标签的展示根据需要来，一般优先选择右对齐标签 2、输入框提供合适的输入框类型"是否问题：单个checkbox； 互斥问题：radio <4个选项:checkbox >4个选项单选:select（空间有限） 多个选 …" 减少用户输入压力适当隐藏表单 输入同时有提示可输入也可下拉选择，focus时出现下拉菜单，或者输入实时更新下拉菜单数据。 保证输入框长度能提供有意义的暗示，帮助用户有效回答问题比如：验证码、邮政编码、用户名称 输入框比其他的短 输入框长度尽量保持一致，为答案提供足够空间 尽量避免可选输入框 标明必填项，或可选项"如果表单大部分输入时必填项，标明可选项即可； 如果表单大部分输入是可选项，标明必填项；" 用 * 标明必填项注意：务必采用图例解释其含义 输入框分组 关联输入框 父子输入框 复合输入框 3、动作主动作确认、提交、保存、下一步"提交 在前 取消在后 与标签左对齐，眼球定位时间最短" 次动作取消、重置、返回 防止用户点击两次用动画或文本信息代替活动主动作，提交已被接收正在处理 帮助不要依赖帮助文本来弥补尽量减少表单中的帮助文字，优先使用其他提示暗示 解释用户不熟悉的数据为什么要填写这个问题、数据安全 紧密跟随问题 自动即时的帮助 图标、链接用于触发帮助，应放在标签旁，而非输入框旁。 错误消息错误消息与上下文本明显区分常用手段：突出位置（页面顶部）、警告图标、加粗、颜色标红、背景 错误消息即时验证 错误消息紧紧跟随输入 成功消息采用动态成功消息突出表单提交成功的结果 避免成功页面成为死胡同 补充 Poka-yoke（防止错误）自动完成

textarea根据输入自适应高度