《网店美工设计》教学课件.pptx

1、项目项目 实战实战项 目 淘宝女装店铺首页设计淘宝食品店铺首页设计淘宝护肤品店铺首页设计 淘宝婴幼儿玩具店铺首页设计淘宝瓷器店铺宝贝详情页设计淘宝运动鞋店铺手机端首页设计Part one 电子商务是凌架于互联网系统上的一个销售平台，是地面销售系统的一种延伸和互补，也是商家和顾客的一种有效的沟通途径。现今国内通过不同程序实现网上销售的企业或厂商约占78%，剩下的22%左右的企业和厂商，都在努力创造着网上销售的地面物质准备。鉴于电子商务在互联网的发展前景，实现网上销售，已经成为未来商场战争中占有优势地位的必不可少的手段。通过实现女装店铺首页设计，学习淘宝店铺设计相关知识，了解电子商务的发展、淘宝网

2、店美工人才要求和行业趋势。在任务实现过程中：了解电子商务的定义。了解淘宝网站相关知识。掌握淘宝网店设计原则。【情境导入】随着现代经济的发展和互联网技术的不断完善，传统的服装营销模式已经不能满足新生代的主力消费群体需求。服装电子商务开始作为一种新的营销方式和理念发展迅速，并逐渐被广大消费群体所接受。如今，其发展势头异常强劲，正在给人们的消费习惯带来深刻的影响。当前服装产品流行周期短，款式和品种多变。整个消费市场正需要一种能满足不同层次消费者个性化需求的多品种小批量产品的供应方式，这就使得服装电子商务的迅猛发展成为必然。而淘宝网作为服装类电子商务行业的老大，是国内B2C及C2C 电子商务网站中发展

3、最快、最为成功的案例，以提供具有本土特色的电子商务平台服务为宗旨，并一直不断完善和发展。其在中国的 C2C 市场中可谓是一家独大，市场份额更是超过了 90%，行业领先的地位暂时是无人能撼动的。目前，服装服饰类产品已经成为网络零售的第一大商品，无论从数量还是交易规模上都是如此。单是淘宝网上初具规模的卖家群体皇冠店铺就已达上万家之多，并且仍保持着快速增长的态势。本次任务主要是实现淘宝女装店铺首页设计。【功能描述】使用淘宝布局要素来设计女装店铺首页。头部包括店铺的logo、宣传标语、购物车、账户登录及客户中心的图标。主体包括各个分类版块下的图片链接。底部包括店铺的各项服务链接、搜索框及返回首页和顶部

4、的按钮。技能点1 电子商务概述1 电子商务的定义 广义上讲，电子商务一词源自于英文Electronic business，是指利用简单、快捷、低成本的方式，在买卖双方不谋面的情况下，所进行的商务贸易活动。联合国国际贸易程序简化工作组对电子商务的定义是：采用电子形式开展商务活动，它包括在供应商、客户、政府及其他参与方之间通过任何电子工具共享非结构化商务信息、管理活动和消费活动中的各种交易。电子商务是利用计算机技术、网络技术和远程通信技术，实现电子化、数字化和网络化的整 个商务过程。电子商务是以商务活动为主体，以计算机网络为基础，以电子化方式为手段，在法律许可范围内所进行的商务活动过程。电子商务是

5、运用数字信息技术，对企业的各项活动进行持续优化的过程。2 淘宝网简述 伴随着互联网技术的迅猛发展，消费者的消费观逐渐成熟，到网上进行购物慢慢成为千家万户购物的重要选择。随之涌现的一些电子商务购物平台，如淘宝网、京东网、号店、唯品会、小红书、拼多多等也逐渐地成为大部分网民的购物选择，其中最受中国消费者欢迎的网购零售平台当属淘宝网。淘宝网成立于2003年5月10日，由阿里巴巴集团投资创办。淘宝网分为淘宝C店和淘宝商城2种模式。淘宝C店是淘宝集市卖家所开设的店铺，这种店铺的门槛低，任何通过实名认证的人，只要发布10件宝贝就可以免费在淘宝上开店。淘宝商城（天猫）是亚洲最大的购物网站淘宝网打造的在线 B

6、2C 购物平台，自2008年4月10日成立以来，吸引了 Kappa、JackJones、苏泊尔、联想、惠普等在淘宝商城开设官方旗舰店，受到了消费者的热烈欢迎。一个清新美观、富有吸引力的旺铺能够吸引更多的买家前来购物，提升销售额，网店的迅速发展还催生出网店美工这样的职业。和传统实体店面的装修不同，不需要购买很多的建筑材料，网店的装修只需要具备网页设计和图片处理的相关知识就能设计出精美的网店。技能点2 网店美工人才要求 网店美工岗位的工作范围包括网店美工设计、网店装修色系与产品色系的美学解构、网店全面装修、产品图片处理、广告促销图片、产品描述图片处理，等等。当今市场需要网店美工岗位的企业主要分为三

