淘寶2017商品詳情改版設計

　　1）商業(yè)目標與產品面貌

　　打開一個電商應用的首頁，我們隨處可見復雜的界面布局，眼花繚亂的商品圖和各式各樣的廣告文案，他們無時無刻爭先恐后的想要抓住你的眼球。而當你打開一個聊天應用的首頁，你看到的只有一個簡單的聊天列表，他們只是靜靜地等待你作出選擇。這種狀況將在淘寶2017中得到改善，更有更多新功能的出現(xiàn)。

　　從根本上來說，決定你在一個產品中看到什么取決于產品策略上希望你看到什么，也就是我們通常所說的商業(yè)目的。對于電商類產品，把東西賣出去，是千古不變的真理，所以在界面上運用豐富的內容，商品圖和各種優(yōu)惠來引起你的注意。從產品原始目的差異出發(fā)，便會有完全不同的產品面貌。這也是為么，作為產品設計師我們有必要聊聊從商業(yè)目標出發(fā)的設計。

　　作為手淘的產品設計師，我們從老本行電商產品聊起，在把東西買出去這個大的原則下，細分的產品中又會承載不同場景的目的。比如說購物車是一個效率型產品，存在的目的是為了讓用戶更便捷的批量購物。而商品詳情則寄托了非常強的轉化目的，所做的一切都是要讓你在這里下單購買。設計這些承載了不同商業(yè)目的的產品時，會需要不同的設計思路。在本次2017商品詳情的改版升級中我們嘗試從產品的本質出發(fā)—從商業(yè)目標維度去挖掘設計改進方向。

　　商品詳情作為手淘流量最大的產品之一，在整個電商產品體系中起到非常重要的作用。從細分的場景目的上來講，主要有兩方面考量：一是承載用戶最終的購買轉化。二是當用戶轉化不了的時候將流量引導分配給其他相似商品，也就是分流。拋開細分場景，從大的閉環(huán)來講，分流也是為了用戶最終找到感興趣的商品而促成轉化。

　　有了大的商業(yè)目標，我們再來看看手淘詳情目前版本在體驗上與商業(yè)目標的契合度如何。首先我們對商品詳情的整體數(shù)據(jù)進行一次分析。

　　從數(shù)據(jù)上來看，用戶在商品詳情中點擊數(shù)據(jù)排名如上圖所示，其中我們可以看到紅色的三塊屬于商品自身內容型元素，灰色的部分屬于平臺基礎功能型元素。而商品內容的頭圖，圖文詳情，評價恰恰又在點擊率上要高出其他元素非常多，這說明用戶在商品詳情中對商品自身內容，頭圖，圖文詳情，評價的關注度最高。那么這三者對轉化率的影響怎么樣呢?帶著這個疑問，我們拿到了另一組對比數(shù)據(jù)。

　　抽取一批已成交的用戶去看他們對這三塊內容的瀏覽行為。數(shù)據(jù)結果如上圖所示，在抽樣的已成交的用戶中，看過基礎信息+詳情+評價的用戶占比最高，且單獨看過詳情或評價的用戶會比只看基礎信息的用戶多很多，由此我們可以得出結論—基礎信息詳情和評價會直接影響用戶的購買決策!

　　1）問題聚焦

　　發(fā)現(xiàn)了內容與商業(yè)目標的關聯(lián)，我們再回到商品詳情的界面本身，看看用戶在瀏覽這三大內容時會遇到什么問題。拋開首屏無需操作就能直觀查看的基礎信息我們將圖文詳情與評價的入口一一羅列，并思考其中的問題所在。

　　※圖文詳情入口一

　　頭圖右滑至最后一張圖片，滑動釋放進入圖文詳情。

　　※優(yōu)點分析

　　詳情頭圖從數(shù)據(jù)上可看出具有很強的吸引力，用戶滑動大圖也帶動了這個入口進入圖文詳情的數(shù)據(jù)，此入口數(shù)據(jù)狀況良好且建立了一定的操作心智。

　　※缺點分析

　　入口隱藏過深不能直接命中想要看圖文詳情的用戶，操作效率不高。

　　※圖文詳情入口二

　　滑動頁面地2-3屏位置繼續(xù)拖動釋放進入圖文詳情。

　　※優(yōu)點分析

　　操作上屬于一個常規(guī)瀏覽方式，內容瀏覽順序符合邏輯規(guī)律。

　　※缺點分析

　　上方業(yè)務接入過多，模塊展現(xiàn)雜亂，對于重要程度較高的內容入口需要三屏才能觸達，操作效率不高。

　　※評價入口

　　頁面地2屏位置卡片

　　※優(yōu)點分析

　　卡片面積大，且透出了評價內容，點擊效果不錯

　　※缺點分析

　　內容透出過少，評價作為商品最有參考價值的內容往往給消費者的購買決策起很大的影響，用戶在瀏覽頁面的時候有隨時查看的需求。且用戶在查看圖文詳情時想要快速查看評價需要不斷往上滑動頁面。

