淘宝店铺首页设计资料课件

淘宝店铺首页设计讲师：寇老师淘宝店铺首页设计讲师：寇老师认识淘宝店铺首页认识淘宝店铺首页一、淘宝店铺首页构成元素店铺页头（页头区）：店招、导航活动促销（内容区）：全屏海报、全屏轮播、优惠券店铺产品（内容区）：产品分类、主推产品店铺页尾（页尾区）：客服中心、购物保障、发货须知等一、淘宝店铺首页构成元素店铺页头（页头区）：二、淘宝店铺首页设计思路店铺页头页头店招放什么内容，页头导航总共需要几个导航分类内容，是否需要放品牌文案，是否需要着重表现收藏店铺，是否需要放活动内容等等。二、淘宝店铺首页设计思路店铺页头二、淘宝店铺首页设计思路活动促销：活动主题什么，内容是什么，文案的主次顺序，是否有需要重点展示的产品等等。二、淘宝店铺首页设计思路活动促销：二、淘宝店铺首页设计思路产品分类：店铺产品总共有几大分类，页面从上至下的摆放顺序是什么样的，每个分类模块里面放几个产品，产品是否需要主次区分，是用方格矩阵还是更灵活的展示方式，单个产品是否需要突出展示价格或折扣等等。二、淘宝店铺首页设计思路产品分类：二、淘宝店铺首页设计思路主推产品：主推产品有哪些，它们有怎样的区别和定位，它们的推介顺序是什么样的，它们的核心卖点是什么，是否需要突出价格和折扣等等。二、淘宝店铺首页设计思路主推产品：二、淘宝店铺首页设计思路店铺页尾：页尾模块一定要符合店铺风格和主题，色彩要一致；内容上可添加消保、7天无理由退换货等保障服务、客服联系方式、商品购物流程等。二、淘宝店铺首页设计思路店铺页尾：三、淘宝店铺店招设计技法天猫店招990PX*120PX（不含导航）天猫店招990PX*150PX（含导航）淘宝店招950PX*150PX（含导航）三、淘宝店铺店招设计技法天猫店招990PX*120PX（不含三、淘宝店铺店招设计技法（一）店招设计思路：以品牌宣传为主的类型：一般有着雄厚的实力，给力的产品，想要打造自己的品牌。名称、LOGO、关注、收藏等以活动促销为主的店铺：薄利多销，店招风格视活动主题来定，营造出一个活动氛围。店招上适当的加入一些红包或者优惠券领取的按钮。以产品推广为主的店铺：增加店铺主推产品的销量，通常在店招上放上两三款推广的产品。三、淘宝店铺店招设计技法（一）店招设计思路：三、淘宝店铺店招设计技法（二）店招设计原则：要直观明确的告诉客户自己店铺是卖什么的，表现形式最好是实物照片要直观明确的告诉客户自己店铺的卖点（特点、优势、差异化）。三、淘宝店铺店招设计技法（二）店招设计原则：三、淘宝店铺店招设计技法（三）店招设计要点：店铺名字告诉客户自己是卖什么的，品牌店铺可以标榜自己的品牌实物照片直观形象的告诉客户自己店铺是卖什么的产品特点直接阐述自己店铺的产品特点，第一时间打动客户，吸引客户店铺（产品）优势和差异化告诉我的店铺和产品的优势以及和其他的店铺的不同，形成差异化竞争三、淘宝店铺店招设计技法（三）店招设计要点：三、淘宝店铺店招设计技法（四）店招制作规范、流程：确定风格：视产品而定布局：店招尺寸、店招构成、区块划分左边或者中间放LOGO，LOGO之下放品牌词或广告词中间留空或放品牌的相关文字，或放其它右边放收藏店铺等相关内容之下是导航：首页，所有宝贝等配色方案：LOGO提取颜色产品本身提取颜色产品联想属性提取颜色颜色不超过3种三、淘宝店铺店招设计技法（四）店招制作规范、流程：三、淘宝店铺店招设计技法（四）店招制作规范、流程：规范字体：一般不超过3种字体重点部分加粗突出字体大小使用得体PS排版：越是简约大气的页面，元素务必不要太多，清爽舒适的页面多留白修改定稿：三、淘宝店铺店招设计技法（四）店招制作规范、流程：三、淘宝店铺店招设计技法（四）店招制作规范、流程：图片切割优化：Photoshop切片Dreamweaver热区切割优化上传图片至淘宝图片空间DW添加图片超链接上传网页文件发布三、淘宝店铺店招设计技法（四）店招制作规范、流程：四、淘宝店铺首页海报设计技法这是1920PX*500PX的全屏海报这是1920PX*600PX的全屏海报四、淘宝店铺首页海报设计技法这是1920PX*500PX的全四、淘宝店铺首页海报设计技法这是950PX*400PX的普通海报四、淘宝店铺首页海报设计技法这是950PX*400PX的普通四、淘宝店铺首页海报设计技法（一）海报设计思路：海报要与大色调统一在设计海报时，先观察大环境，海报设计尽量避免与主色调产生强烈对比，必须要用对比色设计海报时，要考虑降低纯度或明度四、淘宝店铺首页海报设计技法（一）海报设计思路：四、淘宝店铺首页海报设计技法（一）海报设计思路：观察产品亮点定背景色背景选择上不能单纯当海报设计，为了做出一张比较漂亮的图片，最好要做到背景与产品的呼应在海报设计中，大体分为两种风格：将拍摄的图直接用作背景，板式排列活动文案将产品提取出来，背景根据产品灵活变动，再配合板式四、淘宝店铺首页海报设计技法（一）海报设计思路：四、淘宝店铺首页海报设计技法（一）海报设计思路：文案策划排版式要明确自己的海报是给中国人看的，过度使用英文是不合适的，可将英文作为中文的辅助元素四、淘宝店铺首页海报设计技法（一）海报设计思路：四、淘宝店铺首页海报设计技法（一）海报设计思路：合理板式突出主题产品图片展示与摄影图片展示不同。摄影作品突出原生态，添加文字是为了更好的突出画面。设计作品是画面烘托文案主题的，应将主题文案放在首位重点突出模块式编排四、淘宝店铺首页海报设计技法（一）海报设计思路：模块式编排（二）常见海报主题方案店铺活动：促销活动品牌团：官方活动聚划算，可提高品牌的曝光度官方季节性活动：双十一/双十二活动/年中大促店铺常规活动：换季、节日符合当下季节或者节日、特殊日子的相关题材店铺常规活动：周年店庆、清仓甩卖四、淘宝店铺首页海报设计技法（二）常见海报主题方案四、淘宝店铺首页海报设计技法（二）常见海报主题方案单品推广单品聚划算、爆款适合店铺中推成爆款或者想要提高某款产品的转化率新品上市、特价促销适用于新品上市，并且打算全力推广的产品四、淘宝店铺首页海报设计技法（二）常见海报主题方案四、淘宝店铺首页海报设计技法（二）常见海报主题方案品牌宣传品牌宣传适用达到一定认知度的品牌以及在行业中有一定的知名度。四、淘宝店铺首页海报设计技法（二）常见海报主题方案四、淘宝店铺首页海报设计技法四、淘宝店铺首页海报设计技法（三）海报设计原则：“3”原则3元素：背景文案：名称、卖点、价格、其他产品信息3段文字：主标题、副标题、附加内容3种字体：不能超过3种字体主标题可用粗大字体，副标题略小3三种颜色：70%主色，25%辅助色，5%点缀色30%以上留白：高端、大气、上档次多留白0.3秒读完：四、淘宝店铺首页海报设计技法（三）海报设计原则：“3”原则四、淘宝店铺首页海报设计技法（四）海报常见构图板式：左文右图：左图右文：上文下图或上图下文：多栏分布：常见两边图中间文字背景为风景图：展示多种产品：斜切式构图：四、淘宝店铺首页海报设计技法（四）海报常见构图板式：四、淘宝店铺首页海报设计技法左文右图：字体上粗下细、上大下小，上下主次分明，形成对比。文案四四方方架构非常稳重，非常平衡。四、淘宝店铺首页海报设计技法左文右图：字体上粗下细、上大下小四、淘宝店铺首页海报设计技法左图右文：字体上粗下细、上大下小，下面的价格打折部分排版很稳重丶结实。四、淘宝店铺首页海报设计技法左图右文：字体上粗下细、上大下小四、淘宝店铺首页海报设计技法两边图中间文字：一般利用近景、远景的照片产生对比和呼应（多见模特海报）。四、淘宝店铺首页海报设计技法两边图中间文字：一般利用近景、远四、淘宝店铺首页海报设计技法背景为风景图：利用半透明的底框，然后再在里面排文案，避免文字模糊与混乱。四、淘宝店铺首页海报设计技法背景为风景图：利用半透明的底框，四、淘宝店铺首页海报设计技法展示多种产品：当海报上要放置过多的促销产品，可以采用这种版式。产品平行排版，中间利用半透明的框展现文案。四、淘宝店铺首页海报设计技法展示多种产品：当海报上要放置过多四、淘宝店铺首页海报设计技法斜切式构图：斜切式构图会让画面显得时尚，动感活跃。但是画面平衡感不是很好控制。一般文案倾斜角度不超过30°，文字往右上方倾斜便于阅读。四、淘宝店铺首页海报设计技法斜切式构图：斜切式构图会让画面显五、淘宝店铺页尾设计技法五、淘宝店铺页尾设计技法五、淘宝店铺页尾设计技法页尾的用处：让店铺页面的结构更加完整，页尾模块相对页头会少，因此利用好页尾能为店铺起到良好的分流作用，而且页头和页尾属于共同展示页面，无论打开哪个详情页都会显示。五、淘宝店铺页尾设计技法页尾的用处：让店铺页面的结构更加完整五、淘宝店铺页尾设计技法页尾设计一：客服联系方式。客服联系方式很多店铺会设置在左右两边，而设置到页尾的目的就是页头和页尾属于共同页面，增加展示机会，方便顾客咨询。五、淘宝店铺页尾设计技法页尾设计一：客服联系方式。客服联系方五、淘宝店铺页尾设计技法页尾设计二：购物保障以及发货须知。目的让顾客对店铺增加信任，而且发货须知是一定的，淘宝店铺发货时间由店长定的，因此统一的发货时间让店长节省更多时间。五、淘宝店铺页尾设计技法页尾设计二：购物保障以及发货须知。目五、淘宝店铺页尾设计技法

