AMP

Web Stories 的号召性用语按钮升级

故事

Web Stories 是接触新受众并将他们引导回您网站的绝佳方式。创作者和发布者越来越多地使用 CTA 作为 Web Story 与其网站之间的桥梁。为了进一步增强阅读体验,我们升级了 CTA,在创建更一致的 UX 的同时,提供了更多自定义功能。

更新后的组件将允许读者以链接的形式轻松获取更多内容。读者可以通过“向上滑动”手势或点击号召性用语元素来显示此内容。在使用该组件的每个页面的底部,都会自动添加一个打开附件的提示。

外部链接页面附件和内联页面附件允许创作者和发布者将他们的受众重定向回他们自己的网站

用法

许多创作工具已经推出了对 (<amp-story-page-outlink>) 的支持。如果您自己构建 Web Stories,以下是一些我们为改进阅读体验而做出的显著更改

1. 为 Web Story 页面引入了主要 CTA UI,该 UI 可以打开任意外部链接 (<amp-story-page-outlink>) 和页面附件 (<amp-story-page-attachment>)。

Web Story 页面主要 CTA UI 的示例

2. 接下来,我们让创建与您的故事品牌相匹配的出色主题变得更加容易。现在,创作者可以自定义 CTA(例如,颜色、图标等)。

页面外部链接自定义的各种示例
页面附件自定义的各种示例

3. 我们打算替换<amp-story-cta-layer>的功能,而无需对旧故事进行更改。任何使用<amp-story-cta-layer>的现有故事在视觉上看起来会有所不同,因为自定义样式元素将被删除并替换为 amp-story-page-outlink 元素。此附加好处无需创作者或发布者采取任何措施。

链接内容

使用AMP Story 页面外部链接,实现一键式外部链接体验。当用户激活 CTA 按钮时,将打开 URL。此功能以前由 amp-story-page-attachment 处理。我们分离了该功能,以提供更清晰的创作者体验。

https://blog.amp.org.cn/wp-content/uploads/2021/09/inline-page-attachment.mp4
新的单键式外部链接体验的示例
https://blog.amp.org.cn/wp-content/uploads/2021/09/outlink.mp4
向上滑动外部链接体验的示例

演示

查看我们演示故事中的新设计、API 和实现示例。

参与进来

无论您是喜欢阅读 Web Stories,还是有兴趣自己创建 Web Stories,或者正在构建创作工具,请与 Web Stories 工作组分享您的想法和建议。您可以在GithubSlack 上联系我们,还可以订阅流量较低的开发者预览电子邮件组

作者:Ryan Warrender,Google Web Stories 产品经理