电商视觉设计第9章课件

1、第9章 手机移动端淘宝店铺视觉设计 掌握店招的优化设计方法掌握轮播图片的优化设计方法掌握优惠券的优化设计方法掌握商品分类导航及分类展示的优化方法了解店铺详情页设计的FABE原则熟练掌握手机淘宝店铺详情页的设计方法学习目标目 录手机移动端淘宝店铺首页优化设计9.1电子数码类商品店铺首页案例解析9.2手机淘宝店铺详情页优化设计9.39.1 手机移动端淘宝店铺首页优化设计手机移动端店铺首页首页设计框架图9.1 手机移动端淘宝店铺首页优化设计1店招的优化设计 2轮播图片优化设计 3优惠券的优化设计 4商品分类导航优化设计 5商品分类展示优化设计 9.1 手机移动端淘宝店铺首页优化设计店招底图设计1 店

2、招的优化设计用鞋子图片作为底图的主体，与店铺“女鞋”的主题相呼应9.1 手机移动端淘宝店铺首页优化设计1 店招的优化设计活动时间说明优惠券的设置双十一活动背景图PC端与手机端店招设计的不同9.1 手机移动端淘宝店铺首页优化设计1 店招的优化设计图片与文字组合的店招底图9.1 手机移动端淘宝店铺首页优化设计1 店招的优化设计提醒关注店铺9.1 手机移动端淘宝店铺首页优化设计1 店招的优化设计该店铺主营玩具类商品，然而其店招选择了与店铺毫无关系的图片，即使看起来不错，也无法起到任何说明与传达店铺信息的作用该店招底图中也没使用与店铺有明显关联的图片。店铺主营百货小商品，而底图中主要呈现了笔记本电脑的

3、图片，没有与店铺产生实质性联系，且与店招标识的设计风格不匹配，消费者看到这个店招后无法感受到店铺的品牌氛围无关的店招图片9.1 手机移动端淘宝店铺首页优化设计1 店招的优化设计文字被遮挡该店招中说明文字被大面积遮挡，同时文字太多，很不美观，这样的表现方式无法让消费者有效获取信息，底图中的文字便失去了意义9.1 手机移动端淘宝店铺首页优化设计轮播图片2 轮播图片优化设计9.1 手机移动端淘宝店铺首页优化设计确定轮播图的先后顺序2 轮播图片优化设计9.1 手机移动端淘宝店铺首页优化设计优惠券板块3 优惠券的优化设计9.1 手机移动端淘宝店铺首页优化设计活动优惠券3 优惠券的优化设计过于花哨的设计9

4、.1 手机移动端淘宝店铺首页优化设计4 商品分类导航优化设计商品分类按钮足够明显，且分开两行的组合设计让分类信息能够完整地展示在消费者面前，让其可以快速了解店铺中商品的分类情况9.1 手机移动端淘宝店铺首页优化设计商品分类展示5 商品分类展示优化设计 简洁的分类标题提示，没有过多的装饰商品名称与价格说明无过多修饰，一目了然9.1 手机移动端淘宝店铺首页优化设计促销和爆款商品展示4 商品分类展示优化设计商品分类展示第一区中对爆款商品进行展示商品分类展示第一区中对促销商品进行展示9.1 手机移动端淘宝店铺首页优化设计新品展示4 商品分类展示优化设计9.1 手机移动端淘宝店铺首页优化设计店长推荐4

5、商品分类展示优化设计在店铺首页商品分类展示第三区中，选择对店长推荐的商品进行展示，就如同实体店中常会出现贴有“店长推荐”标签的商品，这类商品通常属于热销商品或是店铺中的“镇店之宝”，打着这个旗号的商品对消费者也具有一定的吸引力9.2 电子数码类商品店铺首页案例解析电子数码类店铺首页9.2 电子数码类商品店铺首页案例解析添加明亮的色彩商品说明信息为白色，给消费者带来一目了然的视觉感受价格信息则采用黄色来表现，在黑色背景中显得非常突出，便于消费者了解商品价格9.3 手机淘宝店铺详情页优化设计详情页设计的FABE原则01商品详情页的设计误区02根据消费者的页面平均停留 时间设计039.3 手机淘宝店

