淘宝店设计-.ppt

淘宝店淘宝店铺装修装修1淘宝网店淘宝网店2淘宝网与天猫淘宝网与天猫 现在，越来越多的人喜欢网上购物，因为这毕竟比较方便、比较容易可行.网购的网站有很多，比如当当网、京东网、拍拍网、淘宝网之类，但目前大多数人还是喜欢在淘宝网上买东西，比较保险一些。淘宝是什么？天猫又是什么？3淘宝网店铺是任何人都可以开的，而天猫(也就是商城)是需要公司进行注册。而且开一个淘宝店，不需要缴纳什么，随便一个人就可以开；而入驻天猫商城则至少需要缴纳一万的保证金（当然了，淘宝店也可以自愿加入消费者保障，缴纳保证金）天猫是一个商场，而淘宝只是乱哄哄的集市；天猫在商场里卖出东西，是需要向淘宝上交佣金，淘宝店则不需要。所以呢，在淘宝网里，它是主推天猫品牌，而淘宝店铺就没有4淘宝淘宝类型：型：扶植版、标准版、拓展版、专业版和基础版56扶植版：扶植版：现在5心以内的卖家，可以使用免费的旺铺，那叫扶植版，只能添加一个自定义促销区的，但可以使用店招，可以拥有一个像旺铺标准版一样的版面，会比较好看，但如果你升级到1个钻石的时候，免费的自动回到最原始的普通店样式，想要回到旺铺版面，订购标准版就可以了！标标准版：准版：任何卖家都可以订购，零信用的卖家也行的，也就是大家正在使用的旺铺，订购费用是50元/月（如果你加入了消保，是30元/月的），这种版本，功能很强大，基本上一个大卖家也能满足需要！7旺旺铺铺拓展版拓展版，也是最近推出来的版本，淘宝商城店家免费用。它比淘宝旺铺标准版的功能，更强大了 使用拓展版官方网站是什么呢？有什么好处？1、重点：如果订购官网型拓展版，你的淘宝店铺就变成内店了2、拓展版官网，就相当于是一个形像网站，支持顶级域名绑定，支持外链！3、没有淘宝的一些LOGO与信息、然后完全可以设计成跟独立网站一样的首页，达到一个官方站的效果4、而店铺的商品，不需要再次上架，直接显示淘宝店的商品，但它的销售与淘宝网不直接联系在一起，而是分开的!5、支持在线支付宝付款，共享淘宝商品数据，不需要再次上架！6、装修更活跃，只要跟旺铺装修一样，去操作保存、发布7、适合外站推广，相当于自己建立个网站然后拿去做推广8、支持在线支付宝独立付款的。无评价系统哦，不会得中差评！9、在淘宝搜索只会搜索到你淘宝内店的商品，它不是直接显示外店的，如果要顾客拍外店商品，需要自己手动给链接，顾客从你旺旺上打开你店铺，也是淘宝店，不是外店，外店就是一个站外的网站页面一样8旗旗舰舰店：店：功能很强大，包括了拓展版和标准版所有功能，并且有完整的后台进、销、存系统，订单处理，发货流程等，适合大卖家使用！9淘宝美工流程淘宝美工流程-文案策划文案策划文案策划的优化与调整文案策划的规范和前期准备文案策划的执行步骤1、首页文案框架搭建2、内页文案框架搭建3、活动文案分类1、收集产品资料2、明确营销目的3、准备工具4、前期规范关键词10淘宝美工流程淘宝美工流程-视觉规范范视觉识别的基础体系视觉识别的应用体系识别不规范的应用1、VI由来2、基础要素使用规范3、字体基本规范4、色彩使用规范1、店招应用2、页尾应用3、主图应用4、海报应用5、钻展位应用6、促销标签应用11淘宝美工流程淘宝美工流程-商品商品图片片规范范跟拍风格的确定拍摄脚本的制定跟拍流程1、掌握产品类别的划分2、体现品牌传递风格化选片存档管理1、选择模特2、选择场景3、商品细节呈现角度效果1、掌握产品类别的划分2、体现品牌传递风格化3、制定拍摄清单1、图片风格的判断2、图片优劣对比3、存档管理12淘宝美工流程淘宝美工流程-商品商品图片片处理理修图美化收集管理素材图片合成6步法1、常规修片流程2、容易忽视修图网店美工易错总结1、店铺风格定位2、素材收集3、图片管理1、图像正确尺寸2、背景符合店铺风格3、商品主图4、促销文字5、修饰元素6、优化存储13淘宝美工流程淘宝美工流程-广告广告图设计认识广告图广告图设计广告图的优化调整1、广告图的作用2、理解文章1、宝贝主图设计2、直通车图设计3、砖展图设计1、优化实施步骤2、设计优化调整14淘宝美工流程淘宝美工流程-首首页设计理解首页文案分析架构布局分析框架模板1、引入文案作用2、理解文案3、文案可视化1、首页布局重要性2、首页布局的构成3、首页布局的规划1、店招制作2、首焦/BANNER制作3、产品分类区块、客服区块设计4、产品展示区块设计5、首页其他区块布局设计6、页面底部设计15淘宝美工流程淘宝美工流程-详情情页设计认识产品详情页，清楚产品详情页的重要性产品详情页的优化与调整产品详情页的设计执行产品详情页的制作1、详情页设计步骤2、详情页制作规范3、详情页搭建1、理解文案，并将文案信息层级划分2、对文案进行信息分层3、寻找对应素材4、独立制作16淘宝美工流程淘宝美工流程-专题页设计专题页的常见类型了解专题页专题页的制作 步骤及要点1、陈述性专题页2、促销型专题页3、交互型专题页1、制作步骤2、版式设计3、常见问题17淘宝美工流程淘宝美工流程-页面上面上线图片切片优化常见问题解决及优化1、切片的目的与意义2、切片工具、方法与流程代码发布1、图片的上传操作2、图片管理3、图片空间管理4、相关辅助功能1、测试页面的死链空链2、图片错位的处理1、DW软件的界面认知2、了解HTML语言结构3、表格的插入及代码编辑4、图片热区的设置HTML代码基础及调试1、旺铺版本区别2、认识自定义及代码发布3、模板备份恢复管理图片上传相册空间管理18淘宝美工流程淘宝美工流程-文档管理文档管理了解文档管理文档管理的核心任务文档管理的方法文档管理的疑难1、源文件管理2、素材管理3、PS样式管理4、总结计划报表1、检索文件制作2、工作计划调整1、文档管理的步骤2、常见的文档管理方法19淘宝美工：顶端左侧店铺LOGO（商城除外）店招（宽950像素高150像素|底宽1920像素）首页宽屏大图（1920像素任何显示器不变形）广告主图或轮播图促销海报或者自由排版（根据顾客需求）底部设计图20注意：1、页头不包括淘宝预置搜索区域2、页头是一个公式固定区域，设置好会出现在店铺的每一个页面店招店招设计21首先来认识一下 究竟什么是页头！为了简洁的了解 通过一个店铺的后台布局模块来切入：22页头可以包含以下几个预置的模块 包括（自定义区、flash模块区、店招、和搜索条）组成自定义布局具体放置什么模块 都随掌柜自由添加或删除：23页头是由两部分完成的：店铺LOGO+自定义布局1.LOGO是一个店铺的最明显标识。风格和设计元素都要和整个店铺基调统一，LOGO也可作为水印在每个宝贝上隐现。LOGO同时也方便店铺之间互换链接所用。2.淘宝店铺LOGO固定大小为：230像素x70像素2425可以一起来欣赏下 各掌柜是如何利用页头的？（并非模块多一味堆砌就一定是好 可以发现繁冗的页头会影响店铺打开速度 同时注意到：页头是会出现在每一页面，太长的页头会让买家有视觉疲劳）262728练习：1、参考淘宝网店2、确立主题3、结合主题选定风格，制作一个230px*70px的logo4、结合主题风格与logo，制作宽950px高150px/底宽1920px的一个店招29首首页背景：背景：1、增加店铺的丰富度2、视觉完整30案例案例313233如何如何选择背景：背景：1、卖什么东西2、走怎样的风格（目标客户）3、网站的风格与色调34可爱35清爽36酷、稳重37科技38布局管理布局管理：布局管理指的是：在装修时，可以设置三栏和两栏及多种不同分栏结构的布局“一个装修页面，最多添加5个布局！”39淘宝网的店铺宽度都是控制在950扶植版和标准版的布局只能是左右两栏190：750布局：40拓展版和旗舰版的布局却可以更为多元一些 具体布局可见下：950布局（也就是大通栏）：41750：190布局：42190：550：190布局：550：190：190布局：190：190：550布局：43每一个布局其实都只是框架，在里面可以添加预置好的基础模块，包括”自定义区、宝贝推广区等“下面可以欣赏下各店铺是如何充分运用布局管理的？190：550：190布局 其中左侧190部分包含了自定义区模块中间550部分包含了图片轮播模块 右侧190部分包含了搜索挑和图片轮播模块：44750：190布局 其中 750部分包含了图片轮播和宝贝推广区模块 190部分包含了自定义区模块、搜索条、宝贝分类模块：45以下也都是750：190布局 其中 两部分都是由自定义模块来填充46 950布局-这是很多店家会选择“拓展版”或“旗舰版”的重要原因 950布局也就是传说中的大通栏设计，不仅大气，而且可以更好的展示爆款和店铺氛围：4748950布局 这也是很多店家会做的一种方式：在大通栏布局中只插入宝贝推广区 在有限空间里展示了更多的宝贝，完全放弃左侧栏内容。4950190：550：190布局布局 其中左侧190部分包含了三个自定义区模块 中间550部分包含了图片轮播模块 右侧190部分包含了两个自定义区模块：51练习：1、根据上节课选择的方向，用PS做背景，宽：10242、根据以上所学的布局方式，参考淘宝店定下框架52自定自定义页面面是要购买旺铺“标准版”及以上版本才有的功能模块。53每个版本不同而有不同的使用数量和使用每个版本不同而有不同的使用数量和使用权权限：限：旺铺扶植版：只要不超过单个页面模块数12个即可（自定义区只能在促销 区位置）旺铺标准版：只要不超过单个页面模块数40个即可（可装修在促销区、宝贝详情页、列表页）旺铺拓展版:只要不超过单个页面模块数40个即可（可装修在页头、页尾、左侧栏、促销区、宝贝详情页、列表页）旺铺旗舰版：只要不超过单个页面模块数40个即可（可装修在页头、页尾、左侧栏、促销区、宝贝详情页、列表页）54适用场景：自定义内容区是几乎所有卖家最为喜爱的模块。因为此模块自由度很高，可以有许多用途。旗舰版甚至拥有“完全自定义模块”，可以自己写css代码完成。55装修左装修左侧栏侧栏a.用自定义内容区进行左侧栏的收藏图片、物流信息等相关内容的展示b.可以删去模块标题栏，代之以自定义区c.可以用自定义区的素材用装饰图片来修饰左侧栏5657装修促销栏:a,人气宝贝的展示58b,店铺相关信息传达59c.为追求店铺风格化、个性化而进行一些心情类或配合店铺氛围的自定义区：60删除原有模块的标题栏 代之以自定义区61装修装修页头页头删除原有标题栏 代之以自定义区（拓展版及以上版本拥有）62装修装修页页尾尾63装修宝装修宝贝详贝详情情页页A 物流信息 B 常见问题C 购物步骤：D 相关宝贝推荐：64E 折扣信息：F 店铺信息：65自定自定义广告区：广告区：6667686970717273练习：1、根据以上方式，结合主题，设计自己的淘宝广告74关于关于产产品的品的详详情情页页：随着电子商务的快速发展和网购人群的日趋壮大宇成熟，对于网店的装修以及产品的详情页面的要求越来越高。页面装修不需要特别华丽，特别的出众。产品页面的主要目的在于促成成交。所以这个页面的基本框架和传达出来的信息就是首先客户看上去会是很清爽，能够让大部分的客户愿意多看一会多了解一下。75一个好的详情页面不仅仅是能够让我们的页面更能留住客户另一方面也能减少我们的客服咨询量，是整个购物更加的方便快捷。关于淘宝的关于淘宝的详详情情页页面：面：这个页面我们在描述的时候需要传达出来的信息就是这个产品他看上去到底是什么样的，他有哪些与众不同的地方。按照以前的习惯来说只要填写好宝贝属性下面有几张大图展示，然后是几张细节展示基本上就是差不多的。76淘宝的详情页面包括以下内容：1、宝贝标题，宝贝主图，尺码、颜色选项，主图下方的多角度、多颜色图片772.完整的宝贝属性78此处也可以店内促销海报类型：3.促销、搭配产品的展示79或者把促销和广告一块添加也比较具有吸引力。804.添加关联销模块，关于关联销售不能添加太多产品6-8个最好，然后在产品选择上我们应该怎么样去选择呢？拿服装做个例子加入说你卖的是短裤，关联销售做了八个，那么这一块就应该是选择四个其他款式的短裤然后是四个和短裤搭配的上衣。这样能给客户一个更好的体验，可以促成关联成交也可促成其他相关的宝贝的成交概率：81同类型产品推荐区82套餐的搭配835.产品的大图展示的描述很多的店主这块就是做一些很精美的图片然后放上去就可以了的，但是有没有想过在添加产品文案的时候这块去怎么添加，我们不能仅仅只给细节图添加一些文案进去，所以这块的文案添加能让客户看的时间再长一点，也就离成交能更近一点。84这样一个加文案的产品图片加上去之后就是我们的大图展示区域，这里就不再过多的去强调。856.产品细节图这块没有具体的去要求，只是说越详细，能够给客户提供更多的信息出来就越能促成成交。86877、添加款式，颜色、材质等说明8、添加尺寸对照表9、添加买家必读模块，这块不要去写的太多，但是也不能写的太少，因为客户很少去看这块，因此这块我们应该去把我们的服务我们的优势等能醒目的显示出来，其他的一些常识性的问题就可以写的小一点去，8889整体风格控制案例展示：90练习：1、根据以上方式，结合主题，设计淘宝店产品页面91