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