商品详情页该怎么制作

　　很喜欢今年MOCo。内刊MOMAG春季刊的主题：Shareisnewlove！共享是大爱！
　　这是一个从笑脸Emoji所引发的观点：爱不须永远占有。在这共享的大时代，谁都不必真正拥有某种东西，流行的、分享的、创造的，才能继续增加其价值，这是新新人类的世界主义精神！
　　那么事情就来了，我自认为找到了一种以代码模板的方式在PC端快速上新的方式方法，如果不能分享出来，大家就无法帮忙确认是否能称之为全新、并如我一样经过验证后评定为最快！
　　我去年12月中从绫致时装离职初初来到MOCo。电商负责品牌形象的时候，遇到一个很棘手的问题，上新组的同事们几乎都是还没有离开校园的实习生，普通商品的上新工作又很繁重，为了完成工作量必须要经过长时间的加班才可以做完。像大部分的服装公司一样，MO的同事们还在用比较传统的PS方法来制作商品详情，一个熟手的平面设计师最多每天能完成6个款的商品详情。日常工作里一些数据需要修改或者是页面显示的搭配款下架了，还需要找到原图修改完之后再上传，造成工作状态非常混乱。
　　当改用代码模板的方式来制作商品详情之后，在需要单款给图片做扣图成白底35张图的情况下，每人每天基本都可以完成12款的商品详情，效率对比之前的老方法是翻倍的，甚至有一些非常注重快捷技巧的同事，一天甚至可以完成20款左右的商品详情制作，当然如果不需要做任何抠图的工作，这个效率还可以再高很多。
　　现在话题切入到商品详情页上，我们首先有一件事情要先达成共识，那就是一个以代码方式呈现的完整模板里一般就只包含文字信息和图片信息，具体如下：
　　1介绍商品基本资料的文字
　　2带有促销或者品牌属性的描述性文字
　　3商品的模特图和静物图
　　4页面上通用的装饰性图片
　　文字的属性、模特图、静物图等这些都比较容易理解，什么是通用的装饰性图片呢？举个例子：
　　图片（一）是MOCo。商品详情页面里的第一张图，棕榈树剪影的图片就是属于通用图片。
　　图片（一）
　　图片（二）
　　图片（三）
　　由于这张图是商品详情页面里面的第一张图，非常重要，我也插一句关于我们这个模板对于这张图的看法：
　　图片（一）的显示效果是由图片（二）和图片（三）两张图上下叠加而成，图片（三）经过了PS简单的加工，加入了品牌当年的流行slogan：Foreveryoung（永远年轻！），MOCo。去年一年的商品详情页里面第一张图都是垫的这个底（图片三），主要是因为我们开始琢磨这个代码模板化上新的时候虽然也有过这种通用图片多样化的思考，但更多的时间其实是在沟通并思考如何通过流程、团队分工和技术把所需要销售上新的商品很艺术并且快速的进行电子化，3月着手开始做设计的时候，刚好赶上做夏季商品上新，设计师峰美女就直接这样设计了，后面随着工作量逐步的加大，这种进一步的优化就基本上只能停留在想的阶段了。
　　其实这张通用底层图在商品详情页中其实也是可以根据需求随时进行更换与调整的，比如像我的前东家绫致时装那种从线下就很注重对产品系列差异化诉求的品牌，就可以考虑根据每年的TRENDSSTORY设计出不同的通用装饰性图片，以便通过意境的营造更好的诠释出不同商品系列之间的时尚差异化。
　　大篇幅的基本概念沟通完毕，现在可以简单快速地描述一下操作步骤了，具体如下：
　　1。我们先按照jpg格式里面所有出现的图片按照呈现的先后顺序命好名称，从1到多少这样子，并把整个模版写成一组代码，在这组代码里，图片和文字都是分别按照逻辑顺序进行设置的，通俗来讲就是固定好了每一个模块的具体位置；
　　2。把这组原始代码直接设置好放在Excel表格里面；
　　3。在这套工作流程里图片和文字是分开处理的，而且在模板制作开始之前，图片需要提前准备好，精修过的模特图、静物图和细节图图片最好都能集中在一个文件夹里面；所有模版内所需要的模特图、静物图、细节图都在一个设计好的PS模版内进行剪裁，如图片（四），并按照款号加一个上新专属的特别符号进行web格式存储，并设置切片为：所有用户切片；
　　图片（四）
　　4。图片在淘宝图片空间的存储，建议单独设立上新文件夹，并在二级用款号设立每个款的专属文件夹，上一个步骤里面所存储好的图片按照顺序都有了各自在初始jpg模版中所命名都数字代码，款号加上上新代码，再加上从1到多少这样子，然后把这些图片上传到上新到图片空间中；
　　5。由于图片本身到数字后缀是带顺序的，上传之后这些数字以后可以顺序进行排列；
　　6。用款号在图片空间中按款号加上新符号搜索图片，选择所出现到所有图片，复制图片链接；
　　7。只需要输入款号和图片链接，也就是插入所有图片信息，如下图图片（五），在款号后面的新代码处，粘贴出新模版的代码，新的商品详情页就完成了一个初步的原属雏形；
　　8。最后一个步骤，进行所有文字的添加：打开DW，把新代码复制搭理到新建页面，看图填写文字，文字是在所有图片处理好并穿插到模板里面之后，最后添加完成的，文字的完成也代表着新模版对的成，把模版的代码直接后台拷贝到商品详情中，前台就能看到一个新款到展现了。
　　通过以上这种工作步骤到拆解，我们MO电商的上新可以把所有模特图片和文字以更好更快的方式在商品详情中展现，同时藉由这种新的工作流畅所带来的各团队间的配合也更紧密了，从摄影、修图、商品、文案到上新，全部都被有机地都组合在一条流水线上，各自配合。团队内协作能力大幅度大提升，所产生的快速反应机制更能相应多节奏的运营工作。