当前位置:文档之家› 移动端店铺首页和详情页设计专题培训课件

移动端店铺首页和详情页设计专题培训课件

除了上述的第一区与第二区以外,还 有第三区、第四区……在这些区域中 可以根据需要放置不同的商品。
在店铺首页商品分类展示第三区中, 选择对店长推荐的商品进行展示,就 如同实体店中经常出现贴有“店长推 荐”标签的商品,这类商品通常属于 热销商品或是店铺中的“镇店之宝”, 会对消费者形成一定的吸引力。
进行优化,才能给店铺营造良好的购物氛围,让买家最终被 店铺所吸引并购买商品。
Contents 目录 1 移动端店铺首页装修设计 2 移动端店铺详情页装修设计
一、移动端店铺首页装修设计
一、移动端店铺首页ห้องสมุดไป่ตู้修设计
01
店招的装修设计
02
轮播图片装修设计
03
优惠券的装修设计
04
商品分类导航装修设计
05
Contents 目录 1 移动端店铺首页装修设计 2 移动端店铺详情页装修设计
二、移动端店铺详情页装修设计
01
详情页装修的FABE原则
02
避免走入三大设计误区
03
直截了当地突出商品信息
二、移动端店铺详情页装修设计 1 详情页装修的FABE原则
FABE原则
二、移动端店铺详情页装修设计 1 详情页装修的FABE原则
一、移动端店铺首页装修设计 4 商品分类导航装修设计
在设计这个版块时,要注意控制好显 示尺寸与比例,使其能够清晰与完整 地展示在消费者面前,起到快速导航 的作用。
商品分类足够明显,图片加文字的组 合设计让分类信息能够完整地展示在 消费者面前,让其可以快速了解店铺 中商品的分类情况。
一、移动端店铺首页装修设计 5 商品分类展示装修设计
移动端店 铺首页和 详情页设

学习目标
掌握店招的装修设计方法。 掌握轮播图片的装修设计方法。 掌握优惠券的装修设计方法。 掌握商品分类导航及分类展示的装修设计方法。 了解店铺详情页设计的FABE原则。 掌握手机淘宝店铺详情页的设计方法。
对店铺进行个性化且更有亲和力的设计,对店铺的各个细节
就底图内容而言,可以是纯图片,但图片内容要与店铺形 象有所关联;也可以是以图片为主的图文搭配形式,或以 文字为主的图文搭配形式,通过文字表明店铺的特点,以 此来吸引消费者。此外,在店招底图中还可以添加店铺上 新介绍等。
一、移动端店铺首页装修设计 1 店招的装修设计
与店铺无关的店招底图 店招底图文字被遮挡
相应的调整。
一、移动端店铺首页装修设计 3 优惠券的装修设计
虽然没有使用非常鲜艳、富有刺激性 的色彩,但修饰图案与背景色的搭配 能让优惠券版块在店铺首页整体的色 彩环境中显得十分突出,也足以引起 消费者的注意。 过于花哨的优惠券设计
一、移动端店铺首页装修设计 3 优惠券的装修设计
在优惠券上添加“立即领取”按钮之类的视觉元素,可以在一定程度上 左右消费者的点击行为,相对于没有明显按钮引导的优惠券版块而言, 有按钮引导更具操作的提示感,有利于引导消费者的参与行为。
不论是结合商品特点添加插画,还是直接采用插画的 表现形式,总之,在详情页中插入图画或漫画,能让 页面变得活泼、生动,也能让消费者感到十分亲切
二、移动端店铺详情页装修设计 1 详情页装修的FABE原则
真实感 逻辑感 亲切感 对话感 氛围感 正规感
作为虚拟的推销员,商品描 述要具有对话感,这样不仅 能够解决消费者的疑问,还 能让其获得身临其境的购物 体验,在深入感受商品的同 时也提高了购买的可能性
一、移动端店铺首页装修设计 1 店招的装修设计
移动端店铺店招底图选择一张背景图片,搭配上简洁的文 字描述,并很好地控制了图片与文字色彩的对比度,让消 费者可以清晰地阅读文字。简短的文案迎合了喜爱快速阅 读的消费群体的口味,同时也对店铺所倡导的生活理念进 行了高度的概括。
一、移动端店铺首页装修设计 1 店招的装修设计
视觉漏斗模型中的逻辑关系其实就是FABE原则所体现的 逻辑顺序,通过介绍商品的特征→商品特点→能给消费 者带来的利益点→证明商品质量的证据这四个步骤,在 层层说明中一步步打消消费者的购买顾虑,增强其购买 信心,最终形成下单成交。
二、移动端店铺详情页装修设计 1 详情页装修的FABE原则
真实感 逻辑感 亲切感 对话感 氛围感 正规感
商品分类展示装修设计
一、移动端店铺首页装修设计 1 店招的装修设计
用鞋子展示图片作为底图,与店铺“女鞋”的主题相呼应
一、移动端店铺首页装修设计 1 店招的装修设计
PC端店铺与移动端店铺店招设计的不同
把模特图作为简单背景底图来使用,不仅迎合了店铺的销 售气氛,也能让消费者在第一时间了解店铺中的主营商品。
一、移动端店铺首页装修设计 2 轮播图片装修设计
轮播图片中包含店铺上新活动通知、 促销活动展示等内容。轮播图内容要 简洁,文字要清晰,主次分明且能达 到快速传播的目的,这是轮播图片设 计的要点
一、移动端店铺首页装修设计 2 轮播图片装修设计
设计时也要注意控制好轮播图片的数量,以及展示的先后顺序。 一般来说,2~4张图片轮播展示较为适中。 在设计时可以根据店铺活动的重要程度或先后顺序对轮播图片的位置进行
真实感 逻辑感 亲切感 对话感 氛围感 正规感
二、移动端店铺详情页装修设计 1 详情页装修的FABE原则
真实感 逻辑感 亲切感 对话感 氛围感 正规感
商品展示细节图片
二、移动端店铺详情页装修设计 1 详情页装修的FABE原则
真实感 逻辑感 亲切感 对话感 氛围感 正规感
在进行移动端店铺详情页的设计时,还要注意描述的逻 辑感。将商品受众群体最想看到的信息放置在页面顶端, 以此为依据来确定商品详情页中信息的先后顺序,最终 形成视觉漏斗模型中所表现的逻辑关系。
简洁的分类标题提示, 没有过多的装饰
商品名称与价格说明 无过多的修饰,一目 了然
一、移动端店铺首页装修设计 5 商品分类展示装修设计
第一区中对爆款商品进行 展示
第一区中对促销商品进行 展示
一、移动端店铺首页装修设计 5 商品分类展示装修设计
第二区中对新品与应季商品展示
一、移动端店铺首页装修设计 5 商品分类展示装修设计
相关主题