大厂实战案例！淘宝Vision Pro版本完整体验指南

一、前言

由 Taobao Design 团队历时半年完成设计的淘宝 Vision Pro 版本，作为国内首个大型综合性购物应用于 4 月上架美区 AppStore，并于 6 月的苹果全球开发者大会(WWDC)活动中进行展示与交流。此次为大家带来完整功能介绍与背后设计思考原则。

淘宝 Vision Pro 版本在提供完整购物功能的基础上，充分应用 Apple Vision Pro 空间计算、共享空间、3D 对象与影像、眼动与裸手等特性，挖掘其能被应用的需求场景，旨在为用户带来更直观、更沉浸、更愉悦的购物体验。为此制定了以下 5 条设计原则，以在设计过程中时刻作为判断依据：

1. 设计原则

① 熟悉 Familiar：购物功能和使用路径延续用户习惯，提供浏览发现商品、搜索商品、查看商品、咨询卖家、下单购买、订单查询等功能。并在每个功能下增添适合于混合现实行为与感知的新体验。

② 直观 Intuitive：对窗口界面、商品模型、影像内容的呈现与操作符合用户直觉。利用广阔的空间画布合理展示关联信息与操作。结合真实空间或虚拟环境展示商品，提供大屏、双目3D、全景等提升沉浸感受。

③ 真实 High Fidelity：商品模型制作与展示品质、真实空间中的虚实融合效果、视效影像内容接近真实，以降低消费者决策成本。

④ 实用 Usable：回归购物需求本身，挖掘混合现实头显下内容展示与交互方式能解决的过往问题、或能增强的体验感受，以提供设备适用性、依赖性、持久性实用功能。避免一味追求新颖而无实用价值的短瞬体验。

⑤ 易用 Effortless：充分考虑用户使用场景和姿态行为，确保低成本认知、低疲劳操作。同类型对象的基础交互通用性、导航控件全局一致性、前后层级窗口（容器）的空间位置连续性、内容展示与操作控件设于视野中心区、小力矩手势操作、多窗口（容器）管理、安全区与极端情况考量、操作引导与提示、窗口全局自适应布局、共享到独占的提示与退出机制等。

二、功能介绍与设计思考

1. 安全、折中的双端协同登陆 Secure Dual-end Co-login

用户可以通过「在 AVP 中输入手机号 - 打开手机淘宝接收通信码 - 在 AVP 中输入通信码」的两步输入方式完成相对快捷且安全的登录。

登录

在登录体验设计中，设想过诸如 AVP 扫手机登陆码、虹膜识别、手机近场通信直登等各种方式，来实现便捷登录。但出于用户隐私考量、相关技术权限未开放等原因，最终回到围绕文本输入的交互方式。在尽可能少输入、简输入的原则下，引导用户选择手机号、键入数字通信码，来减少字母键盘的低效使用次数。为避免摘脱头显阻断登录行为的流畅性，专门设计了穿透下（VST-Video See Through）依旧清晰可读的通信码显示界面。随着后续技术权限的逐渐开放和相应设计的优化，将为用户带来更好的登录体验。

2. 更大、更立体的首页商品陈列 More, Larger, Real Items Display

用户可以通过熟悉的上下滑动操作来浏览商品推荐，透过大窗口与广视角不仅得以看到更大、更多、更清晰的商品图，还能更直观的看到商品真实的立体形态呈现于界面之上。

首页

基于熟悉与实用的设计原则，推敲确立了「鱼骨式」的体验结构。

① 主干：购物功能和使用路径延续用户认知习惯，提供浏览发现、搜索、查看商品、咨询卖家、下单购买、订单查询等必要功能，以此构建产品基础导航。

② 分支：在每个需求节点下增添适合于混合现实行为与感知的差异功能体验。也即确立了「熟悉、常规、可用」为主与「探索、新颖、想用」为辅的平衡关系与体验预设。

窗口，作为组织信息和串联路径的效率容器，承载主干功能、也扮演导向标识，告知在探索中迷失*的用户当前在哪并找到出口。首页作为主干与导航起点，加之共享空间（Share Space）下跨应用功能支持的可能性，自然选择以单窗口呈现。

