网店美工设计要素及典型案例分析

PAGE电子商务专业毕业设计题目：网店美工设计要素及典型案例分析产品设计工艺设计方案设计√类型：学生姓名：学号：学院：商学院专业：电子商务班级：学校指导教师：企业指导教师：2016年5月3日摘要Internet为我国的电子商务带来无穷的信息，更是我们交流和学习方式的变迁重要原因。在网络化的今天,依托互联网，淘宝购物方面显得非常方便。网络淘宝发达，使保健食品的信息不断得到更新，保健食品类目的也逐渐完善和规范，在实习期间我工作是做肌肉科技天猫店铺的美工，主要负责网页的美化及资料的搜索和店铺图片管理。我所在的网店美工工作内容主要包含首页的图片制作和网店框架的搭建，这需要对色彩尤其是色彩的搭配必须要有独的见解和良好的排版水平。设计过程中用到了photoshop、dreamwever等技术。下面我将就我设计的过程所采用的技术、思路等方面详细的介绍我所管理店铺的设计。关键词：互联网页面设计保健品行业店铺装修

目录TOC\t"一级标题,1,关键词,1,参考文献,1,摘要,1,绪论,1,致谢,1,二级标题,2,三级标题,3"\h摘要 2关键词 2一、企业概况 5（一）总公司简介 5（二）肌肉科技东青官方专卖店简介 5二、淘宝美工概述 7（一）美工简介 7（二）美工素质以及能力要求 71、首页设计 82、图片处理 83、协助运营做好日常推广、活动推广活动页面设计 8三、店铺装修 8（一）店铺设计过程 81、首页设计 82、店招导航设计 103、宝贝详情页设计 11（二）活动页面设计 121、年货活动页 122、元宵活动页设计 133、三八节活动页设计 144、周年庆活动页设计 165、直通车及其他小图设计 18四、淘宝美工实习总结 20（一）美工实习内容 20（二）美工实习感悟 21结束语 21参考文献 23致谢 24绪论（前言）湖南西子电商是湖南电商领域发展速度、最具竞争力的电商企业，主营业务涉及食品保健品、化妆品等领域，拥有多个淘宝商城、拍拍、京东、当当等电商购物平台。目前公司主要通过国内的主流电商平台销售产品，发展势头迅猛。公司发展迅速，目前总人数达到100多人，分为总经办，天猫部，渠道部，客服部，仓库部，人事部，行政部，财务部这几个部门。主要从事的行业是保健品行业，化妆品行业。目前做得比较成功的品牌有：康比特，肌肉科技，美瑞克斯，韩后。我目前所负责的是肌肉科技东青专卖店的店铺装修。

