通过鸟瞰视图吸引客户

本文档介绍了各种设计模式和理念,帮助您轻松上手 您的航拍视图之旅。展示方式 向客户展示航拍视图时必须仔细考虑, 用户对产品进行了良好互动,客户也看到了产品价值。

Aerial View 为您的网站添加了一个具有视觉吸引力的组件,呈现一只鸟类 房源及周边环境的全景视图。

当用户以 3D 方式查看房源时,他们可以更好地了解其位置, 。这也有助于突出酒店特色,例如泳池、 或大院子,以及道路、身体 水、山脉或公园。

提高互动度

航拍视图会给您的客户带来惊喜 好处,必须让用户能尽可能轻松发现网站内容。在本部分中, 我们将探讨使用航拍视图实现的一些实现设计模式 这个。

视频方向

在航拍视图模式下,请务必考虑设备的屏幕方向 。显示横向图片可能会带来糟糕的用户体验 移动设备上的视频广告,尤其是在全屏模式下。通过展示 使用设备的宽高比不正确的视频,会浪费 会占用大量的屏幕空间

航拍视图视频可以横向和纵向 屏幕方向

在下例中,我们以航拍视图的形式在 以及推荐的屏幕方向 屏幕方向:

GIF 动画:显示两台设备,一台处于纵向模式,另一台处于纵向模式
横向模式。两个设备都会以竖屏模式显示视频。创作时间
推荐在纵向模式设备下方
横向模式。

嵌入式悬停卡片

在房源搜索视图中显示多个房源时,最好先执行以下操作 添加嵌入式悬停卡片以显示航拍视图视频, 房产信息,例如叠加显示的地址和价格。 这样,用户无需 而不必点击进入房源详情页面

以下示例中的标记表示山区的 Googleplex 建筑群 视图。当您将鼠标悬停在该标记上时,系统会显示一个悬停卡片,其中显示了“航拍”图标 观看房源的视频。

GIF 动画:显示一张带有悬浮卡片的地图,其中包含 Googleplex 建筑群的航拍视图视频。当光标悬停在相关标记上时,就会显示此悬停卡片。

一个 onClick 事件都可以添加到标记和嵌入的悬停卡片中, 访问该房源详情页面。这样,用户便可轻松详细了解 并判断其是否适合他们。

为您的房产打造类似故事的体验

如果您希望为潜在买家打造真正沉浸式的体验,您可以 通过将照片和 航拍视图视频 结合使用 HTML、CSS 和 JavaScript。

GIF 动画,包含一个航拍视图视频示例,该示例在人像模式下以类似故事的体验展示。航拍视图视频位于第二张幻灯片,底部的按钮显示“查看建筑物”。

在上面的示例中,我们添加了一个 幻灯片底部有一个链接,点击此链接可查看有关该属性的更多详情。这个 按钮应将用户引导至房源详情页面。

具体方法如下:

  1. 选择您的照片。选择各种照片,突出特色 媒体资源的各种功能
  2. 制作航拍视图视频。
  3. 将照片和视频合二为一。
  4. 分享您的故事。在您的网站上与潜在买家分享您的故事,或 电子邮件营销活动。

通过为展示媒体资源打造类似故事的体验,您将能够 吸引潜在买家的注意力。

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

Google 的用户体验研究表明,用户互动度最高的时段 默认情况下会加载 3D 视图。由于这是一个令人激动的新款外形规格,因此我们希望 以便在客户想查看相应房源详情时立即加载该代码。时间 如果您要从 API 提取航拍视图视频 将收取费用。请求视频后,应考虑自动播放,以确保 您的用户将看到其带来的好处。

反模式:将航拍视图隐藏在按钮后面,会被视为 因为这迫使用户采取额外的步骤来查看 3D 视图。 这可能会令人沮丧,但也可能会使他们错失 或将航拍视图误认为静态内容。

建议您在客户想要 查看该房源的详细信息。这将提供出色的用户体验 帮助他们就该房源做出明智的决定。在设计 请记住,航拍视图视频大于 30 MB,并且 某些用户的加载速度可能会很慢

如果您的网页中包含图片轮播界面,则可以将航拍视图视频 作为主推项目,您可以轻松集成 3D 体验 融入到您现有的网站设计中

下面列出了可用于访问航拍视图的按钮示例
现有按钮来访问 Google 相册

放置按钮以加载 3D 视图很容易实现,但 互动。默认情况下,Google 地图会加载 3D 视图。例如,当您搜索 系统会自动加载 3D 视图,而且您可以看到 保持 3D 视图时查看图像的部分视图。这是一个很棒的 为用户提供更加身临其境、更具吸引力的体验。

按钮设计

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

  • 位置:该按钮应与其他地图相关 按钮,以便用户知道它与房源的位置相关。
  • 过渡:向视频的过渡应平稳顺畅。 如果网页上已经有 则航拍视图视频应 部分。
  • 突出显示:由于这是页面的新增内容,因此对 以突出显示“新功能”按钮标记或静态图片缩略图 视频内容
  • 突出:按钮应采用中强调度或高强调度; 因为按下此按钮就会执行醒目的操作Google 资料 设计 对如何设计不同级别的按钮有一些指导 强调效果。

下面是一些有助于设计有效的航拍视图按钮的其他提示:

  • 使用简洁明了的语言。该按钮应明确标示, 用户也知道它的用途
  • 使用清晰可辨的大号字体。按钮应足够大,以方便用户查看 被用户看到和点击过的广告
  • 使用对比色。该按钮的颜色应与 让文字与周围文字和背景融为一体,使其更加醒目
  • 使用号召性用语。按钮应包含明确的号召性用语,例如 如“观看航拍视图”或“观看视频”。

展示广告注意事项

正在加载视频

您可能需要考虑连接速度较慢的情况,方法是显示 预览视频的静态图片,并加载完整的 例如 onClick 等。除了航拍视图视频,您还将 访问可用于完成此操作的缩略图。

您也能以不同的分辨率观看该视频, 有策略地使用,以最大限度地减少用户等待 不同的连接速度下也能轻松加载。

徽标出处

在实现航拍视图时,您必须确保遵循所有条款, 包括徽标出处。查看此信息 页

总结

我们希望本文能给您带来灵感,让您思考如何实现 在网站上实现航拍视图,从而提高用户互动度。

请务必考虑用户会通过何种方式发现内容 以什么格式显示数据最合适。建议 请考虑视频播放的设备类型 以及用户的连接速度

后续步骤

建议深入阅读:

贡献者

本文由 Google 维护。它最初是由以下贡献者编写的。

主要作者:

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