本篇文章為大家介紹了淘寶此次設(shè)計(jì)改版的核心——信息重構(gòu)，改版意在使得淘寶能夠給消費(fèi)者帶來更舒適、更有趣的購(gòu)物過程，大膽創(chuàng)新的同時(shí)，也相對(duì)提升了用戶體驗(yàn)。

商品詳情作為我們線上購(gòu)物的決策末端節(jié)點(diǎn)，是大家再熟悉不過的老朋友。在外部短視頻化、內(nèi)容化、社區(qū)化等趨勢(shì)和內(nèi)部商業(yè)打法革新所帶來的前所未有的挑戰(zhàn)下，商品詳情一方面需要承載越來越多元化的流量，另一方面支持越來越多的營(yíng)銷玩法、權(quán)益類型、寶貝類型。

在這樣的挑戰(zhàn)下，我們?cè)谏习肽陣@信息傳達(dá)提效展開了一輪較為完整的改版，目前煥然一新的新版詳情頁已經(jīng)在不知不覺中陪伴了用戶半年多。

對(duì)這次設(shè)計(jì)改版的核心——信息重構(gòu)而言，在大家有了充分的熟悉和感知后，正是一起對(duì)改版背后的思考和推演進(jìn)行一次回顧最好的時(shí)機(jī)。

而對(duì)詳情這樣一個(gè)消費(fèi)決策末端，由海量、高復(fù)雜度信息構(gòu)成的體驗(yàn)節(jié)點(diǎn)而言，重新設(shè)計(jì)信息結(jié)構(gòu)的過程，與我們童年將無序、散落一地的積木按合理的順序搭成一座美觀的高塔的過程，有太多的異曲同工之妙，外人看似簡(jiǎn)單自然，實(shí)則內(nèi)在邏輯環(huán)環(huán)相扣。

因此本文的封面也選擇了搭積木的場(chǎng)景，希望大家?guī)е瑯拥男那?，隨本文的介紹一起感受信息從無序變得有序這一過程的美好。

一、信息傳達(dá)提效：從商業(yè)目標(biāo)出發(fā)

電商環(huán)境和用戶習(xí)慣也好，年輕人心中不斷更迭的熱點(diǎn)、風(fēng)口也好，環(huán)境的變化速度只會(huì)讓人應(yīng)接不暇。但相比繽紛熱鬧的導(dǎo)購(gòu)、引流場(chǎng)景，商品詳情的形態(tài)則要穩(wěn)定很多，它終究是一個(gè)相對(duì)冷靜規(guī)整的決策信息載體。

形態(tài)的穩(wěn)定，背后是產(chǎn)品背后商業(yè)目標(biāo)的穩(wěn)定。即使如今被賦予了更多新的期待，對(duì)商品詳情而言，亙古不變的核心商業(yè)目標(biāo)仍然是成交，即促成感興趣的用戶決定購(gòu)買；其次是分流，引導(dǎo)不感興趣的用戶繼續(xù)無縫地去瀏覽其他商品，當(dāng)然，分流的最終目的仍然是成交。

無論用戶最終轉(zhuǎn)化還是分流，必經(jīng)的路徑都是信息的接收。提升UV價(jià)值最關(guān)鍵的點(diǎn)，就是信息傳達(dá)的提效，在一個(gè)特定用戶初始購(gòu)買意愿可視為一個(gè)定值的情況下，如何在用戶的認(rèn)知負(fù)荷和耐心達(dá)到極限前，將更多有效信息傳達(dá)給用戶。

信息提效的目標(biāo)看似簡(jiǎn)單，但當(dāng)詳情需要承載的基礎(chǔ)信息、營(yíng)銷玩法、權(quán)益服務(wù)、內(nèi)容類型越來越龐大的情況下，如何做到這一點(diǎn)，則是經(jīng)過數(shù)年業(yè)務(wù)數(shù)量爆棚式發(fā)展后的當(dāng)前，大環(huán)境拋給詳情的一個(gè)問題。

二、重建商業(yè)目標(biāo)與用戶感知的正反饋