针对商品推荐流的设计，混排瀑布流、有间隔、场景图皆会因图片质量不可控、与暗色玻璃背景不协调等原因导致直接的不美。而全模型在即便不考虑覆盖与加载性能问题的情况下，其本身的塑料轻飘感、细节缺乏、大小参差以及叠加真实环境光后的过曝、过暗，都会加剧商品美观度和可读性的降低。浏览发现节点下，商品陈列不仅要真实，更要好看、清晰、高效。采用自适应四宫格平铺商品白底图以确保主干体验、两两组合承载模型或场景以保留新颖点，便是折中的解决方案。

*比如当用户自由摆放模型。

3. 直观、简洁的商品详情展示 Easy-to-Read Item Detail

用户可以同时浏览界面左侧更大的商品介绍视频或图片，与界面右侧更简洁的商品信息。通过简单的点击操作来切换视频、图片，或打开服务、物流、参数、评价弹层查看详细内容。

商品详情

详情的主干是基础信息浏览、分支则是商品模型查看，而用户定会被后者所吸引并付诸主要操作。那么基础信息窗口作为非主体对象，核心信息一屏之内直铺可见、减少多余操作。左右信息结构兼容详情、消息、交易，保持阅读与操作区域连贯性。二级信息采用 Popup/over 以保证内容出现在视野中央或触发点附近，减少头眼转动带来的疲劳度。保留商品介绍视频解说或配乐作为环境背景音，营造用户操作商品模型时的视听沉浸感。

4. 自由查看、摆放商品 3D 模型 Intuitive Items 3D View and Placement

用户可以在详情窗口前直接看到商品 3D 模型浮现在真实空间中。通过单手捏合拖拽来移动商品、识别平面以实现松手自动吸附放置、单手捏合两次拖拽来旋转商品*、双手捏合逆向拖拽来缩放商品。此外，通过点击 1:1 还原商品实际大小、点击参数显示商品尺寸、点击浮点播放模型动画。

*也可通过点击模型底部操作栏旋转按钮来打开旋转模式，进行单手捏合拖拽旋转。

商品模型自由查看与摆放

商品与空间虚实融合是 MR 购物类应用中的核心差异体验。如果说淘宝多年积累的模型资产和生产流程确保模型覆盖、苹果 Reality Composer, 空间计算提升模型真实及空间交互，那么设计就要解决适用于购物场景的功能合理性与易用性问题：

① 空间：以头显位（眼高）为参照系中心点、覆盖前方核心区视野的三维空间内，构建用户、模型、窗口之间位置关系，确保可见、可操作且互不遮挡、相叠。

② 模型：按品类分段式设定模型默认显示大小与缩放比例阈值，确保所有品类（小至戒指、大至冰箱）易见、易操作且与窗口或用户不相叠。

③ 操作：结合直觉习惯、操作频次（移动>旋转>缩放）与疲劳度控制（单手>双手）设计对应交互手势，确保手势不冲突、同一手势不会同时触发多种反馈。

④ 控件：从模型操作栏、动画浮点到吸附地面视效提示、手势引导，围绕模型参考系规范控件显示位置与样式，确保不同视角下控件可见、可操作且与模型互不遮挡、相叠 … 更多细节将在专题篇中详尽展开。

5. 快捷圈图咨询 Free Mark to Inquire

用户可以在详情页中打开消息对话框，启用截图功能将左侧视频或图文内容截屏，并通过捏合拖拽手势在所截图上画圈或标记，直接发送给商家予以咨询。

截图圈图

截图标记咨询商家已是线上购物常见的用户操作，利用窗口分屏特性重新设计了无需跳转、仅需三步的交互路径：打开对话框 - 同屏截图并标记 - 直接发送至对话框。采用手部射线光标，避免眼动光标导致光点干扰现象、避免眼动选点导致画线起始点遮挡实际圈选目标。

6. 快捷选购与支付 Easy to Select and Pay

用户可以如其他端一样选择商品 SKU、收货地址、服务、数量，加入手机购物车或直接支付。在 AVP 淘宝中支持价格低于 500 元的免密支付，超出额度或未开通免密支付则可以通过手机进行支付操作。

选购支付

