移动端店铺首页与详情页设计.ppt

移动端店铺首页与详情页装修设计CHAPTER ELEVEN对店铺进行个性化且更有亲和力的设计，对店铺的各个细节进行优化，才能给店铺营造良好的购物气氛，让买家最终被店铺所吸引并购置商品Ø掌握店招的装修设计方法Ø掌握轮播图片的装修设计方法Ø掌握优惠券的装修设计方法Ø掌握商品分类导航及分类展示的装修设计方法Ø了解店铺详情页设计的FABE原那么Ø掌握 淘宝店铺详情页的设计方法学习目标学习目标Contents目录移动端店铺详情页装修设计2移动端店铺首页装修设计1一、移动端店铺首页装修设计一、移动端店铺首页装修设计店招的装修设计店招的装修设计0101轮播图片装修设计轮播图片装修设计0202优惠券的装修设计优惠券的装修设计0303商品分类导航装修设计商品分类导航装修设计0404商品分类展示装修设计商品分类展示装修设计0505一、移动端店铺首页装修设计1 1 1 1 店招的装修设计店招的装修设计n用鞋子展示图片作为底图，与店铺“女鞋”的主题相呼应一、移动端店铺首页装修设计1 1 1 1 店招的装修设计店招的装修设计lPC端店铺与移动端店铺店招设计的不同n把模特图作为简单背景底图来使用，不仅迎合了店铺的销售气氛，也能让消费者在第一时间了解店铺中的主营商品。

一、移动端店铺首页装修设计1 1 1 1 店招的装修设计店招的装修设计n移动端店铺店招底图选择一张背景图片，搭配上简洁的文字描述，并很好地控制了图片与文字色彩的对比度，让消费者可以清晰地阅读文字简短的文案迎合了喜爱快速阅读的消费群体的口味，同时也对店铺所倡导的生活理念进行了高度的概括一、移动端店铺首页装修设计1 1 1 1 店招的装修设计店招的装修设计n就底图内容而言，可以是纯图片，但图片内容要与店铺形象有所关联；也可以是以图片为主的图文搭配形式，或以文字为主的图文搭配形式，通过文字表明店铺的特点，以此来吸引消费者此外，在店招底图中还可以添加店铺上新介绍等一、移动端店铺首页装修设计1 1 1 1 店招的装修设计店招的装修设计n与店铺无关的店招底图n店招底图文字被遮挡一、移动端店铺首页装修设计2 2 2 2 轮播图片装修设计轮播图片装修设计n轮播图片中包含店铺上新活动通知、促销活动展示等内容轮播图内容要简洁，文字要清晰，主次分明且能达到快速传播的目的，这是轮播图片设计的要点一、移动端店铺首页装修设计2 2 2 2 轮播图片装修设计轮播图片装修设计n设计时也要注意控制好轮播图片的数量，以及展示的先后顺序。

n一般来说，2~4张图片轮播展示较为适中n在设计时可以根据店铺活动的重要程度或先后顺序对轮播图片的位置进行相应的调整一、移动端店铺首页装修设计3 3 3 3 优惠券的装修设计优惠券的装修设计n虽然没有使用非常鲜艳、富有刺激性的色彩，但修饰图案与背景色的搭配能让优惠券版块在店铺首页整体的色彩环境中显得十分突出，也足以引起消费者的注意n过于花哨的优惠券设计一、移动端店铺首页装修设计3 3 3 3 优惠券的装修设计优惠券的装修设计n在优惠券上添加“立即领取”按钮之类的视觉元素，可以在一定程度上左右消费者的点击行为，相对于没有明显按钮引导的优惠券版块而言，有按钮引导更具操作的提示感，有利于引导消费者的参与行为一、移动端店铺首页装修设计4 4 4 4 商品分类导航装修设计商品分类导航装修设计n在设计这个版块时，要注意控制好显示尺寸与比例，使其能够清晰与完整地展示在消费者面前，起到快速导航的作用n商品分类足够明显，图片加文字的组合设计让分类信息能够完整地展示在消费者面前，让其可以快速了解店铺中商品的分类情况一、移动端店铺首页装修设计5 5 5 5 商品分类展示装修设计商品分类展示装修设计简洁的分类标题提示，没有过多的装饰商品名称与价格说明无过多的修饰，一目了然一、移动端店铺首页装修设计5 5 5 5 商品分类展示装修设计商品分类展示装修设计n第一区中对爆款商品进行展示n第一区中对促销商品进行展示一、移动端店铺首页装修设计5 5 5 5 商品分类展示装修设计商品分类展示装修设计n第二区中对新品与应季商品展示一、移动端店铺首页装修设计5 5 5 5 商品分类展示装修设计商品分类展示装修设计n除了上述的第一区与第二区以外，还有第三区、第四区……在这些区域中可以根据需要放置不同的商品。

