本文档介绍了各种设计模式和创意，可帮助您开始 Aerial View 之旅。您必须仔细考虑如何向客户展示 Aerial View，以确保客户对该产品有良好的互动度，并了解其价值。
航拍视图可为您的网站添加一个极具视觉吸引力的组件，以鸟瞰图的形式展示房产及其周围环境。
当用户以 3D 方式查看房源时，可以更好地了解其位置和大小。它还有助于突出显示房产的特征，例如泳池、附属建筑或大院子，以及附近的特征，例如道路、水体、山脉或公园。
提高互动度
鸟瞰图将让您的客户眼前一亮，但要充分发挥其优势，必须尽可能方便地发现相关内容。在本部分中，我们将讨论一些用于实现此目的的 Aerial View 实现设计模式。
视频方向
请务必考虑加载航拍视图视频的设备的屏幕方向。在移动设备上显示横屏视频可能会导致糟糕的用户体验，尤其是在全屏模式下。如果显示的视频所用的宽高比与设备不符，您将浪费大量屏幕空间。
Aerial View 视频以横屏和竖屏方向提供。
下面展示了在移动设备上以推荐方向和非推荐方向运行空中视角的差异示例：
嵌入式悬浮卡片
在房源搜索视图中显示多个房源时，添加嵌入式悬停卡有助于显示航拍视图视频，并在顶部叠加显示有关房源的其他信息，例如地址和价格。 这样一来，用户无需点击进入房源详情页面，即可快速轻松地了解房源。
以下示例展示了一个标记，用于表示山景城的 Googleplex 综合大楼。当您将鼠标悬停在此标记上时，系统会显示悬停卡片，其中包含房产的鸟瞰图视频。
您可以向标记和嵌入式悬停卡片添加 onClick 事件，以便将用户引导至房源详情页面。这样一来，用户可以轻松详细了解房源，并决定是否适合自己。
为您的房源打造故事般的体验
如果您想为潜在买家打造真正身临其境的体验，可以采用故事般的体验来展示房源，其中包含照片和鸟瞰图视频。这可以通过混合使用 HTML、CSS 和 JavaScript 来创建，类似于图片轮播界面。
在上面的示例中，我们在其中一个幻灯片中添加了“鸟瞰图”视频，并在底部添加了一个链接，以便查看有关房产的更多详细信息。此按钮应将用户带到媒体资源详情页面。
其工作原理如下：
- 选择照片。选择各种照片，突出展现房源的优势。
- 制作航拍视图视频。
- 将照片和视频组合成故事。
- 分享您的故事。在您的网站或电子邮件营销广告系列中与潜在买家分享您的故事。
通过为展示房源打造故事般的体验，您将能够吸引潜在买家的注意力。
在网页加载时启动 3D 视图
在 Google 的用户体验研究中，我们发现当 3D 视图默认加载时，用户互动度最高。由于这是一种令人兴奋的新设备规格，我们希望在客户想要查看房源详细信息时立即加载。在考虑费用时，如果您从 API 中提取航拍视频，则需要付费。请求视频后，请考虑自动播放，以确保用户看到福利。
反模式：将鸟瞰图隐藏在按钮后面被视为反模式，因为这会迫使用户采取额外的步骤才能查看 3D 视图。这可能会让用户感到沮丧，还可能导致他们错失 3D 视图带来的好处，或者误将鸟瞰图视为静态内容。
建议您在客户想要查看房源的详细信息时，默认加载鸟瞰图。这有助于提升用户体验，并帮助用户就房源做出明智的决定。在设计自动播放体验时，请注意全景视图视频的大小超过 30 MB，对于某些用户来说，加载速度可能会较慢。
如果您的网页包含图片轮播界面，则可以将 Aerial View 视频作为主项包含在其中，从而轻松将 3D 体验集成到现有网站设计中。
放置用于加载 3D 视图的按钮很容易实现，但可能会降低互动度。Google 地图默认加载 3D 视图。例如，当您搜索帝国大厦时，系统会自动加载 3D 视图，您可以在 3D 视图中看到部分图片。这样可为用户提供更具沉浸感和吸引力的体验。
按钮设计
如果您选择使用按钮来访问鸟瞰图，请务必考虑以下事项：
- 位置：该按钮应与其他地图相关按钮归为一组，以便用户知道它与房源的位置有关。
- 转场效果：视频的转场效果应流畅自然。 如果网页上已有一个显示图片、地图和街景的版块，则鸟瞰图视频应显示在该版块中。
- 突出显示：由于这是网页上新增的功能，因此最好使用“新功能”标记或视频的静态缩略图突出显示该按钮。
- 强调程度：按钮的设计应具有中等或较高的强调程度，因为按此按钮会执行突出显示的操作。Google Material Design 提供了一些关于如何设计具有不同强调程度的按钮的指导。
以下是有关设计有效的“鸟瞰图”按钮的一些其他提示：
- 使用简明扼要的语言。按钮应带有清晰的标签，以便用户了解其用途。
- 使用大号且清晰易读的字体。按钮应足够大，以便用户轻松看到和点击。
- 使用对比色。按钮的颜色应与周围的文字和背景不同，以便突出显示。
- 使用号召性用语。该按钮应包含明确的号召性用语，例如“观看鸟瞰图”或“观看视频”。
展示广告注意事项
视频加载
您可能需要考虑连接速度较慢的情况，方法是显示视频的静态图片预览，并在用户互动（例如 onClick）时加载完整体验。除了鸟瞰图视频之外，您还可以使用缩略图来实现此目的。
您还可以访问不同分辨率的视频，因此可以有策略地使用这些视频，以最大限度地缩短用户在不同连接速度下等待体验加载的时间。
徽标提供方信息
在实现 Aerial View 时，您必须确保遵守所有条款，包括徽标提供方信息。如需了解详情，请参阅此页面。
总结
我们希望本文能为您带来启发，让您思考如何以高用户互动度在网站上实现 Aerial View。
请务必考虑用户将如何发现内容，以及以何种格式显示内容最为合适。此外，最好还要考虑视频的播放设备类型（尤其是屏幕方向）以及用户的连接速度。
后续步骤
建议的延伸阅读内容：
贡献者
Google 负责维护本文。以下贡献者最初撰写了此内容。
主要作者：
Henrik Valve | Google Maps Platform 解决方案工程师