淘寶Vision Pro版本完整體驗指南

#01

前言

#02

功能介紹與設(shè)計思考

用戶可以通過「在AVP中輸入手機(jī)號 - 打開手機(jī)淘寶接收通信碼 - 在AVP中輸入通信碼」的兩步輸入方式完成相對快捷且安全的登錄。

▲ 登錄

用戶可以通過熟悉的上下滑動操作來瀏覽商品推薦，透過大窗口與廣視角不僅得以看到更大、更多、更清晰的商品圖，還能更直觀的看到商品真實的立體形態(tài)呈現(xiàn)于界面之上。

▲ 首頁

TAOBAO DESIGN：基于熟悉與實用的設(shè)計原則，推敲確立了「魚骨式」的體驗結(jié)構(gòu)。① 主干：購物功能和使用路徑延續(xù)用戶認(rèn)知習(xí)慣，提供瀏覽發(fā)現(xiàn)、搜索、查看商品、咨詢賣家、下單購買、訂單查詢等必要功能，以此構(gòu)建產(chǎn)品基礎(chǔ)導(dǎo)航。② 分支：在每個需求節(jié)點下增添適合于混合現(xiàn)實行為與感知的差異功能體驗。也即確立了「熟悉、常規(guī)、可用」為主與「探索、新穎、想用」為輔的平衡關(guān)系與體驗預(yù)設(shè)。

窗口，作為組織信息和串聯(lián)路徑的效率容器，承載主干功能、也扮演導(dǎo)向標(biāo)識，告知在探索中迷失*的用戶當(dāng)前在哪并找到出口。首頁作為主干與導(dǎo)航起點，加之共享空間（Share Space）下跨應(yīng)用功能支持的可能性，自然選擇以單窗口呈現(xiàn)。

針對商品推薦流的設(shè)計，混排瀑布流、有間隔、場景圖皆會因圖片質(zhì)量不可控、與暗色玻璃背景不協(xié)調(diào)等原因?qū)е轮苯拥牟幻?。而全模型在即便不考慮覆蓋與加載性能問題的情況下，其本身的塑料輕飄感、細(xì)節(jié)缺乏、大小參差以及疊加真實環(huán)境光后的過曝、過暗，都會加劇商品美觀度和可讀性的降低。瀏覽發(fā)現(xiàn)節(jié)點下，商品陳列不僅要真實，更要好看、清晰、高效。采用自適應(yīng)四宮格平鋪商品白底圖以確保主干體驗、兩兩組合承載模型或場景以保留新穎點，便是折中的解決方案。*比如當(dāng)用戶自由擺放模型。

用戶可以同時瀏覽界面左側(cè)更大的商品介紹視頻或圖片，與界面右側(cè)更簡潔的商品信息。通過簡單的點擊操作來切換視頻、圖片，或打開服務(wù)、物流、參數(shù)、評價彈層查看詳細(xì)內(nèi)容。

用戶可以在詳情窗口前直接看到商品3D模型浮現(xiàn)在真實空間中。通過單手捏合拖拽來移動商品、識別平面以實現(xiàn)松手自動吸附放置、單手捏合兩次拖拽來旋轉(zhuǎn)商品*、雙手捏合逆向拖拽來縮放商品。此外，通過點擊1:1還原商品實際大小、點擊參數(shù)顯示商品尺寸、點擊浮點播放模型動畫。*也可通過點擊模型底部操作欄旋轉(zhuǎn)按鈕來打開旋轉(zhuǎn)模式，進(jìn)行單手捏合拖拽旋轉(zhuǎn)。

用戶可以在詳情頁中打開消息對話框，啟用截圖功能將左側(cè)視頻或圖文內(nèi)容截屏，并通過捏合拖拽手勢在所截圖上畫圈或標(biāo)記，直接發(fā)送給商家予以咨詢。

用戶可以如其他端一樣選擇商品SKU、收貨地址、服務(wù)、數(shù)量，加入手機(jī)購物車或直接支付。在AVP淘寶中支持價格低于500元的免密支付，超出額度或未開通免密支付則可以通過手機(jī)進(jìn)行支付操作。

▲ 選購支付

TAOBAO DESIGN：支持下單購買是產(chǎn)品設(shè)計與開發(fā)伊始就定下的最基本功能，作為主干體驗的末端關(guān)鍵一環(huán)，提供用戶熟悉的選購操作界面，不在此處大做文章是為求億萬級商品數(shù)據(jù)最廣泛的普適性和延續(xù)性。與登陸所遇到的限制條件一樣，選擇免密或手機(jī)操作支付的雙端聯(lián)動方式，以盡可能確保安全與效率的平衡?？缍酥Ц哆^程中用戶無需摘下頭顯，手機(jī)淘寶會自動喚起支付或免密開通界面，方便用戶即拿即用。

2.7 跨應(yīng)用拖圖搜索 Drag-Drop Search Between Apps

