AMP 设计功能：该框架还有什么可能？

尽管它达到了令人印象深刻的设计复杂程度，但仍有一些人认为 AMP 是一个有限的框架。 在他们的辩护中，AMP 样式开始的重点是限制页面以提高加载速度。 而且，虽然速度仍然是其最终目标，但设计限制已大大减少。

设计人员不再受限于使用 AMP 发布静态内容。 今天，它是一个支持健壮设计的多功能框架。 如果你很久以前就把它写成一个不值得你花时间的僵化和简单的框架，这个汇编可能会迫使你重新考虑你的立场。

你可能不知道的 9 种 AMP 设计能力

（有关 AMP 可能性的更多详细信息，请加入我们即将举行的网络研讨会，因为我们将讨论有关 AMP 的常见误解。请带领 AMP 项目的专家回答您的所有 AMP 问题。）

1. 构建渐进式 Web 应用程序 (PWA)

尽管移动网络已经取得了长足的进步，但仍有很长的路要走。 报告显示，虽然前 1,000 名移动网站的访问人数是前 1,000 名移动应用程序的 4 倍，但它们吸引用户的时间却少了 20 倍。 移动网站正在吸引访问者，但它们无法提供原生应用程序的直观可用性。 这就是渐进式网络应用程序的用武之地。

渐进式网络应用程序试图通过提供混合体验来解决可用性问题，让用户访问移动网站，并提示他们像本地应用程序一样下载位于主屏幕上的图标。 打开时，体验旨在以原生移动应用程序的方式进行外观和行为。

结合 AMP，这些 PWA 可以高速运行。 您可以通过以下几种方式将它们一起使用：

AMP作为PWA

如果您的渐进式 Web 应用不需要完全使用受 AMP 限制的编码语言，该框架可以提供您创建自己的 PWA 所需的一切。 事实上，“AMP by Example”是组合的一个工作展示：

AMP在PWA

AMP 和 PWA 并非全有或全无。 并不是说您不能为某些 PWA 使用 AMP 布局，但不是全部。 如果您发现渐进式 Web 应用程序无法在 AMP CSS 编码限制下运行，您可以使用一种称为“Shadow AMP”的框架形式。 这允许 AMP 嵌套在您网站的其他部分，因此您可以 AMP 想要什么，而不是什么。

AMP转PWA

即使您认为您的 PWA 无法在 AMP 的限制下运行，您仍然可以使用 AMP 样式来吸引用户使用它。 随着 AMP 在搜索引擎中的可见性提升，它使得使用该框架发布新闻和博客文章变得轻而易举。 当他们点击进入您的 AMP 页面时，系统会提示访问者下载您的 PWA。

2. 创建结账页面

虽然 AMP 仍在致力于支持更多种类的交易，但您现在可以在 AMP 设计的页面上接受付款。 使用简单的表格，收集付款所需的详细信息，如姓名、地址、信用卡详细信息，甚至接受促销代码：

AMP 团队的下一个重点将是为用户提供“更强大”的支付组件。 在他们的产品路线图中，他们写道：

AMP 目前仅在有限的上下文中支持交易，例如通过 amp-iframe 和 Payment Request API —— 但是这忽略了许多重要的用例。 此活动将在 AMP 中实现更强大的支付组件，可能包括与第三方支付处理器、小部件、钱包等的集成（无论如何都应该支持这些）。

3.建立评论区

如果做得好，评论部分可以成为富有成效的讨论、内容创意甚至潜在客户的来源。 现在，借助 AMP，设计人员可以创建一个评论部分，用户可以在其中参与讨论，甚至需要登录，从而允许用户以更个性化的方式进行讨论：

4. AMP 故事

如果您看过 Snapchat、Instagram 或 Facebook 故事，那么 AMP 故事会非常熟悉。 根据谷歌 AMP 产品经理 Rudy Galfi 的说法，故事为出版商提供了“一种以移动为中心的格式，用于将新闻和信息作为视觉丰富的点播故事提供：”

根据 Galfi 的说法，CNN、Conde Nast、Hearst、Mashable、Meredith、Mic、Vox Media 和华盛顿邮报等出版商已经参与了该格式的早期开发。 现在，它可供所有用户使用，就可发现性而言，您可以在 Google 图片、发现、搜索和新闻中找到 AMP 故事。

下面是一个看到一个人可能看起来像的例子：

5. 在 Bing 中获得更多可见性

在最近的一篇博客文章中，Bing 的首席项目经理 Fabrice Canel 宣布了该公司搜索引擎的一项新功能：

2016 年，Bing 加入了 Accelerated Mobile Pages（简称 AMP）开源项目，旨在帮助您更快地“查找”和“执行”搜索，无论您在何处以及在任何设备上查找信息。 今天，我们很高兴地宣布 Bing AMP 查看器和 Bing AMP 缓存的发布，使支持 AMP 的网页能够直接从 Bing 的移动搜索结果中工作，从而使 Bing 能够为 Bing 用户提供更快的移动体验。

此查看器看起来类似于 Google 的 — 轮播图，带有带有闪电的图像以指示启用了 AMP 的内容：

现在，除了来自 Google 的搜索引擎流量之外，AMP 用户还可以在 Bing 的搜索引擎结果页面上获得优先级资源。