7、类。第一类是电子商务类企业，网店美工岗位要求专业以电子商务/市场营销类专业为主，除了具备一定的美工技能，更突出要求具有电商知识，熟悉网络消费者需求。第二类是互联网技术类企业，网店美工岗位要求专业以计算机类专业为主，要求技术的全面性，能够掌握常用设计制作软件。第三类是传统行业企业，网店美工岗位要求平面设计类专业为主，要求有深厚的美术功底和设计理念，除了负责线上网店的网店美工，往往还要兼职线下企业宣传海报的设计。通过调查分析，互联网技术类企业重视技术，传统行业企业重视设计，电子商务类企业重视对电商知识的掌握。技能点3 网店美工基本知识1 分辨率分辨率有两种：屏幕分辨率和图像分辨率。图像由一个个点组

8、成，这个点叫作像素。像素是图像中最小的单位。每个像素是一个小点，不同颜色的点（像素）聚集起来就变成一幅动人的画面。2 像素技能点3 网店美工基本知识3 尺寸图像尺寸的长度和宽度经常以毫米或厘米为单位，也通常以像素为单位。图片格式是计算机存储图片的格式，常见的存储格式有jpg、png、jif、psd、ai等。4 常用图片文件格式技能点4 网店美工必备软件技能要求1 Photoshop软件2 Dreamweaver软件3 Illustrator软件技能点5 淘宝网店设计原则1 界面布局要美观合理2 定位明确、主题突出3 视觉统一性Part two 随着电子商务在国内的迅猛发展，传统的店面式销售方式

9、已经很难满足经济快速发展的需要。目前很多厂商、经销商都采用了电子商务的销售模式。这种模式成本低、流通快，实现了商品的批量快速流通，消费者可以以低于传统渠道的价格获取所需要的商品，制造企业和经销商也能以合理的利润实现商品的大批量快速销售，达到了多方共赢的局面。开展电子商务的一个重要平台就是淘宝网，通过实现食品店铺首页设计，学习淘宝店铺设计相关知识。在任务实现过程中：理解淘宝美工设计制作流程。了解淘宝店面设计基本构图技巧。了解淘宝店铺装修常见图片尺寸。了解淘宝店铺首页布局要素。【情境导入】随着互联网技术的不断发展，网上购物已经成为了很多人的主要消费方式之一，价格优势不再是第一选项，消费者更多的是关

10、注产品本身的质量、网店视觉形象的设计等原因。越来越多的线下实体巨头瞄准网购市场，进而刺激网购平台商家间的竞争，由于网店的视觉形象是消费者初次印象，凭此印象在短时间内选择继续浏览，还是离开，如何提高网店的跳转率，加强网店的视觉形象，加深客户的印象。由此可以看出网店品牌视觉形象设计若可以提高视觉观感，符合网购者的消费心理，这样客户的注意力才能够被吸引，把客户的兴趣激发出来、释放其购买的欲望，最后促成消费者买单。在淘宝网店中，食品品牌形象设计运用成功的商家有“三只松鼠”“巧厨”“小奶花”等，这些店铺标志设计与品牌形象的相互结合，提升网店在买家心中的地位，使买家成为网店的忠实粉丝。因此淘宝店铺的装修既

11、要有科学性，又要有艺术性，同时还需要同其目的性紧密相连，从而增加消费者的购买欲望及回头率。本次任务主要是实现淘宝食品店铺首页设计。【功能描述】使用淘宝布局要素来设计食品店铺首页。头部包括店铺的logo、广告语、收藏按钮 主体包括各个分类版块。底部包括店铺的页尾导航。技能点1 网店美工设计制作流程1 素材规划2 图片设计工作3 切片处理4 上传图片空间5 预览效果6 其他工作 视觉营销是一种新的市场营销手段，为达成营销的目标而存在的，通过商品的陈列和形象化展示，对顾客的视觉造成强劲攻势，实现与顾客的沟通，以此向顾客传达商品信息、服务理念和品牌文化，达到促进商品销售、树立品牌形象的目的。在网店界面

