淘寶購(gòu)交互設(shè)計(jì)心得(2)

交互的價(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)物車

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

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

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

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

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

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

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

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

為了保證進(jìn)口商品能更加吸引用戶，我們將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ō)也是很重要的。