隨著移動(dòng)互聯(lián)網(wǎng)的攻擊，網(wǎng)站建設(shè)已經(jīng)不能滿(mǎn)足企業(yè)的需求。很多有產(chǎn)品的企業(yè)已經(jīng)開(kāi)始蠶食移動(dòng)市場(chǎng)，比如微信微信官方賬號(hào)、微信小程序、移動(dòng)APP建設(shè)、移動(dòng)網(wǎng)站建設(shè)、手機(jī)登陸頁(yè)面建設(shè)等。而各種類(lèi)型中最有代表性的就是電商APP的設(shè)計(jì)。電商APP是所有APP的精華，其技術(shù)性和層次性都高于其他行業(yè)產(chǎn)品，所以應(yīng)該是一個(gè)能夠用新思維搭建移動(dòng)APP的

　　任何有建設(shè)電子商務(wù)網(wǎng)站經(jīng)驗(yàn)的人都知道，電子商務(wù)行業(yè)可以大也可以小。大的可以包括我們生活中的所有產(chǎn)品，比如工業(yè)品，日用品，新鮮果蔬，甚至新鮮的，小的可以包括我們生活中的一些品類(lèi)。例如，鞋類(lèi)加工廠(chǎng)圍繞一個(gè)品牌進(jìn)行加工，從而為該品牌設(shè)計(jì)一個(gè)交易平臺(tái)。

　　電子商務(wù)APP是現(xiàn)代日常生活中經(jīng)常使用的應(yīng)用。每一次更新和修改都是業(yè)務(wù)的拓展，是用戶(hù)需求的滿(mǎn)足，是消費(fèi)趨勢(shì)的引領(lǐng)和追隨。

　　摘要：以淘寶APP為例，分析了電子商務(wù)APP的構(gòu)建，并從重點(diǎn)頁(yè)面分析了淘寶、JD.COM、蘇寧易購(gòu)三大綜合電子商務(wù)平臺(tái)的產(chǎn)品設(shè)計(jì)，讓大家對(duì)電子商務(wù)APP更加熟悉。

　　一、淘寶改版

　　前段時(shí)間淘寶做了一個(gè)修改，這個(gè)修改是循序漸進(jìn)的，做了更多的A/B測(cè)試。

　　1.主要修訂頁(yè)面

　　從視覺(jué)上看，明顯去掉了大圓角和線(xiàn)條的卡片，整體風(fēng)格統(tǒng)一而輕盈。大圓卡沿襲了iOS11的風(fēng)格(尤其是在App  Store中)，卡讓信息更集中，模塊感更強(qiáng)；圓角卡本身也比原卡類(lèi)型增加了更多細(xì)節(jié)；圓角大的卡，親和力高，生動(dòng)活潑，也符合淘寶人的定位。

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

　　通過(guò)新舊版本對(duì)比可以看出，88會(huì)員和卡券的優(yōu)先級(jí)有所提高，會(huì)員的信息更加集中和突出。這也印證了過(guò)去兩年火熱的會(huì)員機(jī)制。在帶來(lái)新產(chǎn)品的成本和難度越來(lái)越高的情況下，整合老用戶(hù)可以帶來(lái)更多的價(jià)值。

　　新版卡片非常突出，去掉了大部分線(xiàn)條，用塊代替線(xiàn)條，表達(dá)層次關(guān)系。

　　88會(huì)員和最新物流滾動(dòng)呈現(xiàn)，真正解決了有動(dòng)態(tài)效果的問(wèn)題，從時(shí)間軸上解決了信息量大，空間有限的問(wèn)題。同時(shí)，動(dòng)態(tài)效果增加了用戶(hù)吸引力。

　　在beta版中，這個(gè)頁(yè)面主要看到兩個(gè)變化，一個(gè)是圖標(biāo)改為原來(lái)的填充類(lèi)型，一個(gè)是動(dòng)態(tài)滾動(dòng)的節(jié)奏。

　　Icon個(gè)人猜測(cè)是因?yàn)轶w積、重要性、位置的問(wèn)題，線(xiàn)型體積弱于填充型。在“我的淘寶”頁(yè)面，最重要的信息是“我的訂單”，所以需要突出顯示。另外，在beta版中，旅行蛙的廣告放在My  Order上方的固定廣告位，弱化了底部的My  Order，占據(jù)了原My  Order的C位。所以beta版考慮了一個(gè)更完整的場(chǎng)景(有廣告)，從而把圖標(biāo)的樣式改成了大填充類(lèi)型。動(dòng)態(tài)效果滾動(dòng)是指上面提到的88個(gè)會(huì)員和最新的物流。在版本7中。7.2，兩個(gè)卷軸同時(shí)進(jìn)行，而在beta版7。7.8、兩個(gè)卷軸交錯(cuò)。同時(shí)上下滾動(dòng)會(huì)讓人迷惑，讓人以為這兩條信息是相互關(guān)聯(lián)的。