6. 创建滚动绑定效果

很多时候，滚动绑定效果会妨碍用户体验。 它们很吸引人，但不是你想要的样子。 它们会分散对页面主要内容的注意力，并且可以根据效果的实现添加大量页面权重。

但有时，页面的目标内容（您绝对希望访问者消费的内容）是您要为其添加效果的图像。 以自由职业者的在线作品集或网络开发机构的网站为例。 在这种情况下，效果展示了设计者的能力。

然而，如果这种设计没有得到很好的实施，它会增加页面的重量，这会导致加载速度变慢并且潜在客户不太可能留下来。 为了解决这个问题，您可以将 amp-position-observer 与 amp-animation 结合使用，以创建许多引人入胜但加载速度快的效果：

滚动绑定动画

当用户滚动页面时，滚动绑定动画可以使图像栩栩如生。 以这个用 AMP 构建的指尖陀螺为例，它会随着用户滚动而旋转。

淡入淡出和幻灯片过渡

通过淡入淡出和幻灯片过渡，您可以将时间限制和滚动限制效果结合起来进行时间敏感的过渡。 例如，您可以创建一种效果，当该图像在全视图用户内时，文本会滑到该图像上。 使用淡入淡出效果，您可以在用户接近时淡入该图像，并在用户滚动时淡出。 在这里查看它的实际效果。

旋转木马

过渡效果也可以与 AMP 轮播一起使用：

在上面的例子中，河流的图像被部分隐藏。 但是，添加了滚动绑定效果，当用户滚动到它时，它会在全视图中向左对齐，表明它是可水平滚动的。

视差窗口

通过定义一个小于图像的中断窗口，您可以创建视差效果：

这个窗口比图像小，当用户滚动时，窗口向下移动，显示图像中大象的其余部分。

7.放大您的电子邮件

您知道加快网页速度，但电子邮件呢？ 用于电子邮件的 AMP 旨在为 Gmail 带来与 AMP 页面相同的速度和可用性。 允许开发人员将电子邮件作为 AMP 文档发送，AMP 电子邮件的潜力在于它能够为用户创造丰富的体验。

Gmail 和 Chat 产品经理 Aakash Sahney 表示，新的 AMP 电子邮件规范将“是开发人员创建更具吸引力、互动性和可操作性的电子邮件体验的一种强大方式。” 有了它，用户可以通过 Gmail 完成任务，例如回复活动、预约或填写问卷等等。

Pinterest、Booking.com 和 Doodle 是首批针对电子邮件规范测试 AMP 的公司：

AMP for email 规范今天可用，但只能通过在此处注册进行开发人员预览访问。

8. 轻松创建高速点击后登陆页面

在提高转化率方面，优化点击后登陆页面应该是一个优先事项。 但是，为每个促销活动创建一个点击后登录页面，无论是否使用 AMP，都会很快耗尽团队的资源。 这就是我们在 Instapage 构建器中创建 AMP 功能的原因：

现在，您可以以闪电般的速度创建 AMP 点击后登录页面，并以闪电般的速度加载。 只需拖放元素，单击即可编辑，然后保存任何元素以添加到以后的页面中。

在您构建时，如果您接近超过 AMP 的 75kb 页面重量限制，您会收到通知。 当您达到限制的 80% 时，此警告指示符会出现在屏幕底部附近：

如果没有，您很清楚可以发布到 WordPress 或您自己的自定义域：

9. 优化您的点击后登陆页面

创建出色的 AMP 点击后登录页面是一回事，但对其进行改进则完全不同。 在发现提高 AMP 点击后着陆页转化率的方法时，A/B 测试是一个很好的起点。

A/B 测试涉及针对称为变体的替代页面测试原始页面（称为控件）。 用非常基本的术语来说，将相同的流量驱动到每个页面后，获胜者是更好的页面（有关更详细的解释，请参阅 Instapage A/B 测试指南）。
这在理论上似乎很容易，但它肯定不是。 它需要测试设计、有效性威胁、软件等方面的知识。 尤其困难的是，您运行的每一个测试，您都需要至少创建一个全新的页面。

幸运的是，Instapage 允许您通过点击复制您的 AMP 点击后登录页面：

只需选择“创建 A/B 测试”，然后选择“新变体”，您就可以复制您的页面并从那里进行编辑，或者完全重新开始并使用“Instablocks”导入保存的文本块、图像块、小部件等特征。 然后，运行您的测试，并实现获胜的设计。

在 Google AMP 网络研讨会中获得更多信息

AMP 的采用率只会越来越高。 现在，超过 3100 万个域创建了超过 50 亿个 AMP 页面。 根据 WPengine 的一项洲际研究，99% 的用户看到了为他们的组织使用 AMP 的好处。

AMP 不再是一个受限制的基本框架。 今天，它能够构建可立即加载的整个网站。 而且，随着创建更强大的支付系统、附加效果和 Google Play 集成的计划的临近，它只会变得更加强大。

认为您了解 AMP？ 在我们的独家网络研讨会中，通过 Instapage 和创建者 Google 了解有关该框架的更多信息。 然后，在此处获取自定义 AMP 演示，看看创建闪电般快速的 AMP 页面是多么容易。