n在店铺首页商品分类展示第三区中，选择对店长推荐的商品进行展示，就如同实体店中经常出现贴有“店长推荐”标签的商品，这类商品通常属于热销商品或是店铺中的“镇店之宝”，会对消费者形成一定的吸引力Contents目录移动端店铺详情页装修设计2移动端店铺首页装修设计1二、移动端店铺详情页装修设计详情页装修的详情页装修的详情页装修的详情页装修的FABEFABE原则原则原则原则01避免走入三大设计误区避免走入三大设计误区避免走入三大设计误区避免走入三大设计误区02直截了当地突出商品信息直截了当地突出商品信息直截了当地突出商品信息直截了当地突出商品信息031 1 1 1 详情页装修的详情页装修的FABEFABEFABEFABE原则原则二、移动端店铺详情页装修设计lFABE原则原则1 1 1 1 详情页装修的详情页装修的FABEFABEFABEFABE原则原则二、移动端店铺详情页装修设计真实感真实感真实感真实感逻辑感逻辑感逻辑感逻辑感亲切感亲切感亲切感亲切感对话感对话感对话感对话感氛围感氛围感氛围感氛围感正规感正规感正规感正规感1 1 1 1 详情页装修的详情页装修的FABEFABEFABEFABE原则原则二、移动端店铺详情页装修设计真实感真实感真实感真实感逻辑感逻辑感逻辑感逻辑感亲切感亲切感亲切感亲切感对话感对话感对话感对话感氛围感氛围感氛围感氛围感正规感正规感正规感正规感n商品展示细节图片1 1 1 1 详情页装修的详情页装修的FABEFABEFABEFABE原则原则二、移动端店铺详情页装修设计真实感真实感真实感真实感逻辑感逻辑感逻辑感逻辑感亲切感亲切感亲切感亲切感对话感对话感对话感对话感氛围感氛围感氛围感氛围感正规感正规感正规感正规感n在进行移动端店铺详情页的设计时，还要注意描述的逻辑感。

将商品受众群体最想看到的信息放置在页面顶端，以此为依据来确定商品详情页中信息的先后顺序，最终形成视觉漏斗模型中所表现的逻辑关系n视觉漏斗模型中的逻辑关系其实就是FABE原则所体现的逻辑顺序，通过介绍商品的特征→商品特点→能给消费者带来的利益点→证明商品质量的证据这四个步骤，在层层说明中一步步打消消费者的购买顾虑，增强其购买信心，最终形成下单成交1 1 1 1 详情页装修的详情页装修的FABEFABEFABEFABE原则原则二、移动端店铺详情页装修设计真实感真实感真实感真实感逻辑感逻辑感逻辑感逻辑感亲切感亲切感亲切感亲切感对话感对话感对话感对话感氛围感氛围感氛围感氛围感正规感正规感正规感正规感n不论是结合商品特点添加插画，还是直接采用插画的表现形式，总之，在详情页中插入图画或漫画，能让页面变得活泼、生动，也能让消费者感到十分亲切1 1 1 1 详情页装修的详情页装修的FABEFABEFABEFABE原则原则二、移动端店铺详情页装修设计真实感真实感真实感真实感逻辑感逻辑感逻辑感逻辑感亲切感亲切感亲切感亲切感对话感对话感对话感对话感氛围感氛围感氛围感氛围感正规感正规感正规感正规感n作为虚拟的推销员，商品描述要具有对话感，这样不仅能够解决消费者的疑问，还能让其获得身临其境的购物体验，在深入感受商品的同时也提高了购买的可能性1 1 1 1 详情页装修的详情页装修的FABEFABEFABEFABE原则原则二、移动端店铺详情页装修设计真实感真实感真实感真实感逻辑感逻辑感逻辑感逻辑感亲切感亲切感亲切感亲切感对话感对话感对话感对话感氛围感氛围感氛围感氛围感正规感正规感正规感正规感n消费者在无形之中或多或少地都会有“凑热闹”的心理，当看到某件商品有很多人买便想去看个究竟，或者自己也想跟风购买，这一点对于冲动型消费者来讲尤为明显。

