電商類 App 是日常使用頻次非常高的應(yīng)用，它們的每一次更新改版不僅是業(yè)務(wù)的拓展、用戶需求的滿足，同時也是消費趨勢的引領(lǐng)與跟隨。

近期淘寶 App 的許多頁面都有了較大的改動，在分析淘寶改版的基礎(chǔ)上，通過幾個關(guān)鍵頁面的分析對比淘寶、京東、蘇寧易購三大綜合類電商平臺的產(chǎn)品設(shè)計，希望此篇文章能讓大家對電商類 App 的產(chǎn)品設(shè)計有更深的認識。

一、淘寶改版

前陣子淘寶進行了改版，這次改版循序漸進，并做了較多的 A/B 測試。

1. 主要改版頁面

上圖是淘寶幾個主要改版頁面。從視覺上看，很明顯的大圓角卡片、去線條，整體風(fēng)格統(tǒng)一輕質(zhì)化。大圓角卡片追隨了 iOS11 的風(fēng)格（App Store 中尤為突出），卡片使信息更加聚焦，模塊感更強；圓角卡片本身也比原先的卡片式增加了更多細節(jié)；大圓角卡片親和力高，更加活潑，也符合淘寶人群的定位。

上圖為5個 tab 的頁面，這次統(tǒng)一了頭部的顏色，強調(diào)了品牌，統(tǒng)一性方面也得到了提升。

以下是從單個頁面的角度進行改版分析。

2. 個人首頁

△ 舊版圖為除夕的截圖，顏色方面先不討論

新舊版本的對比，可以看出88會員、卡券包優(yōu)先級提高，會員信息更加集中、突出。這也印證了這兩年會員機制的火熱，拉新成本和難度都越來越高的情況下，鞏固老用戶才能帶來更多的價值。

新版的卡片式很突出，去掉了大部分的線條，轉(zhuǎn)而用塊面來代替線條表達層級關(guān)系。

「我的訂單」部分 icon 樣式發(fā)生了變化（7. 7. 2 版），從填充式轉(zhuǎn)變?yōu)榫€條式，突出了 icon 右上角的數(shù)字，但這一點在測試版本中又改回來了（后面討論）。

88會員和物流這兩塊內(nèi)容滾動呈現(xiàn)，真正是動效解決問題，從時間軸來解決信息量大而空間局限的問題，同時動態(tài)效果增加了用戶吸引度。

在測試版中，這個頁面主要看到兩個點的變化，一個是 icon 改為原來的填充式，一個是動效滾動的節(jié)奏。

icon 的問題個人猜想是因為體量與重要性、位置的問題，線條式的體量弱于填充式。在「我的淘寶」頁面中，最重要的信息是「我的訂單」，因此需要一定的突出。另外在測試版里，「我的訂單」的上面固定的廣告位放置了旅行青蛙的廣告，此位置的突出性導(dǎo)致其弱化了底下的「我的訂單」，占用了原先「我的訂單」的 C 位，因此測試版考慮到更全的場景（有廣告），從而將 icon 的樣式換回了體量大的填充式。

動效滾動是上面說的88會員和物流，7. 7. 2版本里兩個滾動是同時進行的，而7. 7. 8的測試版中兩個滾動是錯開的。上下同時滾動會讓人有些混亂，會讓人認為這兩塊的信息是相互關(guān)聯(lián)的。

3. 店鋪首頁

這一塊做的 A/B 測試。店鋪頁面的改動較大，導(dǎo)航做了較大調(diào)整。新版將常用操作和重要功能放到了底部固定；二級導(dǎo)航中的內(nèi)容讓商家自定義選擇，從而滿足不同店鋪的需求；新版一級二級導(dǎo)航較舊版層級關(guān)系明確了許多。

再來說說這次的 A/B 測試，這次的測試時間比較長（從7. 7. 2到目前的7. 8. 2都在，目測到8. 0應(yīng)該會給出一個結(jié)果）。店鋪頁在導(dǎo)航上的大改動，會在一定程度上對已經(jīng)形成習(xí)慣的老用戶造成沖擊，對頁面重新適應(yīng)和學(xué)習(xí)，有點類似于前攝抑制（在認知心理學(xué)上指之前學(xué)習(xí)過的材料對保持和回憶以后學(xué)習(xí)的材料的干擾作用）。新版設(shè)計的目的一是方便用戶初期快速學(xué)習(xí)，二是中后期快速使用。對于中后期的快速使用就需要一段時間的鋪墊來獲得數(shù)據(jù)。該次測試應(yīng)該是區(qū)分各種不同的用戶，簡單來說測試新用戶、老用戶分別對于新舊版本的學(xué)習(xí)，以及他們對新版本熟悉之后的使用。