12、的设计过程中，经常使用的构图技巧有以下三种：1 对比技能点2 网店设计基本构图技巧2 对称3 反复技能点3 淘宝店铺装修常见图片尺寸技能点4 淘宝店铺首页布局要素1 店招店招顾名思义是店铺的招牌。2 导航条 导航条可分为淘宝系统自带和自定义导航条设计，主要功能是可以快速链接到相应的指定页面。3 全屏海报（banner）技能点4 淘宝店铺首页布局要素4 产品促销轮播海报 产品促销轮播海报主要用于推广产品的促销内容可以做成促销海报吸引买家。尺寸为950像素500像素（建议高度在500像素左右）。5 产品分类 产品分类方便买家根据自己的需求在店铺上快速找到产品。分类主要有按价格分类、产品功能分类、产

13、品属性分类等。技能点4 淘宝店铺首页布局要素6 优惠券设计 优惠券是指淘宝店铺的一个营销服务，起到主动营销买家，提升回头客的效果。我们所说的设计，是通过平面图片的设计将优惠券展示在店铺的首页，让买家一目了然地看到。设计常规尺寸950像素200像素内。7 客服旺旺 客服旺旺是用于买家跟店家沟通的软件，设计在首页上可方便买家联系商家。技能点4 淘宝店铺首页布局要素8 产品自定义主图展示 产品自定义主图展示是指产品通过平面图片展示设计，更能突出产品的性价比，更能融合到店铺的风格里，极大提升产品的视觉展示效果。9 店铺页尾 店铺页尾主要展示的内容有：关于快递包装物流、关于售后等服务，尺寸950像素30

14、0像素内。技能点4 淘宝店铺首页布局要素10 店铺背景 一个店铺的风格确立，店铺的背景占据了大部分，背景主要设计的内容店铺的背景图片，店铺手机二维码或店铺一些重要的折扣信息都可以加入店铺上。以上就是淘宝店铺设计布局的主要内容。Part three 伴随着科技的发展和深入，当下消费者购物方式发生了颠覆性的改变，去实体商店消费不再是人们的唯一选择，从一开始对互联网安全隐患的恐惧，到现在网上购物成为一个潮流。只需要鼠标点击几下，就可以立即付款，然后在家坐等收货即可。便利快捷的购物方式让人足不出户，就能够享受与去商业街一样的乐趣，满足人们的需求。通过实现护肤品店铺首页设计，学习网店设计相关知识，了解网

15、店店招、导航和页尾的设计技巧。在任务实现过程中：了解网店店招设计相关知识。了解网店导航设计相关知识。了解网店页尾设计相关知识。【情境导入】网购的迅猛发展对淘宝卖家的网店品牌视觉设计是一个极大的考验。由于人们的审美能力不断提高，对网站设计的概念已经不再局限在技术层面，网站的设计外观也逐渐艺术化，因此网店设计的艺术性被开发者重视。本次任务主要是实现淘宝护肤品店铺的首页设计。【功能描述】使用淘宝布局要素来设计护肤品店铺首页。头部包括店铺的logo、宣传标语、收藏按钮、首焦海报等。主体包括各个分类版块下的图片链接。底部包括店铺的各项服务图标及返回按钮。技能点1 网店店招设计1 店招设计思路（1）以品牌

16、宣传为主的类型：一般有着雄厚的实力，给力的产品，想要打造自己的品牌。店招元素包括品牌名称、logo、关注、收藏等。（2）以活动促销为主的店铺：薄利多销，店招风格视活动主题来定，营造出一个活动氛围。店招上适当地加入一些红包或者优惠券领取的按钮。（3）以产品推广为主的店铺：增加店铺主推产品的销量，通常在店招上放上两三款推广的产品。2 店招设计原则（1）要直观明确地告诉客户自己店铺是卖什么的，表现形式最好是实物照片。（2）要直观明确地告诉客户自己店铺的卖点（特点、优势、差异化）。3 店招设计要点（1）店铺名字利用文字传达信息，告诉客户自己是卖什么的，品牌店铺可以标榜自己的品牌。（2）实物照片利用图像

17、传递信息，更加直观形象地告诉客户自己店铺的经营内容。（3）产品特点利用简洁明了的文案直接阐述自己店铺的产品特点，第一时间打动客户、吸引客户。（4）店铺（产品）优势和差异化告诉客户店铺和产品的优势以及和其他的店铺的不同，形成差异化竞争。技能点1 网店店招设计4 店招制作规范、流程（1）确定风格:视产品而定。（2）布局:店招尺寸、店招构成、区块划分。（3）配色方案 可以从logo提取颜色，用品牌的标准色作为色调参考，配色用同色系或邻近色，给人页面很一致化的感受，色相柔和过渡看起来也很和谐。如果店招里包含产品展示，也可以从产品本身提取颜色作为色彩搭配方案。产品联想属性提取颜色，比如水果容易让人联想到