6、铺详情页优化设计1 详情页设计的FABE原则F特征即介绍商品的特质、特性等基本功能，以及它是如何满足消费者需要的。特征（Features）B以消费者利益为中心，告知并强调消费者购买商品后会得到的利益，能够激发消费者的购买欲望。利益（Benefits）A优点就是商品的卖点与优势，向消费者证明商品的卖点，其实就是给消费者提供了更多的购买该商品的理由。优点（Advantages）E证据就是指第三方认知、新闻舆论或技术报告等信息，它们需要有足够的权威性、客观性、可靠性与可见证性，这样才能获得消费者的信任。证据（Evidence）9.3 手机淘宝店铺详情页优化设计1 详情页设计的FABE原则真实感01逻

7、辑感02亲切感03对话感04氛围感05正规感069.3 手机淘宝店铺详情页优化设计1 详情页设计的FABE原则真实感01商品展示细节图9.3 手机淘宝店铺详情页优化设计1 详情页设计的FABE原则真实感01逻辑感02视觉漏斗模型中的逻辑关系即是FABE原则所体现的逻辑顺序，通过介绍商品的特征商品特点能给消费者带来的利益点证明商品质量的证据这四个步骤，在层层说明中一步步打消消费者的购买顾虑，增强其购买信心，最终形成下单成交。9.3 手机淘宝店铺详情页优化设计1 详情页设计的FABE原则真实感01漫画形式的图片设计亲切感03不论是结合商品特点添加插画，还是直接采用插画的表现形式，总之，在商品详情页

8、插入图画或漫画，能让页面变得更加活泼、生动，也能让消费者感到很亲切9.3 手机淘宝店铺详情页优化设计1 详情页设计的FABE原则真实感01商品描述亲切感03对话感049.3 手机淘宝店铺详情页优化设计1 详情页设计的FABE原则真实感01亲切感03对话感04氛围感05消费者在无形之中或多或少地都会有“凑热闹”的心理，看到某件商品有很多人买便想去看个究竟，或者自己也想跟风购买，这一点对于冲动型消费者来说尤其明显。因此，在设计商品详情页时，需要营造很多人都在购买的卖场气氛，这样的氛围会带动消费者形成购买冲动。9.3 手机淘宝店铺详情页优化设计1 详情页设计的FABE原则真实感01亲切感03对话感0

9、4氛围感05正规感06认证证书图片9.3 手机淘宝店铺详情页优化设计2 商品详情页的设计误区切忌密不通风的文字说明1海报宣传需凸显商品的真实性2注意控制商品与关联销售商品图片的数量39.3 手机淘宝店铺详情页优化设计2 商品详情页的设计误区切忌密不通风的文字说明1据研究机构统计，商品详情页中70%的文字信息消费者是不会仔细阅读的，尤其是拥挤的文字会在视觉上引发消费者的畏惧感9.3 手机淘宝店铺详情页优化设计2 商品详情页的设计误区海报宣传需凸显商品的真实性2消费者调研表明：78%的消费者介意图片是不是实物图，他们更希望看到真实的、没有过多修饰与美化的商品图片信息9.3 手机淘宝店铺详情页优化设计2 商品详情页的设计误区海报宣传需凸显商品的真实性2海报图9.3 手机淘宝店铺详情页优化设计2 商品详情页的设计误区海报宣传需凸显商品的真实性2商品实拍图9.3 手机淘宝店铺详情页优化设计2 商品详情页的设计误区关联销售商品注意控制商品与关联销售商品图片的数量39.3 手机淘宝店铺详情页优化设计3 根据消费者的页面平均停留时间设计关联信息繁琐手机浏览的连贯性