《网店视觉营销与制作项目6提升手机端淘宝店铺装修的视觉效果电子课件中职专用.pptx》由会员分享，可在线阅读，更多相关《网店视觉营销与制作项目6提升手机端淘宝店铺装修的视觉效果电子课件中职专用.pptx（88页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网店视觉营销与制作项目6 提升手机端淘宝店铺装修的视觉效果电子课件 高教版 中职专用 项目6项目6 提升手机端淘宝店铺装修视觉效果网店视觉营销网店视觉营销设计与制作设计与制作重庆大学出版社重庆大学出版社3 项目综述 为了最终促进网店销售和图片准确传达信息的目的，在视觉营销设计中要注重其审美性，如何应用好视觉构成元素，做好视觉传达设计，让消费者能感受到店铺的吸引力和感染力，是视觉营销设计的关键。合理的运用视觉构成元素，能直接影响到图片的点击率，最终能引导消费者成功购买并认知产品和品牌。从设计的角度来看，视觉构成元素主要包括色彩、文字、构图。4任务1 认识手机淘宝店铺装修 乐乐包袋皮具公司的美工团
2、队前期已经完成PC淘宝店铺的装修。然而PC端页面跟手机端页面有很大的区别，手机端能展现的面积不大，在装修店铺的时候，需要小可所在的美工团队挑重点内容来做。如果放过多内容或者图片，消费者在没有Wifi的情况下利用手机端浏览页面时，会影响页面打开的速度。速度过慢客户体验度会受到影响，甚至可能导致客户流失。所以手机淘宝店铺装修必须要做得简洁而且要直击重点。情景设计情景设计5任务分解任务分解 在前期的工作中，美工团队已经对PC端店铺进行了装修。风格定位、配色方案已经相对完善，现在开始着手对手机端店铺进行装修。主要任务有：认识手机端与电脑端店铺装修的区别;了解手机淘宝店铺装修的要点。任务1认识手机淘宝店
3、铺装修任务1 认识手机淘宝店铺装修活动1 活动1 认识手机端与电脑端店铺装修的区别活动2 了解手机淘宝店铺装修的要点。内容导航7手机端的淘宝店铺与PC端有着较大的不同，美工小可需要掌握手机端店铺装修特点，学习如何进入手机端店铺装修页面，了解版面信息及手机店铺装修的设计原则，才能更好的胜任美工工作。活动背景活动背景活动活动目标目标认识手机店铺基础版模块，以及如何切换智能版。活动1 认识手机淘宝店铺装修8 一、手机端店铺特点 1.可以随时随地浏览店铺，不受时间、空间限制。2.预览更方便、快捷；增强了买家和卖家的互动粘性，促进快速消费。二、手机店铺装修的设计趋势（1）信息要精简。手机店铺呈现的信息受
4、到载体限制,消费者使用的手机屏幕大小有限，信息量多，会导致消费者无法读取全部信息。（2）风格要统一。手机端店铺装修时要符合品牌特性；店铺的风格定位、色彩搭配、元素设计等尽量保持一致，避免杂乱无章，做到风格统一化。知识链接知识链接活动1 认识手机淘宝店铺装修9（3）以图片为主。因受手机屏幕的影响，大部分消费者会先看图，被图片吸引后，才愿意了解页面中的其他文字信息。因此，设计时尽量控制文字篇幅，多以图片为主进行展示。（4）分类结构要清晰。模块划分做到少而精，一目了然。（5）把握色彩要素。手机端页面设计进行色彩搭配时，尽量选用色相饱和度高的鲜亮色系，少用深色系，否则会使画面清晰感下降。如风格定位为深
5、色系时，要注意控制明度的变化。手机端淘宝店铺和PC端淘宝店铺有着很大的不同，操作的过程中，不能完全把PC端的店铺照搬到手机端上，需要了解手机端的操作特点，根据特点对手机端淘宝店铺精心设计，从而更好地发挥视觉营销的作用。知识链接知识链接活动1 认识手机淘宝店铺装修10设计步骤参考：（1）手机端店铺装修入口。打开淘宝网【卖家中心】【店铺管理】【手机淘宝店铺】【立即装修】。（也可点击店铺装修进行操作）如图6.1.1、6.1.2效果所示。进入后点击【手机端装修】鼠标放首页里，点击【装修页面】。如图6.1.3 效果所示。活动实施活动实施活动1 认识手机淘宝店铺装修11设计步骤参考：（2）基础版装修模块分
6、为宝贝类、营销互动类、图文类等。装修的时候只要把自己选择的相应模块拖动到右边的界面即可。每个模块放进去的数量有限，所以要有针对性的选择。红色区域为模块分布，页面中间为手机端店铺首页基本信息，可进行展开操作。红色区域可进行宝贝信息设置、模块的添加/删除、调整上下顺序等操作。如图6.1.4效果所示。活动实施活动实施活动1 认识手机淘宝店铺装修12设计步骤参考：（3）点击需要设置的区域即可编辑宝贝信息。红色区域可进行模块的添加/删除、调整上下顺序。红色区域可进行相关编辑等操作。如图6.1.5效果所示。活动实施活动实施活动1 认识手机淘宝店铺装修13设计步骤参考：（3）点击需要设置的区域即可编辑宝贝信
7、息。红色区域可进行模块的添加/删除、调整上下顺序。红色区域可进行相关编辑等操作。如图6.1.5效果所示。活动实施活动实施活动1 认识手机淘宝店铺装修14设计步骤参考：（4）智能版页面信息。点击页面左上角进行切换。钻级以下卖家用户可免费升级智能版。智能版可PC端和手机端两端装修整合；有一键装修首页、多套SDK装修模板等升级功能。如图6.1.6、6.1.7效果所示。活动实施活动实施活动1 认识手机淘宝店铺装修15 尝试给手机端页面进行风格定位，结合所学PC端首页装修知识，设计手机店铺页面，色彩搭配合理，风格统一。要求：1、宽度为750px，高度不限。2、设计时模块区域的内容用色块代替即可,设计效果
8、可参考“6.1.8效果图.jpg”。活动拓展活动拓展活动1 认识手机淘宝店铺装修16内容导航任务1 认识手机淘宝店铺装修活动1 活动1 认识手机端与电脑端店铺装修的区别活动2 了解手机淘宝店铺装修的要点。17 实习生小可已经初步了解手机端店铺装修的基本操作页面。现在需要她结合之前累积的工作经验，深入学习手机端店铺装修的要点，为接下来的手机端店铺装修工作打下良好基础。活动背景活动背景活动活动目标目标了解手机店铺结构，学会自定义模块的操作流程。活动2 了解手机淘宝店铺装修的要点18 手机的屏幕较小，消费者的浏览习惯大都是从上至下。手机端店铺装修时，要合理运用各种模块组合。如左文右图、焦点图、多图等
9、模块，从而增加手机端店铺的趣味性。手机店铺的首页由店招、自定义模块专区和宝贝推荐模板等部分构成。自定义模块区包括优惠券、活动信息、爆款推荐等内容，通常展示在店铺页面前端。如图 6.1.9效果所示。知识链接知识链接活动2 了解手机淘宝店铺装修的要点19 为了吸引消费者；宝贝推荐模块在对宝贝进行排列展示时，可参照以下顺序：（1）爆款（2）新品展示（3）季节性商品陈列（4）特供款或者特价产品展示从视觉营销的角度考虑，可以建立不同的会场专区，在首页尽可能多地曝光店铺商品。知识链接知识链接活动2 了解手机淘宝店铺装修的要点20设计步骤参考：自定义模块。可以在该区域上传设计好的图片、添加链接等。点击【图文
10、类】【自定义模块】拖至右页面所要布置的区域即可。文字下方的数字表示该模块可放置的数量，自定义模块为10个。如图6.1.10效果所示。活动实施活动实施活动2 了解手机淘宝店铺装修的要点21设计步骤参考：（2）编辑页面。点击【编辑板式】进入，“隐藏该模块下方的白色间隙”若勾选时，在页面区域该模块与下方模块为无间隙分布，根据店铺风格选择即可。如图6.1.11效果所示。活动实施活动实施活动2 了解手机淘宝店铺装修的要点22设计步骤参考：(3)添加图片。在弹出的编辑框内，可用鼠标拖动和调整图片区域（蓝色部分），需要添加更多图片区域，只需要按住鼠标左键，在单元格上划出所需区域面积即可。确定位置后，点击【添
11、加图片】可上传图片和宝贝链接。备注：小方块单独像素为80px*80px，拖拽后可在右侧看到该区域的尺寸。如图6.1.12效果所示。活动实施活动实施活动2了解手机淘宝店铺装修的要点23通过本次活动，小可掌握了手机淘宝店铺装修的要点，包括自定义模块专区的展示要点、宝贝推荐模块的展示要点和自定义模块的操作流程。活动评价活动评价活动2 了解手机淘宝店铺装修的要点24 为店铺的大促活动设计一张爆款海报图，用于手机端页面展示。需要考虑到手机载体的浏览特点，海报图可竖屏化。利用自定义模块进行图片上传，并添加宝贝链接。活动拓展活动拓展活动2 了解手机淘宝店铺装修的要点25任务2 装修手机端淘宝店铺首页 美工团
12、队确定了PC端的店铺装修风格、配色方案之后，手机端店铺整体页面也要有一定的设计感和艺术感。我们要为乐乐包袋皮具有限公司进行手机淘宝店铺的装修。公司要求结合该店铺提供给我们的箱包素材图片，进行手机端店铺装修，内容包含：设计店招，设计焦点图、设计优惠券、分类图等。情景设计情景设计26任务分解任务分解 在前期的工作中，美工团队掌握手机端店铺的装修界面、模块分区、以及如何上传设计图等操作流程。接下来要开始着手对手机端店铺首页模块进行视觉营销设计。本任务主要有：设计店招;设计焦点图；设计优惠券；设计分类图。任务2 装修手机端淘宝店铺首页27内容导航任务2 装修手机端淘宝店铺首页 活动1 设计店招 活动2
13、 设计焦点图 活动3 设计优惠券 活动4 设计分类图28 网店美工小可现在已经掌握了手机端页面的装修流程。为了手机端店铺页面更好的呈现，为了吸引消费者的眼球，小可需要对店招进行优化设计。那么手机端的店招设计尺寸是多少呢？在设计时需要注意哪些问题？接下来我们和小可一起来学习吧。活动背景活动背景活动活动目标目标了解手机端店招的设计内容，掌握店招的构图和设计方法。活动1 设计店招29手机端店招与PC端不同，手机端店招背景图片呈渐变虚化显示，设计时要考虑整体效果。如图6.2.1效果所示。知识链接知识链接活动1 设计店招30手机端店招的设计尺寸以及要求：（1）手机端店招尺寸为750px580px，文件大
14、小400k左右；支持格式jpg、png。（2）店招的设计风格一般与店铺近期活动有关，可与PC端的活动海报相呼应。（3）店招所用文字、色彩、图片素材等元素要简洁明了突出主题，避免杂乱无章。知识链接知识链接活动1 设计店招31设计步骤参考：（1）店招设计风格定位。结合店铺PC端促销活动海报，选定相关配色；以及文案信息。（2）确定店招的构图方法。受手机端屏幕显示影响，店招实际展示区域偏上，在整体排版中，画面下方可留白；店招的设计可采用左右结构的构图方法。左边放上处理好的商品图片，商品图打开“项目6”“6.2.1素材”图片，右边编排摆放好文字。与PC端不同，手机端店招左侧已有店铺名称，可不必再做文字重
15、复。如图6.2.2效果所示。活动实施活动实施活动1 设计店招32设计步骤参考：（3）设计文字背景的色块效果。利用形状工具绘制色块，并根据配色方案，为背景色块填色，颜色选择与背景色彩色相对比相差150度左右强烈对比色的玫红色；并给色块添加阴影等效果。利用剪切蒙版等工具在色块之上创建图形，增加画面动感效果。为方便浏览，店招图下面空白部分暂不做截图展示。如图6.2.3效果所示。活动实施活动实施活动1 设计店招33设计步骤参考：（4）编排和文字设计。文字信息简单突出主题即可。根据配色方案，为标题文字填色，文字做描边、阴影，增加文字的视觉效果；“年终大促”选择商品颜色中的黄色，突出重要信息的同时不失色彩
16、风格的统一。如图6.2.4效果所示。活动实施活动实施 活动1 设计店招 34设计步骤参考：（5）添加点缀元素增加画面感。手机端店招设计完成。如图6.2.5效果所示。活动实施活动实施活动1 设计店招35活动评价活动评价活动1 设计店招 通过本次活动，小可掌握了店招的设计，包括如何进行合理的构图布局，选用商品图片或者文字，文字编排与设计能有效吸引注意力，整体颜色搭配效果好。36 尝试给该店铺设计新春活动的手机端店招，要求色彩搭配合理，画面风格统一。活动拓展活动拓展活动1 设计店招37内容导航任务2 装修手机端淘宝店铺首页 活动1 设计店招 活动2 设计焦点图 活动3 设计优惠券 活动4 设计分类图
17、38 手机店铺的店招已经设计好，接下来要小可要根据店铺活动设计焦点图。什么是焦点图？焦点图在设计的过程当中，需要注意哪些问题呢？让我们和小可一起学习一下吧。活动背景活动背景活动活动目标目标了解手机端店铺焦点图的构图和设计方法。活动2 设计焦点图39焦点图就是手机端店铺banner图。焦点图的设计是否美观合理，不仅直接影响了店铺的风格，而且还会影响店铺的视觉营销作用。如图6.2.8效果所示。知识链接知识链接活动2 设计焦点图40焦点图设计时要注意以下几点：背景要衬托主题、配色合理，切勿太过复杂。构图要突出卖点，商品主体建议占图片50%以上，整体呈现饱满效果，避免留白过多。文字应占据核心位置，字体
18、不要太小，字体数量及颜色切勿太多，容易导致画面感杂乱。知识链接知识链接活动2 设计焦点图41焦点图文件尺寸及要求:建议尺寸宽度750px，高度200px 950px之间。可以根据广告内容自定义；若是轮播图，要求同一组内图片尺寸相同。支持格式：jpg、png。与PC端横屏浏览模式相反，手机端浏览模式为竖屏，在设计焦点图时要充分考虑显示状态，避免图片高度过小，影响展示效果。知识链接知识链接活动2 设计焦点图42设计步骤参考：(1）确定焦点图构图法。尺寸为750px950px的竖式构图；打开“项目6”“6.2.2素材”图片，文案放置画面上方，文字内容突出主题活动即可,如图6.2.9效果所示。活动实施
19、活动实施活动2 设计焦点图 43设计步骤参考：（2）确定配色方案。背景选择浅色系，突出夏季清爽的视觉效果。结合商品本身的颜色利用形状工具绘制辅助色块，增加画面协调感。用钢笔工具为背景添加点缀元素，防止画面感单一；突出色选择商品的互补色蓝色；符合夏季的视觉感受。如图6.2.10效果所示。活动实施活动实施活动2 设计焦点图44设计步骤参考：（3）文字排版。对主副标题的字体和大小进行调整，为突出“折扣”信息；在下方绘制图形，添加浮雕效果，使该文字部分的画面更立体。如下6.2.11效果所示。活动实施活动实施 活动2 设计焦点图 45活动评价活动评价活动2 设计焦点图 通过本次活动，小可掌握了焦点图的设
20、计要点，包括构图布局合理、文字编排与设计有吸引力、商品美化与处理效果好、细节元素的设计有创新、整体搭配效果好。46 为店铺的夏季大促活动设计两张焦点图，打开商品素材图“项目6”“拉杆箱素材”中选择。用于手机端首页轮播展示。根据店铺活动自定义尺寸；促销活动文案清晰，主题突出。活动拓展活动拓展活动2 设计焦点图47内容导航任务2 装修手机端淘宝店铺首页 活动1 设计店招 活动2 设计焦点图 活动3 设计优惠券 活动4 设计分类图48 为了更好的回馈新老客户，以及刺激消费者的购买欲望，店铺决定在促销活动期间发放优惠券。为搭配店铺活动风格，需要小可为店铺活动单独设计优惠券。在设计和操作时需要注意哪些问
21、题呢？和小可一起来学习一下吧。活动背景活动背景活动活动目标目标了解手机优惠券的构图和设计方法，以及优惠券的上传方式。活动3设计优惠券49店铺优惠券，有利于促进客户粘性，以及增加店铺的交易量。优惠券需要在【卖家中心】【软件服务】【定制服务】【服务市场】订购使用。知识链接知识链接活动3设计优惠券50优惠券设计时，要做到以下几点：信息简洁明了，文字颜色与背景色要有所区分。切勿将多个优惠信息放置一张图内，会使画面感杂乱，且重点无法突出。占屏空间要合理，优惠券图片高度尺寸不易过大。【美颜切图】模块建议图片宽度750px，高度335px-2500px。支持格式；jpg、png。优惠券可根据信息设定高度尺寸
22、。知识链接知识链接活动3设计优惠券51设计步骤参考：（1）确定优惠券构图法。店铺发放了两张优惠券，尺寸为750px340px的横版构图；借助参考线，左右各放置一张，文字内容突出主题活动即可。2）确定配色方案。背景选择暗红色，营造喜庆红包的视觉效果；边缘选用的互补色蓝色，增加画面冲击力。防止画面颜色过多，影响视觉效果；文案底色选用白色。如图6.2.13效果所示。活动3设计优惠券活动实施活动实施52设计步骤参考：（3）文字排版。对字体的大小和粗细进行调整，突出“优惠面值”。并添加相应宣传文案，使文字部分更醒目。如图6.2.14效果所示。知识链接知识链接活动3设计优惠券53设计步骤参考：（4）调整文
23、字排列方式（点击菜单：图层对齐左边），对文字内容进行分组，如图2.2.55所示。活动实施活动实施活动3设计优惠券54设计步骤参考：（5）将设计好的优惠券进行上传。把店铺装修升级成智能版后，需要借助智能版【图文类】【美颜切图】模块进行操作。如图6.2.16效果所示。将设计好优惠券上传后，点击【添加热区】。如图6.2.17效果所示。活动实施活动实施活动3设计优惠券 55设计步骤参考：（6）为优惠券不同分区添加链接。将设计好优惠券上传后，点击【添加热区】。拖拽出所需区域的相应大小。要添加新热区，可点击垃圾桶旁边的复制图标，即可复制出等大的热区范围。或者点击【添加热区】，点击红色区域均可添加连接，如图
24、6.2.18效果所示。活动实施活动实施活动3设计优惠券 56设计步骤参考：（7）完成优惠券上传。进入链接页面后，选择【优惠券】。下方会出现订制好的优惠券信息，设计优惠券时要根据店铺优惠券数量的实际情况而定。勾选优惠信息，点击【确定】。如图6.2.19效果所示。活动实施活动实施活动3设计优惠券 57活动评价活动评价活动3设计优惠券通过本活动的学习，小可掌握了优惠券的设计要点，包括构图布局合理，选用商品图片或者文字，文字编排与设计能有效吸引注意力，整体颜色搭配效果好。58 为店铺设计优惠券：5元无门槛优惠券；满199减10、满299减20、满799减100优惠券。要求主题突出；构图合理，配色运用得
25、当。活动拓展活动拓展活动3设计优惠券59内容导航任务2 装修手机端淘宝店铺首页 活动1 设计店招 活动2 设计焦点图 活动3 设计优惠券 活动4 设计分类图60活动4设计分类图分类图在手机店铺首页十分重要，分类图可以快速引导消费者者浏览更多的商品，增加转化率。那么分类图在设计的时候，需要注意哪些问题呢？和小可一起来学习一下吧。活动背景活动背景活动活动目标目标了解手机端分类图的构图和设计方法。61 分类图有利于客户更快速的浏览商品。分类图布局要合理，文字要统一；可以图文并茂，也可以用文字表达，突出宝贝分类即可。如图6.2.20、图6.2.20效果所示。知识链接知识链接活动4设计分类图62手机端分
26、类图的设计：1.图文分类做到分类清晰；2.画面整洁、图文分类的视觉效果好。也要避免图片切勿太多，造成画面杂乱。3.用banner结合图文展示分类。如图6.2.22效果所示。知识链接知识链接活动4设计分类图63设计步骤参考：（1）确定分类图的构图方法。图片尺寸为750px400px。根据店铺现有分类，借助辅助线创建四个分区。如图6.2.23效果所示。活动实施活动实施活动4设计分类图64设计步骤参考：（2）分类图的风格定位。打开“项目6”“分类图素材”图片，结合商品素材，选定相关配色。由于画面中颜色较多，在图片上做色彩叠加；从而达到色调统一的视觉效果。如图6.2.24效果所示。活动实施活动实施活动
27、4设计分类图65设计步骤参考：（3）文字排版。对字体的大小和粗细进行调整，并穿插字母使画面饱满。如图6.2.25效果所示。活动实施活动实施活动4设计分类图66设计步骤参考：（4）完善细节部分。利用形状工具绘制点缀元素，通过互补色增加画面的动感，并完成最终效果。如图6.2.26效果所示。活动实施活动实施活动4设计分类图67设计步骤参考：（5）上传分类图。分类图上传方法和优惠券相同；在上传分类图之前，需要先把店铺商品进行分类。在上传分类图时就可以选择相应的宝贝分类，并添加连接。如图6.2.27效果所示。活动实施活动实施活动4设计分类图68通过本活动的学习，小可掌握了分类图的设计要点，包括构图布局合
28、理，选用商品图片或者文字，文字编排与设计能有效吸引注意力，整体颜色搭配效果好活动评价活动评价活动4设计分类图69 为手机店铺设计分类图：根据店铺活动情况自定义尺寸；要求主题突出，构图合理、配色运用得当。活动拓展活动拓展活动4设计分类图70任务3 设计手机端商品详情页美工团队前期已经设计了PC端的商品详情页，手机端详情页的制作是增加宝贝和店铺加权点之一。随着手机端店铺整体页面装修逐步完善，我们需要了解PC端的详情页如何导入手机端，以及如何设计手机端详情页。情景设计情景设计71任务分解任务分解在前面的学习任务中，我们已经掌握了详情页的设计流程。接下来除了将PC端的详情页导入手机端之外；我们还要开始
29、着手对手机端商品详情页进行设计。本任务主要为：导入电脑端详情;生成详情模板任务3 设计手机端商品详情页72内容导航任务3 设计手机端商品详情页 活动1 导入电脑端详情 活动2 生成详情模板73活动1 导入电脑端详情 实习生小可在前面的学习中已经掌握了商品详情页的设计方法；公司需要她将电脑端的详情页导入到手机端，从而带给客户更好的购买体验。接下来一起和小可学习如何将电脑端详情页导入手机端吧。活动背景活动背景活动活动目标目标了解电脑端详情页导入手机端的操作方法74电脑端详情导入手机端之前需要注意，该商品的详情页中的图文信息是否适合手机端的页面展示。比如：（1）布局的合理性，分类结构明确。（2）配色
30、的运用，手机端视觉受限，颜色尽量鲜亮，如PC端页面风格为深色系，在导入时则需要考虑，最终显示效果是否可以引起消费者的愉悦性。知识链接知识链接活动1 导入电脑端详情75设计步骤参考：1）进入详情装修页面。点击【卖家中心】【店铺管理】【手机淘宝店铺】【立即装修】；点击【情详装修】如图6.3.1效果所示。活动实施活动实施活动1 导入电脑端详情76设计步骤参考：（2）导入电脑端详情。点击要导入宝贝的【装修详情】；进入页面后点击【导入】【导入详情】【导入电脑端详情】。如图6.3.2、图6.3.3效果所示。活动实施活动实施活动1 导入电脑端详情77设计步骤参考：（3）完成导入。根据情况进行选择，点击【确认
31、】。电脑端详情页就导入完成了。如下图6.3.4效果所示。活动实施活动实施活动1 导入电脑端详情78设计步骤参考：（4）PC端导入方法。除了在装修页面导入之外，PC端在上架商品的时，也可以直接导入手机端。如图6.3.5效果所示。活动实施活动实施活动1 导入电脑端详情79 通过本活动的学习，小可学会了导入电脑端详情页，能在手机端装修详情页面并导入。活动评价活动评价活动1 导入电脑端详情80尝试对店铺的其他商品详情页，进行详情装修导入页面的操作。活动拓展活动拓展活动1 导入电脑端详情 81内容导航任务3 设计手机端商品详情页 活动1 导入电脑端详情 活动2 生成详情模板82活动2 生成详情模板 为了
32、满足手机端的视觉需求，小可要把布局构图、背景风格等不适合直接导入手机端的商品详情页，重新进行手机端的详情生成。小可要如何操作呢？一起来学习一下吧。活动背景活动背景活动活动目标目标了解手机端详情页单屏的构图和设计理念，掌握手机端详情页的设计要素。83随着手机全屏时代的到来，屏幕的高度尺寸也产生了变化；受到屏幕限制的原因，可以考虑利用竖版构图展示商品信息。设计时可以将一张完整图显示在一屏的浏览界面上；详情页一屏的参考尺寸：iphone8 5.5寸，淘宝：750px1118px 天猫：790px1178px安卓机6.0寸全面屏，淘宝：750px1297px 天猫：790px1366px实际尺寸可结合
33、手机用户大数据分析；以及店铺商品特点等。知识链接知识链接活动2 生成详情模板84设计步骤参考：（1）手机端详情页单屏的基本构图法。手机浏览的连贯性不如PC端，所以商品详情页必须简单直接，尽量将商品卖点和展示重点放在前面；可以吸引消费者的注意力。打开“项目6”“6.3.7素材”图片，参考尺寸：750px1110px，参照效果图进行商品的摆放。如图6.3.6效果所示。活动实施活动实施活动2 生成详情模板85设计步骤参考：（2）优化图片和文字。手机端详情字体要适中，不易过小；文字配色可选用商品颜色，使画面感统一。画面越简洁，只描述重要的东西，往往转化率越高。要打消买家顾虑，解决买家最关心的问题，坚定买家购买决心。如图6.3.7效果所示。活动实施活动实施活动2 生成详情模板86 通过本活动的学习，小可掌握了手机端详情设计能力，了解了手机端详情页与PC端的不同之处，画面整体布局符合手机端浏览习惯，并对比PC端的图文，优化手机端图文。活动评价活动评价活动2 生成详情模板87请根据所提供素材，为手机端店铺设计详情页前三屏的内容，要做到抓住消费者目光，使其对商品产生兴趣，愿意继续浏览下去。活动拓展活动拓展活动2 生成详情模板88THANK YOU