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

　　淘寶購(gòu)便利是快消品銷(xiāo)售的“生活平臺(tái)”，讓市民足不出戶(hù)就可以買(mǎi)到超市生活用品，并可以享受24小時(shí)之內(nèi)送貨上門(mén)。

　　一 準(zhǔn)備

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

　　沒(méi)有經(jīng)驗(yàn)的情況下，最好的完成目標(biāo)的方式就是借鑒。看國(guó)內(nèi)外很多線(xiàn)上超市：

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

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

　　leshop 清晰的導(dǎo)航，清晰的list的展示(標(biāo)類(lèi)商品用列表展示也是不錯(cuò)的選擇)

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

　　天貓超市 整個(gè)網(wǎng)站看起來(lái)很高端，但是detail頁(yè)右邊只有購(gòu)物車(chē)，沒(méi)有其他的關(guān)聯(lián)營(yíng)銷(xiāo)，是否會(huì)導(dǎo)致購(gòu)物的連續(xù)性降低呢?

　　2.購(gòu)便利要抓哪些特點(diǎn)來(lái)突破?

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

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

　　list：這是一個(gè)最實(shí)用的頁(yè)面，能直接影響購(gòu)買(mǎi)，盡量在這個(gè)頁(yè)面讓用戶(hù)直接產(chǎn)生購(gòu)買(mǎi)。用戶(hù)怎么方便使用就怎么設(shè)計(jì)。

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

　　3.交互設(shè)計(jì)師的價(jià)值在哪里?

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

　　二 設(shè)計(jì)

　　1.迷你購(gòu)物車(chē)

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

　　創(chuàng)意點(diǎn)看到左右的購(gòu)物車(chē)都是縱向的列表模式的，然而列表模式和大圖模式其實(shí)是不分伯仲的，只要操作手勢(shì)輕松，大圖模式用戶(hù)是否也可以接受呢?雖然沒(méi)有先例，但是不妨一試。于是橫向的大圖模式購(gòu)物車(chē)誕生了。

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

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

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

　　2.list頁(yè)和detail頁(yè)

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

　　為了保證786分辨率的情況下能看到完成一行商品櫥窗+購(gòu)物車(chē)展開(kāi)+操作條 我們將操作條從三行減少到了一行

　　為了保證進(jìn)口商品能更加吸引用戶(hù)，我們將detail擴(kuò)大到460*460

　　在做好之后經(jīng)常會(huì)漏掉很多報(bào)錯(cuò)頁(yè)面等等，這些都是基礎(chǔ)沒(méi)打牢導(dǎo)致的，所以了解后臺(tái)知識(shí)，前端知識(shí)，測(cè)試知識(shí)對(duì)交互設(shè)計(jì)師來(lái)說(shuō)也是很重要的。

　　三 問(wèn)題

　　1.樣or件or種

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

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

　　2.大圖or列表

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

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

　　后來(lái)我們覺(jué)得用ABtest，看數(shù)據(jù)來(lái)說(shuō)話(huà)。

　　A列表模式：

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

　　2. 模擬用戶(hù)在現(xiàn)實(shí)場(chǎng)景下逛超市的習(xí)慣：

　　沖動(dòng)型：看到商品→看到價(jià)格→購(gòu)買(mǎi)

　　冷靜型：看到商品→看到價(jià)格→看到規(guī)格→購(gòu)買(mǎi)

　　3. 我們前期的商品不會(huì)很多

　　B大圖模式：

　　1. 能在一頁(yè)看到更多的商品

　　2. 淘寶用戶(hù)養(yǎng)成了進(jìn)DETAIL進(jìn)行購(gòu)買(mǎi)商品的習(xí)慣

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

　　最后由于項(xiàng)目時(shí)間緊沒(méi)有采用ABtest，用了保險(xiǎn)的大圖模式。(列表模式不方便透露了。)

　　四 思考

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