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