一、企业概况（一）总公司简介湖南西子电商是湖南电商领域发展速度、最具竞争力的电商企业，主营业务涉及食品保健品、化妆品等领域，拥有多个淘宝商城、拍拍、京东、当当等电商购物平台。目前公司主要通过国内的主流电商平台销售产品，发展势头迅猛。公司发展迅速，目前总人数达到100多人，分为总经办，天猫部，渠道部，客服部，仓库部，人事部，行政部，财务部这几个部门。主要从事的行业是保健品行业，化妆品行业。目前做得比较成功的品牌有：康比特，肌肉科技，美瑞克斯，韩后。我目前所负责的是肌肉科技东青专卖店的店铺装修。（二）肌肉科技东青官方专卖店简介肌肉科技产品无处不在，在美国任何一本健身杂志，每一场健美比赛，所有营养品专卖店，肌肉科技的标志都会矗立眼前。肌肉科技的追随者以几何速度每天增长。肌肉科技超级明星团队代表全球健美的辉煌，肌肉科技的竞争对手们也只能每天努力奋斗着甘居亚军，这就是肌肉科技文化。不断增长，这是一群很大的消费群体，同时也是中高端消费的一群，相对来说，利润空间是比较大的。肌肉科技东青专卖店是肌肉科技官方授权的一个旗下专卖店，主要专注经营肌肉科技所有产品。肌肉科技（Muscletech）全球运动补剂的神话。全球最知名品牌之一，肌肉科技明星团队包括了乔卡特，菲尔·希斯，德克斯特·杰克逊等超级明星。肌肉科技品牌于2009年正式登陆中国市场，由中国知名的运动营养品代理公司北京盈奥科健贸易有限公司独家代理，在中国市场已经拥有上千家经销商。2013年10月，北京盈奥科健贸易有限公司邀请肌肉科技品牌代言人3届奥林匹亚冠军菲尔·希斯先生成功访问中国，肌肉科技品牌在中国已成为销量最高的进口运动营养品牌。旺亿的直接货源是北京盈奥科健贸易有限公司，这就保证了正品。在保健品行业，相对有几个产品的品牌比较有影响力，美国的健乐多，美瑞克斯，以及中国的康比特，其主要功效是增肌增重，增肌减脂。对于这些对手，肌肉科技在很多方面都与他们存在着竞争。主要竞争对手有健乐多以及美瑞克斯。健乐多属于汤臣倍健股份有限公司2000年01月25日注册的一个商标，健乐多以“don’tquit，倾力每一刻”为理念，红黑两色的品牌主色调代表坚持和专注，所以店铺大多数装修风格都是以红色和黑色作为主要色调。多是运动风格，其中健乐多产品包括增肌、减脂、能量补充等系列，公司的品牌文化优秀。如图一：健乐多首页部分截图。图SEQ图\*ARABIC1：健乐多首页美瑞克斯产品全部来自纽约长岛，生产过程完全符合美国GMP标准，并通过美国药曲标准（USP）审核。其中铁杆粉丝有牟丛：国家级运动健将、知名的全国健身小姐、形体小姐、体育模特，2012亚洲健美锦标赛女子形体165以上组别冠军。这些同时也是美瑞克斯的产品代言人。美瑞克斯（MET-RX）的品质和技术受到多个世界顶级运动员的认可，包括2005、2006连续两年获得阿诺德经典赛冠军的职业健美运动员德克斯塔杰克逊，五届世界大力士冠军赛冠军的世界顶级大力士马瑞斯。2006年美瑞克斯(MET-RX)正式登陆中国，由NBTY的在华子公司诺天源(中国)贸易有限公司总经销。因此，美瑞克斯为主营产品在保健市场上占有很大的优势。也是肌肉科技的主要竞争力，美瑞克斯的首页主打的是品牌宣传，所以店铺装修是主要宣传品牌为主如图二：美瑞克斯首页部分截图。图2：美瑞克首页二、淘宝美工概述（一）美工简介网店美工是精通美学，PHOTOSHOP，FLASH，DREAMWEAVER等网店制作软件的网络人员，必须具有良好的创意和一定程度的审美观和一定的策划知识。负责整个网店的前台设计，界面设计、规划整个网页的布局。目前使用ps进行界面效果图的设计，AI辅助设计LOGO、以及网标。目前淘宝上比较主流的美工工作内容包括：店铺装修工作、产品页面设计工作、店铺关联工作和活动图片设计工作。美工对电子商务行业的十分重要，是关乎一个电商企业成败的重要因素，店铺运营中经常谈及点击率与转化率，这两个数据都与美工所制作的店铺图片有非常重要的关系。一个好的淘宝店铺他给人的第一映像十分重要，淘宝上店铺繁多，你只有展示出属于自己的特点才能够让更多的顾客对你驻足，选取商品，从而增加交易。所以想法创造出属于自己的店铺特色是一个美工成功的第一步。（二）美工素质以及能力要求网络美工具备如下素质：扎实的美术功底、丰富的想象力和良好的创造力，网页设计/平面设计/广告设计工作经验，美术类/平面设计/广告及相关专业，较好的文字功底。可见，不仅要求会相关的绘图软件，还要求懂一定的网页设计语言和有一定的文字功底。如何提升店铺的转化率，是每个淘宝店铺所必须考虑的问题。如何更好的体现出产品的卖点，如何突出产品的独特性，此时考验的就是仅仅是美工的图片处理能力了，此时更需要的是如何整体配合突出要表达的主题。文案负责文字以及宝贝描述，通过美工的深刻理解以及成功转化，出来的图片一定与随意制作的图片效果有天壤之别。一般网店美工需要有一下几点的能力1、首页设计（1）页面顶部设计感强（2）导航栏分类明确，让客户第一时间可以找到自己想要的（3）宝贝排放，宝贝排布清晰有序，让人感觉版面清楚。（4）主题海报设计，渲染页面气氛，让人对店铺映像深刻。2、图片处理（1）根据需要对产品的拍摄原图进行美化（2）适量添加文字描述，但不要过多插入广告，导致顾客厌烦。3、协助运营做好日常推广、活动推广活动页面设计（1）标题设计明确，契合活动主题。（2）页面美观，符合大众审美，对顾客产生吸引。（3）制作合适的海报，使人对活动有直观认识。三、店铺装修（一）店铺设计过程当运营给文案需要作图的时候在做一个店铺的首页之前，需要先和运营沟通了解运营想做出来的是什么样子，主要配色是什么，做出来的风格大致是什么，然后心中有了大概的思想和页面的轮廓，就需要准备素材，去找灵感，可以借鉴，但不可以复制。商城首页是展示店铺宝贝、活动的地方，也是营造品牌风格的第一窗口。首页设计要注意和焦点图设计风格的统一，色彩搭配需要应季，重点一定要突出。在虚拟交易中视觉营销是关键。创意会带来更多的流量，美观的图片让人产生点击的欲望，不过最不能忽略的是传达。因此这些很考验美工的美感和设计能力。要设计出运营心中所想的样子和符合大众消费的感官。1、首页设计首先，要布局划分筹备工作，可以将首页划分为店招，海报，产品宝贝，页尾整个首页可分为主体部分和背景，主体部分的宽度根据店铺性质的不同而有着差异。接下来是全屏店招制作，全屏海报制作，宝贝的切片和页尾的制作，基本就可以完成一个自定义的首页，创意会带来更多的流量，美观的图片让人产生点击的欲望，不过最不能忽略的是传达。商城首页是展示店铺宝贝、活动的地方，也是营造品牌风格的第一窗口。按照店铺的总体风格定义配色，我们店铺是主要黑色黄色红色三种颜色混合交叉搭配，因为保健品是主打高大的形象。根据这些就可以去找素材以及灵感，一般我们喜欢在花瓣网，千图网，以及500PX等一些图片网找素材。有大致轮廓之后就开始构图。如图3：店铺首页图3：店铺首页2、店招导航设计整个网店只有一个店招，它在每个页面上都会显示，所以店招是店铺中最重要的一部分。店招要体现两点：品牌定位和产品定位。要让顾客无论是在首页还是在其他页面通过店招都能看出店铺的品牌和产品,加深顾客的印象。店铺店招如图4：店铺店招图4：东青店招我们店铺的主要风格颜色是黑色，所以店招也是黑色。店招主要放了店铺的店标，由于我们店铺是主推高性能围度增肌粉七磅，所以店招上也是七磅，这样让顾客进店第一感觉就是看到我们主推的产品。这样便有利于消费者快速关注到店内的热销产品。而生意参谋的数据证明，店招的点击率往往要大于海报和产品布局那一块的点击，也更容易提高转化率。3、宝贝详情页设计我们公司的产品都是赢奥总公司的专门规定的宝贝以及详情，所以一般公司没有允许是不可以擅自修改宝贝的详情页，但是我也有做过一些关于店铺主打的宝贝的详情，好的详情会让店铺的转化率大大提升，这里最重要的就是好的文案。文案不在乎写作有多么好，重要的是那么几个来自心里有共鸣的字眼:“说到心坎里去的话，中心突出：当顾客很有耐心的看完了这个详情页都得不到自己想了解的东西，那么其后果是直接让他思维烦躁——秒关，所以做详情页之前需要做一次策划。好的结尾很重要，目前来看多数人喜欢用一些购物注意事项或者快递说明什么的来结尾，我只能说，不管顾客前面感觉如何好都会给这些东西一个影响了，我们可以想象下，当你沉醉在一个美好的状态中，突然来个这么无趣的东西，你是不是觉得很郁闷？关于这个结尾我参照各大应对产品官网的产品介绍，加上二级页面（购物事项）的链接结尾，再者突出店铺文化或者店铺理念，主要风格是参照细胞肌能海外旗舰店的详情。在做详情之前先和运营沟通，但是做出来却没有让运营很满意，然后彼此还激烈讨论了很久，最后慢慢修改成想要的样子。如图5：详情的部分截图。图5：宝贝详情（二）活动页面设计1、年货活动页年货页，顾名思义，也就是一年的年底对消费者回馈的一个活动页面。年货节也叫扫货节，相当于超市清仓扫货一样。因此，年货节的促销力度可以媲美双十一双十二。首先，要布局划分筹备工作，整个首页可分为主体部分和背景，主体部分的宽度根据店铺性质的不同而有着差异，接下来是全屏店招制作，全屏海报制作，海报的制作是很重要的一部首先海报一定得体现促销性，海报在某种方面很大的提高了店铺的档次，粗制滥造的海报会极大的降低一个店铺的档次。一般年货活动会经常使用年货节，打年货、屯年货等一些促销词，所以这次我是以年货节为主要词做页面包括价格也是年货价吸引顾客。如图6：年货海报图6：年货海报2、元宵活动页设计元宵节的页面是在年假回来之后开始做的，总的来说没有之前做的那么困难了。由于我们店铺由总公司规定所以美工姐姐叫我帮康比特做一个，页面还是算做的多了，所以这次做起来比较得心应手，了解了年货以及一般活动都是用红色来渲染活动的气氛，这次也不例外也是选用红色和金色搭配。如图7：元宵节页面的截图图7：元宵节页面3、三八节活动页设计因为很多活动都是红色作为主要色调，觉得会有点重复，所以三八女王节的时候就用黑色主打，红色作为配色做首页,由于我们店的模特都是特定的，在某些方面也是加重了我们的设计难度，但是运用多了之后就会懂得更好的展现模特的力量，以及怎么样才能带给人想购买的感觉。如图八：女王节页面图8：三八女王节页面4、周年庆活动页设计肌肉科技一般店铺是很少做活动，所以对于我们来说，周年庆是比较重要的，然后这次活动页面和运营沟通后画出了大致的样子，但是有很多地方和运营想的不一样，实在不知道运营在想什么，所以就有点崩溃，说实话，改的不想再改了，但是彼此都心情气和之后再慢慢磨合，最后改成下面这版。如图9：周年庆页面图9：周年庆页面5、直通车及其他小图设计还有一些小活动页面，其中有天猫品牌专辑页等等活动，这些对图片的要求不是很严格，基本上只要改下产品图就好。以下是一些页面的截图。分别是美瑞克斯的手机端的海报及直通车截图。如图：图10：活动截图直通车都是在淘宝付费展现，所以点击率很转化率是衡量直通车做的好坏的依据，其中直通车上的关键词以及直通车图的质感都是点击率的关键，直通车的图片视觉化最重要的部分是商品的首图，它是了解消费者这个商品的开始，也是推广商品的唯一“入口”所以对设计有相对高的要求，根据要投放的消费群体，同时分析他们的喜好来确定设计风格以及颜色，分析他们的消费能力来确定使用什么样的促销方式是他们最容易接受的，以及分析他们的生活习惯，方便调整投放时间和战略，与对手拉开差异，增加投放效率。如图11：高性能七磅主图高性能七磅主图图11：高性能七磅主图四、淘宝美工实习总结（一）美工实习内容1、主要负责：根据店铺风格日常海报的制作，商品详情的制作，店铺活动的一些图片处理及商品信息的更新。2、关于海报：刚进公司有美工姐姐带我，在这段时间也教会了我很多，知道了做海报要考虑很多因素：店铺风格、色调搭配、图案搭配、字的排版、字体的设置讲究，这些都很重要，不过也不是一朝一夕就能培养的出来的，但可以从模仿中锻炼，她有一句说的很对：现在我们刚出社会，设计风格还不够成熟，如果只要自己的想法是做不好东西的，那种东西一看就没什么质量。如何借鉴运用别人的创意也是一门艺术。对于如何吸引顾客的眼球，表达商品的重要信息，在海报的体现上也是要不断的学习和认识。3、上架商品：这段时间他也教了我如何上架商品，很多时候还是有问题，但是能百度的一般我都会先百度。其实呢，这些操作不一定什么都要问别人，百度什么的都挺好用的，所以能自己解决的就先自己试着去解决。4、关于软件使用的熟练度：制图软件的熟悉对于图片处理的速度和图片效果是有很大的相关的。在处理图片时，我们经常遇到图片的一些问题，比如模特背景颜色会影响模特身上衣服的颜色及模特的肤色，有时模特哪里受伤了也是要处理掉，还有整体肤色不能太黑，要在原有的图片上调整好，还有对衣服颜色真是感的处理也要调好等，这些都要你对软件的熟悉与熟练的运用。软件的熟悉与熟练的运用也体现在5、关于店铺风格：虽然我对店铺风格的定位还是不太清楚，现在我也是跟着另一个美工的风格走，这是所有图片处理的总风格，所以自己也要清楚并配合好。（二）美工实习感悟（1）实践出真知，在不断实践中找出自己的不足，不断突破总结，这样在下次遇到同样问题的时候就能高效的解决（2）好的团队是不断进步的源泉和动力，多和大家交流沟通，听别人建议多学习（3）多看优秀的网页设计，学着先模仿后创新，把别人的东西转化为自己的最后还要比别人的做的更好。（4）永远不要让自己在该学习时间处于悠闲的状态，一旦你享受悠闲，你将停止不前，所以能学习的时候就尽快学习充足自己，不管