18、黄色、橙色；环保产品容易让人联想到绿色；女性用品容易让人联想到粉色、紫色等。配色方案中所包含的颜色不宜超过3种。（4）规范字体 店招设计中一般不超过3种字体，重点部分可以用字体加粗的方式来突显，并且字体大小使用要有主次之分。（5）Ps排版 越是简约大气的页面，元素务必不要太多，清爽舒适的页面多留白。技能点2 网店导航设计1 网店导航的作用 导航如同现实生活中商场里楼层悬挂的指示牌、分类牌，起到指引消费者快速找到所需商品。导航在店铺首页，起到非常重要的作用，它能方便地引导消费者找到自己需要的商品。（1）店招导航 店招导航是淘宝店铺中默认存在，且不可删除的，它会在店铺的每一个页面（首页、详情页、专

19、题页等）都进行展示。2 网店导航分类（2）页中分类导航 页中分类导航一般情况下出现在店铺首页，其目的是为了更好地引导买家在浏览店铺时及时找到所需商品。页中店招的设计形式多种多样，可以是图文显示，也可以是文字直接引导。技能点2 网店导航设计（3）左侧分类导航 左侧分类导航一般出现在两个位置，第一个位置是在店铺首页，会跟着页面的下拉而变动；第二个是出现在宝贝描述页面，通常作为宝贝分类出现。技能点2 网店导航设计（4）页尾导航页尾导航在店铺首页,买家浏览到底部可直接选择刚才看过的某一个商品类目信息。页尾导航有时也会出现在详情页最底部，目的也是引导买家再次浏览店铺商品，提升店铺的访问深度。技能点3 网

20、店页尾设计1 网店页尾的作用 网店的尾页设计让店铺页面的结构更加完整，可以起到宣传、告知、引发兴趣、引起注意等作用。页尾模块相对页头会少，因此利用好页尾能为店铺起到良好的分流作用，而且页头和页尾属于共同展示页面，无论打开哪个详情页都会显示。技能点2 网店导航设计2 网店页尾设计技法(1)页尾设计要素一:客服联系方式 客服联系方式很多店铺会设置在左右两边，而设置到页尾的目的就是页头和页尾属于共同页面，增加展示机会，方便顾客咨询。(2)页尾设计要素二:购物保障及售后服务 目的让顾客对店铺增加信任。从推销工作来看，售后服务本身同时也是一种促销手段。在追踪跟进阶段，店铺要采取各种形式的配合步骤，通过售

21、后服务来提高店铺的信誉，扩大产品的市场占有率，提高推销工作的效率及效益。技能点2 网店导航设计2 网店页尾设计技法(3)页尾设计要素三:返回首页、购物流程 人性化的设计能够使用户操作更加便捷，目的在于提升用户的购物体验。“用户体验”是直接影响用户是否下单以及用户能否成为回头客的关键。(4)页尾设计要素四:关于我们展示店铺的文化、特色、内涵、服务等；店铺加入哪些售后保障等，如图3.4.10所示。(5)页尾设计要素五:友情链接 除了上述要素之外，还可以在店铺页尾添加友情链接，例如姐妹店铺、合作同盟等。Part four 进入21世纪以来，互联网信息技术的飞速发展及广泛应用为我国经济社会的发展带来了

22、巨大的变化，不仅冲击着我国的经济结构及传统营销模式，同时也改变了许多国人的消费理念及消费习惯。互联网应用目前已经迅速蔓延及渗透到人们的日常生活中，给消费者带来了诸多的便利，这些便利不仅仅是互联网上的丰富娱乐及海量信息，同时互联网展示给人们的还有一种与以往不同的购物方式。通过实现婴幼儿玩具店铺首页设计，学习淘宝店铺设计相关知识，了解网店海报设计技巧。在任务实现过程中：了解网店海报设计思路。了解常见网店海报主题方案。理解网店海报设计“三”原则。了解网店海报常见构图版式。【情境导入】近年来电子商务的快速发展，渗透到人们生活的方方面面，网店如何能够提高关注度和吸引顾客的注意力，成为网店是否能够成功的关