　　3.商店主頁(yè)

　　這一塊的A/B測(cè)試。商店頁(yè)面做了很大的改變，導(dǎo)航也做了很大的調(diào)整。新版本把常用操作和重要功能放在最底層，并進(jìn)行修復(fù)；二次導(dǎo)航中的內(nèi)容允許商家定制自己的選擇，以滿(mǎn)足不同店鋪的需求；與老版本相比，新版本的主次導(dǎo)航層次關(guān)系更加清晰。

　　再說(shuō)說(shuō)這次的A/B測(cè)試，時(shí)間比較長(zhǎng)(從7。7.2比7。8.2目前目測(cè)后應(yīng)該給出結(jié)果為8。0).店鋪?lái)?yè)面導(dǎo)航的巨大變化會(huì)對(duì)已經(jīng)形成習(xí)慣的老用戶(hù)產(chǎn)生一定程度的影響，重新調(diào)整學(xué)習(xí)頁(yè)面，有點(diǎn)類(lèi)似于主動(dòng)抑制(在認(rèn)知心理學(xué)中，是指之前學(xué)到的材料對(duì)后來(lái)學(xué)到的材料的維護(hù)和回憶的干擾)。新設(shè)計(jì)的目的是方便用戶(hù)前期快速學(xué)習(xí)，中后期快速使用。對(duì)于中后期的快速使用，需要一段時(shí)間的鋪墊才能獲得數(shù)據(jù)。這個(gè)測(cè)試應(yīng)該區(qū)分不同的用戶(hù)。簡(jiǎn)單來(lái)說(shuō)就是測(cè)試新老用戶(hù)對(duì)新老版本的學(xué)習(xí)，以及熟悉新版本后的使用情況。

　　4.物流細(xì)節(jié)

　　這件作品可以說(shuō)是風(fēng)格上的一大轉(zhuǎn)變?？梢暬糜陲@示包裹的位置和即將進(jìn)行的操作，增強(qiáng)了用戶(hù)的感知(降低了理解的難度)，進(jìn)一步增強(qiáng)了對(duì)商品信息的掌控感。比原文展示生動(dòng)多了，風(fēng)格接近等待外賣(mài)的訂單頁(yè)面?？梢暬?dāng)然可以展示更多的信息，但是信息傳遞的速度并不一定比文字快，在用戶(hù)未經(jīng)訓(xùn)練的情況下，不同的人對(duì)圖形會(huì)有不同的理解。但是很多用戶(hù)都是在外賣(mài)App的頁(yè)面上接受過(guò)教育的，所以相信這個(gè)理解不會(huì)太難。但是在后續(xù)的優(yōu)化中還是要逐步突出信息的重點(diǎn)。

　　除了風(fēng)格上的巨大變化，物流詳情頁(yè)還有場(chǎng)景細(xì)分的特點(diǎn)，不同場(chǎng)景有所區(qū)別。比如只是物流詳情頁(yè)，頁(yè)面上突出顯示的信息根據(jù)不同的場(chǎng)景有所不同，比如：無(wú)包裹投遞——無(wú)包裹投遞——快遞送達(dá)——到達(dá)菜鳥(niǎo)站/其他快遞點(diǎn)——簽收。包裹收齊后突出快遞信息，配送時(shí)突出調(diào)度員信息。

　　與場(chǎng)景細(xì)分區(qū)分開(kāi)來(lái)，讓用戶(hù)得到目前最需要的信息，無(wú)疑是一個(gè)很好的起點(diǎn)。但是從上圖來(lái)看，信息有快遞信息等三種樣式，而且位置不統(tǒng)一。如果用戶(hù)在不同的店鋪買(mǎi)了幾件商品，快遞員打電話(huà)說(shuō)我是XX快遞，快遞員給你放在某個(gè)地方。這時(shí)候想知道是什么貨，就打開(kāi)物流明細(xì)，找快遞信息，發(fā)現(xiàn)快遞信息不在原地圖下。搜了一會(huì)，發(fā)現(xiàn)放在快遞下面了。這個(gè)例子意味著，當(dāng)你在不尋常的情況下獲得一些信息時(shí)，你可能需要支付額外的學(xué)習(xí)成本。但是，在7的測(cè)試版本中。7.8、快遞信息的樣式減少為兩種，這是一種妥協(xié)。在我看來(lái)，場(chǎng)景細(xì)分的出發(fā)點(diǎn)是好的，但風(fēng)格和位置這兩點(diǎn)至少有一點(diǎn)是固定的，這樣既不會(huì)過(guò)多增加用戶(hù)的學(xué)習(xí)成本，又能覆蓋一些概率小的場(chǎng)景。

