隨著移動互聯網的攻擊，網站建設已經不能滿足企業的需求。很多有產品的企業已經開始蠶食移動市場，比如微信微信官方賬號、微信小程序、移動APP建設、移動網站建設、手機登陸頁面建設等。而各種類型中最有代表性的就是電商APP的設計。電商APP是所有APP的精華，其技術性和層次性都高于其他行業產品，所以應該是一個能夠用新思維搭建移動APP的

　　任何有建設電子商務網站經驗的人都知道，電子商務行業可以大也可以小。大的可以包括我們生活中的所有產品，比如工業品，日用品，新鮮果蔬，甚至新鮮的，小的可以包括我們生活中的一些品類。例如，鞋類加工廠圍繞一個品牌進行加工，從而為該品牌設計一個交易平臺。

　　電子商務APP是現代日常生活中經常使用的應用。每一次更新和修改都是業務的拓展，是用戶需求的滿足，是消費趨勢的引領和追隨。

　　摘要：以淘寶APP為例，分析了電子商務APP的構建，并從重點頁面分析了淘寶、JD.COM、蘇寧易購三大綜合電子商務平臺的產品設計，讓大家對電子商務APP更加熟悉。

　　一、淘寶改版

　　前段時間淘寶做了一個修改，這個修改是循序漸進的，做了更多的A/B測試。

　　1.主要修訂頁面

　　從視覺上看，明顯去掉了大圓角和線條的卡片，整體風格統一而輕盈。大圓卡沿襲了iOS11的風格(尤其是在App  Store中)，卡讓信息更集中，模塊感更強；圓角卡本身也比原卡類型增加了更多細節；圓角大的卡，親和力高，生動活潑，也符合淘寶人的定位。

　　2.個人主頁

　　通過新舊版本對比可以看出，88會員和卡券的優先級有所提高，會員的信息更加集中和突出。這也印證了過去兩年火熱的會員機制。在帶來新產品的成本和難度越來越高的情況下，整合老用戶可以帶來更多的價值。

　　新版卡片非常突出，去掉了大部分線條，用塊代替線條，表達層次關系。

　　88會員和最新物流滾動呈現，真正解決了有動態效果的問題，從時間軸上解決了信息量大，空間有限的問題。同時，動態效果增加了用戶吸引力。

　　在beta版中，這個頁面主要看到兩個變化，一個是圖標改為原來的填充類型，一個是動態滾動的節奏。

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

　　3.商店主頁

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

　　再說說這次的A/B測試，時間比較長(從7。7.2比7。8.2目前目測后應該給出結果為8。0).店鋪頁面導航的巨大變化會對已經形成習慣的老用戶產生一定程度的影響，重新調整學習頁面，有點類似于主動抑制(在認知心理學中，是指之前學到的材料對后來學到的材料的維護和回憶的干擾)。新設計的目的是方便用戶前期快速學習，中后期快速使用。對于中后期的快速使用，需要一段時間的鋪墊才能獲得數據。這個測試應該區分不同的用戶。簡單來說就是測試新老用戶對新老版本的學習，以及熟悉新版本后的使用情況。

　　4.物流細節

　　這件作品可以說是風格上的一大轉變。可視化用于顯示包裹的位置和即將進行的操作，增強了用戶的感知(降低了理解的難度)，進一步增強了對商品信息的掌控感。比原文展示生動多了，風格接近等待外賣的訂單頁面。可視化當然可以展示更多的信息，但是信息傳遞的速度并不一定比文字快，在用戶未經訓練的情況下，不同的人對圖形會有不同的理解。但是很多用戶都是在外賣App的頁面上接受過教育的，所以相信這個理解不會太難。但是在后續的優化中還是要逐步突出信息的重點。

　　除了風格上的巨大變化，物流詳情頁還有場景細分的特點，不同場景有所區別。比如只是物流詳情頁，頁面上突出顯示的信息根據不同的場景有所不同，比如：無包裹投遞——無包裹投遞——快遞送達——到達菜鳥站/其他快遞點——簽收。包裹收齊后突出快遞信息，配送時突出調度員信息。

　　與場景細分區分開來，讓用戶得到目前最需要的信息，無疑是一個很好的起點。但是從上圖來看，信息有快遞信息等三種樣式，而且位置不統一。如果用戶在不同的店鋪買了幾件商品，快遞員打電話說我是XX快遞，快遞員給你放在某個地方。這時候想知道是什么貨，就打開物流明細，找快遞信息，發現快遞信息不在原地圖下。搜了一會，發現放在快遞下面了。這個例子意味著，當你在不尋常的情況下獲得一些信息時，你可能需要支付額外的學習成本。但是，在7的測試版本中。7.8、快遞信息的樣式減少為兩種，這是一種妥協。在我看來，場景細分的出發點是好的，但風格和位置這兩點至少有一點是固定的，這樣既不會過多增加用戶的學習成本，又能覆蓋一些概率小的場景。

　　5.動力效應