23、键。不能够亲眼看到、摸到实物，无法体验产品的真实感是消费者在网上购物的一个非常大的弊端，尤其是作为孩子家长的消费者会更加重视产品在使用时的安全性和可靠性。吸引消费者注意力最有效的方法就是优化网店的页面设计，所以婴幼儿玩具店铺只有通过优化页面设计，塑造网店品牌安全健康的视觉形象，提高视觉观感，増加真实度，展现消者的需求从而吸引消费者购买。本次任务主要是实现淘宝婴幼儿玩具店铺首页设计。【功能描述】使用淘宝布局要素来设计婴幼儿玩具店铺首页。头部包括店铺的logo、导航及收藏按钮。主体包括首焦海报、各个分类版块下的图片链接。底部包括返回首页按钮。技能点1 网店海报设计思路 1 海报与背景色色调统一在设

24、计海报（banner）时，先观察背景环境，海报设计尽量避免与主色调产生强烈对比，必须要用对比色设计海报时，要考虑降低纯度或明度。参考图4.4.1 中案例1（a）与降低纯度、明度后的案例2(b)的对比效果。技能点1 网店海报设计思路 2 观察产品亮点决定背景色背景的选择上不能单纯当海报设计，为了做出一张比较漂亮的图片，最好做到背景与产品的呼应。在海报设计中，大体分为两种风格：（1）将拍摄的图直接用作背景，版式排列活动文案技能点1 网店海报设计思路 2 观察产品亮点决定背景色（2）将产品提取出来，背景根据产品灵活变动，再配合版式技能点1 网店海报设计思路 3文案策划排版式在 要明确自己的海报是给中

25、国人看的，过度使用英文是不合适的，可将英文作为中文的辅助元素技能点1 网店海报设计思路 4 合理版式、突出主题产品图片展示与摄影图片展示不同。摄影作品突出原生态，添加文字是为了更好地突出画面。设计作品是画面烘托文案主题的，应将主题文案放在首位重点突出。技能点2 常见网店海报主题方案 1 店铺活动：促销活动 （1）品牌团：官方活动聚划算，可提高品牌的曝光度。（2）官方季节性活动：双十一/双十二活动/年中大促。（3）店铺常规活动：换季、节日。符合当下季节或者节日、特殊日子的相关题材。（4）店铺常规活动：周年店庆、清仓甩卖。技能点2 常见网店海报主题方案 2 单品推广 （1）单品聚划算、爆款：适合店

26、铺中推成爆款或者想要提高某款产品的转化率。（2）新品上市、特价促销：适用于新品上市，并且打算全力推广的产品。技能点2 常见网店海报主题方案 3 品牌宣传品牌宣传适用于达到一定认知度的品牌以及在行业中有一定的知名度的店铺。技能点3 网店海报设计“三”原则1.内容三元素 （1）海报背景。（2）文案：名称、卖点、价格、其他。（3）产品信息。技能点3 网店海报设计“三”原则1.内容三元素 （1）海报背景。（2）文案：名称、卖点、价格、其他。（3）产品信息。2.三段文字 主标题、副标题、附加内容。3.三种字体 海报的文案所使用的字体不宜超过3种。4.三种颜色 海报配色方案。70%主色，25%辅助色，5%

27、点缀色。5.30%以上留白 高端、大气的海报风格要多留白，最好可以让客户能在0.3秒读完。技能点4 网店海报常见构图版式1 左文右图字体上粗下细、上大下小，上下主次分明，形成对比。文案四四方方架构非常稳重，非常平衡技能点4 网店海报常见构图版式 2 左图右文 字体上粗下细、上大下小，排版结实、稳重技能点4 网店海报常见构图版式3 两边图中间文字 一般利用近景、远景的照片产生对比和呼应（多见模特海报）技能点4 网店海报常见构图版式4 背景为风景图利用半透明的底框，然后再在里面排文案，避免文字模糊与混乱技能点4 网店海报常见构图版式 5 展示多种产品当海报上要放置过多的促销产品时，可以采用这种版式

28、。产品平行排版，中间利用半透明的框展现文案技能点4 网店海报常见构图版式 6 斜切式构图斜切式构图会让画面显得时尚，动感活跃。但是画面平衡感不是很好控制。一般文案倾斜角度不超过30，文字往右上方倾斜便于阅读Part five 随着电子商务的迅猛发展，淘宝网成为区别于实体店的互联网视觉营销，其网站运作完全依赖于互联网。网店产品价值的塑造是淘宝卖家装修网店吸引买家的一个非常重要的手段。所以网店产品价值的塑造同时具有科学性、艺术性，同其目的性结合起来，因而加强买家对网店的购买热情，能够増强买家的粉丝忠实度。通过实现淘宝瓷器店铺宝贝详情页设计，学习淘宝详情页设计相关知识，了解淘宝详情页的设计方法。在任

