淘寶Vision Pro版本完整體驗(yàn)指南

#01

前言

#02

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

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

▲ 登錄

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

▲ 首頁

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

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

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

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

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

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

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

▲ 選購支付

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

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

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

▲ 拖圖搜索

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

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

▲ 語音搜索

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

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

▲ 多商品同屏對比

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

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

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

▲ 多商品3D對比

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

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

▲ 空間視頻

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

2.12 單品超級試用 Product Super Trial

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

▲ Logo秀

▲ 懸停持握

▲ 空間避障

▲ 小米SU7預(yù)告

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

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

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

▲ 馬吉拉空間櫥窗

▲ 合作品牌

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

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

#03

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

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

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