淘宝Vision Pro版本完整体验指南

#01

前言

#02

功能介绍与设计思考

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

▲ 登录

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

▲ 首页

TAOBAO DESIGN：基于熟悉与实用的设计原则，推敲确立了「鱼骨式」的体验结构。① 主干：购物功能和使用路径延续用户认知习惯，提供浏览发现、搜索、查看商品、咨询卖家、下单购买、订单查询等必要功能，以此构建产品基础导航。② 分支：在每个需求节点下增添适合于混合现实行为与感知的差异功能体验。也即确立了「熟悉、常规、可用」为主与「探索、新颖、想用」为辅的平衡关系与体验预设。

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

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

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

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

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

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

▲ 选购支付

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

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

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

▲ 拖图搜索

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

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

▲ 语音搜索

TAOBAO DESIGN：不全是键盘隔空输入低效的原因，机器视觉搭配自然语言带来的「所见所问即所得」的想象空间*，促使将语音提前作为主要的需求输入方式。后续搜索也将不局限在某个一级导航中而作为应用内全局控件出现，或是作为底层功能被系统级的指令调取。*用户看着衣橱内的某件衣服问「它可以配什么裤子」或看着家居图片问「这个沙发什么牌子的、哪里可以买到」而直接唤起淘宝商品搜索或推荐。当然这一切同样取决于隐私权限、算法技术、系统与应用协同条件的支持可能性。

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

▲ 多商品同屏对比

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

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

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

▲ 多商品3D对比

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

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

▲ 空间视频

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

2.12 单品超级试用 Product Super Trial

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

▲ Logo秀

▲ 悬停持握

▲ 空间避障

▲ 小米SU7预告

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

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

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

▲ 马吉拉空间橱窗

▲ 合作品牌

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

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

#03

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

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

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