店铺首页视觉设计方案课件.ppt
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《店铺首页视觉设计方案课件.ppt》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 店铺 首页 视觉 设计方案 课件
- 资源描述:
-
1、了解首页视觉水平的四大指标掌握店招的设计规范及技巧掌握首焦轮播区的设计技巧了解商品陈列区的布局方式掌握商品陈列区的布局技巧学习目标店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)目 录首页视觉水平的四大指标4.1店招视觉设计4.2首焦轮播区视觉设计4.3商品陈列区视觉设计4.4化妆品店铺首页视觉设计案例4.5店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.1 首页视觉水平的四大指标首页跳失率1 1首页点击率2 2首页人均点击次数3 3首页平均停留时间4 4店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.1 首页视觉
2、水平的四大指标首页跳失率,指买家通过某种渠道进入店铺,只访问了一个首页就离开的访问次数占该入口总访问次数的比例。进入店铺首页的渠道店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.1 首页视觉水平的四大指标首页点击率是宝贝在首页展现后的被点击比率,即:首页点击率=首页点击量首页展现量)。两类店铺首页排版店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.1 首页视觉水平的四大指标首页人均点击次数,指在一段时间内人均点击了多少次,如下图所示。假设某日点击该网店的唯一访问者数为150人,在此期间内点击本店铺首页的总访问数为600次,那么首页人均点击
3、次数为:600次150人=4次/人。人均点击次数店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.1 首页视觉水平的四大指标 首页平均停留时间=访店铺首页的所有访客总的停留时长访客数(单位:秒),多天的平均停留时间为各天人均停留时长的日均值。和首页人均点击次数一样,首页平均停留时间也可以用来判断一个店铺首页是否能留住访客。店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计店招视觉设计规范01店铺名称的艺术化处理02图层样式的应用03店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计店招
4、高度设计规范淘宝后台的店招高度为120像素,建议设计时设定店招尺寸为950120像素,加上导航条高度30像素,共150像素,可避免发布后导航不显示的问题店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计店招元素设计店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计店招和导航条风格统一风格的统一及修饰元素的设计,突出店铺的品牌形象店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计添加特效突出特殊性和醒目度2 2用不同字体和字号的组合营造艺术感1 1 使用修饰元素提升观赏性
5、3 3店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计用不同字体和字号的组合营造艺术感1 1不同字体字号的组合将店铺名称的首个英文字母放大,并使用不同于其他字体风格的手写体,让店铺名称文字的版式更加醒目、更具艺术感店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计添加特效突出特殊性和醒目度2 2为了将店铺名称与导航条的颜色区分开,使用了发光效果来修饰店铺名称,营造出的层次感,也贴合了店铺中销售的照明设备的特点店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计为店铺名称
6、添加修饰元素使用修饰元素提升观赏性3 3使用帽子的图案来修饰店铺名称,文字与图案在外形上的契合让店铺名称更具个性和艺术感,更容易在消费者心中形成特定的印象店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计图层样式是图像处理与网页制作中的常用功能之一,在电商视觉设计中它也发挥着重要的作用。用“渐变叠加”图层样式来表现导航条功能按钮被鼠标触碰后的状态,在视觉上形成凹陷的效果,将其与导航条中正常状态下的功能按钮区分开店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.2 店招视觉设计当鼠标指针触碰到导航条中任意一个功能按钮时,该按钮就
7、会呈现出不同的效果,这就是添加图层样式的效果,给人视觉上的错觉,让按钮上的文字更具层次感,更易于展示当前操作的结果店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.3 首焦轮播区视觉设计设计聚焦消费者视线1构建设计图三要素2溶图的应用范围3店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.3 首焦轮播区视觉设计设计聚焦消费者视线在店铺首页的商品图片展示版块中,在其开端位置放置单张海报图片可以在一定程度上聚焦消费者的视线,让其有继续浏览页面的兴趣。首焦位置:由于该位置所占面积较大,所以成为最能吸引消费者眼球的位置店铺首页视觉设计方案(PPT57
8、页)店铺首页视觉设计方案(PPT57页)4.3 首焦轮播区视觉设计设计聚焦消费者视线下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。首焦位置店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.3 首焦轮播区视觉设计设计聚焦消费者视线首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。有趣的图片展示,能让消费者通过视觉获得较为愉悦的体验 文案信息告知了消费者店铺中的优惠活动,因为店铺的优惠活动信息对于大部分消费者而言都是极具吸引力的。同时,简洁的文字与图形装饰的结合让消费者能够轻松地获取相关信息店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案
9、(PPT57页)4.3 首焦轮播区视觉设计首焦轮播区设计三要素背景广告文字店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.3 首焦轮播区视觉设计不同主题的背景图以七夕节为主题的背景以“双11”活动为主题的背景店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.3 首焦轮播区视觉设计处理前后的商品形象对比处理前色彩灰暗,画质朦胧,画面层次不清晰,背景色调不理想处理后色彩纯净,画面清晰,画面层次感强,商品形象更突出店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.3 首焦轮播区视觉设计如下图所示,为几种风格的首焦轮播图文
10、字编排效果,从中可以看出文字的字体与字号、色彩的变化等是设计中最为关键的环节。文字元素的设计店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.3 首焦轮播区视觉设计溶图溶图是用两张或两张以上的图片拼合起来的一张图片,讲究构图严谨,细节处理得当。店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.4 商品陈列区视觉设计营造视觉动线1 1商品布局艺术化2 2店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.4 商品陈列区视觉设计商品陈列图店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.4 商品陈
11、列区视觉设计浏览初期,视线水平移动,且浏览范围最大。刚开始浏览时,消费者对商品展示图充满了新鲜感和好奇,很可能将第一排图片全部浏览完毕,并根据从上到下的浏览经验,转向对第二排图片的浏览。水平浏览范围缩短。此时图片的布局没有任何变化,消费者对于图片浏览的新鲜度就会降低,开始失去浏览的耐心,于是对第二排图片的水平浏览范围便会缩短。失去耐心,开始进行垂直浏览。当消费者看到第三排仍然是一成不变的图片排列后,浏览的耐心就会减少,还可能会想图片怎么这么多,大概地往下看看吧,于是形成对左边的垂直浏览。F形浏览模式店铺首页视觉设计方案(PPT57页)店铺首页视觉设计方案(PPT57页)4.4 商品陈列区视觉设
展开阅读全文