利用航拍视图提升客户互动度

本文档介绍了各种设计模式和思路，可帮助您开始 航拍视图 之旅。您必须仔细考虑如何向客户展示航拍视图，以确保您看到客户对该产品有良好的互动度，并且您的客户能看到其价值。

航拍视图可为您的网站添加一个具有视觉吸引力的组件，展示房源及其周围环境的鸟瞰图。

当用户以 3D 形式查看房产时，可以更好地了解其位置和大小。它还有助于突出显示房产的特征，例如游泳池、附属建筑或大院子，以及附近的特征，例如道路、水体、山脉或公园。

提高互动度

航拍视图将成为吸引客户的一大亮点，为了充分发挥其优势，必须让客户尽可能轻松地发现这些内容。在本部分中，我们将讨论一些航拍视图实现设计模式，以实现这一目标。

视频方向

请务必考虑加载航拍视图视频的设备的屏幕方向。在移动设备上（尤其是全屏模式下）显示横向视频可能会导致糟糕的用户体验。如果使用不适合设备的宽高比显示视频，您将浪费大量屏幕空间。

航拍视图视频以横向和纵向提供。

下面是一个示例，展示了在移动设备上以推荐方向和不推荐方向运行航拍视图时的差异：

嵌入式悬停卡片

在房源搜索视图中显示多个房源时，添加嵌入式悬停卡片会很有帮助，这样可以显示航拍视图视频，并在视频上叠加显示房源的其他信息，例如地址和价格。 这样，用户无需点击进入房源详情页面，即可快速轻松地了解房源。

以下示例展示了代表山景城 Googleplex 建筑群的标记。将鼠标悬停在此标记上时，系统会显示悬停卡片，其中包含该房源的航拍视图视频。

您可以向标记和嵌入式悬停卡片添加 onClick 事件，以便将用户引导至房源详情页面。这样，用户就可以轻松了解有关房源的更多信息，并确定该房源是否适合自己。

为您的房源打造故事般的体验

如果您想为潜在买家打造真正身临其境的体验，可以结合使用照片和航拍视图视频，以故事般的方式展示您的房产。这可以通过类似于图片轮播的方式，结合使用 HTML、CSS 和 JavaScript 来创建。

在上述示例中，我们在其中一张幻灯片中添加了航拍视图视频，并在底部添加了链接，以便查看有关房源的更多详细信息。此按钮应将用户带到房源详情页面。

具体方法如下：

1. 选择照片。选择各种照片，突出展示您房源的最佳特色。
2. 制作航拍视图视频。
3. 将照片和视频组合成一个故事。
4. 分享您的故事。在您的网站上或通过电子邮件营销活动与潜在买家分享您的故事。

通过为展示的房产打造故事般的体验，您将能够吸引潜在买家的注意力。

在网页加载时启动航拍视图

在 Google 的用户体验研究中，我们发现，当默认加载 3D 视图时，用户互动度最高。由于这是一种令人兴奋的新设备规格，我们希望在客户想要查看房源详情时立即加载它。在考虑费用时，如果您通过 API 提取航拍视图视频，则需要付费。请求视频后，请考虑自动播放，以确保用户看到好处。

反模式：将航拍视图隐藏在按钮后面被视为反模式，因为它会迫使用户执行额外步骤才能查看 3D 视图。这可能会让用户感到沮丧，还可能导致他们无法享受 3D 视图带来的好处，或者误以为航拍视图是静态内容。

建议您在客户想要查看房源详情时默认加载航拍视图。这会带来出色的用户体验，并帮助用户做出明智的房源决策。在设计自动播放体验时，请注意，航拍视图视频的大小超过 30 MB，对于某些用户来说，加载速度可能会很慢。

如果您的网页包含图片轮播界面，则可以将航拍视图视频作为主打内容，从而轻松地将 3D 体验集成到现有网站设计中。

放置用于加载 3D 视图的按钮很容易实现，但可能会降低互动度。Google 地图默认加载 3D 视图。例如，当您搜索帝国大厦时，系统会自动加载 3D 视图，您可以在 3D 视图中看到部分图片。这是一种为用户提供更具沉浸感和吸引力的体验的绝佳方式。

按钮设计

如果您选择使用按钮访问航拍视图，请务必考虑以下事项：

• 位置：该按钮应与其他地图相关按钮归为一组，以便用户知道它与房源的位置相关。
• 过渡：视频过渡应顺畅自然。 如果网页上已有显示图片、地图和街景的部分，则航拍视图视频应显示在同一部分中。
• 突出显示：由于这是页面上的新增内容，因此最好使用“新功能”标签或视频的静态图片缩略图来突出显示该按钮。
• 强调：按钮应设计为中度或高度强调，因为按下按钮会执行醒目的操作。Google Material Design 针对如何设计具有不同强调级别的按钮提供了一些指导。

以下是设计有效航拍视图按钮的一些额外提示：

• 使用清晰简洁的语言。按钮应有清晰的标签，以便用户了解其功能。
• 使用清晰易读的大号字体。按钮应足够大，以便用户轻松看到并点击。
• 使用对比色。按钮的颜色应与周围的文字和背景不同，以便突出显示。
• 使用号召性用语。该按钮应包含明确的号召性用语，例如“观看航拍视图”或“观看视频”。

显示注意事项

正在加载视频

您可能需要考虑连接速度较慢的情况，方法是显示视频的静态图片预览，并在用户互动（例如 onClick）时加载完整体验。除了航拍视图视频之外，您还可以访问可用于实现此目的的缩略图。

您还可以访问不同分辨率的视频，以便在不同的网速下，策略性地使用这些视频，最大限度地缩短用户等待体验加载的时间。

徽标属性

在实现航拍视图时，您必须确保遵守所有条款，包括徽标注明。如需了解详情，请参阅此页面。

总结

希望本文能给您带来启发，让您思考如何以高用户互动度在网站上实现航拍视图。

请务必考虑用户将如何发现内容，以及以何种格式显示内容最合适。此外，最好考虑视频将在哪种类型的设备上播放，尤其是屏幕方向和用户的网速。

后续步骤

建议的补充阅读材料：

• 提高航拍视图中地址输入的准确性
• 航拍视图产品文档

贡献者

本文由 Google 维护。以下贡献者是其最初的作者。

主要作者：

Henrik Valve | Google Maps Platform 解决方案工程师