實(shí)際上，平臺(tái)或商家為用戶提供的各類營(yíng)銷玩法、權(quán)益透出、品牌背書，終極目的都是提升用戶的決策效率，促使用戶更好地決策，從而實(shí)現(xiàn)對(duì)轉(zhuǎn)化這一目標(biāo)的正反饋。

而改版前的詳情面對(duì)的現(xiàn)實(shí)問題是，這些陸續(xù)接入的信息在沒有經(jīng)過統(tǒng)籌規(guī)劃的情況下，復(fù)雜度和混亂度已經(jīng)造成了嚴(yán)重的信息過載，影響了信息呈現(xiàn)效率和可讀性。

在一些極端場(chǎng)景下，已經(jīng)明顯超出了用戶認(rèn)知負(fù)擔(dān)的極限，從而適得其反地造成了信息接收效率和決策效率的降低。

用戶體感上，這種反饋失效最直觀的感受就是一個(gè)字“亂“。如下圖所示，大促和預(yù)售是其中最為典型的例子。

最終，基于商業(yè)目標(biāo)和當(dāng)前大環(huán)境的雙重定位，很自然地推演得出了詳情本次改版的設(shè)計(jì)目標(biāo)：通過設(shè)計(jì)手段均衡業(yè)務(wù)呈現(xiàn)與用戶感知，重建業(yè)務(wù)目標(biāo)與用戶感知的正反饋。

簡(jiǎn)單說，就是如何在該承載的信息“一個(gè)都不能少”的前提下，重塑健康的用戶體驗(yàn)，信息降噪和認(rèn)知減負(fù)，信息傳達(dá)提效。

三、設(shè)計(jì)基點(diǎn)：用戶調(diào)研

瀏覽商品詳情的用戶，是在信息傳達(dá)提效的設(shè)計(jì)目標(biāo)下我們最有效的切入點(diǎn)：平臺(tái)、商家為用戶提供了龐大的信息量，而真實(shí)用戶是如何看待的？這才是我們重構(gòu)信息最原始的邏輯基點(diǎn)。

在項(xiàng)目前期，我們采取卡片測(cè)試與定性訪談相結(jié)合的方法展開了典型用戶調(diào)研。卡片測(cè)試中，我們讓用戶根據(jù)內(nèi)心認(rèn)為最合理的關(guān)注度優(yōu)先級(jí)或者決策順序，對(duì)詳情的模塊卡片進(jìn)行信息優(yōu)先級(jí)的排序，或者剔除他們完全不關(guān)注的卡片。

用戶普遍最關(guān)注度的模塊包括價(jià)格、運(yùn)費(fèi)與發(fā)貨地、月銷量和優(yōu)惠，而普遍不會(huì)過多關(guān)注標(biāo)題、服務(wù)以及部分吸引力不夠強(qiáng)的促銷活動(dòng)等信息。

當(dāng)然，“設(shè)計(jì)不要被數(shù)據(jù)騙了”，測(cè)試結(jié)果和數(shù)據(jù)都是表象。淘寶詳情這樣一個(gè)已經(jīng)在消費(fèi)者心中形成非常穩(wěn)定心智的產(chǎn)品，在用戶調(diào)研中存在的一個(gè)最明顯的難點(diǎn)，就是許多即便不合理的地方，也已經(jīng)在“日久生情”中讓用戶習(xí)慣并認(rèn)為理所應(yīng)當(dāng)。

如何揭開現(xiàn)象看本質(zhì)，這些關(guān)注度、優(yōu)先級(jí)順序背后的本質(zhì)是什么——是用戶購(gòu)買東西時(shí)的真實(shí)視角和決策的遞進(jìn)過程，這也是我們?cè)谏疃仍L談中更關(guān)心的問題。

下面結(jié)合我們?cè)谠L談中得到的輸入，結(jié)合一個(gè)線下購(gòu)物的例子來說明。

我們都有逛電器商場(chǎng)的經(jīng)歷，下面以買電視為例：