　　5.動(dòng)力效應(yīng)

　　這兩張圖是店鋪?lái)?yè)面頂部的動(dòng)態(tài)效果。當(dāng)用戶(hù)滑下頁(yè)面時(shí)，頂部的信息會(huì)發(fā)生變化，這可以看作是一種細(xì)分場(chǎng)景。通過(guò)動(dòng)態(tài)效果，過(guò)渡很完美，過(guò)渡的流暢感會(huì)讓用戶(hù)對(duì)平臺(tái)感覺(jué)好一點(diǎn)。

　　解決我的淘寶頁(yè)面動(dòng)態(tài)效果的問(wèn)題，上面已經(jīng)提到了。右邊有好貨頁(yè)面。當(dāng)用戶(hù)滑動(dòng)頁(yè)面時(shí)，《攻略推薦》欄目中的圖片具有依次展示、吸引眼球、給人一點(diǎn)驚喜的效果。

　　總結(jié)起來(lái)，淘寶改版的設(shè)計(jì)角度可以概括為：設(shè)計(jì)遵循目標(biāo)，品牌和成員突出，設(shè)計(jì)趨勢(shì)跟隨，場(chǎng)景細(xì)分，視覺(jué)展示和動(dòng)態(tài)效果流暢。另外，淘寶對(duì)設(shè)計(jì)和測(cè)試的態(tài)度是設(shè)計(jì)解決實(shí)際問(wèn)題，設(shè)計(jì)需要驗(yàn)證，測(cè)試需要嚴(yán)謹(jǐn)。

　　二、淘寶等競(jìng)爭(zhēng)產(chǎn)品

　　這里只選擇了Tesco和蘇寧易購(gòu)與淘寶在幾個(gè)重點(diǎn)頁(yè)面進(jìn)行對(duì)比。這里主要從視覺(jué)的角度來(lái)說(shuō)問(wèn)題。這里幾乎沒(méi)有涉及業(yè)務(wù)、跳頁(yè)等問(wèn)題。

　　1.主頁(yè)

　　淘寶：整體看起來(lái)傷的不算嚴(yán)重，也不使用卡式。

　　JD。COM:淘寶改版后不久也改版上線(xiàn)了。這里第一屏圖標(biāo)的卡牌類(lèi)型比較生硬，為了卡牌，讓卡牌好看。JD.COM斯派克的整潔度不高，有些是左偏右?！叭粘Ｙ?gòu)物”這種極具裝飾性的風(fēng)格，也與整體緊湊的卡牌風(fēng)格不符?！皷|家小院”地板上的小標(biāo)題顏色跳躍，有很大的篡奪主人角色的感覺(jué)。

　　蘇寧易購(gòu)：還沒(méi)修改。這層的均勻度不高，和JD.COM差不多。同時(shí)又缺乏層次感，有些是漸變的，很不一致?！百?gòu)物實(shí)惠”樓層視覺(jué)不平衡，信息水平很成問(wèn)題。

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

　　風(fēng)格：淘寶采用無(wú)框設(shè)計(jì)，省略中間分割線(xiàn)，產(chǎn)品圖片尺寸較大；從左到右，畫(huà)面尺寸越來(lái)越小，分割線(xiàn)從細(xì)到粗。淘寶和JD.COM的整體效果比易購(gòu)好。

　　標(biāo)簽：在標(biāo)簽的處理上，易買(mǎi)標(biāo)簽非常強(qiáng)勢(shì)，在頁(yè)面上脫穎而出；JD。COM的標(biāo)簽弱化了，和淘寶差不多，但是完全不同的標(biāo)簽風(fēng)格都一樣(穗和自營(yíng))，讓人覺(jué)得有點(diǎn)迷茫。

　　平面布局：淘寶和JD.COM無(wú)重傷，和諧，但易購(gòu)圖片和文字大小比例不協(xié)調(diào)，圖片和線(xiàn)框在視覺(jué)效果或像素上不對(duì)齊；IPhone  X不適合在網(wǎng)店底部。3.分類(lèi)頁(yè)面

