首页 > 网页教程 > 设计分享 > 分享淘宝购便利交互设计心得

分享淘宝购便利交互设计心得

时间:2013-01-31    来源:良无限-UED

前段时间一直在做淘宝购便利网站的交互,算是本人第一次真正意义上的做前台项目吧(之前一直是做的后台系统的交互),其中有一些设计上的心得和大家分享一下。

淘宝购便利是快消品销售的“生活平台”,让市民足不出户就可以买到超市生活用品,并可以享受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 

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

相关推荐
网页交互设计的一些理解
深挖交互设计的细节提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
电子商务网站如何设计高效易用的网站左侧导航树
网页视觉设计如何针对用户有效表达信息
交互设计之浅谈下意识设计
前瞻:2012年Web设计和开发的15个最新趋势
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻找最简单直接的解读办法
移动应用开发:无线终端用户理解工作方法分享
分享:体验设计师需要学习的一些前端技术
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
浅谈交互设计中的默认值对用户的影响
深入分析网页栅格系统的规范制作
深入谈交互设计之人人都懂交互设计
移动应用设计的横竖屏切换中的界面设计与体验提升
交互设计:移动应用与PC应用的交互差异浅析
交互设计师应该如何设计直观且有说服力的作品集
移动设备动画设计的12个原则分享
分析用户界面中扁平化设计的优缺点
富有灵感和创意的web布局及交互设计赏析
符合用户操作习惯的网站界面设计分享
18个超棒的响应式Web设计前端开发教程
在视觉设计中对像素的深度解析
网页设计中创新式布局与交互设计思考
换汤不换药?看应用们如何“为iOS 7设计”
产品设计:万水千山总是情 不要图片行不行
APP浏览体验设计的思考:如何理解用户的眼?
网页设计怎么破?创新式布局与交互的设计
四大网页设计秘诀:让用户第一眼就爱上你的网站
2014年Web网页设计的10大发展趋势前瞻

精彩推荐

热门教程