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

交互的價值對于每個團(tuán)隊每個項目都是而異的。比如這次的項目，有項目時間，實現(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之間的工薪階層，喜歡潮流，對進(jìn)口商品消費需求大，他們對區(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分辨率的情況下能看到完成一行商品櫥窗+購物車展開+操作條 我們將操作條從三行減少到了一行

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

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