用戶可以在多應(yīng)用并存的共享空間下，將其他應(yīng)用中的圖片拖入淘寶識圖區(qū)域中進(jìn)行商品搜索，實現(xiàn)更直接、流暢的圖搜體驗。

▲ 拖圖搜索

TAOBAO DESIGN：共享空間模式意味著自有應(yīng)用將與其他應(yīng)用并置在同一空間內(nèi)，這又是一個「自有應(yīng)用向內(nèi)定制」與「協(xié)同平臺向外兼容」之間的取舍。如果說采用窗口模式來承載主干功能具備高效導(dǎo)航作用是原因其一的話，那么其二就是支持共享*的應(yīng)用多為窗口模式、保持形態(tài)的一致性能帶來閱讀與操作認(rèn)知的連貫。為實現(xiàn)更明確的識圖功能可見性，將小屏搜索框擴(kuò)展為大屏搜索區(qū)、重構(gòu)了多模態(tài)搜索優(yōu)先級（語音>圖搜>文本）。*至少指支持拖圖的相冊、瀏覽器、內(nèi)容社交產(chǎn)品等應(yīng)用。

用戶可以通過點擊語音按鈕進(jìn)行語音輸入，實現(xiàn)相對省力、高效的搜索體驗。當(dāng)然，常規(guī)的鍵盤輸入與相冊圖片搜索依然可用。

▲ 語音搜索

TAOBAO DESIGN：不全是鍵盤隔空輸入低效的原因，機(jī)器視覺搭配自然語言帶來的「所見所問即所得」的想象空間*，促使將語音提前作為主要的需求輸入方式。后續(xù)搜索也將不局限在某個一級導(dǎo)航中而作為應(yīng)用內(nèi)全局控件出現(xiàn)，或是作為底層功能被系統(tǒng)級的指令調(diào)取。*用戶看著衣櫥內(nèi)的某件衣服問「它可以配什么褲子」或看著家居圖片問「這個沙發(fā)什么牌子的、哪里可以買到」而直接喚起淘寶商品搜索或推薦。當(dāng)然這一切同樣取決于隱私權(quán)限、算法技術(shù)、系統(tǒng)與應(yīng)用協(xié)同條件的支持可能性。

用戶可以點擊「加入」按鈕添加最多20個商品以進(jìn)入多窗口模式，實現(xiàn)同屏多商品對比或搭配體驗。同時通過打開「聯(lián)動模式」實現(xiàn)對一個商品交互操作同時控制所有商品信息的高效對比體驗。

▲ 多商品同屏對比

TAOBAO DESIGN：基于交互「自由度」與「疲勞度」的取舍，并沒有選擇新開商品詳情窗口的交互方式，因為新開窗口坐標(biāo)位置的不確定性會導(dǎo)致多窗口交錯相疊，從而增加用戶組織窗口的操作時間和成本。取而代之將一屏3至5個商品窗口并置在同一個透明背景窗口中、共享同一個導(dǎo)航掛件，也即用戶可以同時拖拽移動多商品窗口、退回至上一級頁面也能保持連貫的窗口位置。為保證「聯(lián)動」模式下并列的商品信息條目能對齊閱讀，將條目數(shù)不可控的信息抽屜進(jìn)行了行數(shù)補(bǔ)齊的結(jié)構(gòu)化設(shè)計。

2.10 直觀對比多個商品3D模型 Compare Multiple 3D Items Intuitively

用戶可以通過點擊商品詳情3D模型掛件上的「對比」按鈕、或多窗口模式下商品卡上的「3D模型」開關(guān)，進(jìn)行更直觀、沉浸、真實的多商品3D模型對比或搭配查看。

▲ 多商品3D對比

TAOBAO DESIGN：基于用戶有相似商品對比*以及多商品組合搭配*的需求，支持單商品詳情3個模型、多窗口模式20個模型*同空間擺放查看的功能體驗，同時確保模型操作交互的全局一致性、以及多模型默認(rèn)出現(xiàn)時易見、互不相疊。*如消費電子商品 *如家具商品等 *正在開發(fā)中。

用戶可以觀看雙目3D的空間品牌與商品視頻，通過捏合視頻窗口左右區(qū)域的快捷操作進(jìn)行相對省力的視頻切換。

▲ 空間視頻

TAOBAO DESIGN：得益于算法技術(shù)，平臺存量2D視頻會自動轉(zhuǎn)為雙目3D空間視頻。視頻播控交互方面，簡單復(fù)制手機(jī)上下劃屏的手勢是不合理的，是由于捏合拖拽手勢所產(chǎn)生力矩是遠(yuǎn)大于拇指轉(zhuǎn)動力矩的，也即前者比后者更費力從而減少切換視頻次數(shù)和使用時長。為此，根據(jù)「切換下一條 > 切換上一條 > 暫停播放」的操縱頻次，對應(yīng)設(shè)計「看右側(cè)區(qū)域捏合 > 看左側(cè)區(qū)域捏合 > 捏合2次」的快捷手勢*。如果說手機(jī)劃屏切換視頻是翻頁感，那么在AVP中模擬的就是遙控器點按切換電視頻道的感覺。*后續(xù)將優(yōu)化為不用注視到左右區(qū)域，而是任意位置捏合1次切換下一條、捏合2次切換上一條，暫停播放取消快捷手勢而使用常規(guī)播控組件的方式。

