（中职）网点装修学习情境八 手机店铺的宝贝详情页设计课件

1、YCF正版可修改PPT（中职）网点装修学习情境八 手机店铺的宝贝详情页设计ppt课件 随着手机网络用户规模的迅速壮大，掌上互联网的时代已经来临，直接引发了手机购物的热潮。据统计，2015年淘宝网“双十一”全天交易额突破912.17亿，其中移动端交易额占比68%，而2014年同期，这一数字仅为42.6%。 通过搜索引擎或者超链接直接进到商品详情页，是目前使用最多的购物方法。因此，手机店铺宝贝详情页的排版和设计技巧就相显得当重要。 表8-1 任务单细文档：根据PC端店铺的宝贝详情页进行优化，制作一张手机店铺宝贝详情页（茶花随手杯，图片在素材库中）。具体要求： 1、结合本店PC端店铺宝贝详情页设计手

2、机店铺宝贝详情页，对PC店铺宝贝详情页进行优化，可适当增加或减少模块内容。2、手机屏幕小，页面设计尽量简约，字体显眼，多使用大图展示宝贝。 3、手机页面打开需要流量，页面别太长。4、设计规格为宽620像素，高最大为960像素，格式为JPG的图片。 5、可选：为手机店铺宝贝详情页增加一个音频，时长不超过30秒，大小不超过200K，格式为MP3，内容可围绕产品卖点和特色展开。6、整体要美观大方，色彩清晰，符合手机用户的购物心理。任务指派人陈明发出日期10.8完成日期/时间10.20任务名称茶花随手杯的宝贝详情页制作任务要求有明确细文档（见表8-1下方）列明要求其他：任务用途首页 主题独立页 官方承

3、接页 主图 直通车图 钻展图 详情基础优化 详情深度优化 官方引流图 主题广告图 新品上新 常规活动营销策划主题活动策划 大型活动策划 商品运营策划 其他：自我检查确认签名组长检查确认签名验收人按要求完成 是 否确认签名1、知识目标2、技能目标掌握手机店铺宝贝详情页设计的设计流程能够独立完成手机店铺宝贝详情页设计了解手机店铺宝贝详情页设计的基础理论知识掌握手机店铺宝贝详情页设计的创作方法手机店铺宝贝详情页设计规划任务一 资讯学习流程计划设计决策手机店铺宝贝详情页设计规划任务一一、手机店铺宝贝详情页规格和要求 1、宽度为480至620像素。2、高度小于等于960像素。3、格式为：JPG、GIF、

4、PNG。4、手机详情总体大小：图片、文字和音频文件大小加起来应小于或等于1.5M。5、所有图片都应与本宝贝有关。6、文字要求：图片文字字体应大于或等于30号字，英文和阿拉伯数字大于或等于20号字。若需要添加的文字太多，尽量使用纯文本的方式编辑，这样的页面看起来会更清晰美观。7、音频要求：每个手机详情只能增加一个音频，时长不超过30秒，大小不超过200K，支持MP3格式。音频内容可以围绕产品卖点、品牌故事、产品特色、产品优惠等展开。资讯学习流程计划设计决策二、手机店铺宝贝详情页作用 1、展示商品，让消费者从图片中直观了解商品。2、介绍商品，让消费者了解商品属性。3、增加入口，吸引消费者进入店铺或

5、查看其他商品，提高成交率和二次消费。4、树立品牌形象，提高消费者的信任度和购买欲望。5、良好的宝贝描述页面会引导消费者完成自主购物，减少沟通成本。手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区 1、视觉上较混乱手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区 2、把好评页面截下放入详情页中手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区 3、图片质量过低，降低了商品品质手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区 4、结构混乱，主次不分手

6、机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区 5、内容不全面，影响消费者判断和信心手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区 6、广告描述过长，影响用户体验手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区 7、设计过于视觉化，忽略商品介绍手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容 1、同类产品推荐或活动推荐手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容 2、宝贝详情手机店铺宝贝详情页设计规划任务

7、一资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容 3、商品功能特点展示手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容 4、模特图片展示手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容 5、商品单品拍摄展示手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容 6、细节展示手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容 7、其他热销商品推荐手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容 8、购物须知手机店铺宝贝详

