电商视觉的设计 店铺首页视觉的设计57页PPT
电子商务视觉设计PPT课件(共8章)第6章 电商网店详情页视觉设计
![电子商务视觉设计PPT课件(共8章)第6章 电商网店详情页视觉设计](https://img.taocdn.com/s3/m/3f0c7379571252d380eb6294dd88d0d233d43ca8.png)
学习重点和难点
• 学习重点: 电商网店详情页视觉设计方法
• 学习难点: 电商网店详情页视觉设计制作
第一节 电商网店详情页认知
1.1 详情页意义
电商网店详情页是展示商品信息的页面,通常消费者注意到感兴趣的首页后, 最想浏览的就是详情页,它直接决定了电商网店能否留住消费者,达成交易。
1.2 详情页营销流程
第四节 产品细节图视觉设计
4.3 商品细节图视觉设计案例——品牌女鞋 案例效果:选择“直线工具”,性栏中将填充颜色设置为黑色,描边颜色设置
为无,描边宽度设置为1像素,然后绘制指示连接线,完成最终效果图。
第五节 商品功能图视觉设计
5.1 商品功能图认知
如下图所示商品功能图对商品的功能或作用进行翔实、透彻的分析和说明。 在整个商品详情页中商品功能图的位置相对靠后,能坚持浏览到这里的消费者说 明已经对商品产生了很大兴趣。因此,商品功能图视觉设计的好坏,直接影响消 费者对商品的持续认可,进而影响消费者下单。
(四)服务型:详情页中保修费用全免、送货上门、无忧退换等有保障的售后 服务虽然不计入商品价值,却深受消费者喜爱。
(五)附加型:有时可以通过详情页中体现的附加价值来提高店铺的销量和消 费者的黏性。该类型详情页虽然是老客户的服务通道及专属的优惠力度,但是新 客户也会有相应的礼品。
第二节 商品主图视觉设计
第二节 商品主图视觉设计
2.2 商品主图设计形式 (一)摆拍设计商品主图的基本要求是可以清晰
地展示商品全貌。商品摆拍可以使用纯白背景或简洁 背景,这种设计的优点是直接、干净,可以让消费者 快速了解商品的外观与颜色,最能直观地表现商品特 点和属性。
(二)场景设计场景设计是指通过模特进行商品 展示,或者根据产品特点和用途搭建生活化、场景化 的环境。这种设计在展示商品的同时,还可以起到烘 托商品氛围的作用。场景设计通常需要较高的成本和 一定的拍摄技巧运用不当会适得其反。
跨境电商视觉设计-PPT演示文稿
![跨境电商视觉设计-PPT演示文稿](https://img.taocdn.com/s3/m/e4e117e73c1ec5da51e27099.png)
店招设计
速卖通系统板块的店招尺寸宽度为1200px,高度可以在100—150px之间,一般在设计店招的 时候应该尽量将店招区域充分的利用起来,将尺寸设计为1200px*150px。这样能够在尽可能大的空 间展示店铺信息,店招也会显得相对大气,从而提高卖家的认可和购物体验。
在进行店招图片设计的时候首先要认识到两个问题: 1.目前速卖通系统的店招板块,只可以加入一个超链接; 2.在不同的时间段,有不同的促销方式和不同的重点推荐产品,因此店招也要随之改变。
一是一个好的详情文案,能更好地体现产品卖点,打动 顾客的心;二是好的详情文案也能提高访问深度,甚至还能 起到引导购买、提高转化率的作用。
在这里提别提醒一下,有一些文案可以做成图片的形 式出现,但更多时候,还是建议卖家在上传详情的时候直 接使用文字就好,这样才能真正算作图文并茂,有利于提 高产品的搜索匹配度。
视觉设计认知-----视觉规范化的实施和应用
店招:
轮播海报:
视觉设计认知-----视觉规范化的实施和应用
第三方板块
板块名称 全屏店招 全屏轮播海报 轮播海报 自定义板块 侧边栏
主图 详情
建议尺寸(宽*高)(单位:像素) 1920*150 1920*n(建议不超过600) 1200*400 1200*n(在保证字符数够用的情况下,不限) 180*n(在保证字符数够用的情况下,不限) 750*750、800*800、960*960 750*
02
文案策划
文案策划
在视觉营销中,文案对图片起到一个相辅相成的作用。如我们经常所说的图文并茂,强调的也正是 这一点。无论从产品详情的角度还是从店铺设计角度来看,在一个成功的案例中文案都是必不可少的一 部分。
文案策划
店铺首页视觉设计方案PPT课件
![店铺首页视觉设计方案PPT课件](https://img.taocdn.com/s3/m/e3a6842c65ce05087732137f.png)
03
4.2 店招视觉设计
1 店招视觉设计规范
店招高度设计规范
淘宝后台的店招高度为120像素,建议设计时设定店 招尺寸为950×120像素,加上导航条高度30像素,共
150像素,可避免发布后导航不显示的问题
4.2 店招视觉设计
1 店招视觉设计规范
店招元素设计
清晰的店铺名称
品牌宣传语
移动端二维码
4.2 店招视觉设计
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
4.3 首焦轮播区视觉设计
设计聚焦消费者视线
1
构建设计图三要素
2
溶图的应用范围
3
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
首焦位置
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
4.3 首焦轮播区视觉设计
1 设计聚焦消费者视线
首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。
两类店铺首页排版
4.1 首页视觉水平的四大指标
3 首页人均点击次数
首页人均点击次数,指在一段时间内人均点击了多少次,如下图所示。假设某 日点击该网店的唯一访问者数为150人,在此期间内点击本店铺首页的总访问数为 600次,那么首页人均点击次数为:600次÷150人=4次/人。
人均点击次数
4.1 首页视觉水平的四大指标
淘宝网店视觉营销(PPT41页)
![淘宝网店视觉营销(PPT41页)](https://img.taocdn.com/s3/m/707304e131126edb6e1a104b.png)
• 金字塔原理+ 案例
信誉 搭配 做工品质 款式风格 客户心里金字塔
视觉漏斗模型 组图
细节材质图
搭配方案
好评 热卖
• 针对目标定义的详细 产品描述 达到5感
•
真实感 真实再现产品原貌 不同角度 更多细节
•
逻辑感 根据买家的需求部署和展开卖点陈述,达到层层打击,达成购买
•
亲切感 针对目标消费者的特性进行文案,图像的风格设定,亲切,贴近。
策划
沟通
设计
网店定位 产品策略 受众分析 竞品分析 时段分析
产品体验 策略沟通 素材准备 草案讨论 确定创意 参考目标
形成文案 定义主题 分解层次 构图、色调 排版、字体 细节、气氛
Print Page
• Print topics here
Over!
9、静夜四无邻,荒居旧业贫。。21.2.1021.2.10Wednesday, February 10, 2021 10、雨中黄叶树,灯下白头人。。09:42:5609:42:5609:422/10/2021 9:42:56 AM 11、以我独沈久,愧君相见频。。21.2.1009:42:5609:42Feb-2110-Feb-21 12、故人江海别,几度隔山川。。09:42:5609:42:5609:42Wednesday, February 10, 2021 13、乍见翻疑梦,相悲各问年。。21.2.1021.2.1009:42:5609:42:56February 10, 2021 14、他乡生白发,旧国见青山。。2021年2月10日星期三上午9时42分56秒09:42:5621.2.10 15、比不了得就不比,得不到的就不要。。。2021年2月上午9时42分21.2.1009:42February 10, 2021 16、行动出成果,工作出财富。。2021年2月10日星期三9时42分56秒09:42:5610 February 2021 17、做前,能够环视四周;做时,你只能或者最好沿着以脚为起点的射线向前。。上午9时42分56秒上午9时42分09:42:5621.2.10 9、没有失败,只有暂时停止成功!。21.2.1021.2.10Wednesday, February 10, 2021 10、很多事情努力了未必有结果,但是不努力却什么改变也没有。。09:42:5609:42:5609:422/10/2021 9:42:56 AM 11、成功就是日复一日那一点点小小努力的积累。。21.2.1009:42:5609:42Feb-2110-Feb-21 12、世间成事,不求其绝对圆满,留一份不足,可得无限完美。。09:42:5609:42:5609:42Wednesday, February 10, 2021 13、不知香积寺,数里入云峰。。21.2.1021.2.1009:42:5609:42:56February 10, 2021 14、意志坚强的人能把世界放在手中像泥块一样任意揉捏。2021年2月10日星期三上午9时42分56秒09:42:5621.2.10 15、楚塞三湘接,荆门九派通。。。2021年2月上午9时42分21.2.1009:42February 10, 2021 16、少年十五二十时,步行夺得胡马骑。。2021年2月10日星期三9时42分56秒09:42:5610 February 2021 17、空山新雨后,天气晚来秋。。上午9时42分56秒上午9时42分09:42:5621.2.10 9、杨柳散和风,青山澹吾虑。。21.2.1021.2.10Wednesday, February 10, 2021 10、阅读一切好书如同和过去最杰出的人谈话。09:42:5609:42:5609:422/10/2021 9:42:56 AM 11、越是没有本领的就越加自命不凡。21.2.1009:42:5609:42Feb-2110-Feb-21 12、越是无能的人,越喜欢挑剔别人的错儿。09:42:5609:42:5609:42Wednesday, February 10, 2021 13、知人者智,自知者明。胜人者有力,自胜者强。21.2.1021.2.1009:42:5609:42:56February 10, 2021 14、意志坚强的人能把世界放在手中像泥块一样任意揉捏。2021年2月10日星期三上午9时42分56秒09:42:5621.2.10 15、最具挑战性的挑战莫过于提升自我。。2021年2月上午9时42分21.2.1009:42February 10, 2021 16、业余生活要有意义,不要越轨。2021年2月10日星期三9时42分56秒09:42:5610 February 2021 17、一个人即使已登上顶峰,也仍要自强不息。上午9时42分56秒上午9时42分09:42:5621.2.10
淘宝店铺首页设计资料ppt课件
![淘宝店铺首页设计资料ppt课件](https://img.taocdn.com/s3/m/7ddd5c613b3567ec102d8ad0.png)
ห้องสมุดไป่ตู้
41
30
四、淘宝店铺首页海报设计技法
5. 展示多种产 品:当海报 上要放置过 多的促销产 品,可以采 用这种版式。 产品平行排 版,中间利 用半透明的 框展现文案。
31
四、淘宝店铺首页海报设计技法
6. 斜切式构图: 斜切式构图 会让画面显 得时尚,动 感活跃。但 是画面平衡 感不是很好 控制。一般 文案倾斜角 度不超过30°, 文字往右上 方倾斜便于 阅读 。
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市,并且打算全力推广的产品
23
四、淘宝店铺首页海报设计技法
(二)常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。
24
四、淘宝店铺首页海报设计技法
(三)海报设计原则: “3”原则
– 实物照片
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点,第一时间打动客户, 吸引客户
– 店铺(产品)优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不
同,形成差异化竞争
12
三、淘宝店铺店招设计技法
(四)店招制作规范、流程:
1. 确定风格:视产品而定 2. 布局:店招尺寸、店招构成、区块划分
(一)海报设计思路:
1. 海报要与大色调统一
• 在设计海报时,先观察大环境,海报设计尽量避 免与主色调产生强烈对比,必须要用对比色设计 海报时,要考虑降低纯度或明度
18
四、淘宝店铺首页海报设计技法
(一)海报设计思路:
2. 观察产品亮点定背景色
电子商务视觉设计 第6章 网店首页视觉设计
![电子商务视觉设计 第6章 网店首页视觉设计](https://img.taocdn.com/s3/m/e2778b20eef9aef8941ea76e58fafab069dc4437.png)
6.1.2 首页的设计思路
9
在设计首页之前,电商视觉设计师需要明确网店首页的设计思路。根据网店运营的需求,通常 可以把网店首页的设计思路分成活动型首页的设计思路、品牌宣传型首页的设计思路。
1.活动型首页的设计思路
每家网店或大或小总会举办一些促销活动,不同的促销力度对于消费者的吸引力有很大的差别。
6.1.2 首页的设计思路
23
(4)设置完毕,单击“确定”按钮。按住鼠标左键,在舞台中拖曳,对背景进行 填充,如图 6-25 所示。
(5)选择“文件”|“打开”命令,弹出“打开”对话框,在该对话框中选择“花 1”文件,如图 6-26 所示。
6.3.3 设计分类导航模块
24
(6)单击“打开”按钮,打开“花 1”图片文件,如图 6-27 所示。
21
(1)启动 Photoshop,选择“文件”|“新建”命令,弹出“新建”对话框。将“宽度” 设置为 1000 像素,“高度”设置为 600 像素,“分辨率”设置为 72 像素 / 英寸,“颜 色模式”选择“RGB 颜色”,“背景内容”设置为“白色”,如图 6-21 所示。
(2)设置完毕,单击“确定”按钮,新建一个背景为白色的空白文档,如图6-22 所示。
6.4 设计轮播图片
26
很多网店首页的第一屏都是轮播图片,轮播图片承担着确立网店 的视觉风格、传达网店的活动信息等重要责任。需要注意的是,在 设计时,要保证这个区域在不同的屏幕分辨率下都能够清晰地展现 出来。
6.4.1 轮播图片的设计要素
27
要使轮播图片达到美观、吸引消费者注意的效果,就要对每张轮播图片的主题、构图和 配色等视觉设计要素进行综合考虑。
6.3 设计分类导航模块
17
电商视觉营销图文ppt课件
![电商视觉营销图文ppt课件](https://img.taocdn.com/s3/m/4f81267dfad6195f312ba6dc.png)
初识 网络视觉
色彩 与 视觉
视觉营销 概述
视觉营销 实例
1
PART I
2
初识:web与视觉营销
什么是WEB(网络)? 什么是视觉营销?
3
先来看看网络
网络
你所认为的上网年龄
网络:就是用物理链路将各个孤立的工作站或主机相连在一起, 组成数据链路,从而达到资源共享和通信的目的。
将不同地方的人们链接在一起的新的脉络
视觉营销的意义: 所有买家在购物的时候都有一个同样的流程: 产品进入视线——信息传递到大脑——产生购买欲望——形成购买。 产品有选择性的进入买家视线——买家有选择性的接收信息到大
脑——传达的信息刺激买家,从而产生购买欲望——最终形成购 买。 其实做好业绩就是在眼花缭乱的市场中霸占买家视线、让买家重点 接收你想传达的信息、刺激买家的购物欲!
=>页面的访问深度增加 =>提升转化率
44
45
4
什么是视觉? 视觉是一个生理学词汇。光作用于视觉器官,使其感
受细胞兴奋,其信息经视觉神经系统加工后便产生视 觉(vision)。通过视觉,人和动物感知外界物体的 大小、明暗、颜色、动静,获得对机体生存具有重要 意义的各种信息,至少有80%以上的外界信息经视 觉获得,视觉是人和动物最重要的感觉。 怎么利用视觉来获得利润呢? 视觉营销:是市场营销层面上一部分销售技术的总和, 这部分销售技术可以使我们向(潜在的)消费者在最 好条件下,包括物质和精神两方面,展示我们用于销 售的产品和服务。
8
色彩
膨胀与收缩
暖色调
轻的配色
柔软配色
前进与后退
冷色调
重的配色
坚硬配色
9
色彩
网页设计视觉篇PPT课件
![网页设计视觉篇PPT课件](https://img.taocdn.com/s3/m/e344f55dcd7931b765ce0508763231126edb77db.png)
8.4 复古西方风格
8.4.1 复古欧美风格的特点
复古风格并非一味的模仿传统元素,而是将古代元素适当 结合现代元素旨兴起古代元素的新风尚。复古西方风格往往借 助西方古典文化中适合且别致的图形影像、文字字体、版式、 配色等视听元素来反映古代的社会习俗 ,文化风尚等,从而 表现出品牌在思想内容和艺术形式方面的追求高品质格。
8.1.2应用及分析
一些媒体传播机构尤其亲睐简约风格,如意大利Bake就是一个跨媒体的传播机构, 其官网只用了简单的字母与图形作为设计元素,用有限的图形文字向用户传达出无限的 想象;而单一的桔红单色系配色让人能立马记住其企业形象。
尽管简约风格目前商业应用中还不太广泛,但仍有少数高端的小型商城选择了简约 风格。
8.2.2 应用及分析
Sanissimo是一家墨西哥食品企业的网站,虽然只有一个页面,却是综合使用影像元 素与滚动视频差技术,将影像风格的魅力展现得淋漓尽致。第一屏左侧是模糊的静态 视频背景,右侧则是清晰的食品。当鼠标向下滚动,则可以看到之前左侧模糊的静态 视频开始播放,完美演绎了食物的诱惑。
Eva是一个移动社交应用,其官网 首页以一个循环播放的视频作为一整个 背景,静止的APP图片反而应用则显得 格外突出。随后大量的图片在视觉上营 造出分享视频的趣味性和娱乐性。
8.1 简约风格
8.1.1简约风格的特点
简约设计是将设计回归本质的一种设计理念。简约并是对内 容的简单删减,而是提炼设计精华,满足美观实用的本质诉求。 在网页中,简约的设计,往往具清晰的页面结构、简单的交互操 作等特征,在满足传递信息的同时,从视觉体验的角度,为用户 带来轻松、愉悦的美感。
简约风格的设计由于内容展示较少,用于小型创意领域机构 的官网较多,而电子商务类网站较少。
电子商务视觉设计-店铺首页视觉设计
![电子商务视觉设计-店铺首页视觉设计](https://img.taocdn.com/s3/m/1760122d91c69ec3d5bbfd0a79563c1ec4dad757.png)
第4章店铺首页视觉设计店铺首页在电商店铺所起到地作用就好像实体店地店面,作为品牌地门脸,它地主要作用是向消费者做展示,通过视觉,氛围,商品与服务地综合感受让消费者对品牌有初步地了解与接触。
首页设计得是否有新意直接关系到商品信息地转化率,因此在进行店铺首页视觉设计时要尽可能地让设计能够聚集消费者地注意力,提高商品信息地转化率,这才是首页视觉设计要达到地重要目地。
首页视觉水平地四大指标4.1目录CONTENTS店招视觉设计4.2首焦轮播区视觉设计4.3商品陈列区视觉设计4.4茶叶店铺首页视觉设计案例4.5首页视觉水平地四大指标4.1判断一个店铺首页设计是否合格要从四大指标来评判:首页跳失率,首页点击率,首页均点击次数与首页平均停留时间。
首页跳失率首页跳失率是指消费者通过某种渠道进入店铺,只访问了一个首页就离开地访问次数占该入口总访问次数地比例。
针对不同地店铺规模与所售商品地类型,可以参照地判断标准是:如果是心级店铺,那么跳失率在 70% 及以下都属于正常,不需要进行优化。
如果是钻级店铺,那么跳失率在 60% 以上就需要考虑是否是海报设计与商品信息地问题了,需要根据具体地数据做出相应地优化与调整。
首页点击率首页点击率是商品在首页展现后地被点击比率,即首页点击率 = 首页点击量 ÷ 首页展现量。
店铺地首页大致可以分为两类:店铺首页罗列出各种光彩夺目地商品,希望有一款商品能够吸引消费者。
店铺首页没有单品展示,以全屏商品海报形式引导为主。
两类店铺首页排版4.1.3首页均点击次数首页均点击次数首页均点击次数是指在一段时间内均点击了多少次。
均点击次数4.1.4首页平均停留时间首页平均停留时间首页平均停留时间为访问店铺首页地所有访客总地停留时长除以访客数(单位:秒),多天地平均停留时间为各天均停留时长地日均值。
行业性质不同,每个访客在不同行业店铺停留地时间差异很大。
在进行分析时,可以以一段时间内访客在店铺首页地平均停留时间作为基数,并记录下这段时间地销售量,以后再拿新数据进行对比就知道平均停留时间内销量是提高了还是下降了。
电商视觉设计 PPT第1章
![电商视觉设计 PPT第1章](https://img.taocdn.com/s3/m/ac94ace984254b35eefd34d6.png)
1.3 电商视觉设计黄金构图法
对称切割 构图法
01
05
简单切割 构图法
组合切割 构图法
02
06
流程 构图法
整体场景 构图法
03
07
放射 构图法
多重切割 构图法
04
08
物体轮廓 构图法
1.3 电商视觉设计黄金构图法 1 对称切割构图法
1.3 电商视觉设计黄金构图法 2 组合切割构图法
1.3 电商视觉设计黄金构图法 3 整体场景构图法
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
节约资源
除了活动海报等个性模块之外,其他的页面和模块 参照规范进行设计可以极大地减少设计时间,从而达到 节约资源的目的。
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
重复利用
设计相同属性的模块或页面时,执行视觉规范有利 于减少无关的信息,方便买家的阅读和信息传递。同时, 视觉规范也有利于美工之间的协调工作。标准化的视觉 规范不但可以节约设计时间,还可以避免出错。
1 网店的视觉定位
1.2 电商视觉设计前的准备
1 网店的视觉定位
1.2 电商视觉设计前的准备
1 网店的视觉定位
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
1
统一识别
2
节约资源
3重复利用Fra bibliotek1.2 电商视觉设计前的准备
2 明确视觉规范的作用
统一识别
可以确保网店在整体风格、售前售后服务和产品包 装形象等方面都保持整体风格的一贯性,既有利于买家 识别和区分店铺,也可以避免买家在浏览时出现理解困 难,甚至是理解错误的现象。
1.3 电商视觉设计黄金构图法 4 多重切割构图法
电商视觉营销设计模板ppt课件
![电商视觉营销设计模板ppt课件](https://img.taocdn.com/s3/m/c141a501bf1e650e52ea551810a6f524ccbfcbd4.png)
u1.1.1对称与均衡 u1.1.2重复与节奏 u1.1.3对比与统一 u课堂作业
5
1平面设计基础
1.2常用色彩配色设计法则及进阶学习
u1.2.1色彩搭配法则 u1.2.2色彩传达 u1.2.3色彩搭配自学进阶 u课堂作业
6
1平面设计基础
1.3字体的构成法则与编排
u1 . 3 . 1 字 体 在 版 面 中 的 构 成 法 则 u1 . 3 . 2 段 落 文 字 的 编 排 法 则 u1 . 3 . 3 追 求 最 优 视 觉 效 果 的 字 体 组 合 法 则 u课 堂 作 业 1 u课 堂 作 业 2 u课 堂 作 业 3
23
0
3
第3篇综合项目实战
24
6商品拍摄实战—— 以电热水壶为例
6.1商品拍摄的基本流程 6.2拍摄流程详解
课堂作业
25
7商品图片精修实战— — 以加湿器为例
7.1图片精修的基本思路 7.2精修流程详解
课堂作业
26
8促销广告设计实战— — 以小家电为例
8.1促销广告设计的基本流程 8.2制作过程详解
9
2常用模块视觉营销设计
2.2店招视觉营销设计
u2 . 2 . 1 与 店 铺 整 体 的 色 彩 和 风 格 统 一 u2 . 2 . 2 简 洁 大 气 , 以 少 胜 多 u2 . 2 . 3 合 理 且 丰 富 的 营 销 手 段 u课堂作业
10
2常用模块视觉营销设计
2 . 3banner视觉营销设计
21
5图片处理
5.2图片色彩优化
u5.2.1修复图片颜色 u5 . 2 . 2photoshop中的色彩优化命令 u课堂作业 u5 . 2 . 2Photoshop中的色彩优化命令 u课堂作业