1. 首先一個(gè)電視機(jī)吸引我們目光的，可能是畫質(zhì)、外形和價(jià)格品牌這樣一些最基本、直觀的信息。
2. 如果感興趣，接下來我們會(huì)問售貨員，現(xiàn)在購(gòu)買有沒有打折或者贈(zèng)品等優(yōu)惠。
3. 如果得到了滿意的答復(fù)，在最終決定購(gòu)買前還會(huì)再問問關(guān)于送貨、保修的問題。
4. 最后，選中喜歡的顏色、型號(hào)，最終下單購(gòu)買。

而線上購(gòu)物中消費(fèi)者的心路歷程也別無二致，無論最終感興趣或不感興趣，決策都不是忽然之間就下的，而是經(jīng)過“吸引決策→刺激決策→加固決策→完成決策”這樣一個(gè)完整的流程才得以達(dá)成的，這一線索才是真正對(duì)接下來的設(shè)計(jì)具有指導(dǎo)價(jià)值的結(jié)論。

四、基于用戶視角的信息重構(gòu)

商品詳情體驗(yàn)的本質(zhì)，就是沿著“吸引決策→刺激決策→加固決策→完成決策”這樣的線索，遞進(jìn)式地引導(dǎo)用戶成交轉(zhuǎn)化的場(chǎng)景。具體到設(shè)計(jì)優(yōu)化的產(chǎn)出物上，就是一個(gè)基于前述結(jié)論，以真實(shí)用戶視覺重構(gòu)的、優(yōu)先級(jí)更加合理的信息架構(gòu)。

我們?cè)诜桨钢?，將這4個(gè)決策階段的心理與詳情在評(píng)價(jià)區(qū)以上的4大板塊建立起了對(duì)應(yīng)關(guān)系，而這樣的信息架構(gòu)也與用研結(jié)果相吻合。

與改版前的方案進(jìn)行對(duì)比，可以看到一些明顯的變化——例如服務(wù)與品牌信息解耦后，服務(wù)信息后置到了優(yōu)惠區(qū)之后，而更有價(jià)值的品牌背書則提前至標(biāo)題之前。

除了整體優(yōu)先級(jí)調(diào)整外，4個(gè)板塊內(nèi)的細(xì)分模塊也做出了一些調(diào)整。例如價(jià)格的前置，在新版中，價(jià)格前置于標(biāo)題上方后，信息次序由“一件連衣裙，賣299元”變成了“一件299元的連衣裙”，這并不是一個(gè)簡(jiǎn)單的語序調(diào)整，而是基于用戶反饋、邏輯連貫性等多個(gè)角度考量后的處理。

調(diào)研中用戶普遍反饋，在搜索、店鋪等前置鏈路點(diǎn)擊進(jìn)入詳情前，就已經(jīng)對(duì)標(biāo)題和“商品是什么”有了大概的感知和了解，進(jìn)入詳情后最關(guān)心的就是商品圖片和更完整的價(jià)格。

諸如此類的例子還有很多，這里由于篇幅所限不再一一枚舉。但在任何一處看似自然而然的改動(dòng)背后，都是對(duì)產(chǎn)品真實(shí)用戶視角的理解和考量。

五、少即是多：信息降噪與認(rèn)知減負(fù)

確定了符合用戶真實(shí)心理預(yù)期的決策主線后，在商品信息層面又該如何實(shí)現(xiàn)信息提效的目標(biāo)？

“少即是多”的理論我們已經(jīng)耳熟能詳，對(duì)詳情的信息降噪和認(rèn)知減負(fù)來說這也是一個(gè)最底層的思路——信息呈現(xiàn)的類型越少，相同認(rèn)知負(fù)擔(dān)下，能容納的信息量就更大。

在詳情信息量激增的背景下，唯有對(duì)現(xiàn)有信息進(jìn)行聚攏，對(duì)樣式進(jìn)行大幅度的收口，才能為新的營(yíng)銷玩法、權(quán)益和內(nèi)容提供更多空間。

1.?信息表單化

