久久九九久精品国产_成人区精品一区二区婷婷_国产激情一区二区三区_窝窝午夜理论片影院

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

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

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

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

　　一、淘寶改版

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

　　1.主要修訂頁面

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

　　2.個人主頁

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

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

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

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

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

　　3.商店主頁

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

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

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

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

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

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

　　5.動力效應(yīng)

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

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

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

　　二、淘寶等競爭產(chǎn)品

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

　　1.主頁

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

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

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

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

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

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

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

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

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

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

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

　　5.購物手推車

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

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

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

　　6.個人主頁

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

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

　　7.順序

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

　　三.總結(jié)

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

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