Vision Pro實戰案例！攜程 Trip.Vision 如何打造旅游全新體驗？

推薦閱讀

作為全球及中國 OTA 行業的領軍企業，攜程積極探索旅游行業與虛擬現實的創新融合，并推出了首個適配 Vision Pro 的國內旅游服務類應用。該應用利用虛擬現實技術，讓用戶可以預覽真實宇宙，激發他們探索真實宇宙的靈感和意愿。從而為用戶提供更具交互性、沉浸感和趣味性的旅游體驗。本文將分享我們在其中的創新探索經驗和設計思考。

Trip.Vision 應用展示請看視頻

一、構建旅行服務新體驗

1. 核心場景挖掘

蘋果在設計指南中強調了尋找合適的應用場景，并創作一個核心體驗的重要性。我們的目標是結合設備特性和用戶場景，為旅游服務創造出全新的體驗功能。從設備特性的角度來看，Vision Pro 相較于移動設備具備三大新特性，包括新視窗形態和多窗口功能、音視頻沉浸&新交互方式、虛擬現實深度融合。從使用場所的角度來看，我們對用戶在旅行前、旅行中和旅行后可能使用 Vision Pro 的場所進行了盤點。考慮到攜帶設備出行相對不便、且續航能力較弱，常住地、景點、酒店等這類固定場所是用戶最有可能使用這一設備的場所。

一個典型的旅行過程可分為種草、規劃、預訂、出行、記錄階段。在這些階段中，我們從利用設備特性為旅行者帶來新價值和新體驗的角度出發，篩選出三個核心場景：旅行靈感種草、行程規劃和展示、景區/酒店導覽。

2. 應用功能定義

在出行過程中，景區和酒店是經營主體和服務體驗的核心。相較而言，攜程在其他旅行階段積累和沉淀了更多的經驗。因此，我們選擇從用戶行前靈感種草和行程規劃場景出發，結合設備特性來確定應用的具體功能。

在靈感發現階段，視覺感受和氛圍營造是吸引用戶的關鍵。因此，我們利用設備空間展示能力，為用戶呈現 360 度旅行視頻，提供沉浸式的靈感體驗合集，以提供高價值和強體驗的旅行靈感。這一功能已經在首個版本中率先上線。

在行程規劃階段，幫助用戶高效便捷地做出旅行決策是至關重要的。相較于瀏覽網頁等相對低效的信息獲取方式，我們將攜程問道這一旅行行業垂直大模型內嵌到應用中，使用戶能夠通過對話的方式高效準確地獲取所需的旅行信息。考慮到語音輸入在新設備中比文本輸入更為便捷高效，我們默認優先通過語音與智能助理進行交流，與手機端默認的文本輸入功能形成差異。

3. 頁面方案設計

① 靈感集合頁

為了突出靈感的視覺效果，我們選擇了大圖卡片的展示方案。通過使用大圖卡片，我們能夠以更大的畫面展示靈感內容，讓用戶能夠更直觀地感受到其中的美妙與魅力。同時，我們還將產品與現實融合在一起，讓用戶感受到靈感與現實的完美融合。

除了常規的頁面設計方案，我們還嘗試發揮設備全新的交互和空間特性，創新用戶瀏覽靈感的體驗。我們利用 360 度空間將靈感環繞在用戶周圍，創造沉浸式的氛圍。另外，我們還可以使用虛擬地圖將靈感所在地以立體的形式呈現，用戶可以通過手勢自由縮放和旋轉，在虛擬和現實之間探索旅行靈感。

② 靈感詳情頁

靈感畫面素材是我們關注的核心。我們精心篩選了在站內熱度高且具有強烈視覺沖擊力的旅游靈感素材。這些視頻內容包括自然景觀、人文風情、城市建筑以及極限運動等，覆蓋了七大洲的各個角落。

同時，我們充分利用設備的新特性，為用戶打造多感官沉浸式體驗。用戶可以在觀看的同時享受到視覺、聽覺和互動的樂趣。我們提供全景沉浸式畫面和環境音效，讓用戶仿佛身臨其境；同時支持任意角度的瀏覽，讓用戶可以自由地探索畫面細節。為了讓用戶在欣賞的同時更好地了解旅游地，我們還增加了文字信息和解說語音。這樣，用戶不僅可以欣賞美景，還可以通過文字和語音了解更多有關旅游地的信息。

③ 頁面元素設計

