做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

如何做好電商類App?來看這份對(duì)新版淘寶的設(shè)計(jì)思考!

2018-6-4    資深UI設(shè)計(jì)者


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

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

一、淘寶改版

前陣子淘寶進(jìn)行了改版,這次改版循序漸進(jìn),并做了較多的 A/B 測(cè)試。

1. 主要改版頁(yè)面

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

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

以下是從單個(gè)頁(yè)面的角度進(jìn)行改版分析。

2. 個(gè)人首頁(yè)

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

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

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

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

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

在測(cè)試版中,這個(gè)頁(yè)面主要看到兩個(gè)點(diǎn)的變化,一個(gè)是 icon 改為原來的填充式,一個(gè)是動(dòng)效滾動(dòng)的節(jié)奏。

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

動(dòng)效滾動(dòng)是上面說的88會(huì)員和物流,7. 7. 2版本里兩個(gè)滾動(dòng)是同時(shí)進(jìn)行的,而7. 7. 8的測(cè)試版中兩個(gè)滾動(dòng)是錯(cuò)開的。上下同時(shí)滾動(dòng)會(huì)讓人有些混亂,會(huì)讓人認(rèn)為這兩塊的信息是相互關(guān)聯(lián)的。

3. 店鋪首頁(yè)

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

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

4. 物流詳情

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

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

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

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

5. 動(dòng)效

這兩張圖都是店鋪頁(yè)面頂部的動(dòng)效,當(dāng)用戶向下滑動(dòng)頁(yè)面時(shí),頂部的信息會(huì)出現(xiàn)變化,也算是細(xì)分場(chǎng)景的一種,通過動(dòng)效的方式完美過渡,過渡的流暢感會(huì)讓用戶對(duì)該平臺(tái)增加些許好感。

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

總結(jié)來看,淘寶改版的設(shè)計(jì)角度可以總結(jié)為:設(shè)計(jì)追隨目標(biāo),品牌、會(huì)員突出,追隨設(shè)計(jì)趨勢(shì),細(xì)分場(chǎng)景,可視化展現(xiàn)和流暢動(dòng)效。另外淘寶對(duì)設(shè)計(jì)、測(cè)試的態(tài)度上來說,設(shè)計(jì)解決實(shí)際問題,設(shè)計(jì)需要驗(yàn)證,測(cè)試要嚴(yán)謹(jǐn)。

二、淘寶與其他競(jìng)品

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

1. 首頁(yè)

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

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

蘇寧易購(gòu):目前還沒有改版。掌上搶這樓層整齊度不高,和京東類似,同時(shí)缺少層次感,部分有漸變部分沒有,非常不統(tǒng)一。「逛實(shí)惠」樓層視覺不平衡,而且信息層級(jí)很有問題。

2. 搜索結(jié)果頁(yè)

風(fēng)格:淘寶這頁(yè)用了無(wú)框設(shè)計(jì),省去了中間的分割線,商品圖片尺寸較大;從左到右,圖片尺寸越來越小,分割線從無(wú)到細(xì)到粗,整體效果上淘寶和京東效果比易購(gòu)的好。

標(biāo)簽:在標(biāo)簽的處理上,易購(gòu)的標(biāo)簽非常強(qiáng),在頁(yè)面上非常突出,喧賓奪主;京東的標(biāo)簽弱化,與淘寶類似,但完全不同類的標(biāo)簽樣式相同(秒殺與自營(yíng)),會(huì)讓人覺得有些混亂。

圖文編排:淘寶和京東都沒有硬傷,比較和諧,但易購(gòu)的圖片和文字大小間距比例不和諧,圖片與線框無(wú)論在視覺效果上還是像素上都沒有對(duì)齊;易購(gòu)底部沒有適配 iPhone X。

3. 分類頁(yè)

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

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

4. 商品詳情頁(yè)

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

5. 購(gòu)物車

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

圖文編排:淘寶整體非常和諧;京東圖片均使用了白底,這點(diǎn)很好保持了統(tǒng)一性;京東使用了大量的設(shè)計(jì)細(xì)節(jié),字號(hào)、粗細(xì)、字體、顏色等等非常豐富,但整體效果并沒有很理想,稍顯瑣碎與凌亂;蘇寧易購(gòu)的文字大小與間距處理不和諧而帶來?yè)頂D感。

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

6. 個(gè)人首頁(yè)

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

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

7. 訂單

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

三、總結(jié)

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

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

日歷

鏈接

個(gè)人資料

存檔