网店装修美工及视觉营销设计(宝贝图、海报、详情页).ppt

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,网店装修与美工设计,为什么要做网店装修和设计？,网店装修及美工的重要性,网店美工的根本宗旨,一个好的网店美工，不仅仅是考虑,观赏性,，,更重要的是记住美工,时刻服务于营销,目的（,提高转化率,）。,店铺,装修,原则,相同点,：,1,、诱导用户逐步产生购买冲动和行为，,提高转化率,2、,装修风格,和产品、人群定位保持一致,一、网店装修,-,流程,分类陈列区,分类陈列区,目标,定位,（百度指数、阿里指数、生意参谋）,：产品定位,消费群体人群 年轻？时尚？商务？稳重？暗黑？,知性？清新,.,风格,设计,：整体风格 主色、版式、页面布局,细节风格 宝贝主图、海报、详情页,.,店铺,装修,装修,修改,：热力图等检讨复盘,一、网店装修,橱窗形象,分类陈列区,分类陈列区,分类陈列区,门头,logo,促销区,搭配陈列区,搭配陈列区,海报广告,店招的设计要点及实操,1,没有店名,2,色彩搭配不醒目,3,商品色彩和背景色彩混为一体,小技巧：时间仓促时利用汉语拼音做店标显得更高大上,淘宝宝贝主图的要求,宝贝图片上传建议,建议：,1,、宝贝主图最好上传为,800*800px,，既可以使用放大镜功能让消费者看到,细节又可以节约流量，节省图片显示时间,2,、,5,张宝贝图建议分配为,:1,张,正面图,，,2-3,张,侧面或细节图,，,1-2,张,宣传图,3,、宝贝主图后期制作时有品牌,统一在右上角加品牌,logo,、背景和产品位置,4,、严格按规格批量统一裁剪为,正方形,(,天猫、淘宝智能版自定义区则统一尺寸,),5,、宣传图保持界面干净，,文字简洁，不要覆盖商品本身，尽可能不要加水印,6,、,严禁牛皮癣，严禁盗图,水印过多,牛皮癣,文字放置在产品上,文字过多，文字字体，色彩风格不统一,注意层次感 文字不放置在主图 放置在背景图,宝贝图片设计策划,淘宝橱窗展示应统一背景色和风格，注意突出主题 图片花色过多分散卖点,宝贝主图设计策划,突出主题 商品标签产品名称，纯色背景,宝贝主图设计策划,淘宝主图为正方形 统一图片大小、格式,宝贝主图设计策划,制作模板,图片整齐风格统一,模板实际就是做了一个整体规范,统一品牌标记,标准位置,价签,logo,裂帛实体店宝贝统一模板,根据模板,调整透明度，统一酒瓶尺寸大小，调整倾斜度，校对位置,水果店商品展示,多角度展示产品,2,张之内产品广告,多角度展示,主图,宝贝主图设计策划,宝贝主图策划,=,展示产品,+,服务,广告,主图整体外观,多角度文字排版介绍,细节配件展示,其他配件展示,消费者关心的东西一目了然展示,看图即可解答心中疑问,服务到位,宝贝主图设计策划,实操,1,、如何调整图片分辨率,2、如何按照要求批量裁剪图片及添加品牌logo,3,、,如何抠图,4,、,如何,通过色彩平衡（曲线、对比度、色阶）,调整图像明暗度,色彩与网店设计,色环,色彩三个属性,色彩冷暖性,1,、红色,红色给人一种喜庆火热的感觉，是一种对人刺激性很强的色。红色容易使人兴奋、紧张、激动，故也称为兴奋色。在网,页美工设计中运用红色会达到比较好的视觉宣传效果,色彩心理与设计风格,2,、黄色,黄色给人一种光明辉煌的感觉，是最为娇嫩的一种色。在所有的颜色当中黄色明度最高。在网店美工设计中使用黄色和白色的搭配，会使得页面更加的干净纯洁。,3,、蓝色,蓝色给人一种清新、舒畅的感觉，是一种最具理智沉稳的色。蓝色是冷色调当中最为典型的代表色，可以衬托出其它色彩，让整个网页,看起来更加丰富色彩,4,、绿色,绿色给人一种新鲜、平静、安全等方面的感觉，是一种具有黄色和蓝色两种成份的色。绿,+,黄,=,单纯、年轻；绿,+,黑,=,美丽、成熟；绿,+,浅红,=,春天的来临。网店运用绿色系，显示出网店的年轻生命力，给人健康、成熟的心理感受。,5,、紫色,紫色给人一种优雅、高贵、神秘的感觉，在所有色彩中明度是最低的。一般紫色会用来代表女性相关的商品，在化妆品包装中也常使用紫色。网店设计中紫色并不能在所有站点中使用，但紫色会给人留下深刻印象，容易抓住人的视线,6,、白色,白色给人一种纯洁、淳朴、神圣的感觉。在大自然中雪的颜色为白色，同样会使人造成寒冷的生理反应；在服饰搭配上，白色为百搭色彩，可以和任何颜色进行搭配。在网页设计中白色被广泛用于电子商务、微博等各种网站。白色时常也用在字体颜色、背景颜色、图片等等，,7,、黑色,黑色给人一种严肃、刚健、恐怖的感觉，是纯度、色相、明度最低的非色彩。配色中黑色和许多颜色构成良好的对比调和，运用范围广泛。网店设计中同时运用黑色和白色，视觉冲击力很强，主次分明，通常可以表现出强烈的时代感,冲突的对比色,华丽的对比色,稳健的邻近色,统一的同类色,一般而言，色彩搭配不要超过三种，之间的比例是这样的,.,海报设计之色彩搭配,海报色彩设计,-,相近色搭配,相邻色搭配,相邻色或相近色搭配：优点：稳定、平静、和谐，常用于家居，生活类商品主题海报缺点：容易单调，必须加入其它图案平衡,间隔色搭配,红,+,蓝，典型冷暖色搭配，容易让人产生视觉亢奋感，需要万能色白色中和,.,间隔色搭配：,优点：即不像对比色那么冲突剧烈，又有明快，活泼之感，,可常用于各种活动海报搭配,缺点：色彩搭配比例难控制,对比色搭配,对比色搭配,优点：强烈的视觉冲击力，有力量、气势，活力。,常见于时尚品主题海报，也常用于促销活动,缺点：不易调和把控,海报设计之细节,-,点线面,点的运用,线的运用,虚拟的视线,引导文字,串联信息,面的设计,分割画面,避免背景单调,增加层次感和动感,详情页、网店整体设计点线面,点画面的气氛点缀、丰富层次、有对比大小就有点,线引导视觉走向、链接信息,面画面层次分割、信息的载体,一张高效的网络广告的三大要素,文案,主标题,/,副标题,/,价格,/,标签,商品,主产品,/,次产品,/,模特,背景,前背景,/,中背景,/,后背景,分 层,商品层：明确主题,图案为主题服务，即使没有文字，,也知道这个图传达的意思,商品层：关注点清晰,文案层：关键信息视觉清晰,文案层：图文一致，逻辑清晰,文字接地气,不同字体对应产品、目标人群定位,电商常用字体,女性字体,柔软 飘逸 纤细 秀美 气质 时尚,如何视觉清晰,适用范围：化妆品,/,日用品,/,轻纺,/,女性鞋服,/,各种包包,/,母婴,如何视觉清晰,一看就买不起,纤细 优美 简洁 小 留白,男性字体,硬朗 粗犷 沉稳 大气,适用范围：家电,/,办公,/,男性,鞋服,/,电子产品,/,户外工具,促销字体,大 醒目 吸引 倾斜,经过大数据分析,一级文案不要超过,8,个字,文字越多，点击越低,less is more,文字量,文字疏密度,文字间距一般根据字体大小选11.5倍作为行间距，1.52倍作为段间距。比如12号字体，行间距是12px-18px。段落间距则是18px-24px。另外，行高/段落之间的空白=0.754.行间距正好是段落间距的75%是非常常见的。,文字重点强调,文案描边,文案字体加大,文案下方投影,复杂背景可以在文案下面加半透明图层,文案中最重要的语句，运用,粗,细对比和,大,小,对比，加以强调和区分,重点文字,不同色,强调,背景层,后背景,必须有,前背景,当装饰,中背景,看情况,背景层,背景层,后背景,中背景,前背景,文字层和商品层排版关系,互不干涉,相互照应,文字突出,商品清晰,广告海报的目的,传达信息 引导购买,提升转化率,把别人的钱装进自己的口袋,里,实操,实际查看一个海报文字层，商品层，背景层,使用素材创做广告宣传海报,详情页设计思路,确认这个产品,是我要的,感受门店的,人气跟服务,看下别人怎么说,想象，产生,购物的兴奋感,对产品有了兴趣，希望有更多的了解,解读产品的,整体价值,确定想要了,欲望无止境的扩大,思考有没有,其他家在卖？,找专家确认,点旺旺,拍下，付款,其它,1,、买家的购物心理历程,2,、对应的设计思路,引发兴趣 激发潜在需求 从信任到信赖 替客户做决定。,你来了，欢迎，看看我们的宝贝怎么样？做工，美观，实用，性价比,.,我是做这个的专家，我很值得信赖，买家买了都说好，我还有更多优惠的产品您还可以看看，近期我店铺还有更多优惠，我的店铺还有很多活动再进行,.,第一部分：创意海报,第二部分：宝贝特性介绍,第三部分：宝贝的优势,第四部分：宝贝的利益,第五部分：宝贝的规格参数,第六部分：宝贝的细节展示,第七部分宝贝的品牌形象,详情页排版,创意海报情景大图,宝贝卖点,/,作用,/,功能,规格参数信息,宝贝优劣对比,全方位展示,/,细节图片展示,产品或店铺资历证书,售后保障问题,/,物流,02,、对应的详情页排版,详情页排版,1.,解决买家需求,海报区,文字引导,疑虑打消,建立信心，引发兴趣,2.,叠加产品价值,卖点展示,细节展示,对比展示,3.,促成交,活动重申,营造紧迫感,4.,其它,物流,/,签收提醒,售后流程,品牌故事,5.,产品关联,同类产品关联,搭配关联,锚点关联,黄金三十秒,3,、对应的设计部分,详情页,-,买家调研,详情页设计,-,解决消费痛点,痛点：,是个互联网概念，是相对于传统企业的需求而言的。就是用户在使用产品或服务时抱怨的、不满的，让人感到痛苦的接触点。对于产品来说，痛点多数时候是指尚未被满足的，而又被广泛渴望的需求，有些情况下，也直接指代需求。,详情页设计,-,痛点调查,百度指数,-,需求图谱,百度指数,-,舆情洞察,百度指数,-,人群属性,问题：请分析图中用户评价，能解读出哪些痛点信息？对商家或运营者有什么启示？,答：主要是3个层面的问题。,1、产品性能问题-识别不灵敏；,2、按照服务问题；,3、老人和小孩使用不方便。,详情页设计,-,打造卖点,引起共鸣,5.4,详情页设计技巧,解决痛点,痛点挖掘,突出对比,巧用反馈,创造场景,独特卖点,数据背书,包装简陋，就是马口铁包装外裹了一层白纸、茶质较好、定价在自饮茶叶市场里偏高，而且白茶自身占茶叶市场份额不高,.,思考：如何设计产品详情页,美工的成长之路,技术美工,设计美工,视觉营销专家,