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

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

  • 格式：ppt
  • 大小：23.88 MB
  • 文档页数：35

下载文档原格式

  / 35

合集下载

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

移动端店铺首页和详情页设计专题培训课件
与店铺无关的店招底图 店招底图文字被遮挡
一、移动端店铺首页装修设计 2 轮播图片装修设计
轮播图片中包含店铺上新活动通知、 促销活动展示等内容。轮播图内容要 简洁，文字要清晰，主次分明且能达 到快速传播的目的，这是轮播图片设 计的要点
一、移动端店铺首页装修设计 2 轮播图片装修设计
设计时也要注意控制好轮播图片的数量，以及展示的先后顺序。 一般来说，2~4张图片轮播展示较为适中。 在设计时可以根据店铺活动的重要程度或先后顺序对轮播图片的位置进行
关联商品图片的数量保持3~4张较为合适，且与所销售商 品紧密相关或配套的商品更能引起消费者的关注。
二、移动端店铺详情页装修设计 3 直截了当地突出商品信息
在PC端店铺商品详情页的开端可能会出现“新品推荐”“搭配套 餐”等信息，但这些在移动端店铺则显得不怎么实用。移动端店 铺必须在前三屏中对商品的卖点和重要信息进行清晰的描述。
除了上述的第一区与第二区以外，还 有第三区、第四区……在这些区域中 可以根据需要放置不同的商品。
在店铺首页商品分类展示第三区中， 选择对店长推荐的商品进行展示，就 如同实体店中经常出现贴有“店长推 荐”标签的商品，这类商品通常属于 热销商品或是店铺中的“镇店之宝”， 会对消费者形成一定的吸引力。
一、移动端店铺首页装修设计 1 店招的装修设计
就底图内容而言，可以是纯图片，但图片内容要与店铺形 象有所关联；也可以是以图片为主的图文搭配形式，或以 文字为主的图文搭配形式，通过文字表明店铺的特点，以 此来吸引消费者。此外，在店招底图中还可以添加店铺上 新介绍等。
一、移动端店铺首页装修设计 1 店招的装修设计
掌握店招的装修设计方法。 掌握轮播图片的装修设计方法。 掌握优惠券的装修设计方法。 掌握商品分类导航及分类展示的装修设计方法。 了解店铺详情页设计的FABE原则。 掌握手机淘宝店铺详情页的设计方法。

移动端店铺首页与详情页设计教案资料共37页文档

移动端店铺首页与详情页设计教案资料共37页文档
40、人类法律，事物有规律，这是不 容忽视 的。— —爱献 生
21、要知道对好事的称颂过于夸大，也会招来人们的反感轻蔑和嫉妒。——培根 22、业精于勤，荒于嬉；行成于思，毁于随。——韩愈
23、一切节省，归根到底都归结为时间的节省。——马克思 24、意志命运往往背道而驰，决心到最后会全部推倒。——莎士比亚
移动端店铺首页与详情页设计教案资 料
36、如果我们国家的法律中只有某种 神灵， 而不是 殚精竭 虑将神 灵揉进 宪法， 总体上 来说， 法律就 会更好 。—— 马克·吐 温 37众舆论的支持，法律 是丝毫 没有力 量的。 ——菲 力普斯 39、一个判例造出另一个判例，它们 迅速累 聚，进 而变成 法律。 ——朱 尼厄斯
25、学习是劳动，是充满思想的劳动。——乌申斯基
谢谢！

店铺首页视觉设计方案PPT课件

店铺首页视觉设计方案PPT课件

03
4.2 店招视觉设计
1 店招视觉设计规范
店招高度设计规范
淘宝后台的店招高度为120像素，建议设计时设定店 招尺寸为950×120像素，加上导航条高度30像素，共
150像素，可避免发布后导航不显示的问题
4.2 店招视觉设计
1 店招视觉设计规范
店招元素设计
清晰的店铺名称
品牌宣传语
移动端二维码
4.2 店招视觉设计
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
4.3 首焦轮播区视觉设计
设计聚焦消费者视线
1
构建设计图三要素
2
溶图的应用范围
3
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
首焦位置
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
4.3 首焦轮播区视觉设计
1 设计聚焦消费者视线
首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。
两类店铺首页排版
4.1 首页视觉水平的四大指标
3 首页人均点击次数
首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某 日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为 600次，那么首页人均点击次数为：600次÷150人=4次/人。
人均点击次数
4.1 首页视觉水平的四大指标