　　風(fēng)格：淘寶用明顯的卡去除線(xiàn)條；JD.COM也用牌，牌感弱，是為了團(tuán)結(jié)；電商還是線(xiàn)框歧視，整體歧視效果不好。

　　品牌：淘寶和JD.COM在文字處理上用的顏色不多，而容易買(mǎi)到的顏色用的非常多，削弱了品牌感，沒(méi)有帶來(lái)任何優(yōu)勢(shì)。

　　4.產(chǎn)品詳細(xì)信息頁(yè)面

　　我只從節(jié)奏的角度看這一頁(yè)。上圖已經(jīng)標(biāo)出了每頁(yè)的節(jié)奏給我的感覺(jué)。淘寶整體節(jié)奏感較好，嚴(yán)重性適中；JD.COM和一狗在節(jié)奏感上都存在一些問(wèn)題。如果重節(jié)奏之間沒(méi)有輕節(jié)奏，他們就會(huì)缺乏呼吸的感覺(jué)。

　　5.購(gòu)物手推車(chē)

　　風(fēng)格效果：淘寶不使用卡式；JD.COM用卡，這導(dǎo)致了很多空白，但沒(méi)有帶來(lái)任何優(yōu)勢(shì)。蘇寧易購(gòu)略顯擁擠，沒(méi)有亮點(diǎn)。

　　平面布局：淘寶整體很和諧；JD.COM圖片全部使用白色背景，很好的保持了統(tǒng)一性；JD.COM使用了很多設(shè)計(jì)細(xì)節(jié)，如字體大小、粗細(xì)、字體、顏色等。但整體效果不理想，略顯瑣碎凌亂；蘇寧易購(gòu)的文字大小和間距不協(xié)調(diào)，帶來(lái)?yè)矶隆?/p>

　　其他細(xì)節(jié)：JD.COM標(biāo)簽不同于搜索結(jié)果頁(yè)面的弱化，而是非常強(qiáng)化，導(dǎo)致視覺(jué)焦點(diǎn)混亂，按鈕小，操作不方便；易買(mǎi)標(biāo)簽處理比JD.COM更收斂；電子商務(wù)底部的標(biāo)簽與其他部分沒(méi)有區(qū)別。浮框像廣告，效果不好。數(shù)字修改框筆畫(huà)太硬，比例不協(xié)調(diào)。

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

　　整體風(fēng)格：淘寶和Tesco都是明牌，蘇寧易購(gòu)是廣義的牌。

　　這里主要說(shuō)一下容易購(gòu)買(mǎi)的問(wèn)題：《我的特別秀》的大塊不平衡色塊出現(xiàn)在第一屏是非常不合適的，有些圖標(biāo)沒(méi)有效果，內(nèi)容上也有一些bug。

　　7.順序

　　淘寶和JD.COM的訂單頁(yè)面?zhèn)€人認(rèn)為沒(méi)什么嚴(yán)重的，淘寶有改編的問(wèn)題。蘇寧易購(gòu)有很多問(wèn)題，首先是頂部“常購(gòu)單”沒(méi)有bug，然后圖片不符合購(gòu)物車(chē)等地方的款式，商品之間的分割線(xiàn)有時(shí)不存在，間距有問(wèn)題。

　　三.總結(jié)

　　電商APP設(shè)計(jì)不同于網(wǎng)站建設(shè)。區(qū)別在于電商APP設(shè)計(jì)最終還是在UI設(shè)計(jì)上。跟隨設(shè)計(jì)潮流，統(tǒng)一、排版和諧等設(shè)計(jì)元素是其設(shè)計(jì)優(yōu)勢(shì)。設(shè)計(jì)風(fēng)格僅次于設(shè)計(jì)目標(biāo)。當(dāng)設(shè)計(jì)風(fēng)格不能很好的滿(mǎn)足本頁(yè)面的設(shè)計(jì)目標(biāo)時(shí)，建議重點(diǎn)關(guān)注設(shè)計(jì)目標(biāo)。強(qiáng)行使用這種風(fēng)格，得不償失。

　　廣州建站公司建議開(kāi)發(fā)電商app的用戶(hù)在設(shè)計(jì)app時(shí)，可以圍繞自己的需求和意愿，選擇如何設(shè)計(jì)好app，為我們做出從PC到手機(jī)的進(jìn)化，將電商網(wǎng)站建設(shè)推向移動(dòng)app建設(shè)。