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

YCF正版可修改PPT（中职）网点装修学习情境八 手机店铺的宝贝详情页设计ppt课件网店装修 情境导入任务单学习目标学习任务情境总结基础训练拓展训练手机店铺的宝贝详情页设计学习情境八学习任务情境总结基础训练拓展训练3 学习目标任务单情境导入情境导入 随着手机网络用户规模的迅速壮大，掌上互联网的时代已经来临，直接引发了手机购物的热潮。据统计，2015年淘宝网“双十一”全天交易额突破912.17亿，其中移动端交易额占比68%，而2014年同期，这一数字仅为42.6%。通过搜索引擎或者超链接直接进到商品详情页，是目前使用最多的购物方法。因此，手机店铺宝贝详情页的排版和设计技巧就相显得当重要。学习任务情境总结基础训练拓展训练4 学习目标任务单情境导入任务单 表8-1 任务单细文档：根据PC端店铺的宝贝详情页进行优化，制作一张手机店铺宝贝详情页（茶花随手杯，图片在素材库中）。具体要求：1、结合本店PC端店铺宝贝详情页设计手机店铺宝贝详情页，对PC店铺宝贝详情页进行优化，可适当增加或减少模块内容。2、手机屏幕小，页面设计尽量简约，字体显眼，多使用大图展示宝贝。3、手机页面打开需要流量，页面别太长。4、设计规格为宽620像素，高最大为960像素，格式为JPG的图片。5、可选：为手机店铺宝贝详情页增加一个音频，时长不超过30秒，大小不超过200K，格式为MP3，内容可围绕产品卖点和特色展开。6、整体要美观大方，色彩清晰，符合手机用户的购物心理。任任务指派人指派人陈明明发出日期出日期10.8完成日期/时间10.20任任务名称名称茶花随手杯的宝贝详情页制作任任务要求要求有明确细文档（见表8-1下方）列明要求其他：任任务用途用途首页主题独立页官方承接页主图直通车图钻展图详情基础优化详情深度优化官方引流图主题广告图新品上新常规活动营销策划主题活动策划大型活动策划商品运营策划其他：自我自我检查确认签名组长检查确认签名验收人收人按要求完成是否确认签名学习任务情境总结基础训练拓展训练5 学习目标任务单情境导入学习目标1、知识目标知识目标2、技能目标技能目标掌握手机店铺宝贝详情页设计的设计流程能够独立完成手机店铺宝贝详情页设计了解手机店铺宝贝详情页设计的基础理论知识掌握手机店铺宝贝详情页设计的创作方法学习任务情境总结基础训练拓展训练6 学习目标任务单情境导入学习任务手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练7 学习目标任务单情境导入学习任务资讯学习流程计划设计决策手机店铺宝贝详情页设计规划任务一一、手机店铺宝贝详情页规格和要求1、宽度为480至620像素。2、高度小于等于960像素。3、格式为：JPG、GIF、PNG。4、手机详情总体大小：图片、文字和音频文件大小加起来应小于或等于1.5M。5、所有图片都应与本宝贝有关。6、文字要求：图片文字字体应大于或等于30号字，英文和阿拉伯数字大于或等于20号字。若需要添加的文字太多，尽量使用纯文本的方式编辑，这样的页面看起来会更清晰美观。7、音频要求：每个手机详情只能增加一个音频，时长不超过30秒，大小不超过200K，支持MP3格式。音频内容可以围绕产品卖点、品牌故事、产品特色、产品优惠等展开。学习任务情境总结基础训练拓展训练8 学习目标任务单情境导入学习任务资讯学习流程计划设计决策二、手机店铺宝贝详情页作用1、展示商品，让消费者从图片中直观了解商品。2、介绍商品，让消费者了解商品属性。3、增加入口，吸引消费者进入店铺或查看其他商品，提高成交率和二次消费。4、树立品牌形象，提高消费者的信任度和购买欲望。5、良好的宝贝描述页面会引导消费者完成自主购物，减少沟通成本。手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练9 学习目标任务单情境导入学习任务资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区1、视觉上较混乱手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练10 学习目标任务单情境导入学习任务资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区2、把好评页面截下放入详情页中手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练11 学习目标任务单情境导入学习任务资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区3、图片质量过低，降低了商品品质手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练12 学习目标任务单情境导入学习任务资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区4、结构混乱，主次不分手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练13 学习目标任务单情境导入学习任务资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区5、内容不全面，影响消费者判断和信心手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练14 学习目标任务单情境导入学习任务资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区6、广告描述过长，影响用户体验手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练15 学习目标任务单情境导入学习任务资讯学习流程计划设计决策三、手机店铺宝贝详情页设计误区7、设计过于视觉化，忽略商品介绍手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练16 学习目标任务单情境导入学习任务资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容1、同类产品推荐或活动推荐手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练17 学习目标任务单情境导入学习任务资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容2、宝贝详情手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练18 学习目标任务单情境导入学习任务资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容3、商品功能特点展示手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练19 学习目标任务单情境导入学习任务资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容4、模特图片展示手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练20 学习目标任务单情境导入学习任务资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容5、商品单品拍摄展示手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练21 学习目标任务单情境导入学习任务资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容6、细节展示手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练22 学习目标任务单情境导入学习任务资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容7、其他热销商品推荐手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练23 学习目标任务单情境导入学习任务资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容8、购物须知手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练24 学习目标任务单情境导入学习任务资讯学习流程计划设计决策四、手机店铺宝贝详情页的内容9、品牌故事手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练25 学习目标任务单情境导入学习任务资讯学习流程计划设计决策五、手机详情页常用结构从了解手机宝贝详情页常用的结构进行美化设计。宝贝详情页常用结构：1.核心卖点2.辅助卖点3.使用体验4.配件说明5.商品参数6.售后保障7.关联推荐手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练26 学习目标任务单情境导入学习任务资讯学习流程计划设计决策列出手机宝贝详情页设计内容撰写手机顾客购买需求列出PC端宝贝详情页模块筛选出手机店铺宝贝详情页模块通过对任务的分析及手机店铺宝贝详情页设计的学习，手机店铺宝贝详情页文案撰写计划如下：确定手机宝贝详情页的排版手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练27 学习目标任务单情境导入学习任务资讯学习流程计划设计决策一、撰写手机顾客购买需求我们首先要了解PC端和手机端顾客在购物时着重内容的不同，才能更好地筛选出手机宝贝详情页的内容。PC端和手机端顾客的不同处：1、顾客浏览方式不同。手机店铺只要有手机或其他移动端都可于不同时间浏览，而PC端店铺需要用户在电脑前进行浏览，手机端顾客比PC端顾客更多元化。2、转化方式不同。PC端顾客购物多数是通过多次询问才下单，而手机端更多的是静默转化。这样就要求手机端宝贝要注重细节、大图、模特展示的突出，才能更好地吸引顾客的眼球。3、显示屏幕大小不同。手机端屏幕较小，要求宝贝详情页大图展示，并突出卖点，字体显眼，大小适中。4、浏览费用不同。顾客使用手机端购物时，大多数使用移动网络，这样就会产生流量费用，要求页面不可太长。二、筛选手机店铺宝贝详情页模块列出PC端店铺宝贝详情页模块，根据需要筛选出手机店铺宝贝详情页的设计内容，然后收集素材，对应模块图片和文案。手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练28 学习目标任务单情境导入学习任务资讯学习流程计划设计决策三、确定手机店铺宝贝详情页排版根据对手机店铺宝贝详情页模块的筛选，列出了手机店铺宝贝详情页的设计内容，结合手机顾客的需求，确定手机宝贝详情页的排版要求。手机宝贝详情页排版要求：1、手机屏幕小，利用大图展示宝贝，字体清晰，大小适中。2、页面不能太长，以免影响打开速度和增加流量费用。3、宝贝要注重细节、模特展示的突出，吸引顾客的购买欲。4、宝贝详情页模块可按上面第二点的列出顺序。手机店铺宝贝详情页设计规划任务一学习任务情境总结基础训练拓展训练29 学习目标任务单情境导入学习任务手机店铺宝贝详情页实施任务二学习任务情境总结基础训练拓展训练30 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二一、手机店铺宝贝详情页的设计技巧1、恰当的页面长度。特别是商品展示图片之前的广告描述不得过多，影响商品本身的关注度，也会影响页面的打开速度。2、商品照片应选择品质高的图片，使用统一纯净的背景，清晰明亮。每个商品都有大小和角度不同的配图，这样使消费者能够从各个角度连贯的浏览商品，从而产生全面的商品印象。学习任务情境总结基础训练拓展训练31 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二一、手机店铺宝贝详情页的设计技巧3、控制图片大小和质量。图片会根据色彩的变化产生容量大小的变化，由此会影响整体页面使用。4、从消费者角度出发，根据不同行业商品类别，将商品属性详细展现出来。较多的内容可考虑表格或图文并茂方式。学习任务情境总结基础训练拓展训练32 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二一、手机店铺宝贝详情页的设计技巧5、根据消费者需求，合理布局版块。我们不能忘记消费者登陆购物网站的目的，如何在第一时间展示商品信息，吸引消费者购物非常重要。正确的布局应该先少部分的同类产品推荐，活动推荐，然后展示商品的基本属性，接着是模特图片展示、商品单品拍摄展示、细节展示、然后是其他热销商品推荐、实体店展示、品牌故事、购物须知、其他活动信息入口等次要内容。学习任务情境总结基础训练拓展训练33 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传1.进入手机详情编辑页面。（1）通过“宝贝管理”进入页面。学习任务情境总结基础训练拓展训练34 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传1.进入手机详情编辑页面。（2）通过“店铺管理”进入页面。学习任务情境总结基础训练拓展训练35 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传1.进入手机详情编辑页面。（3）通过“手机端千牛”。进入页面。学习任务情境总结基础训练拓展训练36 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传2.编辑手机详情页面（1）模板编辑。1）进入模板编辑页面学习任务情境总结基础训练拓展训练37 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传2.编辑手机详情页面（1）模板编辑。2）选择模板学习任务情境总结基础训练拓展训练38 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传2.编辑手机详情页面（1）模板编辑。3）修改模板学习任务情境总结基础训练拓展训练39 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传2.编辑手机详情页面（2）文本编辑。1）进入文本编辑页面学习任务情境总结基础训练拓展训练40 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传2.编辑手机详情页面（2）文本编辑。2）修改和添加详情图片学习任务情境总结基础训练拓展训练41 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传3.上传手机详情页学习任务情境总结基础训练拓展训练42 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二二、页面上传4.预览手机宝贝详情页学习任务情境总结基础训练拓展训练43 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二打开手机宝贝详情页编辑页面导入电脑端宝贝详情根据手机详情规格修改详情添加和编辑图文详情确定好手机宝贝详情页设计内容后，列出宝贝详情上传到手机的过程图：发布宝贝详情页学习任务情境总结基础训练拓展训练44 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二通过手机店铺宝贝详情页的规划设计，我们大致了解了设计的流程。因顾客的浏览情况不同，手机端详情的结构不能与PC端的一样，而且手机端详情图片要求和PC端也不一样。不同的手机详情页的上传方法可制作出不同的风格的详情，什么上传方法才更适合自己店铺的装修呢？以下列出不同上传方法的优缺点，在编辑详情页时选择更适合自己店铺的实施规划。手机详情页的模板编辑和文本编辑的优缺点：编辑方法方法优点点缺点缺点模板模板编辑减少店铺装修工作量；新建模板后，其他宝贝也可套用该内容宝贝图片需要根据模板里的要求进行修改，局限性大文本文本编辑导入PC端详情一键上传，方便快捷一般PC端详情图片过长，影响手机端页面的打开速度新添加详情页灵活性大；也可通过修改PC端详情图片进行上传工作量大根据上图的分析，设计手机详情时，若宝贝已在PC端中发布，可对PC端详情页的图片进行适当的修改；若新发布的宝贝，为了减少装修工作量，可使用模板编辑的方法。学习任务情境总结基础训练拓展训练45 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二1、打开手机宝贝详情页编辑页面首先进入卖家中心，在左侧栏目的宝贝管理里面选择“发布宝贝”或“出售中的宝贝”都可找到要发布手机详情页的宝贝。2、进入手机端编辑商品描述中分电脑端和手机端，点击进入手机端编辑。学习任务情境总结基础训练拓展训练46 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二3、编辑PC端宝贝详情页模块使用图片编辑软件（Photoshop）对PC端已制作完成的宝贝详情页进行筛选并修改，保留的模块有：产品特点和功能（可拆分成两张图片）、产品参数、产品实拍、产品细节、产品品质和包装展示。学习任务情境总结基础训练拓展训练47 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二裁剪和修改图片的大小，放置在一个文件夹中，并上传到“图片空间”中。如图所示：学习任务情境总结基础训练拓展训练48 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二4、上传详情图片学习任务情境总结基础训练拓展训练49 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二5、发布手机详情页确定宝贝详情页的内容后，把页面拉到底部，点击“确认”，成功发布了手机宝贝详情页。学习任务情境总结基础训练拓展训练50 学习目标任务单情境导入学习任务资讯学习流程计划设计决策任务实施手机店铺宝贝详情页实施任务二6、预览效果学习任务情境总结基础训练拓展训练51 学习目标任务单情境导入情境总结手机宝贝详情页制作要点就是不直接使用PC端宝贝详情页，去除多余内容，精简页面，减少手机顾客的流量费用。要做好手机宝贝详情页，就要清楚了解其制作要点和要注意的方面。一、制作要点：1.详情页的前面几部分的内容相当重要，展示商品卖家、抓住顾客眼球。2.抓住顾客的第一印象。3.产品的卖点、优势、利益必须要有。4.产品整体图讲求少而精，可利用模特图、全景图展示。5.选出精品产品实拍图，展示更多宝贝细节。二、注意的方面如果说流量是店铺根本的话，那么转化率就是催化剂，一个好的详情页能够提高转化率，提升买家的粘性。1.不乱用展示方式。能用表格就不用文字，能用图片就不用表格。2.产品醒目。大图展示产品，排版美观合理，不堆砌卖点和图片。3.文字简练清晰。字体要大一点，适合手机阅读。4.详情六屏以内。页面不能太长，不影响打开的速度。学习任务情境总结基础训练拓展训练52 学习目标任务单情境导入基础训练实训目的 了解手机详情页的设计方法及步骤，掌握如何为自己手机店铺设计一张宝贝详情页。实训准备（1）组队：以小组为单位，3-5人一组（至少有一位同学有自己的店铺），并选出一名组长，分配好组员的工作。（2）素材：商品图片若干实训任务 参考PC端宝贝详情页面，并从手机详情页的背景、配色、字体、版面布局等方面入手为自己手机店铺商品设计一张宝贝详情页，自定商品，设计规格为宽为620像素，高最大为960像素。实实训训手机手机店铺宝贝详情页设计店铺宝贝详情页设计学习任务情境总结基础训练拓展训练53 学习目标任务单情境导入基础训练实训步骤（1）撰写宝贝顾客购买需求（2）筛选PC端宝贝详情页模块（3）确定手机宝贝详情页信息（4）使用图片编辑软件（Photoshop）修改PC端宝贝详情图（5）排版规划（6）在手机店铺上传宝贝详情页（7）浏览宝贝详情效果学习任务情境总结基础训练拓展训练54 学习目标任务单情境导入基础训练任务实施1）宝贝顾客购买需求：2）列出和筛选PC端宝贝详情页模块：序号序号PC端宝端宝贝详情情页模模块名称名称在手机端宝在手机端宝贝详情情页模模块中是否保留中是否保留123456789103）确定手机宝贝详情页信息：序号序号手机端宝手机端宝贝详情情页模模块内容内容说明明12345678910学习任务情境总结基础训练拓展训练55 学习目标任务单情境导入基础训练任务实施4）修改PC端宝贝详情图5）排版规划序号序号排版排版项目目排版要求排版要求说明明1页面长度2图片质量和大小3重点展示内容4模块顺序6）上传宝贝详情页7）浏览宝贝详情效果学习任务情境总结基础训练拓展训练56 学习目标任务单情境导入基础训练过程评价评价指价指标等等级评价价说明明小小组评分分教教师评分分自主学自主学习能力能力优秀能够拓展相关知识，并通过新颖独特的形式加以展示良好以课本为依据，能够对设计的知识进行总结合格掌握基础知识点沟通合作能力沟通合作能力优秀具有较强的自学能力，能够主动提出问题，思考问题良好积极参与学习活动合格能够独立完成自己的工作任务分析分析问题能力能力优秀能够主动提出问题并寻找解决问题的方法良好思路清晰，表达准确合格思维不够活跃，但能解决基本问题学习任务情境总结基础训练拓展训练57 学习目标任务单情境导入基础训练作品评价评价指价指标等等级评价价说明明小小组评分分教教师评分分手机手机详情情页文文案撰写案撰写优秀简明扼要说明最重点要素，令人产生购买欲望良好能抓住商品卖点，吸引买家眼球合格只阐明商品属性版面版面设计优秀主题突出醒目，有突出重点的主题位置和空间，空间布局新颖，能够吸引受众的注意力良好图文设计创新，有视觉冲击力合格版面布局合理色彩色彩应用用优秀色彩应用符合主题的视觉识别要求良好色彩和谐，有视觉冲击类合格色彩基本能被受众接受制作技制作技术优秀文件尺寸符合店铺需要，图像制作精美，在制作过程中对软件善于加以利用良好图像制作精美，软件操作准确熟练合格图像制作基本能满足用户的需求详情情页设计创意意优秀构思巧妙，能激发想象力良好使用象征手法含蓄表达信息合格运用直观的方式传达信息学习任务情境总结基础训练拓展训练58 学习目标任务单情境导入拓展训练通过对本情境的学习，请你为自己的店铺的商品设计手机详情页，主题、尺寸根据自己店铺需要自拟。