本人大学本科念的是景观设计，从事电商行业也不算资深，

大学毕业从事了半年专业对口的工作之后，误打误撞跳入电商设计这个苦逼的行当。

但从业这些年来算是饶有兴致，从事有兴致的工作最大的好处就是你不会觉得累。

常在派代上吸别人的干货，现在也冒个泡吐点货，是不是干货你自己拿主意。

前段时间在构思重新做一个店铺首页，思考了很多，也翻了很多店铺的首页，将一些想法贴上来听听各位的意见。

进入正题：

太多太多人认为店铺首页应该是堆满了几乎所有宝贝的一个页面，琳琅满目任君挑选。

其实你们错了，大错特错。

在淘宝（含天猫），除开大店不说，一般的店铺首页并非流量的第一到达页面，75%以上的首页流量是从宝贝详情页过来的。所以，做首页之前要分析，为什么客户会从详情页跳转到首页？

我可以想到的有以下几点：

A.想要找寻与到达页面相类似的产品。

B.想要找寻可以合单购买的产品。

C.想要了解店内的促销活动。

D.想要了解这家店铺的规模。

E.同行对到达页面（宝贝描述或30天内销量）感到满意，想更进一步观察此店。（往往再从首页跳转到购买心得评价页面）

正因如此，首页如果能够满足以上需求（请忽略E），便能够将大部分首页流量重新引入店铺的其他宝贝内页中，将流量再次利用起来，间接降低了流量成本。这就是首页的作用！

要知道首页是否发挥到了其应具备的作用，最最直观的就是从首页跳失率来判断；同时，效果还会在全店PV与UV的比例中体现出来，首页和关联推广做好了，这个比例就大了。

绝大多数的店铺首页设计都是将页面区块化，按产品类别分区，按促销手段分区，按风格分区，按功效分区等等，分类方式层出不穷，不变的一点就是【首页堆满了大大小小各种商品怎么滚都滚不到头】。

会这么做的思路往往是：将尽可能多的产品展现在顾客面前，就更容易让他们找到喜欢的产品，从而促成购买。

我想告诉你们的是：这么想就大错特错了。（只针对中小卖家而言，大店的品牌认知度强，可以这么做。本文只针对中小卖家，大店请无视。我后面就不再啰嗦备注了。）

我做过测试，将店铺的产品尽可能多地展现在首页。有些分区款式不够的时候，就将各种属性的同款产品都堆上去（例如同款服装的不同色）。

放置一段时间后，通过量子统计中的店铺装修热力图来统计首页的点击。

你知道这么做之后流量往哪儿跑了吗？

最热点击为：

A.店铺爆款或热卖款。

B.左侧导航条。

A应该大家都可以理解，

好处就是：人见人爱的款，摆哪里都有人点。

坏处更大：人见人爱的款，摆它旁边的都没人点。

变化更大的是B，B的点击量比修改前增加了近2倍。

为什么这里的点击增加了这么多？因为顾客觉得乱，觉得没头绪，觉得不知道该怎么选了！！所以他们去了导航条那儿~

那么，首页真正应该是什么样的呢？

A.塑造店铺形象，做得好的可以让顾客记住你的店。

B.展现主推产品，因为主推产品是你爱我爱大家爱的产品，更容易促成点击跳转。

C.分类导航，因为到达首页的顾客往往都已经带有目的性，如果他没有被你的主推产品吸引，那么分类导航便能挽回这群人，让他们继续往店内找寻。

够了，别再弄一堆乱七八糟的东西来扰乱顾客的思绪，能有几个人像你一样慢慢盯着你的产品一个接一个瞎欣赏？ 有这些就够了。

想好这些之后，我就开始着手设计店铺首页。个人要求如下：

A.与众不同。（只有与众不同才容易让人记住，淘宝店铺太多，顾客早已麻木）

B.布局舒服。（看着舒服，找着舒服）

C.用色简洁。（这一点主要是为了提升页面访问速度，做过web设计应该都知道对图片大小而言，GIF格式决定大小最主要的是色彩，JPG格式决定大小最主要的是尺寸。同时，这么做也略带有个人喜好，不同设计师不同喜好，不必较真）

最终的设计稿如下（读图缓慢请耐心等待，点击可放大）：

页面分为上下两大块。上部采用亮蓝色，下部采用橘红色。两色均较醒目，且互为反色，冲击力强。

亮蓝色仅占据了页面第一屏的位置，大量运用了直角。

通过直角、冷色、完全对称的居中排版及大面积的留白带给顾客正式又略微带点严肃的视觉，第一屏不出现产品图片，仅通过广告语【WE MAKE WONDERFUL SHOES | 我们只做很棒的鞋子】来建立良好的第一视觉印象，在潜意识里植入【鞋子很棒】的概念。紧接着便是一个通栏的简易分类，这是根据累计数据统计出来的7个最热点击的分类。

再下面就是首页的主体：橘红色部分。

橘红色为暖色，较容易激起购买欲望，同时采用柔软的圆角线条，给予一种“舒爽”的视觉。这部分的顶部展示了店铺促销活动内容，【全场包邮（最得顾客好感的促销手法）】及【满立减】。

其后采用了一个全新构思的形式，我在这里把它称之为【导航】，但不是店铺左侧导航条所代表的导航，你可以认为是像凯X德汽车导航仪那样的导航，那好吧，为了避免概念混淆，我在这里把它称之为【凯X德式导航】。

简单来说，这个【凯X德式导航】只是将所有的店铺主推产品串在一起。

其实，他起到的作用很明显，图中的【凯X德式导航】很大程度上引领了第一次到达这个页面的顾客的视线，不知不觉中他们会跟随【凯X德式导航】一个宝贝一个宝贝地看下去，甚至会引领部分顾客的鼠标轨迹，哈哈~

这样一来，很大程度地降低了顾客的滚屏速度，让他们以较慢的速度浏览了全部的主推产品，经测试，很大部分的流量都落在了路边的各个宝贝上。

这么一个相对新颖的形式，相信能够让你略微惊喜一下，那么你觉得顾客是不是似乎也更容易记住这家店铺了呢？

还不够，还有最后一道防线：

在【凯X德式导航】的尽头设计了一个足够详尽的分类导航，将滚屏到最后的那部分流量引至店内其他分类页。

经测试，首页跳失率减少了近60%，基本满意。

看到有同学提出要求看数据，我这边不方便透露具体数字，给个比例大家参考吧，信不信由你。

PV:UV从2:1增长到3:1，访问深度是之前的1.5倍，人均店内停留时间比之前多了68秒。

附高清无码大图（读图更缓慢请更耐心等待，点击可查看大图）：