（翻译）按钮的加载状态的显示时机

  按钮不止包括启用和禁用状态，还存在加载状态。由于大部分操作都能在几秒钟内完成，因此很少会见到按钮的加载状态。要是处理时间较长，不显示加载状态会引发操作错误。

操作错误

  如果操作时间超过预期，需要告知用户系统正在处理他们的请求。用户看不到任何提示，就会觉得没有正确点击按钮，进而再次点击按钮。
  用户多次点击同一按钮，不仅增加了系统的处理负载，还会造成重复操作，更有可能导致严重后果，影响用户和设计人员。
  例如，用户可能意外地发送重复消息，多次提交表单，或者重复下产品订单。这些操作错误会产生额外的数据，需要用户管理和清理，有时候清理这些数据会耗费不少时间和金钱。

进度按钮

  为防止上述操作错误，超过2秒的操作应使用进度按钮。研究发现用户预期的页面加载时间为2秒以内，再长就会变得不耐烦。
  进度按钮能让用户看到加载状态，他们看到系统正在处理请求，就不太可能重复点击按钮。重要的是操作处理过程中应禁用按钮，确保不会出现操作错误。

  可以在按钮外面显示加载状态，但这种方式并不理想。用户点击按钮时，眼睛已经盯在按钮上，加载状态位于按钮中，也同时在用户的视野内。进度条在其它区域，意味着用户得寻找进度条，有可能会看不到。
  进度按钮应实现简单、样式一致，便于用户识别加载状态，不会与屏幕中的其它元素冲突。进度指标识不应增加按钮的大小，也不应要求按钮具有独特的背景色。相反，应使用透明背景色指示按钮的禁用状态，同时应赋予进度标识高对比色。

  进度标识不应遮挡按钮标签，应能让用户始终看到处理进度，但要是按钮区域同时放置进度指示器和标签，实现这一点就比较困难。可以将圆形标识替换为线性标识，这样既能显示处理进度，又不会隐藏按钮标签。如果是直角按钮，还可以将进度条放在按钮顶部。
  为了更好地提示用户处理进度，可以修改按钮标签以描述系统正在进行的操作。例如，将“提交”修改为“正在提交”，让用户在等待时了解系统后台的操作。请注意，如果按钮不够宽，标签内容太长的话，这种方法不太适用。

遵循两秒原则

  大部分设计人员设计按钮时不会考虑按钮的加载状态，但要是操作处理时间超过2秒，将加载状态显示给用户就特别重要。进度按钮能满足进度显示要求，应用它能避免用户犯影响系统运行的操作错误。

原文地址：https://uxmovement.com/buttons/when-you-need-to-show-a-buttons-loading-state/