拿2688来说模仿淘宝商城的细节问题

      不好意思，本来想在张兄的帖子里回来来着，结果写的太多了，就单开一贴子了，也方便大家都来讨论下。

      近期模仿淘宝商城页面的B2C站特多，可惜真正做好的没几个，小弟有幸服侍过一位号称中国最细心的IT大佬，所以对网站的细节抓的很好，下面就应张兄的要求，对2688的页面拍砖，以2688为例子来给大家说下淘宝商城页面上容易被忽略的细节。

　　2688的这个网站版本应该是同时借鉴了淘宝和淘宝商城的页面结构，不过以2688的定位来说还是应该多偏向淘宝商城

 　　因为现在访问淘宝首页的人多数都是“老淘宝”了，他们登陆淘宝，一般已经有了明确的购物目的，所以第一需求是快速找到自己想要的商品，所以淘宝首页的商品分类文字占了很大一部分，而且淘宝的商品分类之细致，也是其他网站比不了的。

　　而 2688的产品分类并没有淘宝那么细致，产品种类也没有淘宝丰富，不需要那么多复杂的分类，况且2688的访问者中有很多是新来的，这样杂乱的布局会让他们产生不了购物欲望。

　　我觉得有以下几个问题可以调整下，从上往下说了：

1、一般用户的习惯都是到首页先看左上角，所以网站LOGO一般都在这里，接下来，用户会习惯的浏览LOGO右侧的内容，而这里应该是B2C站展示其核心优势和网站定位的地方，这样会使用户在第一时间里了解网站，并对网站产生好感，我们来看淘宝商城在这个位置是“品质保证、现金积分、无理由退换货”，OK，淘宝商城的优势是不是一下就明了，那么认同这几点的顾客也会瞬间对网站产生好感。

　　而2688的这个首页相同位置却放了招收代购点的广告，这样很容易给人一种“创业信息站”的感觉。而本来应该在这个位置的却被放在最不起眼的右上角了，我觉得这个内容应该和代购点广告换个位置。而且代购点广告应该小一些，不要强了LOGO的势。

2、作为B2C站，首屏就相当于自己的店头，一定要表现出自己的实力来，手段一般都是面积大而清晰的大图+排列整齐的小图广告，内容、样式不能重复，为了确保大图的核心位置，一般都是大图为动态切换，小图静态。

　　再来看淘宝商城的首屏，该首屏很清晰的分成四层：

　　最上端的是淡色的通栏广告，把页头和页面内容分开，这样可以使核心大图在颜色选择上自由度更大，不会受到页头颜色的限制。（这点细节上的处理我认为对数B2C站都应该学习）。

　　再下一层自左向右是商城公告等文字内容/核心大图/游戏点卡、手机充值等文字内容。核心大图的两侧都是文字内容，而且文字的排列很密，进一步突出的核心大图。尤其值得一提的是淘宝商城的5幅大图切换图片都是有人在上面的，使整个网站显得更具亲和力，并产生了购物后幸福感的联想，这应该是学到了国外B2C站的精髓了。（而且淘宝商城首屏只有核心大图是动态的，既突出了大图的核心位置又不会使网站显得杂乱）

　　第三层是5幅单独的小图，要注意的细节是靠两侧的图片的主色调是最重的，包住了中间的三幅。使得浏览者不至于因为图片太多而目光发散。

　　第四层是第二屏的核心内容的一小部分，让人知道第二屏有什么内容，使网站第一、第二屏完美的结合在了一起。

　　再来看2688的首屏，看上去，该首屏的核心是密集的文字了，这对老会员来说还可以接受，但对于初次浏览者来说，他是不会花上好几分钟来浏览这些文字内容的。

　　再次，2688的首屏广告图片有2个部分，但这2个部分都是动态的，这样一来就显得网站首屏很杂乱，

　　最后，2688的首屏没有体现出第二屏的内容，人为的把首屏和第二屏切割开了，这样一旦用户对首屏内容不感兴趣就会离开网站，而淘宝商城那样处理就可以留住一部分对首屏不感兴趣，而对第二屏感兴趣的浏览者。