依據(jù)相似信息呈現(xiàn)一致原則，設(shè)計(jì)上對(duì)商品基本信息以下、評(píng)價(jià)以上區(qū)域中，大量結(jié)構(gòu)相似的信息進(jìn)行了“左Label+右內(nèi)容”的表單式統(tǒng)一處理，左側(cè)通過Label統(tǒng)一了整個(gè)列表的縮進(jìn)，對(duì)行業(yè)個(gè)性化配置的面積、配色種類和icon的使用進(jìn)行了大幅度的簡(jiǎn)化和收口，對(duì)重復(fù)和冗余的視覺元素也進(jìn)行了多處簡(jiǎn)化。

2. 評(píng)價(jià)板塊信息收攏

評(píng)價(jià)板塊也在信息區(qū)塊和交互熱區(qū)的組合方式上進(jìn)行了聚攏，大幅節(jié)省模塊高度的同時(shí)，也為更多UGC、PGC信息的擴(kuò)展提供了統(tǒng)一的結(jié)構(gòu)框架。

3. 店鋪名片的信息取舍

店鋪卡片是進(jìn)店導(dǎo)流的重要入口，此前的設(shè)計(jì)中向用戶展示了全部寶貝、關(guān)注人數(shù)、DSR評(píng)分、查看分類、進(jìn)店逛逛等大量信息和非常多的行動(dòng)點(diǎn)，這些信息和行動(dòng)點(diǎn)對(duì)用戶都是有用的，但這并不意味著全部鋪出來就是合理的，例如進(jìn)店到底想先進(jìn)哪個(gè)Tab就是一個(gè)眾口難調(diào)的典型。

新版基于用戶的訴求和價(jià)值研究，經(jīng)過慎重的取舍，只保留了“全部寶貝”和“進(jìn)店逛逛”兩個(gè)訴求最強(qiáng)的行動(dòng)點(diǎn)。

同時(shí)，信息結(jié)構(gòu)上同樣進(jìn)行了簡(jiǎn)化，為店鋪卡片在進(jìn)店導(dǎo)流外承載更多D2D（Detail-to-Detail）的導(dǎo)流提供了運(yùn)營(yíng)空間。

上述重構(gòu)最直接的影響，莫過于屏效的大大提升。下圖是改版前后，幾乎完全相同信息量的兩個(gè)商品的直觀對(duì)比。

對(duì)頂欄、底欄中間的可視區(qū)域而言，可以看到新版相比舊版大約可以節(jié)省半屏的空間，清爽和規(guī)整程度上也有了比較明顯的改觀。改版后的實(shí)際業(yè)務(wù)效果也很好地證明了我們的設(shè)想。

而這一切的“少”，是為了接下來的“多”做好準(zhǔn)備。

六、更有趣的詳情：短視頻化與內(nèi)容注入

2017-2018年無疑是短視頻的爆發(fā)之年，手淘也在這樣的趨勢(shì)下，在多個(gè)場(chǎng)景進(jìn)行著短視頻時(shí)代電商購(gòu)物新體驗(yàn)的探索，而詳情則是這一創(chuàng)新探索的前沿陣地。

詳情作為手淘流量中心，是新的體驗(yàn)觸達(dá)用戶最直接的渠道，具有有天然的規(guī)模優(yōu)勢(shì)；同時(shí)，公域?qū)з?gòu)、內(nèi)容中的視頻體驗(yàn)，最終沿著體驗(yàn)路徑還是會(huì)落到具體商品的維度，商家生產(chǎn)的短視頻最主要的投放渠道也是詳情。

作為終端節(jié)點(diǎn)，影響力和生產(chǎn)能力都決定了詳情是短視頻化探索當(dāng)仁不讓的前鋒。

1. 更適合移動(dòng)端體驗(yàn)的視頻尺寸

詳情的短視頻化體驗(yàn)探索，首要的探索對(duì)象就是打開詳情后首先映入眼簾的主圖視頻。

短視頻時(shí)代到來之前，視頻只是主圖的一種錦上添花的展示形式，視頻也只是單純地沿用了主圖的展示方式，作為一個(gè)“可以播放的主圖”占用了其中一個(gè)坑位。而如何基于移動(dòng)端的視頻體驗(yàn)，對(duì)視頻尺寸做出新的能力支持或約束，如何讓用戶更有意愿、更有效率地觀看視頻，就是擺在詳情短視頻化面前的挑戰(zhàn)。

