淘寶購交互設(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ì)師來說也是很重要的。
本文地址:http://m.likemindfilms.com/tutorial/id1326.html
您可能還喜歡
- 關(guān)于第三方注冊和本地注冊的選擇
- 8大網(wǎng)頁前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁設(shè)計(jì)中引人入勝的引導(dǎo)頁設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開始