起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識淘寶商品詳情信息重構：“搭積木”背后的設計思考
本篇文章為大家介紹了淘寶此次設計改版的核心——信息重構，改版意在使得淘寶能夠給消費者帶來更舒適、更有趣的購物過程，大膽創新的同時，也相對提升了用戶體驗。
商品詳情作為我們線上購物的決策末端節點，是大家再熟悉不過的老朋友。在外部短視頻化、內容化、社區化等趨勢和內部商業打法革新所帶來的前所未有的挑戰下，商品詳情一方面需要承載越來越多元化的流量，另一方面支持越來越多的營銷玩法、權益類型、寶貝類型。
在這樣的挑戰下，我們在上半年圍繞信息傳達提效展開了一輪較為完整的改版，目前煥然一新的新版詳情頁已經在不知不覺中陪伴了用戶半年多。
對這次設計改版的核心——信息重構而言，在大家有了充分的熟悉和感知后，正是一起對改版背后的思考和推演進行一次回顧最好的時機。
而對詳情這樣一個消費決策末端，由海量、高復雜度信息構成的體驗節點而言，重新設計信息結構的過程，與我們童年將無序、散落一地的積木按合理的順序搭成一座美觀的高塔的過程，有太多的異曲同工之妙，外人看似簡單自然，實則內在邏輯環環相扣。
因此本文的封面也選擇了搭積木的場景，希望大家帶著同樣的心情，隨本文的介紹一起感受信息從無序變得有序這一過程的美好。
一、信息傳達提效：從商業目標出發
電商環境和用戶習慣也好，年輕人心中不斷更迭的熱點、風口也好，環境的變化速度只會讓人應接不暇。但相比繽紛熱鬧的導購、引流場景，商品詳情的形態則要穩定很多，它終究是一個相對冷靜規整的決策信息載體。
形態的穩定，背后是產品背后商業目標的穩定。即使如今被賦予了更多新的期待，對商品詳情而言，亙古不變的核心商業目標仍然是成交，即促成感興趣的用戶決定購買；其次是分流，引導不感興趣的用戶繼續無縫地去瀏覽其他商品，當然，分流的最終目的仍然是成交。
無論用戶最終轉化還是分流，必經的路徑都是信息的接收。提升UV價值最關鍵的點，就是信息傳達的提效，在一個特定用戶初始購買意愿可視為一個定值的情況下，如何在用戶的認知負荷和耐心達到極限前，將更多有效信息傳達給用戶。
信息提效的目標看似簡單，但當詳情需要承載的基礎信息、營銷玩法、權益服務、內容類型越來越龐大的情況下，如何做到這一點，則是經過數年業務數量爆棚式發展后的當前，大環境拋給詳情的一個問題。
二、重建商業目標與用戶感知的正反饋
實際上，平臺或商家為用戶提供的各類營銷玩法、權益透出、品牌背書，終極目的都是提升用戶的決策效率，促使用戶更好地決策，從而實現對轉化這一目標的正反饋。
而改版前的詳情面對的現實問題是，這些陸續接入的信息在沒有經過統籌規劃的情況下，復雜度和混亂度已經造成了嚴重的信息過載，影響了信息呈現效率和可讀性。
在一些極端場景下，已經明顯超出了用戶認知負擔的極限，從而適得其反地造成了信息接收效率和決策效率的降低。
用戶體感上，這種反饋失效最直觀的感受就是一個字“亂“。如下圖所示，大促和預售是其中最為典型的例子。
最終，基于商業目標和當前大環境的雙重定位，很自然地推演得出了詳情本次改版的設計目標：通過設計手段均衡業務呈現與用戶感知，重建業務目標與用戶感知的正反饋。
簡單說，就是如何在該承載的信息“一個都不能少”的前提下，重塑健康的用戶體驗，信息降噪和認知減負，信息傳達提效。
三、設計基點：用戶調研
瀏覽商品詳情的用戶，是在信息傳達提效的設計目標下我們最有效的切入點：平臺、商家為用戶提供了龐大的信息量，而真實用戶是如何看待的？這才是我們重構信息最原始的邏輯基點。
在項目前期，我們采取卡片測試與定性訪談相結合的方法展開了典型用戶調研?？ㄆ瑴y試中，我們讓用戶根據內心認為最合理的關注度優先級或者決策順序，對詳情的模塊卡片進行信息優先級的排序，或者剔除他們完全不關注的卡片。
用戶普遍最關注度的模塊包括價格、運費與發貨地、月銷量和優惠，而普遍不會過多關注標題、服務以及部分吸引力不夠強的促銷活動等信息。
當然，“設計不要被數據騙了”，測試結果和數據都是表象。淘寶詳情這樣一個已經在消費者心中形成非常穩定心智的產品，在用戶調研中存在的一個最明顯的難點，就是許多即便不合理的地方，也已經在“日久生情”中讓用戶習慣并認為理所應當。
如何揭開現象看本質，這些關注度、優先級順序背后的本質是什么——是用戶購買東西時的真實視角和決策的遞進過程，這也是我們在深度訪談中更關心的問題。
下面結合我們在訪談中得到的輸入，結合一個線下購物的例子來說明。
我們都有逛電器商場的經歷，下面以買電視為例：
- 首先一個電視機吸引我們目光的，可能是畫質、外形和價格品牌這樣一些最基本、直觀的信息。
- 如果感興趣，接下來我們會問售貨員，現在購買有沒有打折或者贈品等優惠。
- 如果得到了滿意的答復，在最終決定購買前還會再問問關于送貨、保修的問題。
- 最后，選中喜歡的顏色、型號，最終下單購買。
而線上購物中消費者的心路歷程也別無二致，無論最終感興趣或不感興趣，決策都不是忽然之間就下的，而是經過“吸引決策→刺激決策→加固決策→完成決策”這樣一個完整的流程才得以達成的，這一線索才是真正對接下來的設計具有指導價值的結論。
四、基于用戶視角的信息重構
商品詳情體驗的本質，就是沿著“吸引決策→刺激決策→加固決策→完成決策”這樣的線索，遞進式地引導用戶成交轉化的場景。具體到設計優化的產出物上，就是一個基于前述結論，以真實用戶視覺重構的、優先級更加合理的信息架構。
我們在方案中，將這4個決策階段的心理與詳情在評價區以上的4大板塊建立起了對應關系，而這樣的信息架構也與用研結果相吻合。
與改版前的方案進行對比，可以看到一些明顯的變化——例如服務與品牌信息解耦后，服務信息后置到了優惠區之后，而更有價值的品牌背書則提前至標題之前。
除了整體優先級調整外，4個板塊內的細分模塊也做出了一些調整。例如價格的前置，在新版中，價格前置于標題上方后，信息次序由“一件連衣裙，賣299元”變成了“一件299元的連衣裙”，這并不是一個簡單的語序調整，而是基于用戶反饋、邏輯連貫性等多個角度考量后的處理。
調研中用戶普遍反饋，在搜索、店鋪等前置鏈路點擊進入詳情前，就已經對標題和“商品是什么”有了大概的感知和了解，進入詳情后最關心的就是商品圖片和更完整的價格。
諸如此類的例子還有很多，這里由于篇幅所限不再一一枚舉。但在任何一處看似自然而然的改動背后，都是對產品真實用戶視角的理解和考量。
五、少即是多：信息降噪與認知減負
確定了符合用戶真實心理預期的決策主線后，在商品信息層面又該如何實現信息提效的目標？
“少即是多”的理論我們已經耳熟能詳，對詳情的信息降噪和認知減負來說這也是一個最底層的思路——信息呈現的類型越少，相同認知負擔下，能容納的信息量就更大。
在詳情信息量激增的背景下，唯有對現有信息進行聚攏，對樣式進行大幅度的收口，才能為新的營銷玩法、權益和內容提供更多空間。
1.?信息表單化
依據相似信息呈現一致原則，設計上對商品基本信息以下、評價以上區域中，大量結構相似的信息進行了“左Label+右內容”的表單式統一處理，左側通過Label統一了整個列表的縮進，對行業個性化配置的面積、配色種類和icon的使用進行了大幅度的簡化和收口，對重復和冗余的視覺元素也進行了多處簡化。
2. 評價板塊信息收攏
評價板塊也在信息區塊和交互熱區的組合方式上進行了聚攏，大幅節省模塊高度的同時，也為更多UGC、PGC信息的擴展提供了統一的結構框架。
3. 店鋪名片的信息取舍
店鋪卡片是進店導流的重要入口，此前的設計中向用戶展示了全部寶貝、關注人數、DSR評分、查看分類、進店逛逛等大量信息和非常多的行動點，這些信息和行動點對用戶都是有用的，但這并不意味著全部鋪出來就是合理的，例如進店到底想先進哪個Tab就是一個眾口難調的典型。
新版基于用戶的訴求和價值研究，經過慎重的取舍，只保留了“全部寶貝”和“進店逛逛”兩個訴求最強的行動點。
同時，信息結構上同樣進行了簡化，為店鋪卡片在進店導流外承載更多D2D（Detail-to-Detail）的導流提供了運營空間。
上述重構最直接的影響，莫過于屏效的大大提升。下圖是改版前后，幾乎完全相同信息量的兩個商品的直觀對比。
對頂欄、底欄中間的可視區域而言，可以看到新版相比舊版大約可以節省半屏的空間，清爽和規整程度上也有了比較明顯的改觀。改版后的實際業務效果也很好地證明了我們的設想。
而這一切的“少”，是為了接下來的“多”做好準備。
六、更有趣的詳情：短視頻化與內容注入
2017-2018年無疑是短視頻的爆發之年，手淘也在這樣的趨勢下，在多個場景進行著短視頻時代電商購物新體驗的探索，而詳情則是這一創新探索的前沿陣地。
詳情作為手淘流量中心，是新的體驗觸達用戶最直接的渠道，具有有天然的規模優勢；同時，公域導購、內容中的視頻體驗，最終沿著體驗路徑還是會落到具體商品的維度，商家生產的短視頻最主要的投放渠道也是詳情。
作為終端節點，影響力和生產能力都決定了詳情是短視頻化探索當仁不讓的前鋒。
1. 更適合移動端體驗的視頻尺寸
詳情的短視頻化體驗探索，首要的探索對象就是打開詳情后首先映入眼簾的主圖視頻。
短視頻時代到來之前，視頻只是主圖的一種錦上添花的展示形式，視頻也只是單純地沿用了主圖的展示方式，作為一個“可以播放的主圖”占用了其中一個坑位。而如何基于移動端的視頻體驗，對視頻尺寸做出新的能力支持或約束，如何讓用戶更有意愿、更有效率地觀看視頻，就是擺在詳情短視頻化面前的挑戰。
原有的主圖視頻，容器尺寸與主圖一致，都是1:1，而視頻自身的尺寸多數是16:9、4:3等橫向尺寸，播放時會在上方和下方留有黑邊，體驗并不理想。
早期主圖視頻以16:9這類橫向視頻為主的原因很簡單，因為這些視頻多數由大量的PC端視頻直接遷移而來。追根溯源，這樣的習慣最早來自于電影熒幕，媒體尺寸是隨著相應的播放媒介應運而生的，無論電影、電視還是PC，這些播放媒介自身的尺寸都是橫向的。
在移動時代，16:9的短視頻體驗并不友好，豎持狀態下看不清，而橫持的操作和心理成本都比較高。不同于觀看劇集，短視頻的長度決定了橫持的轉向操作異常頻繁，且很多時候看到一個人橫持手機，會與“沒干正經事”劃等號。
沿著媒介決定媒體的思路，很容易想到，符合移動時代體驗的短視頻理應是豎向的。在2:3、3:4、9:16等多個豎向尺寸中，我們考慮了商品價格標題和底Bar正常透出所需的最小高度，最終選擇了3:4作為短視頻時代的淘寶主推的商品視頻尺寸。
上線后的實際效果也證明了，3:4新尺寸為豎屏視頻瀏覽體驗帶來了立竿見影的質變，其中，服飾美妝類目以模特出鏡為主的視頻效果提升尤為出眾。
2. 視頻結構化標簽：消費者更愛看的視頻
在容器尺寸升級的同時，視頻自身的質量和吸引力更是短視頻化推進的關鍵。以服飾和數碼兩大類目為例，服飾商品的視頻中，用戶更希望展示材質細節、穿法細節，而不是無聊的“動起來的模特圖”，數碼3C產品的視頻中，則更希望看到具有實際意義的拆箱實拍和測評視頻，而不是廣告性質的賣點鋪陳。
這一方面自然需要運營層面需要給商家足夠的宣導，另一方面，如何外化這些消費者可能感興趣的點，避免用戶看到一個孤零零的播放按鈕，只知道這是視頻而并不知道其中有什么他感興趣的內容，同時允許他們在檢索成本較高的視頻中快速找到自己感興趣的段落，則是設計上需要考量的問題。
在最終的方案中，我們通過結構化標簽同時解決了內容外化和檢索能力兩大問題。
結構化標簽是代表當前片段主要內容的關鍵詞，一個視頻可以選擇2-3個標簽，直接外透在封面狀態，讓用戶在點擊播放視頻之前就了解到自己將會看到哪些內容，而針對其中自己感興趣的片段，用戶可以選擇橫滑直接跳過不感興趣的部分，直達指定的進度。
結構化標簽更深遠的設計價值，在于通過真實數據的沉淀告訴我們，在特定的行業類目中，用戶更偏好哪些標簽，這為商家生產消費者更關注的短視頻提供了最具價值的引導。
3. 視頻版詳情：短視頻購物體驗的探索
可以看到，針對主圖視頻的改造我們非常地克制，因為首屏主圖區域的任何改動會影響到全淘每個商品最基本的體驗。這其中需要避免帶給用戶過大的習慣遷移成本，也需要考慮與無視頻商品的兼容。
而做到這步，僅僅是短視頻化探索的“守陣”部分，而要想進行更大膽的探索，需要一個不影響現有任何體驗的創新空間，這就是視頻版詳情出現的契機。
我們將原先主圖視頻功能單一的全屏播放模式改造成了視頻版詳情，為愿意通過視頻了解商品的用戶，提供了一個更純粹的、以視頻為主的購物場景。
視頻版詳情中，以當前商品為基點，串起了所有當前商品詳情內的視頻——主圖視頻、評價部分的UGC和PGC視頻、圖文詳情部分的說明性視頻等，形成了一個基于短視頻、從多維度描述商品的視頻流，讓用戶在這里能一次性看完所有與這件商品相關的視頻。這也將成為手淘詳情的短視頻化探索最具擴展性的試驗田。
4. 更多新鮮內容的注入
短視頻化的探索之外，內容社區感的提升也是詳情探索的一個新的方向。規整清晰地展示商家和平臺希望傳達給消費者的信息，在未來只是詳情最基礎的任務。
在此之上，如何讓用戶在詳情“逛”起來，看到更多來自真實消費者中立的、有價值的圖文或者視頻反饋，更多來自領域內達人的專業評測，和短視頻化一樣，都將是詳情變得更有趣的旅程上不可或缺的拼圖。
新版詳情中，逐步引入了主打圖片和視頻評價集合的UGC“買家相冊”模塊，以及主打達人專業測評的“大咖點評”模塊，這是詳情接入更多豐富而有趣內容的起點。
而這些內容能以很自然的形態接入詳情，在不影響信息傳達效率的前提下，助力消費者更好地從更多維度了解商品，前文中所提到的對評價板塊的信息聚攏和結構規范的定義，是不可忽視的基石。
結語
無論未來的任何版本，也無論下一個轉角會有怎樣未知的新趨勢，“萬能的淘寶”的口碑之下，對商品詳情的要求亦是“萬能的詳情”。
如何在更具包容性和擴展性的同時，保障用戶體驗層面的克制和一致，同時從互動、商品力表達的精細化設計等角度大膽創新，作為電商體驗的引領者帶給消費者更舒適、更有趣的購物過程，請拭目以待！
注：本文配圖均僅為設計示意稿，部分素材取自線上商品，但不代表當前線上商品真實信息。
作者：思塬，公眾號：三分設
來源：https://mp.weixin.qq.com/s/-VzalJ50Se4UmBgE0dfXsw
本文由 @三分設 授權發布于人人都是產品經理，未經作者許可，禁止轉載
截止目前看的最好的商品詳情分析，學習了，感謝分享
很棒！ ?