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

在进行移动端店铺详情页的设计时，还要注意描述的逻辑感。将商品受众群 体最想看到的信息放置在页面顶端，以此为依据来确定商品详情页中信息的 先后顺序，最终形成视觉漏斗模型中所表现的逻辑关系。
视觉漏斗模型中的逻辑关系其实就是FABE原则所体现的逻辑顺序，通过介绍 商品的特征→商品特点→能给消费者带来的利益点→证明商品质量的证据这 四个步骤，在层层说明中一步步打消消费者的购买顾虑，增强其购买信心， 最终形成下单成交。
过于花哨的优惠券设计
一、移动端店铺首页装修设计
3 优惠券的装修设计
在优惠券上添加“立即领取”按钮之类的视觉元素，可以在一定程度上左右消费者的点击行为， 相对于没有明显按钮引导的优惠券版块而言，有按钮引导更具操作的提示感，有利于引导消费者 的参与行为。
一、移动端店铺首页装修设计
4 商品分类导航装修设计
在设计这个版块时，要注意控制好显示尺寸与比例， 使其能够清晰与完整地展示在消费者面前，起到快 速导航的作用。
商品分类足够明显，图片加文字的组合设计让分类 信息能够完整地展示在消费者面前，让其可以快速 了解店铺中商品的分类情况。
一、移动端店铺首页装修设计
简洁的分类标题提示，没有过 多的装饰
5 商品分类展示装修设计
1 店招的装修设计
移动端店铺店招底图选择一张背景图片，搭配上简洁的文字描述，并很好地控 制了图片与文字色彩的对比度，让消费者可以清晰地阅读文字。简短的文案迎 合了喜爱快速阅读的消费群体的口味，同时也对店铺所倡导的生活理念进行了 高度的概括。
一、移动端店铺首页装修设计
1 店招的装修设计
就底图内容而言，可以是纯图片，但图片内容要与店铺形象有所关联；也可以 是以图片为主的图文搭配形式，或以文字为主的图文搭配形式，通过文字表明 店铺的特点，以此来吸引消费者。此外，在店招底图中还可以添加店铺上新介 绍等。
一、移动端店铺首页装修设计
1 店招的装修设计
与店铺无关的店招底图 店招底图文字被遮挡
一、移动端店铺首页装修设计
2 轮播图片装修设计
轮播图片中包含店铺上新活动通知、促销活动展示 等内容。轮播图内容要简洁，文字要清晰，主次分 明且能达到快速传播的目的，这是轮播图片设计的 要点
一、移动端店铺首页装修设计
真实感 逻辑感 亲切感 对话感 氛围感 正规感
1 详情页装修的FABE原则
二、移动端店铺详情页装修设计
真实感 逻辑感 亲切感 对话感 氛围感 正规感
1 详情页装修的FABE原则 商品展示细节图片
二、移动端店铺详情页装修设计
1 详情页装修的FABE原则
真实感 逻辑感 亲切感 对话感 氛围感 正规感
B——利益（Benefits）
• 以消费者利益为中心，告知并 强调消费者购买商品后会得到 的利益，激发消费者的购买欲 望
E——证据（Evidence）
• 指第三方认知、新闻舆论或技 术报告等信息，要有足够的权 威性、客观性、可靠性与可见 证性，这样才能获得消费者的 信任
二、移动端店铺详情页装修设计
在店铺首页商品分类展示第三区中，选择对店长推 荐的商品进行展示，就如同实体店中经常出现贴有 “店长推荐”标签的商品，这类商品通常属于热销 商品或是店铺中的“镇店之宝”，会对消费者形成 一定的吸引力。
Contents 目录 1 移动端店铺首页装修设计 2 移动端店铺详情页装修设计
二、移动端店铺详情页装修设计
二、移动端店铺详情页装修设计
1 详情页装修的FABE原则
真实感 逻辑感 亲切感 对话感 氛围感 正规感
CHAPTER ELEVEN
移动端店铺首页与 详情页装修设计
wenku.baidu.com
学习目标
➢ 掌握店招的装修设计方法。 ➢ 掌握轮播图片的装修设计方法。 ➢ 掌握优惠券的装修设计方法。 ➢ 掌握商品分类导航及分类展示的装修设计方法。 ➢ 了解店铺详情页设计的FABE原则。 ➢ 掌握手机淘宝店铺详情页的设计方法。
❖ 对店铺进行个性化且更有亲和力的设计，对店铺的各个细节进行优化，才能给店
2 轮播图片装修设计
设计时也要注意控制好轮播图片的数量，以及展示的先后顺序。 一般来说，2~4张图片轮播展示较为适中。 在设计时可以根据店铺活动的重要程度或先后顺序对轮播图片的位置进行相应的调整。
一、移动端店铺首页装修设计
3 优惠券的装修设计
虽然没有使用非常鲜艳、富有刺激性的色彩，但修 饰图案与背景色的搭配能让优惠券版块在店铺首页 整体的色彩环境中显得十分突出，也足以引起消费 者的注意。
01
详情页装修的FABE原则
02
避免走入三大设计误区
03
直截了当地突出商品信息
二、移动端店铺详情页装修设计
1 详情页装修的FABE原则
FABE原则
F——特征（Features）
• 介绍商品的特质、特性等基本 功能，以及它是如何满足消费 者需求的
A——优点（Advantages）
• 商品的卖点与优势，向消费者 证明商品的卖点，其实就是给 消费者提供更多的购买该商品 的理由
商品名称与价格说明无过多的 修饰，一目了然
一、移动端店铺首页装修设计
5 商品分类展示装修设计
第一区中对爆款商品进行展示
第一区中对促销商品进行展示
一、移动端店铺首页装修设计
5 商品分类展示装修设计
第二区中对新品与应季商品展示
一、移动端店铺首页装修设计
5 商品分类展示装修设计
除了上述的第一区与第二区以外，还有第三区、第 四区……在这些区域中可以根据需要放置不同的商 品。
铺营造良好的购物氛围，让买家最终被店铺所吸引并购买商品。
Contents 目录 1 移动端店铺首页装修设计 2 移动端店铺详情页装修设计
一、移动端店铺首页装修设计
一、移动端店铺首页装修设计
01
店招的装修设计
02
轮播图片装修设计
03
优惠券的装修设计
04
商品分类导航装修设计
05
商品分类展示装修设计
一、移动端店铺首页装修设计
1 店招的装修设计
用鞋子展示图片作为底图，与店铺“女鞋”的主题相呼应
一、移动端店铺首页装修设计
PC端店铺与移动端店铺店招设计的不同
1 店招的装修设计
把模特图作为简单背景底图来使用，不仅迎合了店铺的销售气氛，也能让消费 者在第一时间了解店铺中的主营商品。
一、移动端店铺首页装修设计