鳥瞰影片的顧客參與度

本文說明各種設計模式和構想，協助您開始使用鳥瞰視野。您必須仔細考量向客戶展示鳥瞰圖的方式，確保產品參與度良好，且客戶能瞭解產品價值。

鳥瞰視野可為網站增添吸睛元素，呈現房地產和周遭環境的鳥瞰圖。

使用者可以透過 3D 檢視畫面，更清楚瞭解房源的位置和大小。此外，這類圖片也有助於突顯房源特色，例如泳池、附屬建築或大型庭院，以及附近的特色，例如道路、水域、山脈或公園。

提高參與度

鳥瞰視野能讓顧客驚豔，但必須盡可能讓他們輕鬆找到，才能發揮最大效益。本節將介紹一些鳥瞰視野的實作設計模式，協助您達成這個目標。

影片方向

請務必考量載入鳥瞰影片的裝置螢幕方向。在行動裝置上顯示橫向影片，尤其是全螢幕模式，可能會導致使用者體驗不佳。如果影片顯示比例與裝置不符，就會浪費大量螢幕空間。

鳥瞰影片提供橫向和直向兩種模式。

以下範例說明在行動裝置上，以建議和不建議的方向執行鳥瞰視野時，兩者之間的差異：

GIF 動畫顯示兩部裝置，一部為直向模式，另一部為橫向模式。兩部裝置都以直向模式顯示影片。肖像模式裝置下方寫著「建議」，橫向模式裝置下方則寫著「不建議」。

內嵌懸浮資訊卡

在房源搜尋檢視畫面中顯示多個房源時，建議加入嵌入式懸浮資訊卡，顯示鳥瞰影片，並在上方疊加房源的其他資訊，例如地址和價格。這樣一來，使用者不必點進房源詳細資料頁面，就能快速輕鬆地瞭解房源。

以下範例顯示代表 Mountain View Googleplex 園區的標記。將滑鼠游標懸停在這個標記上時，系統會顯示懸浮資訊卡，呈現房源的鳥瞰影片。

GIF 動畫：地圖上顯示懸浮資訊卡，內含 Googleplex 園區的鳥瞰影片。將游標懸停在相關標記上，就會看見這張懸浮資訊卡。

您可以在標記和內嵌懸浮資訊卡中加入 onClick 事件，將使用者導向房源詳細資料頁面。方便使用者進一步瞭解房源，判斷是否符合需求。

為房源打造類似精選故事的體驗

如要為潛在買家打造真正身歷其境的體驗，可以結合相片和鳥瞰影片，以故事形式展示房源。這項功能的建立方式與圖片輪轉介面類似，使用 HTML、CSS 和 JavaScript 即可。

GIF 動畫：以直向模式呈現鳥瞰影片，提供類似精選故事的體驗。鳥瞰影片位於第二張投影片，底部按鈕顯示「查看建築物」。

在上述範例中，我們在其中一張投影片中加入鳥瞰影片，並在底部提供連結，方便使用者查看房源的詳細資料。這個按鈕應將使用者導向房源詳細資料頁面。

運作方式如下：

  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 解決方案工程師