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

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