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

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

二 設(shè)計(jì)

1.迷你購物車

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

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

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

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

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

2.list頁和detail頁

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

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

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

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