　　這兩張圖是店鋪頁面頂部的動態效果。當用戶滑下頁面時，頂部的信息會發生變化，這可以看作是一種細分場景。通過動態效果，過渡很完美，過渡的流暢感會讓用戶對平臺感覺好一點。

　　解決我的淘寶頁面動態效果的問題，上面已經提到了。右邊有好貨頁面。當用戶滑動頁面時，《攻略推薦》欄目中的圖片具有依次展示、吸引眼球、給人一點驚喜的效果。

　　總結起來，淘寶改版的設計角度可以概括為：設計遵循目標，品牌和成員突出，設計趨勢跟隨，場景細分，視覺展示和動態效果流暢。另外，淘寶對設計和測試的態度是設計解決實際問題，設計需要驗證，測試需要嚴謹。

　　二、淘寶等競爭產品

　　這里只選擇了Tesco和蘇寧易購與淘寶在幾個重點頁面進行對比。這里主要從視覺的角度來說問題。這里幾乎沒有涉及業務、跳頁等問題。

　　1.主頁

　　淘寶：整體看起來傷的不算嚴重，也不使用卡式。

　　JD。COM:淘寶改版后不久也改版上線了。這里第一屏圖標的卡牌類型比較生硬，為了卡牌，讓卡牌好看。JD.COM斯派克的整潔度不高，有些是左偏右。“日常購物”這種極具裝飾性的風格，也與整體緊湊的卡牌風格不符。“東家小院”地板上的小標題顏色跳躍，有很大的篡奪主人角色的感覺。

　　蘇寧易購：還沒修改。這層的均勻度不高，和JD.COM差不多。同時又缺乏層次感，有些是漸變的，很不一致。“購物實惠”樓層視覺不平衡，信息水平很成問題。

　　2.搜索結果頁面

　　風格：淘寶采用無框設計，省略中間分割線，產品圖片尺寸較大；從左到右，畫面尺寸越來越小，分割線從細到粗。淘寶和JD.COM的整體效果比易購好。

　　標簽：在標簽的處理上，易買標簽非常強勢，在頁面上脫穎而出；JD。COM的標簽弱化了，和淘寶差不多，但是完全不同的標簽風格都一樣(穗和自營)，讓人覺得有點迷茫。

　　平面布局：淘寶和JD.COM無重傷，和諧，但易購圖片和文字大小比例不協調，圖片和線框在視覺效果或像素上不對齊；IPhone  X不適合在網店底部。3.分類頁面

　　風格：淘寶用明顯的卡去除線條；JD.COM也用牌，牌感弱，是為了團結；電商還是線框歧視，整體歧視效果不好。

　　品牌：淘寶和JD.COM在文字處理上用的顏色不多，而容易買到的顏色用的非常多，削弱了品牌感，沒有帶來任何優勢。

　　4.產品詳細信息頁面

　　我只從節奏的角度看這一頁。上圖已經標出了每頁的節奏給我的感覺。淘寶整體節奏感較好，嚴重性適中；JD.COM和一狗在節奏感上都存在一些問題。如果重節奏之間沒有輕節奏，他們就會缺乏呼吸的感覺。

　　5.購物手推車

　　風格效果：淘寶不使用卡式；JD.COM用卡，這導致了很多空白，但沒有帶來任何優勢。蘇寧易購略顯擁擠，沒有亮點。

　　平面布局：淘寶整體很和諧；JD.COM圖片全部使用白色背景，很好的保持了統一性；JD.COM使用了很多設計細節，如字體大小、粗細、字體、顏色等。但整體效果不理想，略顯瑣碎凌亂；蘇寧易購的文字大小和間距不協調，帶來擁堵。

　　其他細節：JD.COM標簽不同于搜索結果頁面的弱化，而是非常強化，導致視覺焦點混亂，按鈕小，操作不方便；易買標簽處理比JD.COM更收斂；電子商務底部的標簽與其他部分沒有區別。浮框像廣告，效果不好。數字修改框筆畫太硬，比例不協調。

　　6.個人主頁

　　整體風格：淘寶和Tesco都是明牌，蘇寧易購是廣義的牌。

　　這里主要說一下容易購買的問題：《我的特別秀》的大塊不平衡色塊出現在第一屏是非常不合適的，有些圖標沒有效果，內容上也有一些bug。

　　7.順序

　　淘寶和JD.COM的訂單頁面個人認為沒什么嚴重的，淘寶有改編的問題。蘇寧易購有很多問題，首先是頂部“常購單”沒有bug，然后圖片不符合購物車等地方的款式，商品之間的分割線有時不存在，間距有問題。

　　三.總結

　　電商APP設計不同于網站建設。區別在于電商APP設計最終還是在UI設計上。跟隨設計潮流，統一、排版和諧等設計元素是其設計優勢。設計風格僅次于設計目標。當設計風格不能很好的滿足本頁面的設計目標時，建議重點關注設計目標。強行使用這種風格，得不償失。

　　廣州建站公司建議開發電商app的用戶在設計app時，可以圍繞自己的需求和意愿，選擇如何設計好app，為我們做出從PC到手機的進化，將電商網站建設推向移動app建設。