支持下单购买是产品设计与开发伊始就定下的最基本功能，作为主干体验的末端关键一环，提供用户熟悉的选购操作界面，不在此处大做文章是为求亿万级商品数据最广泛的普适性和延续性。与登陆所遇到的限制条件一样，选择免密或手机操作支付的双端联动方式，以尽可能确保安全与效率的平衡。跨端支付过程中用户无需摘下头显，手机淘宝会自动唤起支付或免密开通界面，方便用户即拿即用。

7. 跨应用拖图搜索 Drag-Drop Search Between Apps

用户可以在多应用并存的共享空间下，将其他应用中的图片拖入淘宝识图区域中进行商品搜索，实现更直接、流畅的图搜体验。

拖图搜索

共享空间模式意味着自有应用将与其他应用并置在同一空间内，这又是一个「自有应用向内定制」与「协同平台向外兼容」之间的取舍。如果说采用窗口模式来承载主干功能具备高效导航作用是原因其一的话，那么其二就是支持共享*的应用多为窗口模式、保持形态的一致性能带来阅读与操作认知的连贯。为实现更明确的识图功能可见性，将小屏搜索框扩展为大屏搜索区、重构了多模态搜索优先级（语音>图搜>文本）。

*至少指支持拖图的相册、浏览器、内容社交产品等应用。

8. 语音为主的搜索 Speak to Search Naturally

用户可以通过点击语音按钮进行语音输入，实现相对省力、高效的搜索体验。当然，常规的键盘输入与相册图片搜索依然可用。

语音搜索

不全是键盘隔空输入低效的原因，机器视觉搭配自然语言带来的「所见所问即所得」的想象空间*，促使将语音提前作为主要的需求输入方式。后续搜索也将不局限在某个一级导航中而作为应用内全局控件出现，或是作为底层功能被系统级的指令调取。

*用户看着衣橱内的某件衣服问「它可以配什么裤子」或看着家居图片问「这个沙发什么牌子的、哪里可以买到」而直接唤起淘宝商品搜索或推荐。当然这一切同样取决于隐私权限、算法技术、系统与应用协同条件的支持可能性。

9. 多商品同屏对比 Compare Multiple Items At Once

用户可以点击「加入」按钮添加最多 20 个商品以进入多窗口模式，实现同屏多商品对比或搭配体验。同时通过打开「联动模式」实现对一个商品交互操作同时控制所有商品信息的高效对比体验。

多商品同屏对比

基于交互「自由度」与「疲劳度」的取舍，并没有选择新开商品详情窗口的交互方式，因为新开窗口坐标位置的不确定性会导致多窗口交错相叠，从而增加用户组织窗口的操作时间和成本。取而代之将一屏 3 至 5 个商品窗口并置在同一个透明背景窗口中、共享同一个导航挂件，也即用户可以同时拖拽移动多商品窗口、退回至上一级页面也能保持连贯的窗口位置。为保证「联动」模式下并列的商品信息条目能对齐阅读，将条目数不可控的信息抽屉进行了行数补齐的结构化设计。

10. 直观对比多个商品 3D 模型 Compare Multiple 3D Items Intuitively

用户可以通过点击商品详情 3D 模型挂件上的「对比」按钮、或多窗口模式下商品卡上的「3D 模型」开关，进行更直观、沉浸、真实的多商品 3D 模型对比或搭配查看。

多商品 3D 对比

基于用户有相似商品对比*以及多商品组合搭配*的需求，支持单商品详情 3 个模型、多窗口模式 20 个模型*同空间摆放查看的功能体验，同时确保模型操作交互的全局一致性、以及多模型默认出现时易见、互不相叠。

*如消费电子商品 *如家具商品等 *正在开发中。

11. 沉浸观看空间视频 Spatial Video Immersive Viewing

用户可以观看双目 3D 的空间品牌与商品视频，通过捏合视频窗口左右区域的快捷操作进行相对省力的视频切换。

空间视频

