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

移动端店铺首页与详情页装修设计CHAPTERELEVEN对店铺进行个性化且更有亲和力的设计，对店铺的各个细节进行优化，才能给店铺营造良好的购物氛围，让买家最终被店铺所吸引并购买商品。掌握店招的装修设计方法。掌握轮播图片的装修设计方法。掌握优惠券的装修设计方法。掌握商品分类导航及分类展示的装修设计方法。了解店铺详情页设计的FABE原则。掌握手机淘宝店铺详情页的设计方法。学习目标Contents目录移动端店铺详情页装修设计2移动端店铺首页装修设计1一、移动端店铺首页装修设计一、移动端店铺首页装修设计店招的装修设计01轮播图片装修设计02优惠券的装修设计03商品分类导航装修设计04商品分类展示装修设计05一、移动端店铺首页装修设计1店招的装修设计用鞋子展示图片作为底图，与店铺“女鞋”的主题相呼应一、移动端店铺首页装修设计1店招的装修设计PC端店铺与移动端店铺店招设计的不同把模特图作为简单背景底图来使用，不仅迎合了店铺的销售气氛，也能让消费者在第一时间了解店铺中的主营商品。一、移动端店铺首页装修设计1店招的装修设计移动端店铺店招底图选择一张背景图片，搭配上简洁的文字描述，并很好地控制了图片与文字色彩的对比度，让消费者可以清晰地阅读文字。简短的文案迎合了喜爱快速阅读的消费群体的口味，同时也对店铺所倡导的生活理念进行了高度的概括。一、移动端店铺首页装修设计1店招的装修设计就底图内容而言，可以是纯图片，但图片内容要与店铺形象有所关联；也可以是以图片为主的图文搭配形式，或以文字为主的图文搭配形式，通过文字表明店铺的特点，以此来吸引消费者。此外，在店招底图中还可以添加店铺上新介绍等。一、移动端店铺首页装修设计1店招的装修设计与店铺无关的店招底图店招底图文字被遮挡一、移动端店铺首页装修设计2轮播图片装修设计轮播图片中包含店铺上新活动通知、促销活动展示等内容。轮播图内容要简洁，文字要清晰，主次分明且能达到快速传播的目的，这是轮播图片设计的要点一、移动端店铺首页装修设计2轮播图片装修设计设计时也要注意控制好轮播图片的数量，以及展示的先后顺序。一般来说，2~4张图片轮播展示较为适中。在设计时可以根据店铺活动的重要程度或先后顺序对轮播图片的位置进行相应的调整。一、移动端店铺首页装修设计3优惠券的装修设计虽然没有使用非常鲜艳、富有刺激性的色彩，但修饰图案与背景色的搭配能让优惠券版块在店铺首页整体的色彩环境中显得十分突出，也足以引起消费者的注意。过于花哨的优惠券设计一、移动端店铺首页装修设计3优惠券的装修设计在优惠券上添加“立即领取”按钮之类的视觉元素，可以在一定程度上左右消费者的点击行为，相对于没有明显按钮引导的优惠券版块而言，有按钮引导更具操作的提示感，有利于引导消费者的参与行为。一、移动端店铺首页装修设计4商品分类导航装修设计在设计这个版块时，要注意控制好显示尺寸与比例，使其能够清晰与完整地展示在消费者面前，起到快速导航的作用。商品分类足够明显，图片加文字的组合设计让分类信息能够完整地展示在消费者面前，让其可以快速了解店铺中商品的分类情况。一、移动端店铺首页装修设计5商品分类展示装修设计简洁的分类标题提示，没有过多的装饰商品名称与价格说明无过多的修饰，一目了然一、移动端店铺首页装修设计5商品分类展示装修设计第一区中对爆款商品进行展示第一区中对促销商品进行展示一、移动端店铺首页装修设计5商品分类展示装修设计第二区中对新品与应季商品展示一、移动端店铺首页装修设计5商品分类展示装修设计除了上述的第一区与第二区以外，还有第三区、第四区……在这些区域中可以根据需要放置不同的商品。在店铺首页商品分类展示第三区中，选择对店长推荐的商品进行展示，就如同实体店中经常出现贴有“店长推荐”标签的商品，这类商品通常属于热销商品或是店铺中的“镇店之宝”，会对消费者形成一定的吸引力。Contents目录移动端店铺详情页装修设计2移动端店铺首页装修设计1二、移动端店铺详情页装修设计详情页装修的FABE原则01避免走入三大设计误区02直截了当地突出商品信息031详情页装修的FABE原则二、移动端店铺详情页装修设计FABE原则1详情页装修的FABE原则二、移动端店铺详情页装修设计真实感逻辑感亲切感对话感氛围感正规感1详情页装修的FABE原则二、移动端店铺详情页装修设计真实感逻辑感亲切感对话感氛围感正规感商品展示细节图片1详情页装修的FABE原则二、移动端店铺详情页装修设计真实感逻辑感亲切感对话感氛围感正规感在进行移动端店铺详情页的设计时，还要注意描述的逻辑感。将商品受众群体最想看到的信息放置在页面顶端，以此为依据来确定商品详情页中信息的先后顺序，最终形成视觉漏斗模型中所表现的逻辑关系。视觉漏斗模型中的逻辑关系其实就是FABE原则所体现的逻辑顺序，通过介绍商品的特征→商品特点→能给消费者带来的利益点→证明商品质量的证据这四个步骤，在层层说明中一步步打消消费者的购买顾虑，增强其购买信心，最终形成下单成交。1详情页装修的FABE原则二、移动端店铺详情页装修设计真实感逻辑感亲切感对话感氛围感正规感不论是结合商品特点添加插画，还是直接采用插画的表现形式，总之，在详情页中插入图画或漫画，能让页面变得活泼、生动，也能让消费者感到十分亲切1详情页装修的FABE原则二、移动端店铺详情页装修设计真实感逻辑感亲切感对话感氛围感正规感作为虚拟的推销员，商品描述要具有对话感，这样不仅能够解决消费者的疑问，还能让其获得身临其境的购物体验，在深入感受商品的同时也提高了购买的可能性1详情页装修的FABE原则二、移动端店铺详情页装修设计真实感逻辑感亲切感对话感氛围感正规感消费者在无形之中或多或少地都会有“凑热闹”的心理，当看到某件商品有很多人买便想去看个究竟，或者自己也想跟风购买，这一点对于冲动型消费者来讲尤为明显。因此，在设计移动端店铺的详情页时，要努力营造很多人都在争相购买的卖场气氛，这样的氛围会带动不少消费者形成购买冲动。1详情页装修的FABE原则二、移动端店铺详情页装修设计真实感逻辑感亲切感对话感氛围感正规感正规与规范带来的是信赖感与可靠感，因此移动端店铺的详情页中也不能忽略各种认证证书等能够证明商品正规的信息展示。2避免走入三大设计误区二、移动端店铺详情页装修设计01密密麻麻、过于拥挤的文字说明据相关研究机构统计，详情页中70%的文字信息消费者是不会仔细阅读的，尤其是拥挤的文字会在视觉上引起消费者的畏惧感2避免走入三大设计误区二、移动端店铺详情页装修设计01密密麻麻、过于拥挤的文字说明02片面追求视觉震撼效果，忽视商品真实商品图片的展示海报图片商品实拍图片2避免走入三大设计误区二、移动端店铺详情页装修设计01密密麻麻、过于拥挤的文字说明02片面追求视觉震撼效果，忽视商品真实商品图片的展示03关联销售商品图片的数量过多详情页中插入了过多的与商品信息无关的关联商品图片，不仅可能影响加载速度，也无法让消费者及时地看到主打商品信息。消费者很可能会因为急于寻找主打商品信息而忽略对这部分内容的浏览，因此并起不到引流的作用。关联商品图片的数量保持3~4张较为合适，且与所销售商品紧密相关或配套的商品更能引起消费者的关注。3直截了当地突出商品信息二、移动端店铺详情页装修设计在PC端店铺商品详情页的开端可能会出现“新品推荐”“搭配套餐”等信息，但这些在移动端店铺则显得不怎么实用。移动端店铺必须在前三屏中对商品的卖点和重要信息进行清晰的描述。3直截了当地突出商品信息二、移动端店铺详情页装修设计关联信息繁琐课后习题1．在手机淘宝上搜索玩具类目排名前五的店铺首页设计，分析其有何优势。2．请举例说明FABE原则在移动端店铺详情页设计中的具体应用。3．假如你要为某品牌笔记本电脑的移动端店铺设计详情页，请简述自己的设计思路。