电子商务视觉设计 第2版 第4章 店铺首页视觉设计.ppt

* * * * 4.4.2 商品布局艺术化 随意型布局就是将商品图片随意地放置在页面中。这种随意往往需要营造出一种特定的氛围和感觉，让这些商品之间产生一种联系，否则界面中的商品会由于缺乏联系而显得突兀。 随意型布局 02 茶叶店铺首页视觉设计案例 4.5 本案例要为某茶叶店铺设计首页装修图。 首页设计图 标题文字设置的字号较大，利用渐变叠加和投影效果来点缀标题文字，使其更加精致 文字选用不同的颜色、字号，并分成三行，显得更有层次感，并通过一些小图案对价格进行修饰和点缀，营造出一种中国风的视觉感受 风格一致的文字与图像，营造出一种清新、简洁、充满文艺气息的氛围 采用圆角矩形作为背景图的点缀，使商品的排列既整齐又不死板，提升其观赏性和设计感 * * * * * * * * * * * * * * * * * * * * * * * * * * * * 店铺首页在电商店铺中所起到的作用就好像实体店的店面，作为品牌的门脸，它的主要作用是向消费者做展示，通过视觉、氛围、商品和服务的综合感受让消费者对品牌有初步的了解和接触。首页设计得是否有新意直接关系到商品信息的转化率，因此在进行店铺首页视觉设计时要尽可能地让设计能够聚集消费者的注意力，提高商品信息的转化率，这才是首页视觉设计要达到的重要目的。 店铺首页视觉设计 第4章 4.1 目录 CONTENTS 4.2 4.3 4.4 4.5 首页视觉水平的四大指标 4.1 判断一个店铺首页设计是否合格要从四大指标来评判 ：首页跳失率、首页点击率、首页人均点击次数和首页平均停留时间。 4.1.1 首页跳失率 首页跳失率 首页跳失率是指消费者通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该入口总访问次数的比例。 针对不同的店铺规模和所售商品的类型，可以参照的判断标准是： 如果是心级店铺，那么跳失率在 70% 及以下都属于正常，不需要进行优化。 如果是钻级店铺，那么跳失率在 60% 以上就需要考虑是否是海报设计和商品信息的问题了，需要根据具体的数据做出相应的优化与调整。 4.1.2 首页点击率 首页点击率 首页点击率是商品在首页展现后的被点击比率，即首页点击率 = 首页点击量 ÷ 首页展现量。 店铺的首页大致可以分为两类： 店铺首页罗列出各种光彩夺目的商品，希望有一款商品能够吸引消费者。 店铺首页没有单品展示，以全屏商品海报形式引导为主。 两类店铺首页排版 4.1.3 首页人均点击次数 首页人均点击次数 首页人均点击次数是指在一段时间内人均点击了多少次。 人均点击次数 4.1.4 首页平均停留时间 首页平均停留时间 首页平均停留时间为访问店铺首页的所有访客总的停留时长除以访客数（单位：秒），多天的平均停留时间为各天人均停留时长的日均值。 行业性质不同，每个访客在不同行业店铺中停留的时间差异很大。在进行分析时，可以以一段时间内访客在店铺首页的平均停留时间作为基数，并记录下这段时间的销售量，以后再拿新数据进行对比就知道平均停留时间内销量是提高了还是下降了。 店招视觉设计 4.2 同实体店一样，网店也有自己的店招。店招位于店铺首页的顶端，用于指示和引导消费者，展示店铺的名称、最新活动与销售内容等一系列信息。 店招是店铺的灵魂所在，是消费者进入店铺后看到的第一个模块，也是打造店铺品牌、让消费者瞬间记住店铺的最好阵地，因此设计者要好好把握店招的视觉设计。 4.2.1 店招视觉设计规范 店招高度设计规范 淘宝后台的店招高度为120像素，建议设计时设定店招尺寸为950像素×120像素，加上导航条高度30像素，共150像素，可避免发布后导航不显示的问题 4.2.1 店招视觉设计规范 店招元素设计 清晰的品牌信息 促销信息 移动端二维码 店招和导航条风格统一设计，突出店铺的品牌形象 店招和导航条风格统一 4.2.2 店铺名称的艺术化处理 虽然有的店铺会在店招中添加设计好的店铺徽标来代替店铺名称，但是文字仍是店铺名称最主要的表现形式。因此，可以采用一种最简单、有效的方式来美化店铺名称，那就是通过不同字体和字号的组合使用赋予店铺名称一定的艺术感。 用不同字体和字号的组合营造艺术感 01 不同字体字号的组合 将店铺名称的文字放大，并使用不同于其他字体风格的手写体，让店铺名称文字的版式更加醒目、更具艺术感 4.2.2 店铺名称的艺术化处理 可以通过添加特效的方式来突出店铺名称的特殊性和醒目度，这些特效包括渐变色、阴影、浮雕与发光等。 添加特效，突出特殊性和醒目度 02 为店铺名称添加特效 为了将店铺名称与导航条的颜色区分开，使用渐变效果来修