29、务实现过程中：了解淘宝详情页的作用。了解制作淘宝详情页的前期准备。了解淘宝详情页的设计元素。了解淘宝详情页的设计原则。掌握淘宝详情页的设计技巧。【情境导入】网络购物作为一种全新的购物模式，在我们日常生活中逐渐兴起。作为一个虚拟的网络平台，购买者并未和物品的实体进行接触，也缺少直接的购物体验。但网络购物与传统零售业相比，也有着无法比拟的便捷和方便。产品详情页的设计是否合理对消费者购买决策影响重大。在新媒体和新技术手段支持下，如何利用互联网与交互技术，结合产品自身的特点及优势，从而提升转化率，是淘宝美工应当掌握的职业技能。本项目将以淘宝瓷器店铺宝贝详情页设计为例，展示如何应用这些新媒介、新技术条件

30、下的传播方式，实现全方位、多感官的信息传播，以便为消费者提供安全可靠的服务。【功能描述】使用淘宝布局要素来设计瓷器店铺宝贝详情页。头部包括产品的海报。主体包括产品卖点、属性、细节展示等。技能点1 淘宝详情页的作用 淘宝详情页是提高转化率的入口，激发消费者的消费欲望，树立消费者对店铺的信任感，打消消费者的消费疑虑，促使消费者下单。优化宝贝详情对转化率有提升的作用，但是起决定性作用的还是产品本身。具体到详情页的构成要素来说，产品海报用以引起消费者的注意；产品全景图有利于提升消费者的购买兴趣；痛点（一般指用户为了更好的生活而中途碰到的问题）的挖掘可以拉近与消费者的距离；卖点优势体现产品价值；产品属性

31、功能和细节展示便于消费者更加深入地了解产品；检测报告的展示能够增强消费者的信任感；好评分享展示刺激消费者进一步加强购买欲望。技能点1 淘宝详情页的作用技能点2 制作淘宝详情页的前期准备 设计宝贝详情页之前要充分进行市场调查，同行业调查，规避同款。同时也要做好消费者调查，分析消费者人群，分析消费者的消费能力，消费的喜好，以及消费者购买所在意的问题等。1 进行市场调查进行市场调查通过阿里指数(http:/)可以清楚地查到消费者的一切喜好以及消费能力、地域等很多数据，学会利用这些数据对优化详情页很有帮助。另外“生E经”等付费软件也有一些分析功能。2 了解消费者最在意的问题了解消费者最在意的问题可以去

32、宝贝评价里面找，在买家评价里面可以挖出很多有价值的东西，了解买家的真实需求以及购买后遇到的问题等。3 调查结果及产品分析调查结果及产品分析首先，据市场调查结果以及自己的产品进行系统的分析总结，罗列出消费者所在意的问题，同行的优缺点，以及自身产品的定位。然后，根据店铺产品以及市场调查的结果来确定本店的消费群体。最后，针对消费群体挖掘出本店与众不同的卖点，关于产品卖点的范围非常广泛，比如。卖价格、卖款式、卖文化、卖感觉、卖服务、卖特色、卖品质、卖人气，等等。技能点3 淘宝详情页的设计元素 淘宝美工要根据消费者分析、自身产品卖点的提炼以及宝贝风格的定位来准备所用的设计元素。这些设计元素包括配色、字体

33、、文案、构图、排版以及氛围。一般来说，详情页上半部分诉说产品价值，后半部分培养消费者的消费信任感。对于消费信任感不光通过各种证书，品牌认证的图片来树立。使用正确的颜色，字体，还有排版结构，这些对赢得消费者消费信任感也会起到重要的作用。详情页每一块组成都有它的价值，都要经过仔细的推敲和设计。如何对详情页内容进行排版设计，是考验淘宝美工职业水平的地方。页面风格主要根据产品本身来定；素材搜集的渠道可以通过前期实拍或者素材库的搜集而获得；页面框架可以根据文案内容，结合实际产品，进行有效的布局建立；配色方案可以依据已有的店铺视觉规范直接延续使用，或者从产品本身、品牌logo、产品联想属性中提取；页面字体