8、情页设计规划任务一资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容 9、品牌故事手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策五、手机详情页常用结构 从了解手机宝贝详情页常用的结构进行美化设计。宝贝详情页常用结构：1. 核心卖点2. 辅助卖点3. 使用体验4. 配件说明5. 商品参数6. 售后保障7. 关联推荐手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策列出手机宝贝详情页设计内容撰写手机顾客购买需求列出PC端宝贝详情页模块筛选出手机店铺宝贝详情页模块通过对任务的分析及手机店铺宝贝详情页设计的学习，手机店铺宝贝详情页文案撰写计划如下：确定手机宝贝详情页的排版手机店铺宝贝

9、详情页设计规划任务一资讯学习流程计划设计决策一、撰写手机顾客购买需求我们首先要了解PC端和手机端顾客在购物时着重内容的不同，才能更好地筛选出手机宝贝详情页的内容。PC端和手机端顾客的不同处：1、顾客浏览方式不同。手机店铺只要有手机或其他移动端都可于不同时间浏览，而PC端店铺需要用户在电脑前进行浏览，手机端顾客比PC端顾客更多元化。2、转化方式不同。PC端顾客购物多数是通过多次询问才下单，而手机端更多的是静默转化。这样就要求手机端宝贝要注重细节、大图、模特展示的突出，才能更好地吸引顾客的眼球。3、显示屏幕大小不同。手机端屏幕较小，要求宝贝详情页大图展示，并突出卖点，字体显眼，大小适中。4、浏览费

10、用不同。顾客使用手机端购物时，大多数使用移动网络，这样就会产生流量费用，要求页面不可太长。二、筛选手机店铺宝贝详情页模块列出PC端店铺宝贝详情页模块，根据需要筛选出手机店铺宝贝详情页的设计内容，然后收集素材，对应模块图片和文案。手机店铺宝贝详情页设计规划任务一资讯学习流程计划设计决策三、确定手机店铺宝贝详情页排版根据对手机店铺宝贝详情页模块的筛选，列出了手机店铺宝贝详情页的设计内容，结合手机顾客的需求，确定手机宝贝详情页的排版要求。手机宝贝详情页排版要求：1、手机屏幕小，利用大图展示宝贝，字体清晰，大小适中。2、页面不能太长，以免影响打开速度和增加流量费用。3、宝贝要注重细节、模特展示的突出，

11、吸引顾客的购买欲。4、宝贝详情页模块可按上面第二点的列出顺序。手机店铺宝贝详情页设计规划任务一手机店铺宝贝详情页实施任务二 资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 一、手机店铺宝贝详情页的设计技巧1、恰当的页面长度。特别是商品展示图片之前的广告描述不得过多，影响商品本身的关注度，也会影响页面的打开速度。2、商品照片应选择品质高的图片，使用统一纯净的背景，清晰明亮。每个商品都有大小和角度不同的配图，这样使消费者能够从各个角度连贯的浏览商品，从而产生全面的商品印象。资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 一、手机店铺宝贝详情页的设计技巧3、控制图片大小和

12、质量。图片会根据色彩的变化产生容量大小的变化，由此会影响整体页面使用。4、从消费者角度出发，根据不同行业商品类别，将商品属性详细展现出来。较多的内容可考虑表格或图文并茂方式。资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 一、手机店铺宝贝详情页的设计技巧5、根据消费者需求，合理布局版块。我们不能忘记消费者登陆购物网站的目的，如何在第一时间展示商品信息，吸引消费者购物非常重要。正确的布局应该先少部分的同类产品推荐，活动推荐，然后展示商品的基本属性，接着是模特图片展示、商品单品拍摄展示、细节展示、然后是其他热销商品推荐、实体店展示、品牌故事、购物须知、其他活动信息入口等次要内容。资讯

13、学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传进入手机详情编辑页面。（1）通过“宝贝管理”进入页面。资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传进入手机详情编辑页面。（2）通过“店铺管理”进入页面。资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传进入手机详情编辑页面。（3）通过“手机端千牛”。进入页面。资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传编辑手机详情页面（1）模板编辑。1）进入模板编辑页面资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传编辑手机详情页面

14、（1）模板编辑。2）选择模板资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传编辑手机详情页面（1）模板编辑。3）修改模板资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传编辑手机详情页面（2）文本编辑。1）进入文本编辑页面资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传编辑手机详情页面（2）文本编辑。2）修改和添加详情图片资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传3. 上传手机详情页资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 二、页面上传4.预览手机宝贝详情页资讯学习流

