此帖子来自 AMP 设计团队。我们是产品设计师和研究员，负责确保 AMP 的组件和整体体验可用、可访问且优雅。您可以在 GitHub 上与 UI 和辅助功能工作组一起闲逛，或在 贡献者 Slack 中闲逛。
AMP 改善网络用户日常体验的最重要方式之一是帮助开发者制作快速的网站。AMP 的一个独特优势是它总是在幕后进行改进 - 我们可以对使用 AMP 的网站进行速度改进，而无需开发者做任何事情。
性能最佳实践始终融入 AMP 的各个角落，但实际速度只是故事的一半。虽然工程师们继续钻研技术细节，但设计团队着手改善感知速度。等待将始终是生活的一部分 - AMP 页面中有一些部分是我们的工程师无法加快速度的，因为它们来自我们无法控制的服务（如Facebook 帖子或YouTube 视频），或者仅仅是因为它们很大。但有大量证据表明您所处的环境会影响您对等待的感受。
如果您使用过多个 AMP 页面，您可能熟悉我们在 2015 年 AMP 推出以来一直使用的加载指示器
今天，我们开始推出一个新的加载指示器
让我们看看我们是如何做到这一点的。我们从三个目标开始
- 让加载感觉更快。
- 让读者了解即将发生的事情。自 2016 年以来，我们为 AMP 页面上的广告使用了不同的加载指示器，以便人们可以立即将它们与主要内容区分开来。我们希望将此扩展到更多类型的媒体 - 视频、推文、Facebook 帖子等 - 这样您不必等待视频加载，才发现自己不在可以观看视频的环境中，例如。
- 实现设计现代化。我们无法对此进行量化，但 AMP 团队的许多人认为我们的加载器在视觉上可以更加优雅。
我们还需要保持设计优雅，但中立。AMP 附带的 UI 需要与任何 AMP 页面的设计相得益彰 - 这意味着没有夸张的颜色或显眼的样式。
我们进行了一些原型制作，并要求一个由 2500 名网络用户组成的小组查看十种不同的加载指示器设计，这些设计在设定时间后“加载”内容，并预测加载需要多长时间。预测的准确性并不重要 - 人类不擅长估计非常短的持续时间 - 但趋势很重要。与传统的选项（如现有的 AMP 加载指示器或基本旋转器）相比，参与者估计使用我们的一些新设计等待的时间减少了近一秒。基于这些数据以及我们在设计过程中感到兴奋的一些观察，我们选择了一个设计。
我们确定了三个原则
- 有时没有加载器更好。在您甚至没有注意到自己在等待之前显示加载器可能会分散注意力，并使网站看起来更慢。
- 保持有趣。看到您已经看过一百万次的相同重复旋转器并不能帮助您打发等待时间。
- 保持一致。在一个页面上加载多项内容，每项内容都有自己的加载器设计和时间，这会分散注意力且混乱。
为了满足最后一条原则，我们确保我们的设计可以适应不同的尺寸、内容类型图标和背景。为了满足前两条，我们的加载器分几个阶段进行动画：首先我们不会显示任何内容，然后我们显示一个中间动画，最后我们完成一个循环播放的旋转器，直到内容加载完毕。如果内容加载时间少于半秒，人们根本看不到加载器，并且在内容加载时间达到 3.5 秒之前，他们看不到重复的旋转器。
我们的设计满足了我们所有的三个目标：我们对它的感知速度有令人鼓舞的数据，我们强烈认为它更优雅，并且它很好地让读者知道接下来会发生什么。
还有一些其他细节需要解决，以保持 AMP 对开发人员的灵活性。我们不希望新设计与 AMP 在内容加载之前显示占位符图像、消息甚至自定义加载指示符的能力相冲突。对于具有简单占位符图像的内容，我们仍然希望向读者表明还有更多内容即将到来，因此我们将显示一个特殊的加载指示符版本，该版本将在任何颜色的图像上脱颖而出。对于比这更复杂的任何占位符 - 消息或自定义加载指示符，我们根本不会显示默认加载器，以确保我们的设计不会与你的设计冲突。
最终的证明将在我们未来几周内进行的现场实验中：向一小部分 AMP 页面推出我们的新加载指示符，并密切关注网站性能指标以及社区反馈。根据此反馈，我们的目标是将我们的新加载器推广到所有 AMP 页面上的所有组件。
我们希望你喜欢新设计，并支持我们一次一个小的细节地改善网络的用户体验。
由 Google AMP 项目的产品设计师 Andrew Watterson 发布