青衫的首页装修总结报告 淘宝经验之谈

自2018年8月起，我开始由拆解分析改为写总结报告，

 

目录

一：杂七杂八的知识点

二：首页装修的页面结构

三：手机端和PC端不一样的地方

四：首页装修中那些反人类的设计

五：客户为什么要进首页

六：尺寸

一：杂七杂八的知识点

1、店铺装修需要后期看装修分析和热图进行优化

从这个热图可以看你店铺那里被点的多，从而找到大家的喜欢，那里点得少或者根本没人点的就是次要的或者不重要的

2、天猫二级页面可以通过绝对定位实现全屏，集市店无法使用绝对定位的方式实现全屏，但可以同店招一样通过背景叠加的方式实现伪全屏，背景大小不能超过1MB（具体以淘宝更新公布为准）

3、切片之后会有一个1象素的分隔符，虽然看不见，但也需要上传替换掉，否则切片会错位——《立体感网店旺铺》

4、插入图片注释可以增加搜索的收录——《电商视觉营销P-190》

5、要考虑到维护的方便问题：PC端不能把代码直接放在一个模块里，修改起来麻烦。手机端也不能把所有内容都放在一个自定义模块里。如果后期删除中间的，不加新的内容中间就会空白。

6、如果懂代码，要做动效就以切片的方式装修，反之可以直接使用热点。

7、首页的设计难点在于文案，光看图很难吸引卖家的主意力，所以我们要先写文案，然后才是设计，而不是一边设计一边写文案。

8、活动不需要大红大紫的设计，那样直接买个版套上去就可以了。要有品牌感，

把标签加上去：618、双11、利益点写明。

 

二：首页装修的页面结构

从上往下数：依次为店招——轮播或首屏图——活动导航和分类——优惠券领取——主推产品——楼区——页尾

市面上90%都是这个结构、产品在10件以内的话轮播效果和楼层可以不用、直接按主推的标准去设计。

主推产品一个屏幕放一个产品，需要设计成海报的形式。海报上可以直接放产品加文字，追求极简，根据不同的情况也可把产品的正面和背面合成在一起、也可以加入细节。

活动区，优惠券不是必须的，这要看客户做不做活动。

放置在首页的产品超过10件就考虑盖楼。每楼可放5-9件商品，超过的，就加入查看更多的按钮。不超过的没必要加入查看更多的按钮，有点画蛇添足。

页尾是必须的，一般要放返回顶部或者收藏本店的按钮，或者是扫描进入手机端的二维

码。也有放产品分类的。具体根据客户想法来定，没有想法我就放二维码。

 

轮播&首屏图

 

手机首图统一尺寸为智能版750X950、采用竖式构图，抛弃原来的横式。

轮播的形式固然可以增加动感，但需要滑动才能看见，所以能不轮播就不轮播。

分类

首页的目的是为了让人快速地找到产品，所以分类显得尤为重要、尤其是当产品多于30件或上百件的时候，就需要多级分类了。

产品如果少于10件，那就不需要分类，直接展示即可。

原则上每一个类别不超过十件商品，如果超过就再分一个类。

分类的目地是减少顾客的购物路径，快速找到心仪的商品，而不是营造品类丰富的感觉。

产品：可以单卖也可以搭配组合卖。

 

二级页&专题页

点击后能跳转到这个设计的二级页。如果是跳转到没设计的页面的话就显得很不用心

专区：2件9折专区、上新专区、清仓区、换季清仓、

专辑：双面昵专辑、

会场：瑜珈服会场、5月上新、天天特价

品牌：请参考《如何设计一个品牌专题页》或《专题页设计总结》

 

 

楼层

每一个楼层容纳5-9件商品，超过的，就加入查看更多的按钮。越多产品会显得越拥挤，理想的数量是6件。

 

4、楼区怎么分

一楼：最受妈妈好评

二楼：补钙

三楼：DHA

四楼：抗过敏

 

 

三：手机端和PC不一样的地方

PC端1920宽，手机端750宽，

PC端横构图，手机端竖构图。

一般先设计手机端，然后再修改为PC端。因为手机端流量占比95%，要优先设计好上线运行。

PC端和手机端配色要统一，产品的排列顺序要统一，活动信息要统一，所用的字体要统一，风格要统一。

 

不可能做了PC端就免费送手机的端，因为：

PC端和手机端不能简单的等比例缩放，字体间距，大小都要重新优化。

PC端和手机端都要一重新加链接，地址不一样的

 

四：首页装修中那些反人类的设计

 

首页装修的功能多达上百种，但真正有用的不过四五种功能。

我认为首页就是一个挑选商品的地方，排放得整整齐齐，让人不迷路才是最关键的。

一切要从人性化的角度出发，不要因为新奇而添加一些所谓强大却复杂的功能：

 

1、悬浮导航

遮挡住页面特别难受，尤其在14寸笔记本电脑上，简直比弹穿广告令人抓狂。我认为导航已经有分类页和店招了，悬浮导航根本没必要。

反人类指数：★★★★☆

 

2、闪烁效果

当我们查找商品的时候会需要安静，不想页面到处闪烁，所以如果为了突出重点，一两个闪烁即可。

反人类指数：★★★★☆

 

3、点击商品之后本意是想直接跳转到商品介绍页，而有的却跳转到了产品分类页，这无疑增加了我的购买路径，解决的办法是加两个按钮，一个查看本产品，一个进入分类。

 

4、其它

跑马灯，GIF动感、等等都是反人类的设计，即复杂又效果不佳，例如GIF手机端无法显示，而且一步一卡，三步一停，谁有那个耐心看。

 

五：客户为什么要进首页

买食品我是想想凑单省运费，买电钻我是想看看有没有配件、所以简洁、高效是主要的，很少有人是为了欣赏你的大作而进首页。

 

六：尺寸

 

手机端尺寸

智能版美颜切图：宽：750px 高335px-2500px

非智能版自定义：640px = 80px/格X8

 

PC端参考线

 

950宽 ：485、1435

990宽 ：465、1455

1200宽：360、1560

店招高：120 导航高： 30