　　綜合上面羅列的線上版本優(yōu)劣，我們可以看出目前線上版本三大內容之間存在的問題，如上圖所示，用戶在瀏覽基礎信息，評價，圖文詳情的瀏覽效率較低。且基礎信息，圖文詳情，評價對用戶的購買決策有強影響，也是用戶最關注的內容，提升這三塊內容之間的使用效率能夠對商業(yè)目標轉化率產生積極的作用。

　　※ 設計目標

　　結合以上分析，我們得到了這次的改版的設計方向--提升用戶在基礎信息，圖文詳情，評價三者之間的使用效率。

　　2）設計方案

　　好了，既然有了目標，那么事情就不再盲目，我們將本次商品詳情的改版定義在結構升級上，從體驗路徑角度去改造詳情框架，提升用戶對基礎信息，評價，圖文詳情的使用效率。

　　A、內容聚焦

　　首先，我們按照用戶關注度排序將基礎信息，圖文詳情，評價，入口聚合，整合到導航欄中，并在導航的最末端給出推薦的入口，讓那些對當前商品并不滿意的用戶能有更便捷的引導方式分流到其他商品去，從而將流量流轉起來。導航欄在滑動過頭圖后出現(xiàn)，給用戶高效定位想要內容的便捷方式。頭圖用戶關注度非常高，也整合到全局導航中給出縮略圖展示，不管瀏覽到哪一屏都可以高效進入頭圖查看。

　　B、內容扁平化

　　既然是結構升級，那么什么樣的結構是效率最高的?解決效率問題，最關鍵的是縮短體驗路徑，在有了導航能夠快速查看內容的前提下，我們又將原先大部分的需跳轉頁面內容直接平鋪在詳情首頁，讓瀏覽路徑能夠以一條直線進行到底。這個時候，導航的功能就不再是常規(guī)的tab形式，而是更高效的頁面定位形式。

　　當然，現(xiàn)實的方案推進中總會產生新的問題，在最初的設計方案中，我們堅持這個扁平的初衷將評價的內容也直接平鋪在詳情首頁，但一個爆款商品多則上萬的評價內容讓我們不得不放棄了這個念頭。

　　做完上面兩個改進，在整個商品詳情的結構上有了比較清晰的內容構成。體驗效率已經得到解決。那么還有什么是我們可以做的更好的?

　　C、更多擴展可能性

　　通常情況下用戶在購買不同類目的商品時，所需要的決策參考內容是不一樣的。比如說你去買一件衣服，或許你更看重穿上的效果和質量，這個時候你會需要看圖文詳情和最好有買家秀或者評價的內容。你在買一臺電腦時或許會更關注電腦的性能，這個時候你更需要詳細的配置參數(shù)和評測的內容。

　　基于這個差異，我們可以提供在導航上進行內容的擴展的可能性，比如對于服裝商品我們可以額外穿透買家秀的內容，給用戶更多中立的參考。對于電子產品也可以穿透評測內容。

　　我們從設計上對導航的擴展位進行了定義，作為定制補充內容，我們將它的位置排在推薦前，詳情后，不管擴展出來的是轉化型內容還是分流型內容，都能有比較符合邏輯的定位，同時也不干擾基礎信息，評價圖文詳情三塊主體內容。

　　回到主題本身，我們從商業(yè)的目標著手，對產品進行數(shù)據(jù)分析與佐證，并最終推導出設計目標。

　　正反饋

　　在上線前期，我們抽取一定體量的用戶進行了灰度測試，從一周的數(shù)據(jù)來看，圖文詳情，推薦，評價的點擊率均有不錯的提升，其中圖文詳情打開率更是翻倍增長。強化推薦后用戶的體驗鏈路上有了更符合行為邏輯的分流陣地，這也帶來了一個新的可以思考的點——推薦作為商家私域屬性流量，如何幫助商家更高效的玩轉起來?這個課題將成為我們接下去工作的重點。

　　當然，產品設計僅僅是商業(yè)世界中的一小部分，很多時候設計的優(yōu)化甚至不能帶來明確的反饋。對于成交轉化率來講，商品自身的影響因素或許更加重要。但把思考的格局放大，從最本質的目的著手，運用設計的手段引導和改善用戶的體驗，一定會對商業(yè)目標產生正向的作用。

　　隨著互聯(lián)網互動方式的發(fā)展，直播，互動游戲越來越多的出現(xiàn)在各類app中。對于商品的展示，我們同樣可以提供多元化的呈現(xiàn)形式來引起用戶的注意，同時豐富商家的運營手段。商品詳情在過去的2016年有了越來越豐富的商品呈現(xiàn)形式，這些呈現(xiàn)形式也對我們的商業(yè)目標產生著積極的影響。

　　全景圖普通商家使用方式

　　全景圖作為一種全新的呈現(xiàn)形式最終的展現(xiàn)效果很大程度上取決于商家的創(chuàng)意。上圖中模特的搖擺方式是較為普通的呈現(xiàn)形式。下圖中的商家則將圖片左右搖擺的手勢與產品創(chuàng)意結合，更好的通過全景圖的能力展現(xiàn)自己的商品，成為全景圖項目中的一個經典案例。對于不同的商家創(chuàng)意，商品的呈現(xiàn)也會多種多樣。

　　全景圖經典呈現(xiàn)案例

　　ar試妝

（文章資訊來自淘寶用戶體驗）