手机淘宝页面设计介绍课件

手机淘宝页面设计介绍课件

05
广告区域：展示各种广告信息
06
页面背景：采用简洁、清晰的背景，提高用户体验
色彩搭配
主色调：手机淘宝的主色调为橙色，代表活 力、热情和温暖
辅助色：辅助色包括蓝色、绿色、紫色等， 用于强调和区分不同功能区域
对比色：使用对比色可以突出重点信息，如 红色、黄色等
渐变色：渐变色可以增加页面的层次感和 立体感，如从浅到深的渐变效果
搜索页面设计：快速准确找到 ห้องสมุดไป่ตู้需商品，提高用户体验
市场竞争力：优秀的页面设计可以提高手机淘宝 在市场竞争中的优势，吸引更多用户和商家。
手机淘宝页面设计的原则
简洁明了：页面设计应简 洁明了，让用户能够快速 找到所需信息。
易于操作：页面设计应易 于操作，让用户能够轻松 完成购物流程。
视觉吸引力：页面设计应 具有视觉吸引力，吸引用 户关注并激发购买欲望。
6
设计页面风格：设计手机淘宝页面的整体风 格，包括色彩、字体、背景等
7
测试与优化：对手机淘宝页面进行测试和优 化，确保页面的可用性和易用性
8
发布与维护：发布手机淘宝页面，并根据用 户反馈进行维护和更新
设计实践技巧
01
简化页面：减少不必要的元素，突出重点信息
02
色彩搭配：选择合适的色彩搭配，提高页面视觉效果
03
布局合理：合理安排页面元素，提高页面可读性
04
响应式设计：考虑不同设备的屏幕尺寸，实现页面自适应
设计实践成果展示
首页设计：简洁明了，突出重 点
分类页面设计：清晰明了，易 于查找
商品详情页设计：详细展示商 品信息，提高购买欲望
购物车页面设计：方便用户管 理购买商品，提高购买效率

移动端店铺首页与详情页设计精编版37页PPT

移动端店铺首页与详情页设计精编版37页PPT

31、只有永远躺在泥坑里的人，才不会再掉进坑里。——黑格尔 32、希望的灯一旦熄灭，生活刹那间变成了一片黑暗。——普列姆昌德 33、希望是人生的乳母。——科策布 34、形成天才的决定因素应该是勤奋。——郭沫若 35、学到很多东西的诀窍，就是一下子不要学很多。——洛克
移动端店铺首页与详情页设计精编版
16、自己选择的路、跪着也要把它走，以后 才能更 辉煌。
18、敢于向黑暗宣战的人，心里必须 充满光 明。 19、学习的关键--重复。
20、懦弱的人只会裹足不前，莽撞的 人只能 引为烧 身，只 有真正 勇敢的 人才能 所向披 靡。

淘宝店铺首页设计资料ppt课件

淘宝店铺首页设计资料ppt课件
40
ห้องสมุดไป่ตู้
41
30
四、淘宝店铺首页海报设计技法
5. 展示多种产 品：当海报 上要放置过 多的促销产 品，可以采 用这种版式。 产品平行排 版，中间利 用半透明的 框展现文案。
31
四、淘宝店铺首页海报设计技法
6. 斜切式构图： 斜切式构图 会让画面显 得时尚，动 感活跃。但 是画面平衡 感不是很好 控制。一般 文案倾斜角 度不超过30°， 文字往右上 方倾斜便于 阅读 。
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市，并且打算全力推广的产品
23
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。
24
四、淘宝店铺首页海报设计技法
（三）海报设计原则： “3”原则
– 实物照片
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点，第一时间打动客户， 吸引客户
– 店铺（产品）优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不
同，形成差异化竞争
12
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分
（一）海报设计思路：
1. 海报要与大色调统一
• 在设计海报时，先观察大环境，海报设计尽量避 免与主色调产生强烈对比，必须要用对比色设计 海报时，要考虑降低纯度或明度
18
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
2. 观察产品亮点定背景色