n因此，在设计移动端店铺的详情页时，要努力营造很多人都在争相购买的卖场气氛，这样的氛围会带动不少消费者形成购买冲动1 1 1 1 详情页装修的详情页装修的FABEFABEFABEFABE原则原则二、移动端店铺详情页装修设计真实感真实感真实感真实感逻辑感逻辑感逻辑感逻辑感亲切感亲切感亲切感亲切感对话感对话感对话感对话感氛围感氛围感氛围感氛围感正规感正规感正规感正规感n正规与规范带来的是信赖感与可靠感，因此移动端店铺的详情页中也不能忽略各种认证证书等能够证明商品正规的信息展示2 2 2 2 避免走入三大设计误区避免走入三大设计误区二、移动端店铺详情页装修设计01密密麻麻、密密麻麻、密密麻麻、密密麻麻、过过于于于于拥挤拥挤的文字的文字的文字的文字说说明明明明n据相关研究机构统计，详情页中70%的文字信息消费者是不会仔细阅读的，尤其是拥挤的文字会在视觉上引起消费者的畏惧感2 2 2 2 避免走入三大设计误区避免走入三大设计误区二、移动端店铺详情页装修设计01密密麻麻、密密麻麻、密密麻麻、密密麻麻、过过于于于于拥挤拥挤的文字的文字的文字的文字说说明明明明02片面追求片面追求片面追求片面追求视觉视觉震撼效果，震撼效果，震撼效果，震撼效果，忽忽忽忽视视商品真商品真商品真商品真实实商品商品商品商品图图片的展示片的展示片的展示片的展示n海报图片n商品实拍图片2 2 2 2 避免走入三大设计误区避免走入三大设计误区二、移动端店铺详情页装修设计01密密麻麻、密密麻麻、密密麻麻、密密麻麻、过过于于于于拥挤拥挤的文字的文字的文字的文字说说明明明明02片面追求片面追求片面追求片面追求视觉视觉震撼效果，震撼效果，震撼效果，震撼效果，忽忽忽忽视视商品真商品真商品真商品真实实商品商品商品商品图图片的展示片的展示片的展示片的展示03关关关关联销联销售商品售商品售商品售商品图图片的数量片的数量片的数量片的数量过过多多多多n详情页中插入了过多的与商品信息无关的关联商品图片，不仅可能影响加载速度，也无法让消费者及时地看到主打商品信息。

消费者很可能会因为急于寻找主打商品信息而忽略对这部分内容的浏览，因此并起不到引流的作用n关联商品图片的数量保持3~4张较为合适，且与所销售商品紧密相关或配套的商品更能引起消费者的关注3 3 3 3 直截了当地突出商品信息直截了当地突出商品信息二、移动端店铺详情页装修设计n在PC端店铺商品详情页的开端可能会出现“新品推荐”“搭配套餐”等信息，但这些在移动端店铺则显得不怎么实用移动端店铺必须在前三屏中对商品的卖点和重要信息进行清晰的描述3 3 3 3 直截了当地突出商品信息直截了当地突出商品信息二、移动端店铺详情页装修设计n关联信息繁琐课后习题1．在￿￿￿淘宝上搜索玩具类目排名前五的店铺首页设计，分析其有何优势2．请举例说明FABE原那么在移动端店铺详情页设计中的具体应用3．假设你要为某品牌笔记本电脑的移动端店铺设计详情页，请简述自己的设计思路。