淘寶改版
近期淘寶有了較大的改版，本次在分析淘寶改版的基礎上，通過幾個關鍵頁面的分析對比淘寶、京東、蘇寧易購三大綜合類電商平臺的產品設計，希望此篇文章能讓大家對電商類 App 的產品設計有更深的認識。前陣子淘寶進行了改版，這次改版循序漸進，並做了較多的A/B測試。
1.主要改版頁面
上圖是淘寶幾個主要改版頁面。從視覺上看，很明顯的大圓角卡片、去線條，整體風格統一輕質化。卡片使信息更加聚焦，模塊感更強；圓角卡片本身也比原先的卡片式增加了更多細節；大圓角卡片親和力高，更加活潑，也符合淘寶人群的定位。
上圖為5個tab的頁面，這次統一了頭部的顏色，強調了品牌，統一性方面也得到了提升。
以下是從單個頁面的角度進行改版分析。
2.個人首頁
（舊版圖為除夕的截圖，顏色方面先不討論哈）
新版的卡片式很突出，去掉了大部分的線條，轉而用塊面來代替線條表達層級關係。
88會員和最新物流這兩塊內容滾動呈現，真正是動效解決問題，從時間軸來解決信息量大而空間侷限的問題，同時動態效果增加了用戶吸引度。
在測試版中，這個頁面主要看到兩個點的變化，一個是 icon 改為原來的填充式，一個是動效滾動的節奏。
動效滾動是上面說的88會員和最新物流，7.7.2版本里兩個滾動是同時進行的，而7.7.8的測試版中兩個滾動是錯開的。上下同時滾動會讓人有些混亂，會讓人認為這兩塊的信息是相互關聯的。
3.店鋪首頁
這一塊做的 A/B 測試。店鋪頁面的改動較大，導航做了較大調整。新版將常用操作和重要功能放到了底部固定；二級導航中的內容讓商家自定義選擇，從而滿足不同店鋪的需求；新版一級二級導航較舊版層級關係明確了許多。
4.物流詳情
這一塊可以說是樣式上的大改。用可視化來表現包裹正處的位置以及即將進行的操作，增強用戶感知（降低理解難度），進一步提升對商品信息的把控感。
物流詳情頁除了樣式的巨大變化，還有一個特點就是場景化細分，不同的場景做出了差異化。例如僅僅是物流詳情頁，根據不同的場景：發貨未攬件-已攬件未配送-快遞員配送中-到達菜鳥驛站/其他快遞點-已簽收等，頁面突出的信息均有所區別。已攬件時突出快遞信息，配送時突出配送員信息等。
5.動效
這兩張圖都是店鋪頁面頂部的動效，當用戶向下滑動頁面時，頂部的信息會出現變化，也算是細分場景的一種，通過動效的方式完美過渡，過渡的流暢感會讓用戶對該平臺增加些許好感。
總結來看，淘寶改版的設計角度可以總結為：設計追隨目標，品牌、會員突出，追隨設計趨勢，細分場景，可視化展現和流暢動效。另外淘寶對設計、測試的態度上來說，設計解決實際問題，設計需要驗證，測試要嚴謹。
淘寶與其他競品
這裡只選了京東和蘇寧易購兩個與淘寶進行了幾個關鍵頁面比較，以下主要從視覺的角度談一下有哪些問題，這裡幾乎不牽扯業務、頁面跳轉等問題。
1.首頁
淘寶：整體看起來沒有什麼硬傷，沒有用卡片風格。
京東：這邊也是繼淘寶改版後不久改版上線。這邊首屏的 icon 這一塊的卡片式生硬，大有為了卡片而卡片既視感，京東秒殺這塊的整齊度不高，也有些左重右輕。”每日逛“這種裝飾性較強的風格也與整體卡片式簡潔風格不符。”東家小院“樓層次級標題的顏色跳躍，大有喧賓奪主之感。
蘇寧易購：這次目前還沒有改版。掌上搶這樓層整齊度不高，和京東類似，同時缺少層次感，部分有漸變部分沒有，非常不統一。”逛實惠“樓層視覺不平衡，而且信息層級很有問題。
2.搜索結果頁
風格：淘寶這頁用了無框設計，省去了中間的分割線，商品圖片尺寸較大；從左到右，圖片尺寸越來越小，分割線從無到細到粗，整體效果上淘寶和京東效果比易購的好。
標籤：在標籤的處理上，易購的標籤非常強，在頁面上非常突出，喧賓奪主；京東的標籤弱化，與淘寶類似，但完全不同類的標籤樣式相同（秒殺與自營），會讓人覺得有些混亂。
圖文編排：淘寶和京東都沒有硬傷，比較和諧，但易購的圖片和文字大小間距比例不和諧，圖片與線框無論在視覺效果上還是像素上都沒有對齊；易購底部沒有適配愛瘋X。
3.分類頁
風格：淘寶用了明顯的卡片，去線條；而京東也用了卡片，卡片感微弱，是為了統一性而做；易購仍然是線框區分，整體區分效果不佳。
品牌：淘寶和京東在文字的處理上沒有用更多的色彩，而易購的色彩運用得非常多，削弱品牌感，且沒有帶來任何優勢。
4.商品詳情頁
此頁面我僅從節奏感這一個角度來看，上圖已經標出了每個頁面的節奏感給我的感受。淘寶整體的節奏感比較好，輕重緩和；京東和易購在節奏感上做的都有些問題，重節奏之間無輕節奏的調和會缺乏呼吸感。有關節奏感的問題我們以後可以單獨做個番外來講。
5.購物車
風格效果：淘寶沒有用卡片風格；京東用了卡片，導致大量留白，同時沒有帶來任何優勢，蘇寧易購整體稍顯擁擠，沒有亮點。
圖文編排：淘寶整體非常和諧；京東圖片均使用了白底，這點很好保持了統一性；京東使用了大量的設計細節，字號、粗細、字體、顏色等等非常豐富，但整體效果並沒有很理想，稍顯瑣碎與凌亂；蘇寧易購的文字大小與間距處理不和諧而帶來擁擠感。
其他細節：京東標籤不同於搜索結果頁的弱化，而是非常強化，導致視覺焦點混亂，個別按鈕非常小，操作不便；易購標籤處理上比京東收斂；易購底部 tab 與其他部分沒有區分，浮框像廣告，效果不佳，數量修改框的描邊太硬，比例不和諧。
6.個人首頁
整體風格：淘寶和京東都是明顯的卡片式，蘇寧易購是廣義上的卡片式。
這裡主要說一說易購的問題：首屏出現“我的專場”的大片不平衡色塊非常不合適，部分 icon 效果不佳，另外有一些內容上的 bug。
7.訂單
淘寶和京東的訂單頁個人認為沒有什麼硬傷，淘寶有個適配的問題。蘇寧易購的問題比較多，首先是頂部“常購清單”中沒有商品的 bug，然後是圖片與購物車等地方的風格不符，商品之間分割線有時有有時無，間距有問題等等。
綜合上面具體頁面的分析可以看出淘寶在 UI 設計上的優勢：追隨設計趨勢；統一性；排版和諧等。
關於統一性這一點，可能有人說京東做的更好，因為它幾乎所有頁面都用了卡片風，而淘寶沒有。個人認為，設計風格是次於設計目標的，如果這種設計風格不能很好滿足該頁面的設計目標，建議還是以設計目標為重；如果仍然強制使用該風格的話，會得不償失。淘寶的做法是把卡片這種風格歸類為輕質化風格，除了卡片以外，還有去線條、色塊等等設計語言，因此並非強調一定要使用卡片形式。
閱讀更多 鑄優教育zuui 的文章