《网店装修》教学课件10UI图标设计


图10-12 绘制矩形
10.2.3 移动端店铺首页的设计与制作
26
图10-13 绘制路径 图10-14 制作开口效果
（4） 选择钢笔工具，在矩形的左侧绘制路径， 如图10-13所示，按Ctrl+Enter组合键将路径 转换成选区。选择红色矩形图层，按Delete 键，删除选区形状。保持选区状态不变，新 建图层，设置前景色的RGB值为（248，239， 150）的淡红色，按Alt+Delete组合键将前景 色填充选区。按Ctrl+J组合键复制图层，执行 “编辑”→“变换”→“水平翻转”命令， 移动图层与下层拼接对齐。按Ctrl+E组合键 向下合并图层，实现打开口的效果，如图1014所示。
项目10 移动端店铺的装修实现
知识目标
（1） 认识移动端店铺与PC端店铺的区别。 （2） 明确移动端店铺的设计要点。 （3） 掌握移动端首页面的构成模块要素。 （4） 掌握移动端首页面各构成模块的尺寸要求。
技能目标
（1） 能进行移动端店铺首页各模块的设计与装修实现。 （2） 能进行移动端店铺详情页的装修实现。
搭配模块。
航分类模块。
10.2.2 移动端店铺首页装修设计的注意事项
13
注重感官的习惯 性与舒适性
合理控制页面的 长度
01
02
把握页面的 整体内容
03
布局要结构清晰
04
10.2.2 移动端店铺首页装修设计的注意事项
14
建立分类爆款及其他分类专区 优惠券设计让到店顾客感受促销氛围
首页色彩要统一协调、主次分明
10.2.3 移动端店铺首页的设计与制作
27
（5） 调整图层顺序，在图层面板中将开口的图层移至红色矩 形图层下方。选择红色矩形图层，单击“图层面板”底端的

(完整版)淘宝入门-页面装修.ppt


1| 那些地区不推 2| 那些地区要推 3| 那些地区重点推
店铺装修的页面概述
主图
引流，提高点击率
详情页
决定/提高转化率，打消消费疑虑
首页
店铺形象，整体呈现
主图
店铺装修的页面概述
1·尺寸一般为:宽700px高700px 2·一定要突出产品 3·文案一定要吸引人，与消费者
引发共鸣 4·色彩搭配一定要醒目 5·产品要占到整个图60%—70% 6·一定要与其他同类目的产品区别
C
价格区间 的定位
D
推广地域 的定位
人群的定位
1| 性别构成 2| 年龄阶段 3| 消费能力
店铺装修要点概述
产品的定位
1| 什么产品 2| 价值多少 3| 哪个档次
店铺装修要点概述
价格区间的定位
店铺装修要点概述
1| 最高多少钱 2| 最低多少钱 3| 不能太离谱
推广地域的定位
店铺装修要点概述
店铺装修所涉及到的软件
店铺装修步骤演示
Photoshop
Dreamweaver
图文处理软件
网页代码处理软件
一般常用的软件有以上这两种
腾讯QQ
美图秀秀
鉴于大家没有基础教大家怎么用QQ截图，美图秀秀处理图文
店铺装修步骤演示
1 店招的制作
一般店招出现的内容都有：店铺名称、 LOGO/标志、主推产品等
首先大家从网上找一张可以作为店招背景的图片 用QQ截图（Ctrl+Alt+A)截出宽950px高120px大小
4 上传页头背景
店铺装修步骤演示
1 2 3 4 5
点击页头的更换图片，把做好的背景图上传，点应用到所有页面
6 上传轮播海报

店铺首页宝贝陈列装修培训课件