3、第二屏是留住客户最后的机会了

   　在第二屏，要尽可能的弥补首屏在内容上的欠缺，并进一步展示以下的内容。

   　淘宝商城在第二屏分了三层

   　第一层是商品类别的文字排列，文字排列整齐，字体、颜色一致，各列用颜色区分，各行由底色条区分，虽然文字密集，但是却给人一种清爽，整洁的感觉。

   　第二层是通栏广告，目的是把风格完全不同的第一层和第三层分开。

   　第三层是按产品类别区分的横栏，这层我们在下面会有详细的分析。

   　尤其注意的是，淘宝商城的第二页还是只有一处图片是动态的。

2688的第二屏分为4层

   　第一层是首屏的延续，左侧是文字分类，右侧是促销图片专区，可光是这么小的一个地方，就有2处图片在切换，显得太无序了。

  　 第二层是品牌专区，这层倒没什么，只是有些小品牌还是最好不要放这了。

   　第三层是新品推荐，又是动态的图片，加上第一层，这一屏就有三处动态图片了，而且产品图片下的文字还分成2层颜色，就显得网站更乱了。

   　第四层和淘宝一样，产品分栏，下面会重点讨论这个地方。

4、产品分栏

  　 产品分栏是2688和淘宝商城首页下半部分的核心，虽然结构类似，但是细节上还是要差出不少。

   　共同点：每一产品栏都分成三列，最做的主题图片，中间是产品展示，右边有所区别　　　　　　

　　　　　　其中产品展示区都是图片+文字的展示方式。

　　差别一：每个产品栏最右侧的一列，2688是另一类产品的小专栏，淘宝商城是同类商品的导购文字链。专栏的高度上2688要比淘宝商城低上不少。

        这点2个网站的选择本无份高下，但是2688很明显是在模仿淘宝商城，而这处却没有按淘宝商城的同样位置所占面积的比率来进行，从而打破了淘宝商城原来很科学的图片、文字等的空间比率。结果是视觉效果下降了好几个档次。

        个人建议，模仿行业领先者的时候如果不能超越，不如原样照搬。

   　差别二：2688的展品展示区所展示的4肤产品不显示价格，这点我不太认同，这里展示的产品，并不是非常热门的商品，而普通商品不标价格，谁会去关心呢？

          而且淘宝商城的4幅产品图片下的产品名称是2行，内容上除了产品名外还有主要卖点的介绍，对人的吸引力更强了。

   　差别三：每个产品栏的分格，2688是用不同颜色的窄条，淘宝商城用的是彩色边框+文字栏进行区分，对此差别的评价同差别一。

   　特别要指出的是，2688在这个区域犯了很多低级的细节错误，现指出如下：

   　一：厨卫家电的主题图片中，上半部分文字和下半部分图片没有自然衔接，和其他分栏的主题图片风格不同。

   　二：装扮女人的主题图片中，“德国全进口橄榄护肤系列”的文字太小，看不清楚。

　　三：装扮女人一栏中的“芬龄吸油面纸”产品图片和文字纵向错位。

　　四：品味男人的主题图片居然是个女人。

　　五：精品服饰一栏中的“女士低帮跑鞋”产品下的文字和同行产品的文字不在一条线上。

　　以上都是随眼就可以看到的问题，引用我以前老大的话“B2C网站不能让客户来给我们找问题。”

  　另外，淘宝商城在产品分栏中的几个细节也应该注意：

  　一：在产品类别文字（“服饰“、”运动户外“等）的后面，都有浅色的英文，前面都有一条竖线，使网站显得更加洋气。

  　二：产品展示区的四款配图片产品的图片之间都有浅色竖线隔开。文字链前都有三角符号引领。

5、最后说下网站的页尾部分

　　在淘宝商城的页尾部分也有一个经常被人忽略的细节，用宽屏的显示器看，页尾收底的浅灰色框向两端自然延伸，完全兜住了底部。

    　而2688的底部和顶部一样，都是被框死了。