关于电商网站产品陈列设计的一些细节体验(图)

wz***

要讲细节的执行几天几夜都讲不完，只是个思路，当做参考！我下面的12条原则你加个问号，检查一下自己的网站/项目/店铺有没有都做了，当然不是所有类目都适合，交流以致用！大牛还有要补充的求帮续上几条。

如线下商场要重视动线和陈列一样，我们在线上的页面中也非常要重视关于陈列的一些细节！ 搞设计的习惯统一称为用户体验设计！我是基于在快消品大卖家的工作积累的实战经验上来谈谈这些内容，谦虚还是要的，抛砖引玉吧！当然有一点，无论怎么谈页面的用户体验，这仅仅是整个电商行为的一个环节，所以杜绝体验设计为王这种不负责任，毫无全局观的言论！

关于陈列

我这里讲的“陈列设计”并非建立在专业领域的概念，而是通过实战总结的经验，可能中间穿着“用户体验设计”的要点。

关于陈列设计要把握的几个原则是：

1. 让新顾客轻松找到产品，快速熟悉产品目录

2. 让老顾客第一时间看到上架的新品

3. 陈列的目的是让顾客做出决策

4. 在合适的位置推出主打产品！

5. 不要轻易的更换动线和布局

6. 每个功能模块所展示的产品数量要合理

7. 陈列的图片规格既要节省空间又要清晰表达产品特征！

8. 陈列中巧用文字和数据的影响

9. 每个陈列模块之间要有清晰的界限

10. 不要滥用广告图！

11. 把握陈列中引起购物欲望的元素

12. 陈列中不可忽视的即兴消费

13. （抛砖引玉，待续）

1. 让新顾客轻松找到产品，快速熟悉产品目录

不管您的店铺人气是否旺，新顾客是我们首要照顾的群体，刚进入你的网站新顾客有两种途径，一种是直接进了你的产品页面，另外一种是进入了你的首页！前者浏览完产品页面后如何让其继续浏览其他产品或者进入首页，则是导航和关联模块的设计的目标！这个还不在陈列的范畴内！所以后者是重点要讨论的！

进入首页后，如何让新顾客轻松的找到产品呢？

a. 搜索框和店内产品关键词

b. 清晰的图形化产品类目导航

c. 首页三部曲：新款，主推，热款

注：我这里根据快消品（服饰衣帽鞋包类）实战得出的结论，有些类目可能不适用。

以上a/b/c三种方式都可以选择；a搜索框针对那种网购经验丰富，或者资深网络群体，他们不需要直接展示，更喜欢自己去搜索，而关键词的链接则缩短了跳转流程。

b 图形化的产品类目导航放在首页悬浮侧边，或者副导航下面都可以让新顾客非常简洁的明了的了解店内产品的目录！

c 首页三部曲基本涵盖了店内主流消费的产品！所以每个区域展示的数量要合理安排，不至于让新顾客迷失在大面积的产品中，忘记了产品目录！
这里边有两种声音：

· 一种是从商家的角度出发，希望新顾客进来后把店内所有产品都看一遍！

· 另外一种是从顾客角度出发，帮助顾客尽快找到她想了解的产品！

根据产品的不同，选择不同的策略！如果产品差异不大，则需要引导其尽可能多的浏览产品！如果产品差异较大，则应侧重栏目的引导，小面积的覆盖！

这里淘宝店铺页面就暂时不举了，先放一个京东的页面分析。

2. 让老顾客第一时间看到上架的新品

老顾客入店有两个需求：

a. 关心最近的新品

b. 关心店铺活动或者促销

排除了老顾客直接购买愿望产品这个群体（当然如果要做细的话也可以考虑进去）

针对这两个需求，开发出陈列区域；

a 新品区域，这个区域一定是动态，对于产品更新频率比较大的类目相对来说比较好做，还有一个就是数量的多少，首页的空间是有限的，你不能一股脑儿把所有新品都往上堆，最重要的是把主推新品往前放，这里要注意的技巧是一要重视缩略图的大小要合理，淘宝上我基本选择220px * 220px，两排8款！标题banner高度不宜过高控制在30px以内！要明显的讲这个区域分开来，为了激发新品的点击量，在banner的地方可以设置一些助于提醒的因素如：“您还有【12款】新品未查看“ 这是从SNS网站上移植过来的办法，我在后来的数据统计中发现这种提醒对增加新款的点击率非常有效！

b 店铺活动或者促销。这个内容在陈列的时候也有很多方式！如：活动banner引导到新标签页面、直接首页全屏展现活动内容、首页精选几款作为引导。

先说活动banner引导到新标签页面；

这个很常见，banner的设计我一直主张“less is more”这个观点，用色要少，元素要少，把活动主题突出来！很多刚毕业的美工，喜欢在banner上做很多特效，加很多与主题没太大关系的元素，这恰恰会分散用户注意力，达不到影响深刻的效果！

好的banner需要让人有点进去的冲动，掌握两个词“简洁”“夸张”！这就是被人记住的办法！这里有两个让人们记住的技巧，分享给大家：
一是重复性；二是夸张！

重复性在设计里讲的是统一，配色要统一，不宜经常变换颜色，你现在看到绿色+橙色就知道是当当，看到淡绿色就知道是豆瓣，看到橙色就是淘宝一样！

其次是夸张，夸张的东西总是被人记住和好奇！大夏天你走在路上，突然一个穿羽绒服的人出现你面前，你一定会被其吸引！这个相信很多人在淘宝上看过一些令人叫绝的设计图片，如Mr ing的那张透气图片，这既是一种夸张的表达，但是为人所记住！

掌握了夸张这个原则，你在做创意图片的时候就能把握好思维的方向了！

其次说首页直接展示活动陈列的方式！

每个类目的不同的产品消费者有不同的消费习惯！考量活动内容是直接在首页展示呢还是放到一个新的标签页？我认为要应该考虑活动的目的！在旺季的时候，很多卖家即便不做活动也已经倒饱和负荷的状态了，此时做一些活动如果在首页直接展示产品内容很可能削弱原来正常首页到产品页流量（流量过于集中到促销产品上了），如果活动并不是以利润导向的，那么反而降低销售额了，而且又会增加大量的人力（策划啊，发货啊等）！