淘寶購便利交互設計心得

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

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

　　一 准備

　　1.現有的網上超市是什麼樣的?交互上有什麼優缺點?

　　沒有經驗的情況下，最好的完成目標的方式就是借鑒。看國內外很多線上超市：

　　mysupermarket 最下面的懸浮區是亮點，可以寫便簽，可以購物車，有物流說明。同時結構清晰，只是導航操作不是很直接，要劃過才能看到內容。

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

　　leshop 清晰的導航，清晰的list的展示(標類商品用列表展示也是不錯的選擇)

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

　　天貓超市 整個網站看起來很高端，但是detail頁右邊只有購物車，沒有其他的關聯營銷，是否會導致購物的連續性降低呢?

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

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

　　迷你購物車：超市有別於網店，特別的地方在於迷你購物車。模擬實際場景：超市有別於商場，前者可以把東西放在購物車裡最後一起結賬。購便利的購物車做的和其他網上超市不一樣，抓住購物車的核心功能和體驗即可。

　　list：這是一個最實用的頁面，能直接影響購買，盡量在這個頁面讓用戶直接產生購買。用戶怎麼方便使用就怎麼設計。

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

　　3.交互設計師的價值在哪裡?

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

　　二 設計

　　1.迷你購物車

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

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

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

　　我們的優勢是滿80包10公斤郵費，由於我們用的是淘寶的後台，購物車主界面沒發展示重量。所以重量也要通過小小的購物車來承載，怎麼做?我們想到了在價格後面加上了重量，同時跟著用戶的每次購物車操作聯動。下方加上郵費說明的鏈接，讓喜歡精打細算的用戶找到購物計算的樂趣。

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

　　2.list頁和detail頁

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

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

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

　　在做好之後經常會漏掉很多報錯頁面等等，這些都是基礎沒打牢導致的，所以了解後台知識，前端知識，測試知識對交互設計師來說也是很重要的。

　　三 問題

　　1.樣or件or種

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

　　我們的後台邏輯是淘寶統一的，所以只能用標識種類。我們要怎麼處理呢?用“件”：容易產生誤解;用“種”：太過於官方化，不親切;用“樣”：很親切，但是各地方理解不同 。。。。最後我們討論了很長時間決定采用比較隱約的方式：省去單位。這種方法在一號店的list面包屑上面有體現。

　　2.大圖or列表

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

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

　　後來我們覺得用ABtest，看數據來說話。

　　A列表模式：

　　1. 超市商品絕大多數為標類商品，用戶對商品規格需求比較明顯

　　2. 模擬用戶在現實場景下逛超市的習慣：

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

　　冷靜型：看到商品→看到價格→看到規格→購買

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

　　B大圖模式：

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

　　2. 淘寶用戶養成了進DETAIL進行購買商品的習慣

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

　　最後由於項目時間緊沒有采用ABtest，用了保險的大圖模式。(列表模式不方便透露了。)

　　四 思考

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