中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

前段時間一直在做淘寶購便利網(wǎng)站的交互，算是本人第一次真正意義上的做前臺項目吧（之前一直是做的后臺系統(tǒng)的交互），其中有一些設(shè)計上的心得和大家分享一下。

淘寶購便利是快消品銷售的“生活平臺”，讓市民足不出戶就可以買到超市生活用品，并可以享受24小時之內(nèi)送貨上門。

一 準(zhǔn)備

1.現(xiàn)有的網(wǎng)上超市是什么樣的？交互上有什么優(yōu)缺點？

沒有經(jīng)驗的情況下，最好的完成目標(biāo)的方式就是借鑒?？磭鴥?nèi)外很多線上超市：

mysupermarket? ??? ??最下面的懸浮區(qū)是亮點，可以寫便簽，可以購物車，有物流說明。同時結(jié)構(gòu)清晰，只是導(dǎo)航操作不是很直接，要劃過才能看到內(nèi)容。

山姆會員商店??? ? ? ? ? 每個地區(qū)有特定的商品，和我們的產(chǎn)品相同。首頁、list、活動頁都可以直接在櫥窗選好想要商品的個數(shù)模擬真實場景。

?leshop??? ? ??? ? ? ? ? ? ?清晰的導(dǎo)航，清晰的list的展示（標(biāo)類商品用列表展示也是不錯的選擇）

一號店??? ? ? ? ? ? ? ? ? ? ?在大家有用漂亮的ui設(shè)計展示網(wǎng)站有多大牌時，一號店用了是讓各個年齡層都能接受的純文字，通俗易懂，怪不得大媽大嬸都會上一號店買呢。

天貓超市????? ? ? ? ? ? ? ?整個網(wǎng)站看起來很高端，但是detail頁右邊只有購物車，沒有其他的關(guān)聯(lián)營銷，是否會導(dǎo)致購物的連續(xù)性降低呢？

2.購便利要抓哪些特點來突破？

我們的用戶是20-40歲工薪階層，喜歡潮流，對進口商品消費需求大。便利購在服務(wù)上要做到最后一公里的突破，商品品種開始的時候可能不多，但是特點是進口商品多且便宜，滿80包郵，這些都是這個網(wǎng)站自身的優(yōu)勢，怎么樣才能在頁面上提現(xiàn)出來呢？除了的特色介紹頁面，幾乎不能提現(xiàn)交互上。再想想，既然以上看到的網(wǎng)站各有優(yōu)劣為何不取他們的優(yōu)勢融合在一起，再加上一些變化呢?

迷你購物車：超市有別于網(wǎng)店，特別的地方在于迷你購物車。模擬實際場景：超市有別于商場，前者可以把東西放在購物車?yán)镒詈笠黄鸾Y(jié)賬。購便利的購物車做的和其他網(wǎng)上超市不一樣，抓住購物車的核心功能和體驗即可。

list：這是一個最實用的頁面，能直接影響購買，盡量在這個頁面讓用戶直接產(chǎn)生購買。用戶怎么方便使用就怎么設(shè)計。

detail：一般用戶能到這個頁面幾率不會太高，除非對這個商品猶豫不決。這時我們要挽留他，盡量多家關(guān)聯(lián)銷售的地方。

3.交互設(shè)計師的價值在哪里？

交互的價值對于每個團隊每個項目都是而異的。比如這次的項目，有項目時間，實現(xiàn)能力，淘寶框架的約束，同時交互又要賦予這個網(wǎng)站一些特色。這次項目我做的最難的事不是怎么把它設(shè)計出來，而是不停的舍棄自己的創(chuàng)意內(nèi)容，留住最核心的。從而使整個項目能夠順利完成。

二??設(shè)計

1.迷你購物車

購物車是我們要打造的最有亮點的區(qū)域。每個網(wǎng)上超市都有購物車，購物車可以讓用戶調(diào)節(jié)商品，快速結(jié)賬。所以功能點一格都不能少。同時我們要把我們滿80包10公斤郵費的利益點拿上去，文案要讓用戶易懂。

創(chuàng)意點看到左右的購物車都是縱向的列表模式的，然而列表模式和大圖模式其實是不分伯仲的，只要操作手勢輕松，大圖模式用戶是否也可以接受呢？雖然沒有先例，但是不妨一試。于是橫向的大圖模式購物車誕生了。

如圖：列表模式，用戶都是使用是最方便的，一目了然的。大圖模式類似現(xiàn)在的淘寶櫥窗、iphone主界面等，我們的用戶是20-40之間的工薪階層，喜歡潮流，對進口商品消費需求大，他們對區(qū)塊模式也不會陌生。

我們的優(yōu)勢是滿80包10公斤郵費，由于我們用的是淘寶的后臺，購物車主界面沒發(fā)展示重量。所以重量也要通過小小的購物車來承載，怎么做？我們想到了在價格后面加上了重量，同時跟著用戶的每次購物車操作聯(lián)動。下方加上郵費說明的鏈接，讓喜歡精打細(xì)算的用戶找到購物計算的樂趣。