页尾设计三：返回首页、购物流程。什么叫用户体验？这就是了！不是每一个用户都了解网购流程，这么贴心的指引哪里能找到。五、淘宝店铺页尾设计技法

页尾设计三：返回首页、购物流程。什五、淘宝店铺页尾设计技法页尾设计四：友情链接。这个很好理解，什么合作店铺，姐妹店铺，同盟之类的。五、淘宝店铺页尾设计技法页尾设计四：友情链接。这个很好理解，五、淘宝店铺页尾设计技法页尾设计五：关于我们。讲解店铺的文化、特色、内涵等；店铺加入哪些保障服务等。五、淘宝店铺页尾设计技法页尾设计五：关于我们。讲解店铺的文化人有了知识，就会具备各种分析能力，明辨是非的能力。所以我们要勤恳读书，广泛阅读，古人说“书中自有黄金屋。”通过阅读科技书籍，我们能丰富知识，培养逻辑思维能力；通过阅读文学作品，我们能提高文学鉴赏水平，培养文学情趣；通过阅读报刊，我们能增长见识，扩大自己的知识面。有许多书籍还能培养我们的道德情操，给我们巨大的精神力量，鼓舞我们前进。人有了知识，就会具备各种分析能力，淘宝店铺首页设计资料课件淘宝店铺首页设计讲师：寇老师淘宝店铺首页设计讲师：寇老师认识淘宝店铺首页认识淘宝店铺首页一、淘宝店铺首页构成元素店铺页头（页头区）：店招、导航活动促销（内容区）：全屏海报、全屏轮播、优惠券店铺产品（内容区）：产品分类、主推产品店铺页尾（页尾区）：客服中心、购物保障、发货须知等一、淘宝店铺首页构成元素店铺页头（页头区）：二、淘宝店铺首页设计思路店铺页头页头店招放什么内容，页头导航总共需要几个导航分类内容，是否需要放品牌文案，是否需要着重表现收藏店铺，是否需要放活动内容等等。二、淘宝店铺首页设计思路店铺页头二、淘宝店铺首页设计思路活动促销：活动主题什么，内容是什么，文案的主次顺序，是否有需要重点展示的产品等等。二、淘宝店铺首页设计思路活动促销：二、淘宝店铺首页设计思路产品分类：店铺产品总共有几大分类，页面从上至下的摆放顺序是什么样的，每个分类模块里面放几个产品，产品是否需要主次区分，是用方格矩阵还是更灵活的展示方式，单个产品是否需要突出展示价格或折扣等等。二、淘宝店铺首页设计思路产品分类：二、淘宝店铺首页设计思路主推产品：主推产品有哪些，它们有怎样的区别和定位，它们的推介顺序是什么样的，它们的核心卖点是什么，是否需要突出价格和折扣等等。二、淘宝店铺首页设计思路主推产品：二、淘宝店铺首页设计思路店铺页尾：页尾模块一定要符合店铺风格和主题，色彩要一致；内容上可添加消保、7天无理由退换货等保障服务、客服联系方式、商品购物流程等。二、淘宝店铺首页设计思路店铺页尾：三、淘宝店铺店招设计技法天猫店招990PX*120PX（不含导航）天猫店招990PX*150PX（含导航）淘宝店招950PX*150PX（含导航）三、淘宝店铺店招设计技法天猫店招990PX*120PX（不含三、淘宝店铺店招设计技法（一）店招设计思路：以品牌宣传为主的类型：一般有着雄厚的实力，给力的产品，想要打造自己的品牌。名称、LOGO、关注、收藏等以活动促销为主的店铺：薄利多销，店招风格视活动主题来定，营造出一个活动氛围。店招上适当的加入一些红包或者优惠券领取的按钮。以产品推广为主的店铺：增加店铺主推产品的销量，通常在店招上放上两三款推广的产品。三、淘宝店铺店招设计技法（一）店招设计思路：三、淘宝店铺店招设计技法（二）店招设计原则：要直观明确的告诉客户自己店铺是卖什么的，表现形式最好是实物照片要直观明确的告诉客户自己店铺的卖点（特点、优势、差异化）。三、淘宝店铺店招设计技法（二）店招设计原则：三、淘宝店铺店招设计技法（三）店招设计要点：店铺名字告诉客户自己是卖什么的，品牌店铺可以标榜自己的品牌实物照片直观形象的告诉客户自己店铺是卖什么的产品特点直接阐述自己店铺的产品特点，第一时间打动客户，吸引客户店铺（产品）优势和差异化告诉我的店铺和产品的优势以及和其他的店铺的不同，形成差异化竞争三、淘宝店铺店招设计技法（三）店招设计要点：三、淘宝店铺店招设计技法（四）店招制作规范、流程：确定风格：视产品而定布局：店招尺寸、店招构成、区块划分左边或者中间放LOGO，LOGO之下放品牌词或广告词中间留空或放品牌的相关文字，或放其它右边放收藏店铺等相关内容之下是导航：首页，所有宝贝等配色方案：LOGO提取颜色产品本身提取颜色产品联想属性提取颜色颜色不超过3种三、淘宝店铺店招设计技法（四）店招制作规范、流程：三、淘宝店铺店招设计技法（四）店招制作规范、流程：规范字体：一般不超过3种字体重点部分加粗突出字体大小使用得体PS排版：越是简约大气的页面，元素务必不要太多，清爽舒适的页面多留白修改定稿：三、淘宝店铺店招设计技法（四）店招制作规范、流程：三、淘宝店铺店招设计技法（四）店招制作规范、流程：图片切割优化：Photoshop切片Dreamweaver热区切割优化上传图片至淘宝图片空间DW添加图片超链接上传网页文件发布三、淘宝店铺店招设计技法（四）店招制作规范、流程：四、淘宝店铺首页海报设计技法这是1920PX*500PX的全屏海报这是1920PX*600PX的全屏海报四、淘宝店铺首页海报设计技法这是1920PX*500PX的全四、淘宝店铺首页海报设计技法这是950PX*400PX的普通海报四、淘宝店铺首页海报设计技法这是950PX*400PX的普通四、淘宝店铺首页海报设计技法（一）海报设计思路：海报要与大色调统一在设计海报时，先观察大环境，海报设计尽量避免与主色调产生强烈对比，必须要用对比色设计海报时，要考虑降低纯度或明度四、淘宝店铺首页海报设计技法（一）海报设计思路：四、淘宝店铺首页海报设计技法（一）海报设计思路：观察产品亮点定背景色背景选择上不能单纯当海报设计，为了做出一张比较漂亮的图片，最好要做到背景与产品的呼应在海报设计中，大体分为两种风格：将拍摄的图直接用作背景，板式排列活动文案将产品提取出来，背景根据产品灵活变动，再配合板式四、淘宝店铺首页海报设计技法（一）海报设计思路：四、淘宝店铺首页海报设计技法（一）海报设计思路：文案策划排版式要明确自己的海报是给中国人看的，过度使用英文是不合适的，可将英文作为中文的辅助元素四、淘宝店铺首页海报设计技法（一）海报设计思路：四、淘宝店铺首页海报设计技法（一）海报设计思路：合理板式突出主题产品图片展示与摄影图片展示不同。摄影作品突出原生态，添加文字是为了更好的突出画面。设计作品是画面烘托文案主题的，应将主题文案放在首位重点突出模块式编排四、淘宝店铺首页海报设计技法（一）海报设计思路：模块式编排（二）常见海报主题方案店铺活动：促销活动品牌团：官方活动聚划算，可提高品牌的曝光度官方季节性活动：双十一/双十二活动/年中大促店铺常规活动：换季、节日符合当下季节或者节日、特殊日子的相关题材店铺常规活动：周年店庆、清仓甩卖四、淘宝店铺首页海报设计技法（二）常见海报主题方案四、淘宝店铺首页海报设计技法（二）常见海报主题方案单品推广单品聚划算、爆款适合店铺中推成爆款或者想要提高某款产品的转化率新品上市、特价促销适用于新品上市，并且打算全力推广的产品四、淘宝店铺首页海报设计技法（二）常见海报主题方案四、淘宝店铺首页海报设计技法（二）常见海报主题方案品牌宣传品牌宣传适用达到一定认知度的品牌以及在行业中有一定的知名度。四、淘宝店铺首页海报设计技法（二）常见海报主题方案四、淘宝店铺首页海报设计技法四、淘宝店铺首页海报设计技法（三）海报设计原则：“3”原则3元素：背景文案：名称、卖点、价格、其他产品信息3段文字：主标题、副标题、附加内容3种字体：不能超过3种字体主标题可用粗大字体，副标题略小3三种颜色：70%主色，25%辅助色，5%点缀色30%以上留白：高端、大气、上档次多留白0.3秒读完：四、淘宝店铺首页海报设计技法（三）海报设计原则：“3”原则四、淘宝店铺首页海报设计技法（四）海报常见构图板式：左文右图：左图右文：上文下图或上图下文：多栏分布：常见两边图中间文字背景为风景图：展示多种产品：斜切式构图：四、淘宝店铺首页海报设计技法（四）海报常见构图板式：四、淘宝店铺首页海报设计技法左文右图：字体上粗下细、上大下小，上下主次分明，形成对比。文案四四方方架构非常稳重，非常平衡。四、淘宝店铺首页海报设计技法左文右图：字体上粗下细、上大下小四、淘宝店铺首页海报设计技法左图右文：字体上粗下细、上大下小，下面的价格打折部分排版很稳重丶结实。四、淘宝店铺首页海报设计技法左图右文：字体上粗下细、上大下小四、淘宝店铺首页海报设计技法两边图中间文字：一般利用近景、远景的照片产生对比和呼应（多见模特海报）。四、淘宝店铺首页海报设计技法两边图中间文字：一般利用近景、远四、淘宝店铺首页海报设计技法背景为风景图：利用半透明的底框，然后再在里面排文案，避免文字模糊与混乱。四、淘宝店铺首页海报设计技法背景为风景图：利用半透明的底框，四、淘宝店铺首页海报设计技法展示多种产品：当海报上要放置过多的促销产品，可以采用这种版式。产品平行排版，中间利用半透明的框展现文案。四、淘宝店铺首页海报设计技法展示多种产品：当海报上要放置过多四、淘宝店铺首页海报设计技法斜切式构图：斜切式构图会让画面显得时尚，动感活跃。但是画面平衡感不是很好控制。一般文案倾斜角度不超过30°，文