1、 第8章店铺首页视觉设计淘宝天猫网店美工全能一本通配色、抠图、装修、无线店铺（视频指导版）8.1 了解店铺首页内容导航8.2 设计首页焦点轮播图扩展阅读8.3 设计优惠券模块8.6 设计收藏区与客服模块8.4 设计分类模块8.5 设计宝贝促销模块8.7 设计页尾模块课后练习38.1.1 了解淘宝店铺首页的基础模块l 宝贝推荐模块l 个性分类模块l 自定义区模块l 宝贝排行模块l 全屏宽图与全屏轮播模块l 默认分类模块l 图片轮播模块l 宝贝搜索l 客服中心模块l 收藏模块48.1.2 店铺首页模块布局的要点 店铺的模块布局并非是将所有装修模块直接排放到店铺中，而是根据自己店铺的风格、促销活动，
2、以及客户的浏览模式、需求及行为来合理组合与布局模块。l店铺风格则受品牌化、产品信息、目标消费者、市场环境和季节等因素影响，在选择店铺风格时必须考虑这些因素，这样风格才能和产品统一。l店铺的活动和优惠信息模块，要放在非常重要的位置。l推荐的爆款或新款不宜过多。l收藏、关注和客服等互动性模块是卖家与顾客互动的销售利器。l模块结构和产品系列要清晰明了。58.1.3 系统模板应用实战 本例将自定义布局女包店铺首页的布局方式，其中收藏模块、全屏海报模块、促销模块、页尾模块等皆可使用自定义模块来实现，定义页面布局和使用该布局制作的首页效果。68.1.3 系统模板应用实战1、模板管理2、点击查看图片详情及操
3、作78.1.3 系统模板应用实战3、查看模板信息4、应用模板88.1.3 系统模板应用实战5、看到店铺的布局98.1.4 首页框架搭建实战1、模块编辑2、宝贝设置10新手试练 如图所示为搜集的淘宝“盛景家居”店铺的首页效果，分析应用的模块与模块的组合方式，搭建页面布局的框架，要求模块结构和产品系列要清晰明了，模块布局要错落有致。8.1 了解店铺首页内容导航8.2 设计首页焦点轮播图扩展阅读8.3 设计优惠券模块8.6 设计收藏区与客服模块8.4 设计分类模块8.5 设计宝贝促销模块8.7 设计页尾模块课后练习128.2.1 不同轮播图的尺寸要求全屏轮播图尺寸：全屏轮播图片的宽度为1920像素，
4、高度一般以400800像素为最佳。138.2.1 不同轮播图的尺寸要求常规轮播图尺寸：使用淘宝中的“轮播图”模块可以制作常规轮播图，其高度要求在100600像素以内，体积要求小于300KB，按宽度可细分为通栏轮播图（950像素）、右侧轮播图（750像素）、左侧轮播图（190像素）。148.2.2 首页焦点图的设计要点 店铺首页焦点图的设计与淘宝首页焦点图钻展的设计方法相似，包括构图技巧、配色方式、文本排版等，都要求简洁美观、主题突出、能够吸引买家等。但在设计全屏首页焦点图时需注意，由于显示器的分辨率大小不一致，为了保证全屏图片在任何显示器中都能完整地显示出图片中的重要信息，通常需要对图片的两边
5、进行“留白”，即全屏图片左右两侧宽度为360像素的区域中不放置人物或商品图片，也不放置文案。158.2.3 首张全屏海报图制作实战 下面制作两张女款包包的全屏海报图，以便于轮播。第一张海报图以“店铺”冬季热销的商品为出发点，应用模特、商品的陈列、唯美的背景，通过梅花、雪花的对比来渲染冬季美好的画面，突出“寒冷冬季 与你相依的主题”，168.2.3 首张全屏海报图制作实战1、添加素材2、制作投影178.2.3 首张全屏海报图制作实战3、融合商品与背景4、输入文本188.2.3 首张全屏海报图制作实战5、设置画笔198.2.3 首张全屏海报图制作实战6、绘制雪花7、添加雪花的效果208.2.3 首
6、张全屏海报图制作实战8、输入文本并添加形状218.2.4 第二张全屏海报图制作实战 第二张海报图延续了第一张焦点图的简约风格，通过包的陈列、深绿色的背景、放射状的图形，营造出高端、时尚的氛围，228.2.4 第二张全屏海报图制作实战1、绘制柔边圆2、变换图形3、绘制装饰条4、绘制装饰矩形、线条与摆台238.2.4 第二张全屏海报图制作实战5、渐变填充摆台248.2.4 第二张全屏海报图制作实战6.为摆台添加投影258.2.4 第二张全屏海报图制作实战7.组合与排列商品8.设置图层样式9.组合与排列商品10.输入文本并变换文本角度268.2.4 第二张全屏海报图制作实战11.设置渐变填充27新手
7、试练 为了锻炼读者的动手能力，要求制作某女包店铺的首页焦点海报，由于该店铺女包比较趣味、时尚，适合1830岁的年轻女性，因此设计时需要采用一些青春靓丽的色彩，具体效果可参考如图所示的“OPPO”店铺的女包首页焦点图海报。8.1 了解店铺首页内容导航8.2 设计首页焦点轮播图扩展阅读8.3 设计优惠券模块8.6 设计收藏区与客服模块8.4 设计分类模块8.5 设计宝贝促销模块8.7 设计页尾模块课后练习298.3.1 优惠券设计要点优惠券的使用范围优惠券的使用时间限制设置使用张数限制优惠券的使用条件优惠券的最终解释权308.3.2 女包店铺优惠券制作实战 本例将以“满减”形式制作淘宝女包店铺的优
8、惠券，如满100优惠5元、满160优惠10元、满210优惠15，在制作时可以参考前面制作的女包海报，由于本例的女包店铺风格比较简洁，因此在设计优惠券时，应简洁大气，以文本为主、图形为辅。318.3.2 女包店铺优惠券制作实战1、输入文本2、绘制圆角矩形3、复制并和合并图层4、均匀排列文本并添加虚线32新手试练 某淘宝店铺主要经营女装，秋季来临，店铺开始上新一批秋装，其中包括一些针织衫、衬衣、风衣等，服装的整体风格比较甜美、清新，为了适应季节的需求、促进店铺销量的提升，店铺决定更换首页焦点图与优惠券模块，现要求读者针对该批宝贝进行首页焦点图与优惠券的设计，要求设计的首页焦点图与优惠券美观、统一，
9、效果可参考如图所示的“MG小象”店铺，优惠券应用了首页焦点图海报中的圆弧，并使用黄色与紫色以及字体、文本排列等方式，提升了店铺的美观性。8.1 了解店铺首页内容导航8.2 设计首页焦点轮播图扩展阅读8.3 设计优惠券模块8.6 设计收藏区与客服模块8.4 设计分类模块8.5 设计宝贝促销模块8.7 设计页尾模块课后练习348.4.1 分类模块设计要点从店铺的装修风格宝贝分类图像的大小宝贝分类不宜太长分类名称358.4.2 横排分类模块制作实战 本例先通过商品与图形的结合制作大气、美观的横向女包分类模块，制作时以矩形为设计的基本元素，然后结合制作的横向分类模块制作规范的纵向分类模块。368.4.
10、2 横排分类模块制作实战1、布局页面2、添加素材378.4.2 横排分类模块制作实战3、输入文本4、绘制并描边手提包388.4.2 横排分类模块制作实战5、输入文字并添加矩形398.4.3 纵向分类模块制作实战1、布局页面2、添加素材408.4.3 纵向分类模块制作实战3、绘制直线4、扩展画布418.4.3 纵向分类模块制作实战5、绘制直线6、扩展画布42新手试练 星星小铺是一家新开张经营女装的淘宝店铺，为了提升店铺的美观度与客户的体验度，决定从宝贝分类模块下手。现要求读者为该店铺制作纯文本、与图文结合的宝贝分类模块，以便于在店铺首屏或店铺中间位置使用。在制作时除了风格与店铺的整体风格一致外，
11、还要求美观、简洁、分类清晰。8.1 了解店铺首页内容导航8.2 设计首页焦点轮播图扩展阅读8.3 设计优惠券模块8.6 设计收藏区与客服模块8.4 设计分类模块8.5 设计宝贝促销模块8.7 设计页尾模块课后练习448.5.1 宝贝促销模块设计要点宝贝名称定义要全面、准确有足够的宝贝数量来支持上架和推荐在进行宝贝推荐时，宝贝的价格不宜过高，但也要控制成本。宝贝推荐位和下架时间相结合458.5.2 宝贝上新预告模块制作实战 本例将通过海报的制作与多个单品的陈列组合，制作大气、美观的横向女包上新预告与宝贝推荐模块，制作时以矩形为布局的基本元素，字体则采用方正系列的字体。468.5.2 宝贝上新预告
12、模块制作实战1、添加背景与包素材2、绘制矩形478.5.2 宝贝上新预告模块制作实战3、收缩选区4、描边选区488.5.2 宝贝上新预告模块制作实战5、输入文本6、编辑花瓣498.5.2 宝贝上新预告模块制作实战7、动感模糊花瓣8、输入文本508.5.2 宝贝上新预告模块制作实战9、划分板块10、布局图片518.5.3 宝贝推荐模块制作实战1、添加背景与包素材2、绘制三角架528.5.3 宝贝推荐模块制作实战3、输入文本538.5.3 宝贝推荐模块制作实战4、复制树叶5、绘制直线6、输入文本548.5.3 宝贝推荐模块制作实战7、制作宝贝推荐框8、绘制直线558.5.3 宝贝推荐模块制作实战9
13、、添加包素材56新手试练 如图所示为淘宝上珠宝店铺首页的部分效果，现要求读者分析该模块，对某珠宝店的店铺分类模块进行制作。制作时，可将分类模块与宝贝推荐模块相结合。具体要求：各区推广的产品要针对性强，在引导买家消费的同时还要给买家产生专业、舒适的感觉，提高店铺整体的档次。8.1 了解店铺首页内容导航8.2 设计首页焦点轮播图扩展阅读8.3 设计优惠券模块8.6 设计收藏区与客服模块8.4 设计分类模块8.5 设计宝贝促销模块8.7 设计页尾模块课后练习588.6.1 店铺收藏概述 在浏览淘宝网页时，遇到喜欢的店铺可以点击收藏图标将其收藏，方便以后快速在我的收藏页面中再次访问。若店铺的收藏数量高
14、，其曝光率也会相对于同行的其他店铺高，获得的流量也会相对增大。店铺收藏通常由文字和简单的广告语组成，一般较为简洁，店家为了吸引顾客眼球，通常会为其添加图片、花纹或是动态效果。若为其添加宝贝图片，可在提高收藏量的同时推销商品。598.6.2 店铺客服区的概述 一般情况下，客服区域以横条的形式位于网店首页的中间或底部位置，或以190像素的宽度位于店铺左侧的顶部或中部位置，便于顾客在浏览部分商品后及时进行咨询，从而提升店铺的销量。608.6.3 收藏图片制作实战精美的收藏图片可以提升店铺的收藏人气，因此收藏图片的设计是不可忽视的。下面将设计女包店铺的收藏图片，618.6.3 收藏图片制作实战1、添加
15、背景与包素材2、输入文本628.6.3 收藏图片制作实战3、创建帧动画4、添加阴影638.6.4 客服区制作实战1、输入文本2、客服区布局648.6.4 客服区制作实战3、添加并编辑素材4、使用蒙版65新手试练 收藏区与客服模块是店铺中不可缺少的模块，现要求读者对某家纺店铺的收藏区与客服区模块进行制作，该店铺的风格可参考“北极绒”的淘宝官方店铺，采用纯度较高的黄色、紫色、绿色与瑰红等，热情四色，因此在设计时需要这两个模块也比较鲜亮。8.1 了解店铺首页内容导航8.2 设计首页焦点轮播图扩展阅读8.3 设计优惠券模块8.6 设计收藏区与客服模块8.4 设计分类模块8.5 设计宝贝促销模块8.7
16、设计页尾模块课后练习678.7.1 页尾模块设计要点店铺底部导航返回顶部的文字或按钮收藏、分享店铺旺旺客服温馨提示688.7.2 页面模块制作实战 下面将从顾客浏览店铺的便利度与购物常见问题出发，对女包店铺的页尾模块进行设计，设计时将应用到前面的虚线与矩形块。698.7.2 页面模块制作实战1、设置直线2、绘制虚线708.7.2 页面模块制作实战3、输入文本4、绘制并编辑矩形718.7.2 页面模块制作实战5、客服区布局6、添加并编辑素材72新手试练 某家经营2855岁男士西装、夹克、大衣等类目的店铺正在进行首页的装修，为了得到更好的体验效果，最大限度的留住顾客，店主决定在页尾放置返回首页、返回顶部、品牌LOGO、产品分类、产品搜索等内容，现要求读者根据这些内容制作页尾模块。为了满足店主的要求，制作的模块不但需要美观、上档次，还要文字清晰，能够很好的引导顾客浏览网页并进行消费。73扩展阅读首页背景的应用020103全屏固定背景全屏铺纵向平铺背景74高手进阶 新建名为“婚纱店铺首页”的文件，利用搜集的婚纱素材制作店招、海报，添加新品、婚纱、礼服和小礼服的分类条，将不同风格的婚纱分栏排列，采用浅黄色的主色调，整体风格甜美、浪漫。75高手进阶76谢谢观看店铺首页视觉设计网店美工全能一本通配色、抠图、装修、无线店铺（全彩版）