國內(nèi)商超的迷你購物車大多是劃過展開購物車，而點擊之后又回到大購物車頁面由于迷你購物車收起狀態(tài)區(qū)域很小，用戶容易造成誤操作。我們采用的是點擊購物車才能展開，防止用戶誤操作的同時充分展示我們的購物車特色。最后在將這些大圖模塊橫向舒展開來，在網(wǎng)站右下角懸浮，對整個頁面不會造成過多視覺干擾。

2.list頁和detail頁

list和detail是個功能性的頁面要做到如何讓用戶操作方便。我們對淘寶最大眾化的兩個頁面做了針對商超的細(xì)小優(yōu)化

為了保證786分辨率的情況下能看到完成一行商品櫥窗+購物車展開+操作條 我們將操作條從三行減少到了一行

為了保證進口商品能更加吸引用戶，我們將detail擴大到460*460

在做好之后經(jīng)常會漏掉很多報錯頁面等等，這些都是基礎(chǔ)沒打牢導(dǎo)致的，所以了解后臺知識，前端知識，測試知識對交互設(shè)計師來說也是很重要的。

三 ?問題

1.樣or件or種

這個問題是討論最激烈的，一度還郵件給天貓超市的設(shè)計師來進行討論了。一號店等很多非淘寶系網(wǎng)站“件”表示一個商品（同一種商品買了兩個，就是兩件），而淘寶系網(wǎng)站“件”標(biāo)識一種商品，（同一種商品買了兩個，就是一件）雖然常識情況下，大家都認(rèn)為前者是正確的，但是后者是為了優(yōu)惠活動的邏輯統(tǒng)一（我尋找天貓設(shè)計師得到的答案：從當(dāng)時的功能考慮因為我們的優(yōu)惠有部分是按商品的件數(shù)來計算折扣的，比如5件內(nèi)優(yōu)惠，但實際是說五種商品就能優(yōu)惠，你五種商品每個買幾樣我們不計算在數(shù)量里）。

我們的后臺邏輯是淘寶統(tǒng)一的，所以只能用標(biāo)識種類。我們要怎么處理呢？用“件”：容易產(chǎn)生誤解；用“種”：太過于官方化，不親切；用“樣”：很親切，但是各地方理解不同 。。。。最后我們討論了很長時間決定采用比較隱約的方式：省去單位。這種方法在一號店的list面包屑上面有體現(xiàn)。

2.大圖or列表

list到底是用大圖模式好呢還是用列表模式好呢？看了淘寶集市的list展示，你一定以為大圖模式是大家最認(rèn)可的。但是這點我和PD也產(chǎn)生了激烈的討論，還和淘寶用研的同事了解了數(shù)據(jù)情況，收益匪淺。

淘寶中的商品有標(biāo)類商品和非標(biāo)類商品之分。淘寶集市由于主要是非標(biāo)準(zhǔn)類商品，這類商品大多都要進詳情才能確定，大圖的話可以是list一屏展示更多的商品所以非標(biāo)類商品用大圖模式比較好。而非標(biāo)類商品用戶對產(chǎn)品本身都是了解的，對詳情不是特別關(guān)注，只要看看商品基本信息就能確定自己要不要買了，列表模式可以在list直接展示商品的基本信息，標(biāo)類商品的話列表模式是比較好的。當(dāng)然這些不是絕對的。

后來我們覺得用ABtest，看數(shù)據(jù)來說話。

A列表模式：

1. ? ? 超市商品絕大多數(shù)為標(biāo)類商品，用戶對商品規(guī)格需求比較明顯

2. ? ? ?模擬用戶在現(xiàn)實場景下逛超市的習(xí)慣：

沖動型：看到商品→看到價格→購買

冷靜型：看到商品→看到價格→看到規(guī)格→購買

3. ? ? ? 我們前期的商品不會很多

B大圖模式：

1.?????? 能在一頁看到更多的商品

2.?????? 淘寶用戶養(yǎng)成了進DETAIL進行購買商品的習(xí)慣

3.?????? 我們的商品前期可能少，后期會多主推商品少，其他商品也多的

最后由于項目時間緊沒有采用ABtest，用了保險的大圖模式。（列表模式不方便透露了。）

四 ?思考

雖然個人認(rèn)為交互設(shè)計師不是為了做出的作品與別人不同有新意而存在的（個人認(rèn)為交互設(shè)計師是以怎樣方便用戶使用網(wǎng)站對網(wǎng)站產(chǎn)生好感而存在的），但是通過了這次項目，我對交互設(shè)計師這個職位有了更深的理解。本來我們設(shè)計師有很多的想法，但是由于很多因素：上線時間由老板來定（選良辰即日）時間壓縮嚴(yán)重，受淘寶限制（我們本質(zhì)上是個店鋪）技術(shù)實現(xiàn)困難，沒有很好的用研數(shù)據(jù)下很難做判斷而最終沒有得到實現(xiàn)。畢竟這個作品是大家的作品，單單一個交互設(shè)計師是無法做成這個網(wǎng)站的。大家溝通一起努力，讓項目團隊認(rèn)可才是最基本的。用戶可行性測試不是很方便的情況下，試著讓項目團隊的人都成為用戶，很多交互方式大家可以一起來商量。當(dāng)然交互設(shè)計師也很有必要了解前端，后臺的一些基本知識，當(dāng)了解了他們的處理方法之后或許會對你的交互方式判斷有所幫助。

來源：良無限UED