推薦閱讀

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

Trip.Vision 應(yīng)用展示請看視頻

一、構(gòu)建旅行服務(wù)新體驗(yàn)

1. 核心場景挖掘

蘋果在設(shè)計(jì)指南中強(qiáng)調(diào)了尋找合適的應(yīng)用場景，并創(chuàng)作一個(gè)核心體驗(yàn)的重要性。我們的目標(biāo)是結(jié)合設(shè)備特性和用戶場景，為旅游服務(wù)創(chuàng)造出全新的體驗(yàn)功能。從設(shè)備特性的角度來看，Vision Pro 相較于移動(dòng)設(shè)備具備三大新特性，包括新視窗形態(tài)和多窗口功能、音視頻沉浸&新交互方式、虛擬現(xiàn)實(shí)深度融合。從使用場所的角度來看，我們對用戶在旅行前、旅行中和旅行后可能使用 Vision Pro 的場所進(jìn)行了盤點(diǎn)?？紤]到攜帶設(shè)備出行相對不便、且續(xù)航能力較弱，常住地、景點(diǎn)、酒店等這類固定場所是用戶最有可能使用這一設(shè)備的場所。

一個(gè)典型的旅行過程可分為種草、規(guī)劃、預(yù)訂、出行、記錄階段。在這些階段中，我們從利用設(shè)備特性為旅行者帶來新價(jià)值和新體驗(yàn)的角度出發(fā)，篩選出三個(gè)核心場景：旅行靈感種草、行程規(guī)劃和展示、景區(qū)/酒店導(dǎo)覽。

2. 應(yīng)用功能定義

在出行過程中，景區(qū)和酒店是經(jīng)營主體和服務(wù)體驗(yàn)的核心。相較而言，攜程在其他旅行階段積累和沉淀了更多的經(jīng)驗(yàn)。因此，我們選擇從用戶行前靈感種草和行程規(guī)劃場景出發(fā)，結(jié)合設(shè)備特性來確定應(yīng)用的具體功能。

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

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

3. 頁面方案設(shè)計(jì)

① 靈感集合頁

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

除了常規(guī)的頁面設(shè)計(jì)方案，我們還嘗試發(fā)揮設(shè)備全新的交互和空間特性，創(chuàng)新用戶瀏覽靈感的體驗(yàn)。我們利用 360 度空間將靈感環(huán)繞在用戶周圍，創(chuàng)造沉浸式的氛圍。另外，我們還可以使用虛擬地圖將靈感所在地以立體的形式呈現(xiàn)，用戶可以通過手勢自由縮放和旋轉(zhuǎn)，在虛擬和現(xiàn)實(shí)之間探索旅行靈感。

② 靈感詳情頁

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

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

③ 頁面元素設(shè)計(jì)

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

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

通過明度變化和對比來表現(xiàn)信息層級，使用玻璃材質(zhì)。在顏色上，結(jié)合玻璃材質(zhì)的標(biāo)簽，強(qiáng)化了飽和度的色彩識別。這樣的設(shè)計(jì)手法提升了用戶對信息的理解和辨識能力。

二、設(shè)計(jì)實(shí)踐新要點(diǎn)

1. 全面考慮窗口設(shè)定

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

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

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

2. 操作區(qū)外延至窗口外

在空間設(shè)計(jì)中，操作區(qū)域可以不僅僅出現(xiàn)在常規(guī)窗口中，還可以出現(xiàn)在窗口之外通常，上一個(gè)和下一個(gè)切換按鈕出現(xiàn)在窗口的標(biāo)題欄上。然而，在我們的靈感介紹窗口中，我們將切換按鈕延伸到窗口的兩側(cè)，以更直觀的形式感傳達(dá)上一個(gè)和下一個(gè)切換的功能。這樣的設(shè)計(jì)可以更好地呈現(xiàn)上一個(gè)和下一個(gè)切換的概念。

3. 避免眼睛注視費(fèi)力

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

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

4. 素材畫面把控

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

結(jié)尾

新的設(shè)備為創(chuàng)造全新的旅行服務(wù)體驗(yàn)提供了機(jī)會(huì)，不僅包含了新場景挖掘，也包含著對傳統(tǒng)頁面對重構(gòu)。Trip.Vision 是對未來旅行服務(wù)體驗(yàn)的一次探索。我們將持續(xù)優(yōu)化用戶體驗(yàn)，不斷設(shè)計(jì)并探索更多可能性，以更多的方式讓用戶接觸旅行，激發(fā)他們的旅行意愿。也歡迎有條件的小伙伴下載體驗(yàn)。

歡迎關(guān)注作者微信公眾號：「TripDesign」