4. 物流詳情

這一塊可以說是樣式上的大改。用可視化來表現(xiàn)包裹正處的位置以及即將進行的操作，增強用戶感知（降低理解難度），進一步提升對商品信息的把控感。比原先僅僅是文字展示而言生動了許多，樣式接近外賣等待中的訂單頁面。可視化固然可以展示更多的信息，但是在用戶非訓(xùn)練的情況下信息傳遞的速度未必比文字要更快，不同的人對圖形的理解也會有所偏差。不過介于外賣 App 的頁面已經(jīng)對很多用戶進行了教育，相信這種理解上不會有太大難度。但是依然要在后續(xù)優(yōu)化中逐漸突出信息的重點。

物流詳情頁除了樣式的巨大變化，還有一個特點就是場景化細分，不同的場景做出了差異化。例如僅僅是物流詳情頁，根據(jù)不同的場景：發(fā)貨未攬件 – 已攬件未配送 – 快遞員配送中 – 到達菜鳥驛站/其他快遞點 – 已簽收等，頁面突出的信息均有所區(qū)別。已攬件時突出快遞信息，配送時突出配送員信息等。

從場景細分做差異化，讓用戶獲取當前最需要的信息這件事的出發(fā)點無疑是很好的，但是從上圖中，僅是快遞信息這一類信息，就出現(xiàn)了三種樣式（如上圖），并且位置也不統(tǒng)一。如果用戶是購買了幾件不同店家的商品，這時快遞員打電話來說我是XX快遞的，快遞給你放在了某某地方，這時我想知道這是啥商品的時候，于是我就打開了物流詳情，來找快遞信息，發(fā)現(xiàn)快遞信息居然不在原來的地圖底下了，找了好一會才發(fā)現(xiàn)放到了快遞員下方。這個例子也就是說在非常見場景下獲取某個信息時可能需要付出額外的學(xué)習(xí)成本。

不過在7. 7. 8的測試版本中，又將快遞信息的樣式減為兩種，算是一種妥協(xié)。本人認為，場景細分出發(fā)點是好的，但在樣式和位置兩點中，最好至少有一點是固定不變的，這樣才不會過多增加用戶的學(xué)習(xí)成本，也能涵蓋一些小概率場景。

5. 動效

這兩張圖都是店鋪頁面頂部的動效，當用戶向下滑動頁面時，頂部的信息會出現(xiàn)變化，也算是細分場景的一種，通過動效的方式完美過渡，過渡的流暢感會讓用戶對該平臺增加些許好感。

我的淘寶這一頁的動效解決問題在上面有說到，右邊的有好貨頁面，當用戶在滑動頁面時，攻略推薦一欄的圖片有依次展現(xiàn)的效果，吸引眼球，小有驚喜。

總結(jié)來看，淘寶改版的設(shè)計角度可以總結(jié)為：設(shè)計追隨目標，品牌、會員突出，追隨設(shè)計趨勢，細分場景，可視化展現(xiàn)和流暢動效。另外淘寶對設(shè)計、測試的態(tài)度上來說，設(shè)計解決實際問題，設(shè)計需要驗證，測試要嚴謹。

二、淘寶與其他競品

這里只選了京東和蘇寧易購兩個與淘寶進行了幾個關(guān)鍵頁面比較，以下主要從視覺的角度談一下有哪些問題，這里幾乎不牽扯業(yè)務(wù)、頁面跳轉(zhuǎn)等問題。

1. 首頁

淘寶：整體看起來沒有什么硬傷，沒有用卡片風(fēng)格。

京東：這邊也是繼淘寶改版后不久改版上線。這邊首屏的 icon 這一塊的卡片式生硬，大有為了卡片而卡片既視感，京東秒殺這塊的整齊度不高，也有些左重右輕。「每日逛」這種裝飾性較強的風(fēng)格也與整體卡片式簡潔風(fēng)格不符?！笘|家小院」樓層次級標題的顏色跳躍，大有喧賓奪主之感。