商品展示角度
总结词
不同的商品需要不同的展示角度，以突出其特点，增强视觉 效果。
详细描述
在陈列宝贝时，应根据商品的特点和卖点，选择最佳的展示 角度。例如，对于服装类商品，可以通过模特展示正面、侧 面等多个角度；对于家居用品，可以利用不同的拍摄角度和 高度展示其细节和特点。
灯光效果
总结词
灯光是营造店铺氛围的重要手段 ，合适的灯光效果能够突出商品 的特色，增强顾客的购买欲望。
装修风格应简洁、大方，易于顾客识别和记忆。
装修问题解答
• 考虑使用环保材料，确保店铺的环保和安全。
装修问题解答
装修要素 选用合适的色彩搭配，营造舒适的购物环境。
合理规划空间布局，确保顾客购物便利。 注重细节处理，提升店铺整体品质感。
THANKS
谢谢您的观看
详细描述
随着移动互联网的普及，越来越多的顾客通 过手机等移动设备浏览和购买商品。因此， 店铺首页的设计需要考虑响应式设计，确保 在不同设备上都能良好地展示和操作。这包 括适应不同屏幕尺寸、分辨率和浏览器等， 以便为顾客提供更好的购物体验。
05
案例分析
优秀店铺首页案例
案例一
店铺“时尚风尚”
优点
布局清晰，色彩搭配和谐，突出新品和热销商 品，图片质量高，详情页转化率高。
02
宝贝陈列原则
突出重点
重点产品
将店铺的主打产品或特色产品放在陈 列的显眼位置，吸引顾客的注意力。
Байду номын сангаас
强调优势
对比陈列
通过将不同产品进行对比，突出产品 的特点和优势，提高顾客的购买欲望 。
通过突出产品的优势和卖点，让顾客 更愿意了解和购买该产品。
分类明确

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

•介绍商品的特质、特性等基本功能，
以及它是如何满足消费者需求的
A——优点（Advantages）
•商品的卖点与优势，向消费者证明
商品的卖点，其实就是给消费者提 供更多的购买该商品的理由
B——利益（Benefits）
•以消费者利益为中心，告知并强调 消费者购买商品后会得到的利益， 激发消费者的购买欲望
二、移动端店铺详情页装修设计
3 直截了当地突出商品信息
在PC端店铺商品详情页的开端可能会出现“新品推荐”“搭配套
餐”等信息，但这些在移动端店铺则显得不怎么实用。移动端店 铺必须在前三屏中对商品的卖点和重要信息进行清晰的描述。
二、移动端店铺详情页装修设计
3 直截了当地突出商品信息
关联信息繁琐
E——证据（Evidence）
•指第三方认知、新闻舆论或技术报 告等信息，要有足够的权威性、客 观性、可靠性与可见证性，这样才
能获得消费者的信任
二、移动端店铺详情页装修设计
1 详情页装修的FABE原则
真实感 逻辑感 亲切感 对话感 氛围感 正规感
二、移动端店铺详情页装修设计
1 详情页装修的FABE原则
一、移动端店铺首页装修设计
5 商品分类展示装修设计
简洁的分类标题提示， 没有过多的装饰
商品名称与价格说明 无过多的修饰，一目 了然
一、移动端店铺首页装修设计
5 商品Байду номын сангаас类展示装修设计
第一区中对爆款商品进行 展示
第一区中对促销商品进行 展示
一、移动端店铺首页装修设计
5 商品分类展示装修设计
2 避免走入三大设计误区
01
密密麻麻、过于拥挤的文字说明
02
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
除了上述的第一区与第二区以外，还 有第三区、第四区……在这些区域中 可以根据需要放置不同的商品。
在店铺首页商品分类展示第三区中， 选择对店长推荐的商品进行展示，就 如同实体店中经常出现贴有“店长推 荐”标签的商品，这类商品通常属于 热销商品或是店铺中的“镇店之宝”， 会对消费者形成一定的吸引力。
进行优化，才能给店铺营造良好的购物氛围，让买家最终被 店铺所吸引并购买商品。
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 商品分类展示装修设计