由于 visionOS 的屏幕距離相對于傳統手機更遠，蘋果為了適應真實的觀看體驗，統一增加了字體的字重。同樣，在 icon 繪制方面，與傳統手機相比也有一些差異。我們使用更粗的線條和更為圓潤的邊緣處理來繪制 icon，這樣可以在強化視覺識別的同時減少視覺疲勞。這些調整旨在提供更好的視覺效果和更舒適的觀看體驗。

為了確保視線錨點的低干擾性，visionOS 中的熱區最小為 60pt，相比 iOS 規范中的最小可點擊區域 44pt 有所增加。這樣可以提供更大的點擊目標，使用戶更容易準確地點擊所需的功能。通過增加熱區的大小，我們旨在提升用戶的操作體驗和減少誤操作的可能性。

通過明度變化和對比來表現信息層級，使用玻璃材質。在顏色上，結合玻璃材質的標簽，強化了飽和度的色彩識別。這樣的設計手法提升了用戶對信息的理解和辨識能力。

二、設計實踐新要點

1. 全面考慮窗口設定

在 Vision Pro 中，窗口或模型的定義需要更多的考慮，包括尺寸、初始位置、是否可拖動、是否可改變尺寸等。

合適的尺寸和初始位置可確保窗口在用戶的舒適視線區域內瀏覽。蘋果推薦的窗口尺寸有 1280x720、960x840 等，更窄的窗口可以以 508、320 的寬度呈現。初始位置一般可以是用戶視線正前方，或者指定的固定位置。由于在設備中用戶可以自由轉動視角，除了絕對位置外，和用戶的相對位置也是需要被考慮的。在 Trip.Vision 中，我們更多地使用蘋果推薦的窗口尺寸，并使用系統推薦的視線正前方位置展示窗口。

窗口可否被拖動、可否被改變尺寸也是需要設計師優先考慮的。如果允許窗口尺寸可以被用戶自定義，則在設計和開發階段需要提供適配方案，以確保在不同寬度下展示效果良好。如果窗口內有諸多功能，改變尺寸對用戶使用體驗無明顯增益，也可選擇禁止用戶改變窗口的尺寸。

2. 操作區外延至窗口外

在空間設計中，操作區域可以不僅僅出現在常規窗口中，還可以出現在窗口之外通常，上一個和下一個切換按鈕出現在窗口的標題欄上。然而，在我們的靈感介紹窗口中，我們將切換按鈕延伸到窗口的兩側，以更直觀的形式感傳達上一個和下一個切換的功能。這樣的設計可以更好地呈現上一個和下一個切換的概念。

3. 避免眼睛注視費力

視線下方的內容相對不容易被注意到。由于日常生活和視覺習慣的影響，人們更傾向于向前和斜上方看。因此，Vision Pro 的舒適視線熱區主要集中在視線正前方和上方，而底部視線區域需要進行額外的眼神移動和注視。因此，在設計時我們將核心操作區域放置在頁面的上部，而不在頁面下方放置重要的功能。這樣可以提高用戶的操作準確性和舒適度。

過長的寬度會給用戶帶來注視困擾。就像在 PC 瀏覽器中一樣，如果內容過寬，用戶為了完整查看內容，不得不左右轉動腦袋。因此，我們需要控制元素的寬度，尤其是文本信息的寬度。在窗口設計中，我們優先考慮使用左右布局和一排三布局，以便更好地適應用戶的視覺習慣。這樣可以減少用戶的注視困擾，提供更好的瀏覽體驗。

4. 素材畫面把控

不同的播放設備會對視頻的體驗產生不同的影響。由于頭戴設備的畫面距離用戶更近，不合適的移動方向和速度都會給人帶來負面的感受。在選擇素材時，需要考慮鏡頭的拍攝視角和移動位置。過高的機位可能會讓用戶感到漂浮在空中的奇怪感覺；過近的機位可能會讓主題畫面過大，引起巨物恐懼癥；過快的移動速度可能會引起暈眩感。因此，在選擇視頻時需要注意這些因素，以提供更好的觀看體驗。

結尾

新的設備為創造全新的旅行服務體驗提供了機會，不僅包含了新場景挖掘，也包含著對傳統頁面對重構。Trip.Vision 是對未來旅行服務體驗的一次探索。我們將持續優化用戶體驗，不斷設計并探索更多可能性，以更多的方式讓用戶接觸旅行，激發他們的旅行意愿。也歡迎有條件的小伙伴下載體驗。

歡迎關注作者微信公眾號：「TripDesign」