电商视觉设计-第4章-店铺首页视觉设计.ppt

单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,2018/1/12,#,第,4,章,店铺首页视觉设计,了解首页视觉水平的四大指标,掌握店招的设计规范及技巧,掌握首焦轮播区的设计技巧,了解商品陈列区的布局方式,掌握商品陈列区的布局技巧,学习目标,目 录,首页视觉水平的四大指标,4.1,店招视觉设计,4.2,首焦轮播区视觉设计,4.3,商品陈列区视觉设计,4.4,化妆品店铺首页视觉设计案例,4.5,4.1,首页视觉水平的四大指标,首页跳失率,1,首页点击率,2,首页人均点击次数,3,首页,平均停留时间,4,4.1,首页视觉水平的四大指标,1,首页跳失率,首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该入口总访问次数的比例。,进入店铺首页的渠道,4.1,首页视觉水平的四大指标,2,首页点击率,首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率,=,首页点击量,首页展现量）。,两类店铺首页排版,4.1,首页视觉水平的四大指标,3,首页人均点击次数,首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某日点击该网店的唯一访问者数为,150,人，在此期间内点击本店铺首页的总访问数为,600,次，那么首页人均点击次数为：,600,次,150,人,=,4,次,/,人。,人均点击次数,4.1,首页视觉水平的四大指标,4,首页平均停留时间,首页平均停留时间,=,访店铺首页的所有访客总的停留时长,访客数（单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是否能留住访客。,4.2,店招视觉设计,店招视觉设计规范,01,店铺名称的艺术化处理,02,图层样式的应用,03,4.2,店招视觉设计,1,店招视觉设计规范,店招高度设计规范,淘宝后台的店招高度为,120,像素，建议设计时设定店招尺寸为,950,120,像素，加上导航条高度,30,像素，共,150,像素，可避免发布后导航不显示的问题,4.2,店招视觉设计,1,店招视觉设计规范,店招元素设计,品牌宣传语,移动端二维码,清晰的店铺名称,4.2,店招视觉设计,1,店招视觉设计规范,店招和导航条风格统一,风格的统一及修饰元素的设,计，突出店铺的品牌形象,4.2,店招视觉设计,2,店铺名称的艺术化处理,添加特效突出特殊性和醒目度,2,用不同字体和字号的组合营造艺术感,1,使用修饰元素提升观赏性,3,4.2,店招视觉设计,2,店铺名称的艺术化处理,用不同字体和字号的组合营造艺术感,1,不同字体字号的组合,将店铺名称的首个英文字母放大，并使用不同于其他字体风格的手写体，让店铺名称文字的版式更加醒目、更具艺术感,4.2,店招视觉设计,2,店铺名称的艺术化处理,添加特效突出特殊性和醒目度,2,为了将店铺名称与导航条的颜色区分开，使用了发光效果来修饰店铺名称，营造出的层次感，也贴合了店铺中销售的照明设备的特点,4.2,店招视觉设计,2,店铺名称的艺术化处理,为店铺名称添加修饰元素,使用修饰元素提升观赏性,3,使用帽子的图案来修饰店铺名称，文字与图案在外形上的契合让店铺名称更具个性和艺术感，更容易在消费者心中形成特定的印象,4.2,店招视觉设计,3,图层样式的应用,图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也发挥着重要的作用。,用“渐变叠加”图层样式来表现导航条功能按钮被鼠标触碰后的状态，在视觉上形成凹陷的效果，将其与导航条中正常状态下的功能按钮区分开,4.2,店招视觉设计,3,图层样式的应用,当鼠标指针触碰到导航条中任意一个功能按钮时，该按钮就会呈现出不同的效果，这就是添加图层样式的效果，给人视觉上的错觉，让按钮上的文字更具层次感，更易于展示当前操作的结果,4.3,首焦轮播区视觉设计,设计聚焦消费者视线,1,构建设计图三要素,2,溶图的应用范围,3,4.3,首焦轮播区视觉设计,1,设计聚焦消费者视线,在店铺首页的商品图片展示版块中，在其开端位置放置单张海报图片可以在一定程度上聚焦消费者的视线，让其有继续浏览页面的兴趣。,首焦位置：由于该位置所占面积较大，所以成为最能吸引消费者眼球的位置,4.3,首焦轮播区视觉设计,1,设计聚焦消费者,视线,下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。,首焦位置,4.3,首焦轮播区视觉设计,1,设计聚焦消费者视线,首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。,有趣的图片展示，能让消费者通过视觉获得较为愉悦的体验,文案信息告知了消费者店铺中的优惠活动，因为店铺的优惠活动信息对于大部分消费者而言都是极具吸引力的。同时，简洁的文字与图形装饰的结合让消费者能够轻松地获取相关信息,4.3,首焦轮播区视觉设计,2,构建设计图三要素,首焦轮播区设计三要素,背景,商品,广告文字,4.3,首焦轮播区视觉设计,2,构建设计图三要素,不同主题的背景图,以七夕节为主题的背景,以“双,11,”活动为主题的背景,4.3,首焦轮播区视觉设计,2,构建设计图三要素,处理前后的商品形象对比,处理前,色彩灰暗，画质朦胧，画面层次不清晰，背景色调不理想,处理后,色彩纯净，画面清晰，画面层次感强，商品形象更突出,4.3,首焦轮播区视觉设计,2,构建设计图三要素,如下图所示，为几种风格的首焦轮播图文字编排效果，从中可以看出文字的字体与字号、色彩的变化等是设计中最为关键的环节。,文字元素的设计,4.3,首焦轮播区视觉设计,3,溶图的应用规范,溶图,溶图是用两张或两张以上的图片拼合起来的一张图片，讲究构图严谨，细节处理得当。,4.4,商品陈列区视觉设计,营造视觉动线,1,商品布局艺术化,2,4.4,商品陈列区视觉设计,1,营造视觉动线,商品陈列图,4.4,商品陈列区视觉设计,1,营造视觉动线,浏览初期，视线水平移动，且浏览范围最大,。,刚开始浏览时，消费者对商品展示图充满了新鲜感和好奇，很可能将第一排图片全部浏览完毕，并根据从上到下的浏览经验，转向对第二排图片的浏览。,水平浏览范围缩短。,此时图片的布局没有任何变化，消费者对于图片浏览的新鲜度就会降低，开始失去浏览的耐心，于是对第二排图片的水平浏览范围便会缩短。,失去耐心，开始进行垂直浏览。,当消费者看到第三排仍然是一成不变的图片排列后，浏览的耐心就会减少，还可能会想图片怎么这么多，大概地往下看看吧，于是形成对左边的垂直浏览。,F,形浏览模式,4.4,商品陈列区视觉设计,1,营造视觉动线,商品海报展示图：,将重点推荐的商品以单张海报的方式呈现，较为丰富的表现形式能很好地让,消费者,注意到商品信息。,单张商品展示图：,较为重要的商品以单张图片形式排列，较大的展示面积更能获得消费者的瞩目。,三张商品展示图：,非重点推荐的产品可以三张并排展示的效果呈现。,单张图片：,除了商品展示图片以外，还可以搭配一些与展示商品相关的商品组合图片，进一步吸引消费者的购买兴趣。,4.4,商品陈列区视觉设计,2,商品布局艺术化,折线型布局,随意型布局,4.4,商品陈列区视觉设计,2,商品布局艺术化,折线型布局,4.4,商品陈列区视觉设计,2,商品布局艺术化,随意型布局,4.5,化妆品店铺首页视觉设计案例,标题文字设置的字号较大，利用斜面和浮雕、投影等效果来点缀标题文字，使其更加精致,文字选用不同的颜色、字号，并分成两行，显得更有层次感，并通过一些小图案对价格进行修饰和点缀，营造出一种清新的视觉感受,风格一致的文字与图像，营造出 一种清新、简洁、充满文艺气息的氛围,采用不规则图形作为背景图 的点缀，使商品的排列既整齐又不死板，提升其观赏性和设计感,4.5,化妆品店铺首页视觉设计案例,01,填充背景色,4.5,化妆品店铺首页视觉设计案例,02,设置文字属性,4.5,化妆品店铺首页视觉设计案例,03,添加商品图及优惠券,4.5,化妆品店铺首页视觉设计案例,04,绘制导航条背景,4.5,化妆品店铺首页视觉设计案例,05,为导航条添加文字,4.5,化妆品店铺首页视觉设计案例,06,添加文字并设置图层样式,4.5,化妆品店铺首页视觉设计案例,06,添加文字并设置图层样式,4.5,化妆品店铺首页视觉设计案例,07,添加图像素材,4.5,化妆品店铺首页视觉设计案例,08,添加商品图,4.5,化妆品店铺首页视觉设计案例,09,绘制背景图形,10,添加模特素材图像,4.5,化妆品店铺首页视觉设计案例,11,添加文字及修饰图案,4.5,化妆品店铺首页视觉设计案例,12,添加商品图,4.5,化妆品店铺首页视觉设计案例,13,制作店铺热销推荐,标题,4.5,化妆品店铺首页视觉设计案例,14,添加商品图及,文字,4.5,化妆品店铺首页视觉设计案例,15,添加商品图,4.5,化妆品店铺首页视觉设计案例,16,绘制图形,4.5,化妆品店铺首页视觉设计案例,17,制作店长热荐标题,4.5,化妆品店铺首页视觉设计案例,18,制作单品展示效果,4.5,化妆品店铺首页视觉设计案例,19,店长推荐专区,4.5,化妆品店铺首页视觉设计案例,20,纯正护肤专区,4.5,化妆品店铺首页视觉设计案例,21,输入文字,22,添加地图图案,4.5,化妆品店铺首页视觉设计案例,23,绘制图形并输入文字,课后练习题,请为家电类店铺设计一个店招，并说明自己的设计思路,。,请列举几个溶图在实际店铺中应用的案例。,请为家具类店铺设计制作首页，效果如右图所示,。,简述商品陈列区在设计时要考虑的因素,。,