一、前言

由 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）設計。所演示功能與交互設計均已申請專利、已上線或正在開發中，具體以實際線上效果為準。

歡迎關注「淘寶設計」公眾號：