React 表单-表单的可用性与优化

 2016年02月18日    788     声明


表单是应用中与用户最复杂交互之一,我们在创建和组织表单组件时,最重要考虑的一点就是表单的可用性。


  1. 用户提示与反馈
  2. 可访问性
  3. 减少用户输入

React 简单且高效的实现了对组件的管理,同时也提供了开发人员的生产效率。但开发出来的常常会缺乏可用性,要编写出高可用性组件,需要在细节上进行更多的考虑。下面是一些表单组件的优化建议:

1. 用户提示与反馈

提示信息是与用户交互的有效手段,做手用户提示可以减少用户误操作,提高用户输入效率。以下是一些常用的用户提示方式:

  • label标签:label可以用于提示用户需要输入的内容。也可以通过其for属性与单选框或复选框关联,增强用户操作的便利性。

    注意:for是JavaScript关键字,React 组件中使用htmlFor代替for

  • placeholder属性:placeholder属性用于在输入框中做为用户提示,用户开始输入时就会消失

用户反馈一般用于在用户输入过程中或用户输入完成后。及时和有效的反馈,不但能够提示用户输入的正确性,更可以提升用户体验。下面是一些常用的用户反馈场景:

  • 输入验证:用户输入完成后提示用户输入信息的正确性。输入验证,一般在输入框触发blur事件后(即:失去焦点后),也有用于在触发change事件后(即:用户输入改变后)进行验证的。
  • 状态反馈:对于比较耗时的操作,需要告诉用户我们正在处理用户请求,如,使用进度条、显示加载中等提示用户正在处理中。


2. 可访问性

设计和开发用户界面时,应该从用户角度出发,保证组件是可访问的。这包括:

  • 提供给用户合适的输入方式,让应用的每个部分输入/输出都是符合用户需求和使用习惯的。
  • 保证应用在不同设备(如:移动端和PC端)中的兼容性。


3. 减少用户输入

用户输入的减少可以大幅提高应用的易用性。用户输入的越少,其犯错的可能性也会越少,同时也可以提供用户的输入效率。减少用户输入可以从以下几个方面考虑:

  • 默认值:理解用户使用习惯,根据用户信息设置合理的默认值(如:根据用户所在位置自设置区域)。
  • 自动填充:利用浏览器的自动填充功能,可以减少用户常用信息的重复填写(如:地址、支付信息等)。
  • 自动补全:在用户输入部分信息后,跟据用户输入生成引导项可以有效减少用户输入(如:用户搜索产品等信息时)。自动补全是用户反馈的一种。
  • 自动聚焦:自动聚焦可以帮助用户找到表单数据输入的的起始位置,提高用户的输入速度。