15、程计划设计决策任务实施手机店铺宝贝详情页实施任务二 打开手机宝贝详情页编辑页面导入电脑端宝贝详情根据手机详情规格修改详情添加和编辑图文详情确定好手机宝贝详情页设计内容后，列出宝贝详情上传到手机的过程图：发布宝贝详情页资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 通过手机店铺宝贝详情页的规划设计，我们大致了解了设计的流程。因顾客的浏览情况不同，手机端详情的结构不能与PC端的一样，而且手机端详情图片要求和PC端也不一样。 不同的手机详情页的上传方法可制作出不同的风格的详情，什么上传方法才更适合自己店铺的装修呢？以下列出不同上传方法的优缺点，在编辑详情页时选择更适合自己店铺的实施规划

16、。 手机详情页的模板编辑和文本编辑的优缺点：编辑方法优点缺点模板编辑减少店铺装修工作量；新建模板后，其他宝贝也可套用该内容宝贝图片需要根据模板里的要求进行修改，局限性大文本编辑导入PC端详情一键上传，方便快捷一般PC端详情图片过长，影响手机端页面的打开速度新添加详情页灵活性大；也可通过修改PC端详情图片进行上传工作量大 根据上图的分析，设计手机详情时，若宝贝已在PC端中发布，可对PC端详情页的图片进行适当的修改；若新发布的宝贝，为了减少装修工作量，可使用模板编辑的方法。资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 1、打开手机宝贝详情页编辑页面 首先进入卖家中心，在左侧栏目的宝

17、贝管理里面选择“发布宝贝”或“出售中的宝贝”都可找到要发布手机详情页的宝贝。2、进入手机端编辑 商品描述中分电脑端和手机端，点击进入手机端编辑。资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 3、编辑PC端宝贝详情页模块 使用图片编辑软件（Photoshop）对PC端已制作完成的宝贝详情页进行筛选并修改，保留的模块有：产品特点和功能（可拆分成两张图片）、产品参数、产品实拍、产品细节、产品品质和包装展示。资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 裁剪和修改图片的大小，放置在一个文件夹中，并上传到“图片空间”中。如图所示：资讯学习流程计划设计决策任务实施手机店铺宝

18、贝详情页实施任务二 4、上传详情图片资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 5、发布手机详情页 确定宝贝详情页的内容后，把页面拉到底部，点击“确认”，成功发布了手机宝贝详情页。资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二 6、预览效果 手机宝贝详情页制作要点就是不直接使用PC端宝贝详情页，去除多余内容，精简页面，减少手机顾客的流量费用。要做好手机宝贝详情页，就要清楚了解其制作要点和要注意的方面。一、制作要点：1. 详情页的前面几部分的内容相当重要，展示商品卖家、抓住顾客眼球。2. 抓住顾客的第一印象。3. 产品的卖点、优势、利益必须要有。4. 产品整体图讲

19、求少而精，可利用模特图、全景图展示。5. 选出精品产品实拍图，展示更多宝贝细节。二、注意的方面 如果说流量是店铺根本的话，那么转化率就是催化剂，一个好的详情页能够提高转化率，提升买家的粘性。1. 不乱用展示方式。 能用表格就不用文字，能用图片就不用表格。2. 产品醒目。 大图展示产品，排版美观合理，不堆砌卖点和图片。3. 文字简练清晰。 字体要大一点，适合手机阅读。4. 详情六屏以内。 页面不能太长，不影响打开的速度。实训目的 了解手机详情页的设计方法及步骤，掌握如何为自己手机店铺设计一张宝贝详情页。实训准备（1）组队：以小组为单位，3-5人一组（至少有一位同学有自己的店铺），并选出一名组长，

20、分配好组员的工作。（2）素材：商品图片若干实训任务 参考PC端宝贝详情页面，并从手机详情页的背景、配色、字体、版面布局等方面入手为自己手机店铺商品设计一张宝贝详情页，自定商品，设计规格为宽为620像素，高最大为960像素。实训 手机店铺宝贝详情页设计实训步骤（1）撰写宝贝顾客购买需求（2）筛选PC端宝贝详情页模块（3）确定手机宝贝详情页信息（4）使用图片编辑软件（Photoshop）修改PC端宝贝详情图（5）排版规划（6）在手机店铺上传宝贝详情页（7）浏览宝贝详情效果任务实施1）宝贝顾客购买需求：2）列出和筛选PC端宝贝详情页模块：序号PC端宝贝详情页模块名称在手机端宝贝详情页模块中是否保留123456789103