34、相当于一个桥梁，相当重要。他对产品起到解释说明，方便顾问阅读，同时也是重要信息的引导作用。所以字体的使用一般不超过三种，重点部分加粗突出，注意字体颜色的深浅不要太复杂，以免影响阅读。对于初学者而言，越是简约大气的页面，元素务必不要太多，清爽舒适的页面多是适当留白，参考优秀案例，多多借鉴和学习。技能点4 淘宝详情页的设计原则 1 把所有的消费者都当作非专业人士把所有的消费者都当作非专业人士 不要理所当然的认为消费者应当知道关于产品的任何信息，要把所有的消费者都当作非专业人士，假设消费者对产品是一无所知的，关于产品的性能和细节都应在详情页条理清晰的展示清楚。2 遵循遵循3秒钟注意力原则秒钟注意力原

35、则 每个消费者在寻找自己需要的产品的时候，面对的选择非常多。如果产品在开头的3秒钟不能给消费者留下深刻的印象，没有让他明确地感觉到这个产品可以满足他的需求，那么，有很大的可能就是在3秒钟之后，在消费者随便扫了2眼之后，觉得这个产品没有吸引力，就会关掉页面。所以，在详情页开头的3秒吸引客户的注意力是至关重要的。3 产品详情前产品详情前3屏决定买家是否购买商品屏决定买家是否购买商品 现代社会人们生活节奏在不断加快，从这个角度出发，设计详情页的前提是确保客户可以用最短的时间确认当前页面的产品到底是不是他真正需要购买的。所以，在淘宝详情页的前3屏就基本上决定了客户是否会购买他所浏览的这个商品。技能点4

36、 淘宝详情页的设计原则 4 产品详情一定要有情感营销的因素在，且能引起买家的共鸣产品详情一定要有情感营销的因素在，且能引起买家的共鸣 当人们看一样事物，要是这个事物能跟人们产生共鸣，能有相同的理念得到认同，那么人们会很快接受这个事物。一切的购买行为都是建立在信任的基础上的，当消费者在感情上认同产品的时候，转化率会大大提升。5 消除一切使买家分心或者暂缓购买的内容消除一切使买家分心或者暂缓购买的内容 不要在主推的商品里面加入太多的关联销售的内容。在开始主推单品的阶段，每一个流量都是宝贵的，不要让消费者分心，最好是不要在详情页里面加关联销售的内容，让消费者能够专心看完产品介绍，尽量促成主推产品的成

37、交，否则太多的关联销售，会造成消费者分心，结果是大大降低成交率。6 商品的卖点只有一个，而且要反复不断地告诉消费者商品的卖点只有一个，而且要反复不断地告诉消费者 一个人对一个事物的感觉，第一印象是非常重要的，网店美工要做的就是让消费者的第一印象尽可能的深刻，从而加深消费者对产品的认可度。不断重复强调产品的中心卖点，挖掘产品特别突出的地方，而且这个特点是优于竞争对手的。技能点5 淘宝详情页的设计技巧 在制作详情页中美观不是第一要素，只突出图片的美好是没有用的，而是要用符合产品与消费者需求的内容才能激发购买欲。做一张能够带来转化率的详情页可以从以下几个方面入手。1 首屏具有吸引性首屏具有吸引性 第

38、一张图一定要吸引眼球，让消费者有继续点下去的想法。可以采用关联销售丶实力展现、产品主图、促销图等方式，但是最主要的一点就是必须得是消费者关注的。可以通过买家的评价找到答案，不管是好评还是差评其中买家提到最多的也就是最为关心的问题，那么就可以从这方面入手来做首屏图。技能点5 淘宝详情页的设计技巧2 产品价值产品价值如何在淘宝琳琅满目的产品中脱颖而出，塑造产品自身价值，可以从以下几点入手：（1）产品本身的特点。原材料、大小、形状、颜色、款式、品质、原产地等。（2）附加值。赠品、包装、售后等。（3）品牌概念。自己独特的风格。（4）唯一性基点。技能点5 淘宝详情页的设计技巧4 速战速决速战速决速战速决

39、就是通过活动的设计，比如限时、限量等，尽可能地促进转化。5 突出特色突出特色有些商品的特色并不止一个，要将这些全都放上未免会太繁琐，而且消费者也记不住。那么就可以找出最为突出的特点，强化唯一的核心卖点，然后用辅助卖点进行扶植。比如。女装类目中A产品全篇在反复强调一点：衣服修身；而B产品则是强调面料好、款式新、修身、细节好。对于这两种产品的记忆效果，消费者一定会记住A产品。想要通过详情页得到转化的技巧之一就是用能够吸引消费者的特点来抓住买家。Part six 信息社会的来临使移动交互应用媒介和虚拟网络模式为主的消费方式不受时间、地点的限制，得到人们的青睐。随着网上购物人群数量的增多，促进了国内各

