本文件說明各種設計模式和概念，方便您開始建立鳥瞰圖。如何向客戶呈現鳥瞰圖時，請務必審慎考量，確保您能充分提高與產品的互動程度，並讓客戶瞭解產品的價值。
鳥瞰圖為網站加上一個引人注目的元素，可以呈現房地產和周邊環境的鳥瞰圖。
使用者以 3D 模式看到房源時，可以更瞭解其的位置和大小。除了道路、水域、山岳或公園等鄰近地圖項目之外，這個段落也有助於突顯房源特色，例如泳池、建築物或大型庭院。
提升參與度
鳥瞰圖是您的客戶備受好評的因素，而且要看的是完整內容，還要盡可能讓使用者輕鬆找到內容。在本節中，我們將討論一些為鳥瞰圖的實作設計模式。
影片方向
請務必考量載入鳥瞰影片的裝置螢幕方向。在行動裝置上顯示橫向影片 (特別是全螢幕) 可能會產生不良的使用者體驗。如果使用錯誤的顯示比例顯示影片，您就會浪費大量的螢幕空間。
鳥瞰影片是以橫向和直向的方向提供。
下方範例顯示了在行動裝置上執行鳥瞰圖時的差異、建議螢幕方向，以及非建議的螢幕方向：
已嵌入的懸浮資訊卡
在住宿搜尋檢視畫面中顯示多個房源時，建議您加入內嵌的懸浮資訊卡，以顯示鳥瞰圖影片，並在頂端疊加地址和價格等房源資訊。如此一來，使用者不必點選資源詳細資料頁面，就能快速輕鬆地瞭解資源。
以下範例顯示代表山景城 Googleplex 的標記。將滑鼠遊標懸停在此標記上時，畫面上就會顯示懸浮資訊卡，其中顯示房源的鳥瞰圖影片。
標記和嵌入式懸浮資訊卡皆可新增 onClick 事件，將使用者帶往屬性詳細資料頁面。方便使用者進一步瞭解這項資源，並判斷其是否適合自己。
為房源打造類似故事的體驗
如果您想為潛在買家打造真正的沉浸式體驗，可以結合相片和鳥瞰影片，以類似故事的形式呈現您的房源。這種體驗方式類似圖片輪轉介面，並結合使用 HTML、CSS 和 JavaScript。
在上述範例中，我們在其中一張投影片中加入了鳥瞰圖影片，並在底部提供該房源的相關連結。這個按鈕應會將使用者帶往屬性詳細資料頁面。
運作方式如下：
- 選擇相片。選取各種相片來凸顯房源的最佳特色
- 建立鳥瞰圖影片。
- 用相片和影片製作故事。
- 分享自己的故事。透過自家網站或電子郵件行銷廣告活動，與潛在買家分享自己的經驗。
為展示資源打造類似故事的體驗，就能吸引潛在買家的注意。
在載入網頁時啟動鳥瞰圖
在 Google 使用者體驗研究中，我們發現當 3D 檢視畫面載入時，使用者參與度最高。由於這是令人興奮的新板型規格，我們希望在客戶想查看房源詳細資料時，立即載入。考慮費用時，如果您從 API 擷取 Aerial View 影片，就必須付費。收到影片要求後，請考慮自動播放，確保使用者能享有這項好處。
反模式：在按鈕後方隱藏鳥瞰圖，視為反面模式，因為使用者必須採取額外步驟才能查看 3D 檢視畫面。這可能會令人感到困擾，而且也讓他們因此錯失 3D 檢視畫面的好處，或是以靜態內容的形式移植鳥瞰圖的好處。
如果顧客想查看屬性的詳細資料，建議您預設載入鳥瞰圖。這不但能提供絕佳的使用者體驗，還能協助使用者做出明智的房源決策。設計自動播放體驗時，請留意 Aerial View 影片大小超過 30 MB，而且部分使用者的載入速度可能較慢。
如果您的網頁有圖片輪轉介面，您可以將 Aerial View 影片新增為待開發客戶項目，輕鬆將 3D 體驗整合至現有的網站設計。
放置用來載入 3D 檢視畫面的按鈕很容易實作，但可以降低參與度。根據預設，Google 地圖會載入 3D 檢視畫面。舉例來說，當您搜尋帝國大廈時，3D 檢視會自動載入，而且您可以在 3D 檢視畫面中查看圖片的部分檢視畫面。這個方法可以為使用者提供更身歷其境且引人入勝的體驗。
按鈕設計
如果您選擇使用按鈕存取鳥瞰圖，請務必考量下列事項：
- 位置：按鈕應與其他對應相關按鈕歸為一組，讓使用者知道按鈕與房源位置相關。
- 轉場效果：影片的轉場效果應流暢流暢。 如果網頁上已有顯示圖片、地圖和街景服務的區段，則 Aerial View 影片應會顯示在同一部分。
- 醒目顯示：由於這是頁面的新功能，建議您以「新功能」標記或影片的靜態圖片縮圖醒目顯示按鈕。
- 強調：按鈕設計時應以中度或高度強調效果，因為按下按鈕即可執行醒目動作。Google 質感設計提供了一些指引，說明如何設計不同程度的按鈕。
以下是設計有效鳥瞰按鈕的其他提示：
- 使用簡單明瞭的用語。該按鈕應清楚標示，讓使用者知道按鈕的作用。
- 使用清晰易讀的字型。按鈕必須夠大，方便使用者查看和點選。
- 使用對比色。按鈕應採用與周圍文字和背景不同的顏色，以便凸顯。
- 使用行動號召。按鈕應包含明確的行動號召，例如「觀看鳥瞰圖」或「觀看影片」。
多媒體廣告注意事項
影片載入
建議您採用較慢的連線方式，例如顯示影片的靜止畫面預覽，並在使用者互動時 (例如 onClick) 載入完整的體驗。除了 Aerial View 影片外，您也可以取得用於完成此作業的縮圖。
您也能取得不同解析度的影片，以便有策略地使用，以縮短使用者在不同連線速度下載入體驗的時間。
標誌出處
實作鳥瞰圖時，請務必遵循所有條款，包括標誌作者資訊。詳情請參閱這個頁面。
結論
希望這篇文章能提供靈感，讓您思考如何在網站中導入鳥瞰圖，進而提高使用者參與度。
請務必考量使用者如何找到內容，以及最適合顯示內容的格式。建議您考量要播放影片的裝置類型，特別是螢幕方向和使用者連線速度。
後續步驟
建議的延伸閱讀：
貢獻者
Google 維護這篇文章。以下著作人最初編寫過這個草稿。
主體作者：
Henrik Valve | Google 地圖平台解決方案工程師