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