原有的主圖視頻，容器尺寸與主圖一致，都是1:1，而視頻自身的尺寸多數(shù)是16:9、4:3等橫向尺寸，播放時(shí)會(huì)在上方和下方留有黑邊，體驗(yàn)并不理想。

早期主圖視頻以16:9這類橫向視頻為主的原因很簡(jiǎn)單，因?yàn)檫@些視頻多數(shù)由大量的PC端視頻直接遷移而來。追根溯源，這樣的習(xí)慣最早來自于電影熒幕，媒體尺寸是隨著相應(yīng)的播放媒介應(yīng)運(yùn)而生的，無論電影、電視還是PC，這些播放媒介自身的尺寸都是橫向的。

在移動(dòng)時(shí)代，16:9的短視頻體驗(yàn)并不友好，豎持狀態(tài)下看不清，而橫持的操作和心理成本都比較高。不同于觀看劇集，短視頻的長(zhǎng)度決定了橫持的轉(zhuǎn)向操作異常頻繁，且很多時(shí)候看到一個(gè)人橫持手機(jī)，會(huì)與“沒干正經(jīng)事”劃等號(hào)。

沿著媒介決定媒體的思路，很容易想到，符合移動(dòng)時(shí)代體驗(yàn)的短視頻理應(yīng)是豎向的。在2:3、3:4、9:16等多個(gè)豎向尺寸中，我們考慮了商品價(jià)格標(biāo)題和底Bar正常透出所需的最小高度，最終選擇了3:4作為短視頻時(shí)代的淘寶主推的商品視頻尺寸。

上線后的實(shí)際效果也證明了，3:4新尺寸為豎屏視頻瀏覽體驗(yàn)帶來了立竿見影的質(zhì)變，其中，服飾美妝類目以模特出鏡為主的視頻效果提升尤為出眾。

2. 視頻結(jié)構(gòu)化標(biāo)簽：消費(fèi)者更愛看的視頻

在容器尺寸升級(jí)的同時(shí)，視頻自身的質(zhì)量和吸引力更是短視頻化推進(jìn)的關(guān)鍵。以服飾和數(shù)碼兩大類目為例，服飾商品的視頻中，用戶更希望展示材質(zhì)細(xì)節(jié)、穿法細(xì)節(jié)，而不是無聊的“動(dòng)起來的模特圖”，數(shù)碼3C產(chǎn)品的視頻中，則更希望看到具有實(shí)際意義的拆箱實(shí)拍和測(cè)評(píng)視頻，而不是廣告性質(zhì)的賣點(diǎn)鋪陳。

這一方面自然需要運(yùn)營(yíng)層面需要給商家足夠的宣導(dǎo)，另一方面，如何外化這些消費(fèi)者可能感興趣的點(diǎn)，避免用戶看到一個(gè)孤零零的播放按鈕，只知道這是視頻而并不知道其中有什么他感興趣的內(nèi)容，同時(shí)允許他們?cè)跈z索成本較高的視頻中快速找到自己感興趣的段落，則是設(shè)計(jì)上需要考量的問題。

在最終的方案中，我們通過結(jié)構(gòu)化標(biāo)簽同時(shí)解決了內(nèi)容外化和檢索能力兩大問題。

結(jié)構(gòu)化標(biāo)簽是代表當(dāng)前片段主要內(nèi)容的關(guān)鍵詞，一個(gè)視頻可以選擇2-3個(gè)標(biāo)簽，直接外透在封面狀態(tài)，讓用戶在點(diǎn)擊播放視頻之前就了解到自己將會(huì)看到哪些內(nèi)容，而針對(duì)其中自己感興趣的片段，用戶可以選擇橫滑直接跳過不感興趣的部分，直達(dá)指定的進(jìn)度。

結(jié)構(gòu)化標(biāo)簽更深遠(yuǎn)的設(shè)計(jì)價(jià)值，在于通過真實(shí)數(shù)據(jù)的沉淀告訴我們，在特定的行業(yè)類目中，用戶更偏好哪些標(biāo)簽，這為商家生產(chǎn)消費(fèi)者更關(guān)注的短視頻提供了最具價(jià)值的引導(dǎo)。