40、大网站（淘宝、京东、唯品会等）的业务发展，这些网站都拥有自己对应的手机客户端软件便于用户通过手机网上购物。通过实现淘宝运动鞋店铺手机端首页设计，学习淘宝店铺手机端设计相关知识，了解淘宝店铺手机端页面的设计表现方法。在任务实现过程中：了解淘宝店铺手机端与PC端的区别。了解淘宝手机端首页设计要素。了解淘宝手机端首页设计原则。【情境导入】手机在我们的日常生活中有着无法取代的地位，甚至有一种说法，手机已经成了我们身体上的一个器官，找不到手机几分钟就会有烦躁情绪产生。2016年，天猫双十一当天交易额超1207亿元，无线成交占比近82%。移动互联网时代已经来临，并迅猛发展着，因此手机淘宝的时间设计必将成为

41、重中之重，这是设计师需要清晰认识的。无线端购物是电商发展的大趋势，随着淘宝业务向无线端倾斜，无线浏览拉开新一轮商家竞争大赛的序幕。一个拥有漂亮外观且用户体验好的手机端店铺是促成订单成交的重要因素之一。要想抢占流量高地，手机店铺的装修是不可缺少的一战。本项目将以淘宝运动鞋店铺手机端首页设计为例，展示如何应用这些新媒介、新技术条件下的传播方式，得以实现全方位、多感官地信息传播，以便为消费者提供好安全可靠的服务。【功能描述】使用淘宝布局要素来设计淘宝运动鞋店铺手机端首页。头部包括店铺的首图、广告语、优惠券。主体包括产品分类版块。技能点1 淘宝店铺手机端与PC端的区别1 尺寸的不同尺寸的不同 手机屏幕

42、的大小要求着手机淘宝装修的尺寸，尺寸的不合适会造成界面混乱，浏览效果不佳问题。2 布局的不同布局的不同手机淘宝更加符合受众的需求，要做到快时间预览，快速阅读，操作方便，消费者碎片化消费，这就决定了布局要简洁、明了，摒弃不必要的过多的装饰。3 详情的不同详情的不同电脑端会通过较多的文字说明产品的卖点、店铺促销和优惠等信息，但手机淘宝详情要使用简洁的文字，适当的图片信息将详情阐述。4 分类的不同分类的不同分类结构要明确，模块划分清晰，体现少而精的特点，最好以图片突出体现为主。5 配色的不同配色的不同很多电脑端会用深色系体现店铺风格和高大上的品质等，而手机端由于浏览面积小，视觉受限，因此店铺颜色要鲜

43、亮，才能使消费者有愉悦感。技能点2 淘宝手机端首页设计要素与电脑端从左到右的浏览习惯不一样，手机端的屏幕较小，浏览习惯一般是从上到下。如果都是双列宝贝，或者用双列图片展示宝贝，用户的兴趣度和体验趣味性就会大大降低。利用无线装修，可以巧用各种大模块的组合，像焦点图和左文右图及多图等模块，使手机淘宝首页显得更有趣味性。1 店招的设计店招的设计淘宝手机端店铺的店招规格尺寸是 642像素200像素,图片类型支持jpg、jpeg、png等格式。2 首图模块设计首图模块设计淘宝手机端店铺的首图设计和电脑端的首焦海报设计道理是一样的，需要注意的是，由于手机屏幕较小，无论是产品还是促销图设计，主题要简明、突出

44、，吸引浏览者的目光。首图模块图片最多4个，最少1个，尺寸建议608像素304像素，图片类型jpg、png等格式。可尝试用来展示店铺优惠活动促销内容或者主推宝贝等。3 图片大小要求图片大小要求宽度480620像素，高度小于等于960像素。图片类型支持jpg、jpeg、png、gif等格式。4 文字要求文字要求中文字体大于等于30号字；英文和阿拉伯数字大于等于20号字。当需要添加的文字太多时，建议使用纯文本的方式编辑，这样看起来更清晰。技能点3 淘宝手机端首页设计原则（1）页面要确保能极速打开，由于手机端流量的限制，不要出现打开产生无法呈现产品图片现象。（2）产品信息要通过简洁、有力的方式，能够快速传播给消费者。（3）店铺设计主题和店铺风格在视觉效果上要相互结合，协调统一，首尾呼应。（4）保持更新常态，要根据不同的活动内容和促销目的，展示不同的设计风格，增强给买家的新鲜感。（5）产品分类结构要明确清晰，模块划分合理，多以图片为主。（6）文字设计方面，要便于消费者快速读取，注意控制文字大小，在页面整体效果上还是多以图片为主。