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」