3. 視頻版詳情：短視頻購(gòu)物體驗(yàn)的探索

可以看到，針對(duì)主圖視頻的改造我們非常地克制，因?yàn)槭灼林鲌D區(qū)域的任何改動(dòng)會(huì)影響到全淘每個(gè)商品最基本的體驗(yàn)。這其中需要避免帶給用戶過大的習(xí)慣遷移成本，也需要考慮與無視頻商品的兼容。

而做到這步，僅僅是短視頻化探索的“守陣”部分，而要想進(jìn)行更大膽的探索，需要一個(gè)不影響現(xiàn)有任何體驗(yàn)的創(chuàng)新空間，這就是視頻版詳情出現(xiàn)的契機(jī)。

我們將原先主圖視頻功能單一的全屏播放模式改造成了視頻版詳情，為愿意通過視頻了解商品的用戶，提供了一個(gè)更純粹的、以視頻為主的購(gòu)物場(chǎng)景。

視頻版詳情中，以當(dāng)前商品為基點(diǎn)，串起了所有當(dāng)前商品詳情內(nèi)的視頻——主圖視頻、評(píng)價(jià)部分的UGC和PGC視頻、圖文詳情部分的說明性視頻等，形成了一個(gè)基于短視頻、從多維度描述商品的視頻流，讓用戶在這里能一次性看完所有與這件商品相關(guān)的視頻。這也將成為手淘詳情的短視頻化探索最具擴(kuò)展性的試驗(yàn)田。

4. 更多新鮮內(nèi)容的注入

短視頻化的探索之外，內(nèi)容社區(qū)感的提升也是詳情探索的一個(gè)新的方向。規(guī)整清晰地展示商家和平臺(tái)希望傳達(dá)給消費(fèi)者的信息，在未來只是詳情最基礎(chǔ)的任務(wù)。

在此之上，如何讓用戶在詳情“逛”起來，看到更多來自真實(shí)消費(fèi)者中立的、有價(jià)值的圖文或者視頻反饋，更多來自領(lǐng)域內(nèi)達(dá)人的專業(yè)評(píng)測(cè)，和短視頻化一樣，都將是詳情變得更有趣的旅程上不可或缺的拼圖。

新版詳情中，逐步引入了主打圖片和視頻評(píng)價(jià)集合的UGC“買家相冊(cè)”模塊，以及主打達(dá)人專業(yè)測(cè)評(píng)的“大咖點(diǎn)評(píng)”模塊，這是詳情接入更多豐富而有趣內(nèi)容的起點(diǎn)。

而這些內(nèi)容能以很自然的形態(tài)接入詳情，在不影響信息傳達(dá)效率的前提下，助力消費(fèi)者更好地從更多維度了解商品，前文中所提到的對(duì)評(píng)價(jià)板塊的信息聚攏和結(jié)構(gòu)規(guī)范的定義，是不可忽視的基石。

結(jié)語

無論未來的任何版本，也無論下一個(gè)轉(zhuǎn)角會(huì)有怎樣未知的新趨勢(shì)，“萬能的淘寶”的口碑之下，對(duì)商品詳情的要求亦是“萬能的詳情”。

如何在更具包容性和擴(kuò)展性的同時(shí)，保障用戶體驗(yàn)層面的克制和一致，同時(shí)從互動(dòng)、商品力表達(dá)的精細(xì)化設(shè)計(jì)等角度大膽創(chuàng)新，作為電商體驗(yàn)的引領(lǐng)者帶給消費(fèi)者更舒適、更有趣的購(gòu)物過程，請(qǐng)拭目以待！

注：本文配圖均僅為設(shè)計(jì)示意稿，部分素材取自線上商品，但不代表當(dāng)前線上商品真實(shí)信息。

作者：思塬，公眾號(hào)：三分設(shè)

來源：https://mp.weixin.qq.com/s/-VzalJ50Se4UmBgE0dfXsw

本文由 @三分設(shè) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載