蘇寧易購：目前還沒有改版。掌上搶這樓層整齊度不高，和京東類似，同時缺少層次感，部分有漸變部分沒有，非常不統(tǒng)一?！腹鋵嵒荨箻菍右曈X不平衡，而且信息層級很有問題。

2. 搜索結(jié)果頁

風(fēng)格：淘寶這頁用了無框設(shè)計，省去了中間的分割線，商品圖片尺寸較大；從左到右，圖片尺寸越來越小，分割線從無到細到粗，整體效果上淘寶和京東效果比易購的好。

標簽：在標簽的處理上，易購的標簽非常強，在頁面上非常突出，喧賓奪主；京東的標簽弱化，與淘寶類似，但完全不同類的標簽樣式相同（秒殺與自營），會讓人覺得有些混亂。

圖文編排：淘寶和京東都沒有硬傷，比較和諧，但易購的圖片和文字大小間距比例不和諧，圖片與線框無論在視覺效果上還是像素上都沒有對齊；易購底部沒有適配 iPhone X。

3. 分類頁

風(fēng)格：淘寶用了明顯的卡片，去線條；而京東也用了卡片，卡片感微弱，是為了統(tǒng)一性而做；易購仍然是線框區(qū)分，整體區(qū)分效果不佳。

品牌：淘寶和京東在文字的處理上沒有用更多的色彩，而易購的色彩運用得非常多，削弱品牌感，且沒有帶來任何優(yōu)勢。

4. 商品詳情頁

此頁面我僅從節(jié)奏感這一個角度來看，上圖已經(jīng)標出了每個頁面的節(jié)奏感給我的感受。淘寶整體的節(jié)奏感比較好，輕重緩和；京東和易購在節(jié)奏感上做的都有些問題，重節(jié)奏之間無輕節(jié)奏的調(diào)和會缺乏呼吸感。

5. 購物車

風(fēng)格效果：淘寶沒有用卡片風(fēng)格；京東用了卡片，導(dǎo)致大量留白，同時沒有帶來任何優(yōu)勢，蘇寧易購整體稍顯擁擠，沒有亮點。

圖文編排：淘寶整體非常和諧；京東圖片均使用了白底，這點很好保持了統(tǒng)一性；京東使用了大量的設(shè)計細節(jié)，字號、粗細、字體、顏色等等非常豐富，但整體效果并沒有很理想，稍顯瑣碎與凌亂；蘇寧易購的文字大小與間距處理不和諧而帶來擁擠感。

其他細節(jié)：京東標簽不同于搜索結(jié)果頁的弱化，而是非常強化，導(dǎo)致視覺焦點混亂，個別按鈕非常小，操作不便；易購標簽處理上比京東收斂；易購底部 tab 與其他部分沒有區(qū)分，浮框像廣告，效果不佳，數(shù)量修改框的描邊太硬，比例不和諧。

6. 個人首頁

整體風(fēng)格：淘寶和京東都是明顯的卡片式，蘇寧易購是廣義上的卡片式。

這里主要說一說易購的問題：首屏出現(xiàn)「我的專場」的大片不平衡色塊非常不合適，部分 icon 效果不佳，另外有一些內(nèi)容上的 bug。

7. 訂單

淘寶和京東的訂單頁個人認為沒有什么硬傷，淘寶有個適配的問題。蘇寧易購的問題比較多，首先是頂部「常購清單」中沒有商品的 bug，然后是圖片與購物車等地方的風(fēng)格不符，商品之間分割線有時有有時無，間距有問題等等。

三、總結(jié)

綜合上面具體頁面的分析可以看出淘寶在 UI 設(shè)計上的優(yōu)勢：追隨設(shè)計趨勢、統(tǒng)一性、排版和諧等。

關(guān)于統(tǒng)一性這一點，可能有人說京東做的更好，因為它幾乎所有頁面都用了卡片風(fēng)，而淘寶沒有。個人認為，設(shè)計風(fēng)格是次于設(shè)計目標的，如果這種設(shè)計風(fēng)格不能很好滿足該頁面的設(shè)計目標，建議還是以設(shè)計目標為重；如果仍然強制使用該風(fēng)格的話，會得不償失。淘寶的做法是把卡片這種風(fēng)格歸類為輕質(zhì)化風(fēng)格，除了卡片以外，還有去線條、色塊等等設(shè)計語言，因此并非強調(diào)一定要使用卡片形式。