淘宝购交互设计心得(2)

交互的价值对于每个团队每个项目都是而异的。比如这次的项目，有项目时间，实现能力，淘宝框架的约束，同时交互又要赋予这个网站一些特色。这次项目我做的最难的事不是怎么把它设计出来，而是不停的舍弃自己的创意内容，留住最核心的。从而使整个项目能够顺利完成。

二 设计

1.迷你购物车

购物车是我们要打造的最有亮点的区域。每个网上超市都有购物车，购物车可以让用户调节商品，快速结账。所以功能点一格都不能少。同时我们要把我们满80包10公斤邮费的利益点拿上去，文案要让用户易懂。

创意点看到左右的购物车都是纵向的列表模式的，然而列表模式和大图模式其实是不分伯仲的，只要操作手势轻松，大图模式用户是否也可以接受呢？虽然没有先例，但是不妨一试。于是横向的大图模式购物车诞生了。

如图：列表模式，用户都是使用是最方便的，一目了然的。大图模式类似现在的淘宝橱窗、iphone主界面等，我们的用户是20-40之间的工薪阶层，喜欢潮流，对进口商品消费需求大，他们对区块模式也不会陌生。

我们的优势是满80包10公斤邮费，由于我们用的是淘宝的后台，购物车主界面没发展示重量。所以重量也要通过小小的购物车来承载，怎么做？我们想到了在价格后面加上了重量，同时跟着用户的每次购物车操作联动。下方加上邮费说明的链接，让喜欢精打细算的用户找到购物计算的乐趣。

国内商超的迷你购物车大多是划过展开购物车，而点击之后又回到大购物车页面由于迷你购物车收起状态区域很小，用户容易造成误操作。我们采用的是点击购物车才能展开，防止用户误操作的同时充分展示我们的购物车特色。最后在将这些大图模块横向舒展开来，在网站右下角悬浮，对整个页面不会造成过多视觉干扰。

2.list页和detail页

list和detail是个功能性的页面要做到如何让用户操作方便。我们对淘宝最大众化的两个页面做了针对商超的细小优化

为了保证786分辨率的情况下能看到完成一行商品橱窗+购物车展开+操作条 我们将操作条从三行减少到了一行

为了保证进口商品能更加吸引用户，我们将detail扩大到460*460

在做好之后经常会漏掉很多报错页面等等，这些都是基础没打牢导致的，所以了解后台知识，前端知识，测试知识对交互设计师来说也是很重要的。