2.12 單品超級試用 Product Super Trial

此是為展示超級單品、超前試用所深度定制的全新體驗。本期帶來大疆無人機(jī)超級試飛：用戶進(jìn)入沉浸空間從前至后體驗品牌標(biāo)志秀、無人機(jī)懸停持握查看外觀細(xì)節(jié)、檢測真實空間智能避障飛行、點選空間返航點還原智能返航、大屏視頻搭配鏡頭變化展示拍攝效果、多無人機(jī)模型參數(shù)對比、沉浸式價格贈品展示與購買。

▲ Logo秀

▲ 懸停持握

▲ 空間避障

▲ 小米SU7預(yù)告

TAOBAO DESIGN：實際上手機(jī)淘寶端在探索實踐商品表達(dá)與模擬試用已有多年，從數(shù)碼電子商品3D&AR查看、鞋服配飾商品AR試穿試戴、美妝商品AR試妝試色、家具商品3D樣板間搭配、家裝門店漫游與全景視頻導(dǎo)購、汽車3D選配與全景試駕… 針對不同品類數(shù)字化線下消費體驗以提升決策效率，這也是為何平臺能積累海量商品模型與相關(guān)技術(shù)直接用于AVP的原因。不過有別于手機(jī)有限畫布、間接交互，MR設(shè)備所帶來的沉浸體驗與直觀交互是截然不同的，加之利用空間計算、虛實融合能力可以實現(xiàn)更多深度互動與展示效果。

為避免按品類案例逐個定制可能造成的體驗混亂，設(shè)計上制定了一種具備通用性和延展性的體驗架構(gòu)，即「線性敘事」：按商品功能分段依次體驗，針對每一項功能進(jìn)行深度定制，從個案中沉淀可復(fù)用能力*供相似品類使用。如在此次無人機(jī)的案例中所探索的空間避障、路線規(guī)劃、跟手交互等都是可以作為通用能力，應(yīng)用在如掃地機(jī)器人等品類中。*包括正在開發(fā)的汽車3D選配能力。

虛擬品牌空間疊加于真實環(huán)境中并呈現(xiàn)在用戶身前，在該空間中用戶可以沉浸感受品牌氛圍、標(biāo)志秀，并可交互查看品牌單品、多品，觀看品牌空間視頻、門店漫游并快捷加入品牌會員。

▲ 馬吉拉空間櫥窗

▲ 合作品牌

TAOBAO DESIGN：如果以上都是針對品類與商品維度的交互體驗設(shè)計，那么「品牌櫥窗」則是對如何在MR中展示品牌商家內(nèi)容、商品、服務(wù)、氛圍、互動的一次體驗雛形探索。設(shè)定上為「非線性」的體驗架構(gòu)：即用戶在半包圍的固定空間視野中，同時可見所有交互感知對象，并可自由跳躍的選擇任何一個進(jìn)行交互。

對應(yīng)在生產(chǎn)端構(gòu)想的則是「品牌空間模塊化搭建」的產(chǎn)品思路：即在一個給定的空間畫布內(nèi)，品牌根據(jù)需求可選擇預(yù)制功能模塊、通過替換素材的方式來自建空間。功能模塊包含但不限于氛圍模塊、標(biāo)志模塊、單品模塊、多品模塊、視頻模塊、漫游模塊、入會模塊等*。每一項功能模塊具備給定交互、同時提供自定義功能模塊以提供品牌定制需求*。*此次馬吉拉案例中所包含模塊 *如NIKE體感互動、LEGO搭建游戲等。

#03

實際功能請前往AppStore下載「淘寶」體驗，或可通過網(wǎng)絡(luò)內(nèi)容渠道搜索「淘寶Vision」等關(guān)鍵詞查看科技博主或媒體的第一人稱視角使用評測，發(fā)現(xiàn)更多細(xì)節(jié)和未展示內(nèi)容。

以上所有體驗設(shè)計理念、原則與規(guī)范皆將見于「TAOBAO MR Design System」。同時后續(xù)會帶來專題篇（如MR交互設(shè)計流程與規(guī)范、單品表達(dá)試用專題、品牌櫥窗體驗專題等）與大家分享更多、更深入的MR體驗設(shè)計實踐經(jīng)驗和理論 ，敬請期待。

由淘寶多端創(chuàng)新設(shè)計小組 MPID（Multi-Platforms Innovation Design）設(shè)計。所演示功能與交互設(shè)計均已申請專利、已上線或正在開發(fā)中，具體以實際線上效果為準(zhǔn)。