得益于算法技术，平台存量 2D 视频会自动转为双目 3D 空间视频。视频播控交互方面，简单复制手机上下划屏的手势是不合理的，是由于捏合拖拽手势所产生力矩是远大于拇指转动力矩的，也即前者比后者更费力从而减少切换视频次数和使用时长。为此，根据「切换下一条 > 切换上一条 > 暂停播放」的操纵频次，对应设计「看右侧区域捏合 > 看左侧区域捏合 > 捏合 2 次」的快捷手势*。如果说手机划屏切换视频是翻页感，那么在 AVP 中模拟的就是遥控器点按切换电视频道的感觉。

*后续将优化为不用注视到左右区域，而是任意位置捏合 1 次切换下一条、捏合 2 次切换上一条，暂停播放取消快捷手势而使用常规播控组件的方式。

12. 单品超级试用 Product Super Trial

此是为展示超级单品、超前试用所深度定制的全新体验。本期带来大疆无人机超级试飞：用户进入沉浸空间从前至后体验品牌标志秀、无人机悬停持握查看外观细节、检测真实空间智能避障飞行、点选空间返航点还原智能返航、大屏视频搭配镜头变化展示拍摄效果、多无人机模型参数对比、沉浸式价格赠品展示与购买。

Logo 秀

悬停持握

空间避障

小米 SU7 预告

实际上手机淘宝端在探索实践商品表达与模拟试用已有多年，从数码电子商品 3D&AR 查看、鞋服配饰商品 AR 试穿试戴、美妆商品 AR 试妆试色、家具商品 3D 样板间搭配、家装门店漫游与全景视频导购、汽车 3D 选配与全景试驾… 针对不同品类数字化线下消费体验以提升决策效率，这也是为何平台能积累海量商品模型与相关技术直接用于AVP的原因。不过有别于手机有限画布、间接交互，MR设备所带来的沉浸体验与直观交互是截然不同的，加之利用空间计算、虚实融合能力可以实现更多深度互动与展示效果。

为避免按品类案例逐个定制可能造成的体验混乱，设计上制定了一种具备通用性和延展性的体验架构，即「线性叙事」：按商品功能分段依次体验，针对每一项功能进行深度定制，从个案中沉淀可复用能力*供相似品类使用。如在此次无人机的案例中所探索的空间避障、路线规划、跟手交互等都是可以作为通用能力，应用在如扫地机器人等品类中。

*包括正在开发的汽车 3D 选配能力。

13. 品牌橱窗沉浸体验 Immersive Brand Space Experience

虚拟品牌空间叠加于真实环境中并呈现在用户身前，在该空间中用户可以沉浸感受品牌氛围、标志秀，并可交互查看品牌单品、多品，观看品牌空间视频、门店漫游并快捷加入品牌会员。

马吉拉空间橱窗

合作品牌

如果以上都是针对品类与商品维度的交互体验设计，那么「品牌橱窗」则是对如何在 MR 中展示品牌商家内容、商品、服务、氛围、互动的一次体验雏形探索。设定上为「非线性」的体验架构：即用户在半包围的固定空间视野中，同时可见所有交互感知对象，并可自由跳跃的选择任何一个进行交互。

对应在生产端构想的则是「品牌空间模块化搭建」的产品思路：即在一个给定的空间画布内，品牌根据需求可选择预制功能模块、通过替换素材的方式来自建空间。功能模块包含但不限于氛围模块、标志模块、单品模块、多品模块、视频模块、漫游模块、入会模块等*。每一项功能模块具备给定交互、同时提供自定义功能模块以提供品牌定制需求*。

*此次马吉拉案例中所包含模块 *如 NIKE 体感互动、LEGO 搭建游戏等。

三、后续

实际功能请前往 AppStore 下载「淘宝」体验，或可通过网络内容渠道搜索「淘宝 Vision」等关键词查看科技博主或媒体的第一人称视角使用评测，发现更多细节和未展示内容。

以上所有体验设计理念、原则与规范皆将见于「TAOBAO MR Design System」。同时后续会带来专题篇（如 MR 交互设计流程与规范、单品表达试用专题、品牌橱窗体验专题等）与大家分享更多、更深入的 MR 体验设计实践经验和理论 ，敬请期待。

由淘宝多端创新设计小组 MPID（Multi-Platforms Innovation Design）设计。所演示功能与交互设计均已申请专利、已上线或正在开发中，具体以实际线上效果为准。

欢迎关注「淘宝设计」公众号：