淘宝天猫网店美工全能第10章课件.pptx

1、 第10章无线店铺装修设计淘宝天猫网店美工全能一本通配色、抠图、装修、无线店铺（视频指导版）10.1 了解无线店铺装修要点内容导航10.2 无线端首页装修10.3 使用“淘宝神笔”模板制作详情页扩展阅读10.4 自定义页面装修高手进阶310.1.1 无线店铺装修的潮流趋势 随着无线互联网的发展，使用移动设备逛网店成为一种新的潮流趋势，因为其体积、屏幕等特点的缘故更为灵活、方便，顾客可随时随地进行购物。为此，淘宝APP、天猫APP、WAP端口等针对访问无线店铺的端口应运而生。根据互联网数据中心显示，人们通过移动设备访问Web的数量不断上升，特别是在节假日期间，远远超过了电脑端，店铺中很大一部分的

2、流量都来自于无线端，因此对无线店铺的装修对于任何一个电商卖家都变得尤为重要。410.1.2 无线端店铺的装修要点 目标明确，内容简洁图片不要太大页面色调简洁而统一颜色不宜太暗淡重视首页的视觉传达510.1.3 无线端店铺与电脑端店铺对比分析 手机店铺装修的原理与电脑端的原理相同，富有视觉冲击力的店铺更能吸引顾客的注意力，留住顾客在店铺中驻足的时间。前面讲解了电脑端店铺的相关知识，那么手机店铺装修与电脑端店铺装修究竟有何不同呢？本任务将从尺寸、布局、详情、分类和颜色方面对“妖精口袋”天猫店铺电脑端与手机端页面进行对比，帮助用户了解两者的区别，以便能合理的进行无线端店铺的装修设计。610.1.3

3、无线端店铺与电脑端店铺对比分析1、布局对比2、详情对比710.1.3 无线端店铺与电脑端店铺对比分析3、分类对比4、用色对比8新手试练 为了让读者在电脑端店铺装修设计的基础上举一反三，学会手机端店铺的装修设计，要求读者对淘宝上比较典型的手机端店铺与电脑端店铺的区别进行讨论。要求发散思维，从各个角度、细节进行赏析、对比，总结对比结果，将之前制作的店铺首页更改为手机端的店铺首页。10.1 了解无线店铺装修要点内容导航10.2 无线端首页装修10.3 使用“淘宝神笔”模板制作详情页扩展阅读10.4 自定义页面装修高手进阶1010.2.1 无线端装修入口及后台操作 登陆淘宝账号，进入卖家中心，选择手机

4、店铺装修或直接进入无线运营中心，即可进入无线店铺的后台装修页面。依次点击“立即装修”和“店铺装修”超链接，选择店铺首页，进入店铺首页装修页面，可看到淘宝提供了宝贝分类、图文类模块、营销互动类和智能类模块1110.2.2 认识手机端首页的模块组成 从整体内容上看，无线淘宝店铺首页必须承载8大内容，包括店招、会员分享、宝贝、分类、活动、形象、优惠券和微淘。1210.2.3 认识手机端首页模块的特点与装修要点店招店铺标题模块焦点图模块优惠券模块套餐搭配模块文本模块宝贝模块底部自定义导航模块左文右图模块微淘1310.2.4 无线店铺首页的装修注意事项注重感官的习惯性与舒适性合理控制页面的长度页面整体内

5、容的把握与电脑端的视觉统一1410.2.5 手机端店招制作实战 下面将制作具有中国特色的小吃店铺的手机端店招，在制作时，由于左侧需要添加店标和店名，因此左侧不宜放置文案，制作时为了突出中国风，将添加一些图章、图纹元素，效果如图所示。1510.2.5 手机端店招制作实战1、搭建背景图片2、设置图层混合模式1610.2.5 手机端店招制作实战3、绘制与复制圆4、输入文本5、输入文本6、手机端店招最终效果1710.2.6 手机端焦点图制作实战 在设计手机焦点图时，由于屏幕尺寸较小，因此在构图方式和文本设计方面都要求简洁，下面将采用上下式结构为美食制作焦点图，如图所示为制作的效果1810.2.6 手机

6、端焦点图制作实战1、添加素材2、添加投影1910.2.6 手机端焦点图制作实战3、输入文本4、调整文本笔刷样式20 手机端的优惠券与电脑端相比，在排列与大小的设置上更加清晰明了，本例将利用前面的花纹素材制作具有中国风的古典优惠券效果，其效果如图所示。10.2.7 优惠券制作实战2110.2.7 优惠券制作实战1、绘制圆角矩形2、设置图层混合模式2210.2.7 优惠券制作实战3、涂抹镯子4、输入文本2310.2.7 优惠券制作实战5、涂抹镯子6、输入文本2410.2.8 分类导航的设计与装修实战 下面通过中国风的房屋样式，以及灯笼形状制作具有特色的美食分类图，制作时需要对颜色进行把握，制作后的

7、效果如图所示。2510.2.8 分类导航的设计与装修实战1、文字变形2、添加光影2610.2.8 分类导航的设计与装修实战3、新建组4、最终效果2710.2.9 宝贝列表图制作实战下面制作“精品上新”与“低价特卖”栏的宝贝列表图，其效果如图所示。2810.2.9 宝贝列表图制作实战1、绘制圆角矩形2、添加画笔图案2910.2.9 宝贝列表图制作实战3、添加素材4、添加标签3010.2.9 宝贝列表图制作实战5、添加价格信息6、制作“低价特卖”标题3110.2.9 宝贝列表图制作实战7、绘制图形8、添加文本32新手试练 制作首页时，需要根据宝贝特色、宝贝功能、设计师喜好来确定店铺的风格，店铺的颜

