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