2018-6-4 資深UI設(shè)計(jì)者
電商類 App 是日常使用頻次非常高的應(yīng)用，它們的每一次更新改版不僅是業(yè)務(wù)的拓展、用戶需求的滿足，同時(shí)也是消費(fèi)趨勢的引領(lǐng)與跟隨。
近期淘寶 App 的許多頁面都有了較大的改動(dòng)，在分析淘寶改版的基礎(chǔ)上，通過幾個(gè)關(guān)鍵頁面的分析對比淘寶、京東、蘇寧易購三大綜合類電商平臺(tái)的產(chǎn)品設(shè)計(jì)，希望此篇文章能讓大家對電商類 App 的產(chǎn)品設(shè)計(jì)有更深的認(rèn)識。
前陣子淘寶進(jìn)行了改版，這次改版循序漸進(jìn)，并做了較多的 A/B 測試。
1. 主要改版頁面
上圖是淘寶幾個(gè)主要改版頁面。從視覺上看，很明顯的大圓角卡片、去線條，整體風(fēng)格統(tǒng)一輕質(zhì)化。大圓角卡片追隨了 iOS11 的風(fēng)格（App Store 中尤為突出），卡片使信息更加聚焦，模塊感更強(qiáng)；圓角卡片本身也比原先的卡片式增加了更多細(xì)節(jié)；大圓角卡片親和力高，更加活潑，也符合淘寶人群的定位。
上圖為5個(gè) tab 的頁面，這次統(tǒng)一了頭部的顏色，強(qiáng)調(diào)了品牌，統(tǒng)一性方面也得到了提升。
以下是從單個(gè)頁面的角度進(jìn)行改版分析。
2. 個(gè)人首頁
△ 舊版圖為除夕的截圖，顏色方面先不討論
新舊版本的對比，可以看出88會(huì)員、卡券包優(yōu)先級提高，會(huì)員信息更加集中、突出。這也印證了這兩年會(huì)員機(jī)制的火熱，拉新成本和難度都越來越高的情況下，鞏固老用戶才能帶來更多的價(jià)值。
新版的卡片式很突出，去掉了大部分的線條，轉(zhuǎn)而用塊面來代替線條表達(dá)層級關(guān)系。
「我的訂單」部分 icon 樣式發(fā)生了變化（7. 7. 2 版），從填充式轉(zhuǎn)變?yōu)榫€條式，突出了 icon 右上角的數(shù)字，但這一點(diǎn)在測試版本中又改回來了（后面討論）。
88會(huì)員和物流這兩塊內(nèi)容滾動(dòng)呈現(xiàn)，真正是動(dòng)效解決問題，從時(shí)間軸來解決信息量大而空間局限的問題，同時(shí)動(dòng)態(tài)效果增加了用戶吸引度。
在測試版中，這個(gè)頁面主要看到兩個(gè)點(diǎn)的變化，一個(gè)是 icon 改為原來的填充式，一個(gè)是動(dòng)效滾動(dòng)的節(jié)奏。
icon 的問題個(gè)人猜想是因?yàn)轶w量與重要性、位置的問題，線條式的體量弱于填充式。在「我的淘寶」頁面中，最重要的信息是「我的訂單」，因此需要一定的突出。另外在測試版里，「我的訂單」的上面固定的廣告位放置了旅行青蛙的廣告，此位置的突出性導(dǎo)致其弱化了底下的「我的訂單」，占用了原先「我的訂單」的 C 位，因此測試版考慮到更全的場景（有廣告），從而將 icon 的樣式換回了體量大的填充式。
動(dòng)效滾動(dòng)是上面說的88會(huì)員和物流，7. 7. 2版本里兩個(gè)滾動(dòng)是同時(shí)進(jìn)行的，而7. 7. 8的測試版中兩個(gè)滾動(dòng)是錯(cuò)開的。上下同時(shí)滾動(dòng)會(huì)讓人有些混亂，會(huì)讓人認(rèn)為這兩塊的信息是相互關(guān)聯(lián)的。
3. 店鋪首頁
這一塊做的 A/B 測試。店鋪頁面的改動(dòng)較大，導(dǎo)航做了較大調(diào)整。新版將常用操作和重要功能放到了底部固定；二級導(dǎo)航中的內(nèi)容讓商家自定義選擇，從而滿足不同店鋪的需求；新版一級二級導(dǎo)航較舊版層級關(guān)系明確了許多。
再來說說這次的 A/B 測試，這次的測試時(shí)間比較長（從7. 7. 2到目前的7. 8. 2都在，目測到8. 0應(yīng)該會(huì)給出一個(gè)結(jié)果）。店鋪頁在導(dǎo)航上的大改動(dòng)，會(huì)在一定程度上對已經(jīng)形成習(xí)慣的老用戶造成沖擊，對頁面重新適應(yīng)和學(xué)習(xí)，有點(diǎn)類似于前攝抑制（在認(rèn)知心理學(xué)上指之前學(xué)習(xí)過的材料對保持和回憶以后學(xué)習(xí)的材料的干擾作用）。新版設(shè)計(jì)的目的一是方便用戶初期快速學(xué)習(xí)，二是中后期快速使用。對于中后期的快速使用就需要一段時(shí)間的鋪墊來獲得數(shù)據(jù)。該次測試應(yīng)該是區(qū)分各種不同的用戶，簡單來說測試新用戶、老用戶分別對于新舊版本的學(xué)習(xí)，以及他們對新版本熟悉之后的使用。
4. 物流詳情
這一塊可以說是樣式上的大改。用可視化來表現(xiàn)包裹正處的位置以及即將進(jìn)行的操作，增強(qiáng)用戶感知（降低理解難度），進(jìn)一步提升對商品信息的把控感。比原先僅僅是文字展示而言生動(dòng)了許多，樣式接近外賣等待中的訂單頁面?？梢暬倘豢梢哉故靖嗟男畔?，但是在用戶非訓(xùn)練的情況下信息傳遞的速度未必比文字要更快，不同的人對圖形的理解也會(huì)有所偏差。不過介于外賣 App 的頁面已經(jīng)對很多用戶進(jìn)行了教育，相信這種理解上不會(huì)有太大難度。但是依然要在后續(xù)優(yōu)化中逐漸突出信息的重點(diǎn)。
物流詳情頁除了樣式的巨大變化，還有一個(gè)特點(diǎn)就是場景化細(xì)分，不同的場景做出了差異化。例如僅僅是物流詳情頁，根據(jù)不同的場景：發(fā)貨未攬件 – 已攬件未配送 – 快遞員配送中 – 到達(dá)菜鳥驛站/其他快遞點(diǎn) – 已簽收等，頁面突出的信息均有所區(qū)別。已攬件時(shí)突出快遞信息，配送時(shí)突出配送員信息等。
從場景細(xì)分做差異化，讓用戶獲取當(dāng)前最需要的信息這件事的出發(fā)點(diǎn)無疑是很好的，但是從上圖中，僅是快遞信息這一類信息，就出現(xiàn)了三種樣式（如上圖），并且位置也不統(tǒng)一。如果用戶是購買了幾件不同店家的商品，這時(shí)快遞員打電話來說我是XX快遞的，快遞給你放在了某某地方，這時(shí)我想知道這是啥商品的時(shí)候，于是我就打開了物流詳情，來找快遞信息，發(fā)現(xiàn)快遞信息居然不在原來的地圖底下了，找了好一會(huì)才發(fā)現(xiàn)放到了快遞員下方。這個(gè)例子也就是說在非常見場景下獲取某個(gè)信息時(shí)可能需要付出額外的學(xué)習(xí)成本。
不過在7. 7. 8的測試版本中，又將快遞信息的樣式減為兩種，算是一種妥協(xié)。本人認(rèn)為，場景細(xì)分出發(fā)點(diǎn)是好的，但在樣式和位置兩點(diǎn)中，最好至少有一點(diǎn)是固定不變的，這樣才不會(huì)過多增加用戶的學(xué)習(xí)成本，也能涵蓋一些小概率場景。
5. 動(dòng)效
這兩張圖都是店鋪頁面頂部的動(dòng)效，當(dāng)用戶向下滑動(dòng)頁面時(shí)，頂部的信息會(huì)出現(xiàn)變化，也算是細(xì)分場景的一種，通過動(dòng)效的方式完美過渡，過渡的流暢感會(huì)讓用戶對該平臺(tái)增加些許好感。
我的淘寶這一頁的動(dòng)效解決問題在上面有說到，右邊的有好貨頁面，當(dāng)用戶在滑動(dòng)頁面時(shí)，攻略推薦一欄的圖片有依次展現(xiàn)的效果，吸引眼球，小有驚喜。
總結(jié)來看，淘寶改版的設(shè)計(jì)角度可以總結(jié)為：設(shè)計(jì)追隨目標(biāo)，品牌、會(huì)員突出，追隨設(shè)計(jì)趨勢，細(xì)分場景，可視化展現(xiàn)和流暢動(dòng)效。另外淘寶對設(shè)計(jì)、測試的態(tài)度上來說，設(shè)計(jì)解決實(shí)際問題，設(shè)計(jì)需要驗(yàn)證，測試要嚴(yán)謹(jǐn)。
這里只選了京東和蘇寧易購兩個(gè)與淘寶進(jìn)行了幾個(gè)關(guān)鍵頁面比較，以下主要從視覺的角度談一下有哪些問題，這里幾乎不牽扯業(yè)務(wù)、頁面跳轉(zhuǎn)等問題。
1. 首頁
淘寶：整體看起來沒有什么硬傷，沒有用卡片風(fēng)格。
京東：這邊也是繼淘寶改版后不久改版上線。這邊首屏的 icon 這一塊的卡片式生硬，大有為了卡片而卡片既視感，京東秒殺這塊的整齊度不高，也有些左重右輕?！该咳展洹惯@種裝飾性較強(qiáng)的風(fēng)格也與整體卡片式簡潔風(fēng)格不符?！笘|家小院」樓層次級標(biāo)題的顏色跳躍，大有喧賓奪主之感。
蘇寧易購：目前還沒有改版。掌上搶這樓層整齊度不高，和京東類似，同時(shí)缺少層次感，部分有漸變部分沒有，非常不統(tǒng)一?！腹鋵?shí)惠」樓層視覺不平衡，而且信息層級很有問題。
2. 搜索結(jié)果頁
風(fēng)格：淘寶這頁用了無框設(shè)計(jì)，省去了中間的分割線，商品圖片尺寸較大；從左到右，圖片尺寸越來越小，分割線從無到細(xì)到粗，整體效果上淘寶和京東效果比易購的好。
標(biāo)簽：在標(biāo)簽的處理上，易購的標(biāo)簽非常強(qiáng)，在頁面上非常突出，喧賓奪主；京東的標(biāo)簽弱化，與淘寶類似，但完全不同類的標(biāo)簽樣式相同（秒殺與自營），會(huì)讓人覺得有些混亂。
圖文編排：淘寶和京東都沒有硬傷，比較和諧，但易購的圖片和文字大小間距比例不和諧，圖片與線框無論在視覺效果上還是像素上都沒有對齊；易購底部沒有適配 iPhone X。
3. 分類頁
風(fēng)格：淘寶用了明顯的卡片，去線條；而京東也用了卡片，卡片感微弱，是為了統(tǒng)一性而做；易購仍然是線框區(qū)分，整體區(qū)分效果不佳。
品牌：淘寶和京東在文字的處理上沒有用更多的色彩，而易購的色彩運(yùn)用得非常多，削弱品牌感，且沒有帶來任何優(yōu)勢。
4. 商品詳情頁
此頁面我僅從節(jié)奏感這一個(gè)角度來看，上圖已經(jīng)標(biāo)出了每個(gè)頁面的節(jié)奏感給我的感受。淘寶整體的節(jié)奏感比較好，輕重緩和；京東和易購在節(jié)奏感上做的都有些問題，重節(jié)奏之間無輕節(jié)奏的調(diào)和會(huì)缺乏呼吸感。
5. 購物車
風(fēng)格效果：淘寶沒有用卡片風(fēng)格；京東用了卡片，導(dǎo)致大量留白，同時(shí)沒有帶來任何優(yōu)勢，蘇寧易購整體稍顯擁擠，沒有亮點(diǎn)。
圖文編排：淘寶整體非常和諧；京東圖片均使用了白底，這點(diǎn)很好保持了統(tǒng)一性；京東使用了大量的設(shè)計(jì)細(xì)節(jié)，字號、粗細(xì)、字體、顏色等等非常豐富，但整體效果并沒有很理想，稍顯瑣碎與凌亂；蘇寧易購的文字大小與間距處理不和諧而帶來擁擠感。
其他細(xì)節(jié)：京東標(biāo)簽不同于搜索結(jié)果頁的弱化，而是非常強(qiáng)化，導(dǎo)致視覺焦點(diǎn)混亂，個(gè)別按鈕非常小，操作不便；易購標(biāo)簽處理上比京東收斂；易購底部 tab 與其他部分沒有區(qū)分，浮框像廣告，效果不佳，數(shù)量修改框的描邊太硬，比例不和諧。
6. 個(gè)人首頁
整體風(fēng)格：淘寶和京東都是明顯的卡片式，蘇寧易購是廣義上的卡片式。
這里主要說一說易購的問題：首屏出現(xiàn)「我的專場」的大片不平衡色塊非常不合適，部分 icon 效果不佳，另外有一些內(nèi)容上的 bug。
7. 訂單
淘寶和京東的訂單頁個(gè)人認(rèn)為沒有什么硬傷，淘寶有個(gè)適配的問題。蘇寧易購的問題比較多，首先是頂部「常購清單」中沒有商品的 bug，然后是圖片與購物車等地方的風(fēng)格不符，商品之間分割線有時(shí)有有時(shí)無，間距有問題等等。
綜合上面具體頁面的分析可以看出淘寶在 UI 設(shè)計(jì)上的優(yōu)勢：追隨設(shè)計(jì)趨勢、統(tǒng)一性、排版和諧等。
關(guān)于統(tǒng)一性這一點(diǎn)，可能有人說京東做的更好，因?yàn)樗鼛缀跛许撁娑加昧丝ㄆL(fēng)，而淘寶沒有。個(gè)人認(rèn)為，設(shè)計(jì)風(fēng)格是次于設(shè)計(jì)目標(biāo)的，如果這種設(shè)計(jì)風(fēng)格不能很好滿足該頁面的設(shè)計(jì)目標(biāo)，建議還是以設(shè)計(jì)目標(biāo)為重；如果仍然強(qiáng)制使用該風(fēng)格的話，會(huì)得不償失。淘寶的做法是把卡片這種風(fēng)格歸類為輕質(zhì)化風(fēng)格，除了卡片以外，還有去線條、色塊等等設(shè)計(jì)語言，因此并非強(qiáng)調(diào)一定要使用卡片形式。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com