8、色、元素搭配都影响了店铺的风格。设计师在颜色搭配、图形与字体的选择不同，营造的气氛与风格也不同，有些高冷潮流，有些温馨舒适。为了提高读者设计首页的水平，要求分析淘宝上的店铺首页，设计几套不同风格的店铺首页，具体要求如下。l针对不同的风格，在店铺整体把握上要统一，如以扁平化图形为主的店铺，就需要摒弃一些立体化的图形。l店铺颜色搭配和谐，主色调与副主色调尽量不超过3种，文本的字体、字间距、页面的边距等要求统一。10.1 了解无线店铺装修要点内容导航10.2 无线端首页装修10.3 使用“淘宝神笔”模板制作详情页扩展阅读10.4 自定义页面装修高手进阶3410.3.1 无线端详情页的特征尺寸更小卖点

9、应该更加精炼场景更加丰富页面切换不便页面文件的容量更小3510.3.2 无线端详情页设计的要点 图片设计要点 文字设计要点 宝贝重点的设计3610.3.3 “淘宝神笔”模板制作实战下面使用“淘宝神笔”制作女包的详情页，制作时将使用到编辑模块的一些操作，如替换模块的图片，更改文本、添加模块、删除模块、移动模块等，模板与模板应用效果如图所示。3710.3.3 “淘宝神笔”模板制作实战1、使用神笔模板编辑2、购买新模板3810.3.3 “淘宝神笔”模板制作实战3、选择模板4、使用模板3910.3.3 “淘宝神笔”模板制作实战5、查看模板的各个模块6、制作符合模板要求的焦点图4010.3.3 “淘宝神

10、笔”模板制作实战7、替换模板中图片8、修改文本4110.3.3 “淘宝神笔”模板制作实战9、替换模板中图片10、添加模块4210.3.3 “淘宝神笔”模板制作实战11、替换模板中图片12、添加模块43新手试练 随机对淘宝店铺的详情页无线端与电脑端效果进行分析，通过对比优化前后的效果，进一步明白在装修详情页时需要注意的问题，并根据分析结果制作电脑端详情页的无线端效果，要求优化后的详情页卖点清晰、信息精炼，图片占用空间小。10.1 了解无线店铺装修要点内容导航10.2 无线端首页装修10.3 使用“淘宝神笔”模板制作详情页扩展阅读10.4 自定义页面装修高手进阶4510.4.1 自定义页面装修要点

11、 尽管淘宝本身为卖家提供了一些自定义区放置的模块，但是很多的卖家都在用这些模块，导致页面千篇一律，所以功能性并不是很明显。此时，对追求个性、拓展销路的卖家而言，可以通过自定义页面发挥创意，在推荐店铺和商品的同时，展示店铺独特。需要注意的是，要想将自定义页面的功能发挥的淋漓精致，自定义页面需要展示一些顾客关心的内容。4610.4.2 自定义菜单制作实战 手机淘宝店铺的菜单在手机界面的最下方，其目的在于方便客户快速调转到对应页面，下面对手机端淘宝店铺的菜单进行自定义设置。自定义屏幕底部的菜单为“宝贝分类、店铺活动、会员活动”，再新建名为“店铺活动”的页面，4710.4.2 自定义菜单制作实战1、自

12、定义菜单2、输入模板名称4810.4.2 自定义菜单制作实战4、添加其他子菜单3、添加分类项目5、添加子菜单的效果4910.4.3 自定义页面制作实战除了首页、详情页页面外，卖家可根据店铺需要添加符合店铺要求的其他页面，如会员活动页面、品牌介绍页面、节日专题页面等，下面将添加会员活动页面，其效果如图所示。5010.4.3 自定义页面制作实战1、新建页面2、输入新建页面的名称5110.4.3 自定义页面制作实战3、编辑自定义的页面4、装修“会员活动”页面5210.4.3 自定义页面制作实战3、装修“会员活动”页面后的效果53新手试练 某店铺主要经营212岁童装，由于双十一活动即将到来，店铺为了搭

13、上活动的快车，充分利用活动来促进销售，决定制作一个双十一活动页面。现要求读者制作活动页面，将活动页面装修到店铺中，再将该页面添加到首页底部的自定义菜单中。在设计活动页面时，需要注意以下3个方面。l活动主题醒目、目标明确。l活动页色彩需要鲜亮、明快，符合促销的氛围。l若活动页面比较长，可考虑切片。54扩展阅读无线端活动页的主要类型020103单品推广活动页活动推广活动页产品搭配推荐活动页55高手进阶 （1）为婴儿奶粉店铺新建大小为640200像素，名为“奶粉店店招”的无线端店标图像，在制作时首先通过填充背景绘制卡通云朵与彩虹等元素，制作符合儿童可爱形象的梦幻背景，然后导入素材，最后添加文本完成店招的制作。56高手进阶 （2）本练习将利用搜集的素材制作无线端棉袜的详情页，根据棉袜的风格，采用白色和深绿色作为店铺的主色调，符合袜子小清新的味道，对面料、生产工艺、细节亮点进行详细描述，促进客户消费。57谢谢观看无线店铺装修设计网店美工全能一本通配色、抠图、装修、无线店铺（全彩版）