电商设计（全彩慕课版）（下篇共上下2篇）

第6章商品详情页设计本章介绍：商品详情页设计是电商设计任务中的综合型工作任务，通过精心设计的商品详情页能够提升用户对商品的购买欲望。本章针对商品详情页的基本概念和设计模块等基础知识进行系统讲解，并针对流行风格与典型行业的商品详情页进行设计演练。通过本章的学习，读者可以对商品详情页的设计有一个系统的认识，并快速掌握商品详情页的设计规范和制作方法，成功制作出具有购买欲望的商品详情页。了解商品详情页的基本概念明确商品详情页的模块结构学习目标6.1商品详情页的基本概述商品详情页即店铺向消费者展示商品详细信息，令消费者产生消费的页面，电商详情页具有展现产品内容、达成产品转化的功能作用。由于消费者在虚拟网络中，只能通过详情页了解到商品，因此详情页的质量对商品的销售量有着决定性作用。6.2商品海报设计商品海报的基本概念商品海报的设计规则课堂案例-中秋月饼商品海报设计商品海报即详情页中的商品Banner，通常位于详情页中商品描述信息下方，类似于店铺首页的轮播海报，主要用于令详情页中的商品更加吸引消费者，更好地展示商品优势。优秀的商品海报会起到场景代入、体现真实的作用。6.2.1商品海报的基本概念商业海报效果图商品焦点图可以根据平台分为两类，一类以淘宝为代表，宽750像素的焦点图，另一类以京东和天猫为代表的，宽790像素的焦点图，两者高度不限，通常建议为950像素。在进行这两主标题字号建议在60-70像素，副标题字号建议在40-50像素，文字叙述字号建议在25-30像素。6.2.2商品海报的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果。6.2.3课堂案例-中秋月饼商品海报设计效果图6.3卖点提炼设计卖点提炼的基本概念卖点提炼的设计规则课堂案例-中秋月饼卖点提炼设计6.3.1卖点提炼的基本概念卖点提炼即商品特点和消费者痛点的提炼，通常位于商品焦点图下方或同商品焦点图组合，主要用于向消费者展示商品独特之处，令其产生购买欲望。卖点提炼的精准会起到展示产品卖点、挖掘用户需求的作用。卖点展示图卖点提炼中的文本简短且应具有说服力，建议使用30-40像素的黑体类型。图标醒目且应和卖点呼应。6.3.2卖点提炼的设计规则

使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具、“椭圆”工具绘制基本形状，使用“创建新的填充或调整图层”命令为图像校色。6.3.3

课堂案例-中秋月饼卖点提炼设计效果图6.4商品展示设计商品展示的基本概念商品展示的设计规则课堂案例-中秋月饼商品展示设计商品展示即展示商品的内容，通常位于卖点提炼下方，通常是3-5张图片组成，实现一屏一卖点，进一步起到展示产品优势、呈现产品功能的作用。6.4.1商品展示的基本概念商品展示

商品展示的设计要点可以参考商品焦点图的设计要点进行。需要注意的是，因为商品展示这一模块通常有3-5张图片，所以商品的角度和背景既要统一又要有角度等区别，以免给消费者带来视觉疲劳。6.4.2商品展示的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具、“椭圆”工具绘制基本形状，使用创建剪贴蒙版命令实现中秋月饼商品展示。6.4.3课堂案例-中秋月饼商品展示设计效果图6.5

细节展示设计细节展示的基本概念细节展示的设计规则课堂案例-中秋月饼细节展示设计

细节展示通常位于卖点提炼或商品展示下方，是可以让消费者深入了解商品的重要模块。下面对细节展示的设计知识内容进行详细地讲解。6.5细节展示设计

细节展示即商品的细节放大图，通常位于卖点提炼或商品展示下方，将商品细节进行最大限度的展示，可以使消费者更加信任商品。优秀的细节展示可以起到剖析商品特点、深入了解商品的作用。6.5.1细节展示的基本概念细节展示效果图细节展示在设计时不易太过复杂，整体应呈现简洁效果。如果商品带有背景，建议为浅色，可以保证细节图的展示。6.5.2细节展示的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具绘制基本形状，使用“创建新的填充或调整图层”命令为图像校色，使用创建剪贴蒙版命令实现中秋月饼细节展示。6.5.3课堂案例-中秋月饼细节展示设计效果图6.6商品信息设计商品信息的基本概念商品信息的设计规则课堂案例-中秋月饼商品信息设计商品信息即商品的真实数据，通常位于卖点提炼或细节展示下方。网店美工人员需要将商品的尺寸、颜色等内容充分展示给消费者，以起到全面介绍商品、引导消费者了解的作用。6.6.1商品信息的基本概念商品信息展示

商品信息在设计时需要将大量的数据归类整理，以图表的形式表现出来，令消费者可以直观的了解到商品信息。6.6.2商品信息的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具、“直线”工具绘制基本形状。6.6.3课堂案例-中秋月饼商品信息设计切图优化6.7其他模块设计其他模块的基本概念其他模块的设计规则课堂案例-中秋月饼其他模块设计需要网店美工人员重点设计的除了以上几个模块之外，还有包括质量保证、品牌实力和快递售后等其他模块。这些模块通常位于详情页底部，在最后时刻完成着促成购买的艰巨任务。下面对其他模块的设计知识内容进行详细地讲解。6.7其他模块设计

质量保证、品牌实力和快递售后等其他模块通常位于详情页底部，这些模块都在不同程度上为消费者购买商品打消疑虑、加强信心。质量保证即展示商品的相关证书，起到承诺产品质量、增强消费者信赖的作用。6.7.1其他模块的基本概念其他模块其他模块在设计时由于整个页面接近于尾声，消费者观看时多少会产生视觉疲惫感，因此在设计时一定要突出该模块的重点，以简洁醒目为主，不然容易让消费者产生不耐烦的负面情绪。6.7.2其他模块的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具绘制基本形状。6.7.3课堂案例-中秋月饼其他模块设计效果图学习使用绘图工具、文字工具制作国风耳机详情页。6.8课堂练习-国风耳机详情页设计效果图学习使用绘图工具、文字工具制作中式餐具详情页。6.9课后习题-中式餐具详情页设计效果图第7章PC端店铺首页设计本章介绍：PC端店铺首页设计是电商设计任务中的综合型工作任务，通过精心设计的PC端店铺首页能够向用户传达品牌感和信任感。本章针对PC端店铺首页的基本概念以及设计模块等基础知识进行系统讲解，并针对流行风格与典型行业的PC端店铺首页进行设计演练。通过本章的学习，读者可以对PC端店铺首页的设计有一个系统的认识，并快速掌握PC端店铺首页的设计规范和制作方法，成功塑造具有品牌影响力的PC端店铺首页。了解PC端店铺首页的基本概念明确PC端店铺首页的模块结构学习目标7.1首页的基本概述店铺首页是消费者进入店铺的第一张展示页面，具有展现品牌气质、承担流量分发的功能作用。视觉精美的首页，不但可以提升消费者对店铺的好感，还可以提高商品转换率，因此需要网店美工用心设计。PC端店铺首页的宽度为1920像素，高度不限，其设计可以根据商家不同需要和后台装修模块进行组合变化。首页的核心模块通常由店招导航、轮播海报、优惠券、分类导航、商品展示和底部信息构成。pc端首页7.2店招导航设计店招导航的基本概念店招导航的设计规则课堂案例-国产护肤品店招导航设计店招与导航位于店铺页面顶部，在PC端的任何页面都可以看到。店招即店铺的招牌，主要用于展示店铺品牌、活动内容和特价商品等内容。好的店招会起到品牌宣传，加深记忆的作用。导航则是对商品进行分类，用于帮助消费者定位到当前位置、完成页面之间的跳转并快速找到商品。店招导航效果图7.2.1店招导航的基本概念·店招：店招以淘宝为例可以分为常规店招和通栏店招两类，常规店招尺寸950×120像素；通栏店招包含店招、导航和背景，尺寸建议为1920×150像素。·导航栏：导航栏高度10-50像素，建议30像素；导航栏字体建议为黑体和宋体，字号黑体建议为14像素、16像素，宋体建议12像素、14像素；文字间距建议为20像素。7.2.2店招导航的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具绘制基本形状。7.2.3课堂案例-国产护肤品店招导航设计效果图7.3轮播海报设计轮播海报的基本概念轮播海报的设计规则课堂案例-国产护肤品轮播海报设计7.3.1轮播海报的基本概念轮播海报即多张海报循环播放，通常位于首页店招和导航栏下方，主要用于进行产品宣传和活动促销等内容。优秀的轮播海报会对每张海报的主题、构图和配色等因素进行综合考虑和设计。

左右布局轮播海报上下布局轮播海报轮播海报的设计尺寸可以依据4.1.2中的PC端全屏海报和PC端常规海报进行设计。其他设计规则可以依据4.2PC端海报的版面布局和4.3PC端海报的表现形式进行设计。7.3.2轮播海报的设计规则

使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具、“椭圆”工具、“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“创建剪贴蒙版”命令调整图片显示区域。7.3.3

课堂案例-国产护肤品轮播海报设计效果图7.4优惠券设计优惠券的基本概念优惠券的设计规则课堂案例-国产护肤品优惠券设计优惠券即减价优惠，通常位于首页轮播海报下方，是店铺常用的促销方式，也是吸引消费者进行二次消费的策略。优惠券可以起到提高购买欲望、刺激冲动消费的作用。横向优惠券7.4.1优惠券的基本概念纵向优惠券

优惠券的数额一定要突出醒目，而满减条件建议使用黑体小字，这样在刺激消费着消费的同时也可以保证商家自身的利润。7.4.2优惠券的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图标，使用“横排文字”工具添加文字，使用“矩形”工具、“椭圆”工具、“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果。7.4.3课堂案例-国产护肤品优惠券设计效果图7.5分类模块设计分类模块的基本概念分类模块的设计规则课堂案例-国产护肤品分类模块设计

分类模块即店铺商品的类别，通常位于首页轮播海报或优惠券下方，是用于引导消费者进行购买商品的重要模块。优秀的分类模块起到提升购买效率、加强用户体验的作用。7.5.1分类模块的基本概念分类模块展示效果图分类模块的设计需要符合店铺的整体装修风格。字体为黑体或粗宋，图标风格需要统一，图片如果是进行横向分类，宽度应该控制在950像素以内，纵向分类高度应该控制在150像素。另外图标、图片与文案应该相互呼应。7.5.2分类模块的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”命令调整图片显示区域。7.5.3课堂案例-国产护肤品分类模块设计效果图7.6商品展示设计商品展示的基本概念商品展示的设计规则课堂案例-国产护肤品商品展示设计商品展示即商品的展示区域，通常位于首页优惠券或分类模块下方，是用于向消费者展示爆款商品、新品商品和推荐商品等内容的模块。优秀的商品展示模块可以起到引导消费者购买、促进产品销售的作用。7.6.1商品展示的基本概念商品展示

展示标题的设计形式通常是图形形式、图片形式或文案形式，商品展示区域的商品需要选择店铺中美观且有代表性的商品，除此之外，还可以选择临近下架的商品，以此获得优先展示的机会。关联的素材和整体背景需要相互搭配，并且要符合店铺的风格。7.6.2商品展示的设计规则展示标题设计使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“多边形”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”命令调整图片显示区域。7.6.3课堂案例-国产护肤品商品展示设计效果图7.7底部信息设计底部信息的基本概念底部信息的设计规则课堂案例-国产护肤品底部信息设计

底部信息即其他信息展示，通常位于首页的最下方，用于放置店铺品牌故事、购物须知和店铺公告等信息，优秀的底部信息可以起到补充说明、挽留消费者的作用。7.7.1底部信息的基本概念底部信息展示页尾的主要功能是在为消费者提供方便的同时体现店铺的服务。店铺的页尾整体布局应简介明确、设计需使用简短的文字和具有代表性的图标来传递相关的信息。7.7.2底部信息的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”命令调整图片显示区域。7.7.3课堂案例-国产护肤品底部信息设计效果图学习使用绘图工具、文字工具制作国产数码产品店铺首页。7.8课堂练习-国产数码产品店铺首页设计效果图学习使用绘图工具、文字工具制作新中式家具店铺首页。7.9课后习题-新中式家具店铺首页设计效果图第8章手机端店铺首页设计本章介绍：随着移动互联网的发展及普及，消费者在手机端电商平台进行网购已经成为了主流现象。因此，手机端店铺首页的设计对于所有商家而言都至关重要，是电商设计任务中的核心工作。本章针对手机端店铺的基本概述和首页模块设计等基础知识进行系统讲解，并针对流行风格与典型行业的手机端店铺首页进行设计演练。通过本章的学习，读者可以对手机端店铺首页的设计有一个系统的认识，并快速掌握手机端店铺首页的设计规范和制作方法，成功制作出具有强大购买力的手机端店铺首页。了解手机端店铺首页的基本概念明确手机端店铺首页的模块结构学习目标8.1手机端店铺基本概述手机端店铺设计的必要性手机端与PC端店铺区别手机端店铺的设计关键点随着移动互联网的发展及普及，大众使用移动设备上网的时间远远超过使用电脑设备。淘宝、京东、一条等各大电商平台适应时代趋势，相继开发App便于广大消费者使用移动设备进行购物。由于移动设备有着方便灵活的特点，极大地满足了消费者可以随时随地进行购物的需求。设计精美的手机端店铺8.1.1手机端店铺设计的必要性1.设计尺寸不同手机端店铺和电脑端店铺的设计尺寸大有不同，网店美工人员不能将设计好的电脑端店铺图片直接照搬到手机端店铺，否则会引发界面混乱、显示不全和效果不佳等问题。以店铺首页为例，手机端首页宽度为通常设计为1200像素，而电脑端店铺的首页宽度一般为1920像素。8.1.2手机端与PC端店铺区别2.页面布局不同由于设计尺寸的不同，手机端店铺与PC端店铺的布局也要有所区别，以此增强手机端店铺的浏览体验。如在PC端店铺为左右布局的横版海报，在手机端店铺则需要设计成上下布局的竖版海报。

手机端店铺首页PC端店铺首页8.1.2手机端与PC端店铺区别3.构成模块不同手机端的构成模块划分清晰，并且会根据设备特点加入更能吸引消费者的模块。如店铺首页，手机端通常会在店招下方加入文字标题、店铺热搜和店铺会员等模块，较PC端更加丰富。手机端店铺首页PC端店铺首页8.1.2手机端与PC端店铺区别4.信息内容不同:由于尺寸缩小，手机端店铺需要在有限的空间进行设计。因此相较于PC端店铺，手机端无法通过比较详细的文字说明商品，只会选择更为重要的文案内容，并且对价格进行加重和调整颜色以做强调，令其更适合在手机端展示。

手机端店铺首页信息内容PC端店铺首页信息内容8.1.2手机端与PC端店铺区别1.符合浏览规范为了保证消费者在手机端购物的的浏览体验，设计时需要保证符合手机端的规范。如设计尺寸、字号大小、图片尺寸和色彩搭配等都要按照手机端的规范进行，避免出现浏览问题，降低消费者购物欲望。2.统一平台视觉设计手机端店铺虽然要根据手机端的特点进行调整，但也要注意与PC端店铺的视觉进行统一呼应，不能令消费者感到是进入了两个不同的店铺。因此应保留相通的视觉元素，提升品牌关联性。8.1.3手机端店铺的设计关键点3.进行页面统一除了进行平台与平台之间的视觉统一，还需要保证页面本身以及页面之间的视觉统一。设计单张页面时，整张页面需要和谐统一，并且各个页面之间也可以相互衔接，促成交易。4.合理运用模块手机端店铺设计时不要为了丰富内容而加入大量模块，应根据店铺特点和活动要求，合理使用。整体信息量要合适，如首页多控制在6个屏幕以内，这样不会显得繁琐杂乱，可以令消费者愉悦轻松地进行浏览。8.1.3手机端店铺的设计关键点8.2手机端店铺首页设计轮播海报设计优惠券设计分类模块设计商品展示设计底部信息设计手机端店铺首页的宽度为1200像素，高度不限，其设计模块可以根据商家不同需要和后台装修模块进行组合变化。首页的核心模块通常由店招、文字标题、店铺热搜、轮播海报、优惠券、分类模块、商品展示、底部信息、排行榜和逛逛更多构成。手机端店铺首页设计8.2手机端店铺首页设计

手机端店铺的首页轮播海报是网店美工人员正式进行设计的模块，其宽度为1200像素，高度为120像素-2000像素，支持jpg或png格式，大小不超过2兆。8.2.1轮播海报设计轮播海报效果图

手机端首页的优惠券可以依据5.2.3中PC端首页优惠券的讲解进行设计。需要注意的是，设计尺寸、字号大小和色彩搭配要符合手机端浏览规范。8.2.2优惠券设计轮播海报效果图

在手机端店铺中，消费者进行浏览的方式是上下滑动的方式，因此在设计时会尽量减少大规模的点击交互，所以分类模块通常在商品类型丰富的店铺中进行保留。手机端首页分类模块的设计可以依据5.2.4中PC端首页分类模块的讲解进行设计。需要注意的是，在手机端中的分类模块设计有时会在设计上进行简化处理，以节约面积。8.2.3分类模块设计

手机端首页分类模块（左）

PC端首页分类模块（右）月烨家居旗舰店手机端首页的商品展示可以依据5.2.5中PC端首页商品展示的讲解进行设计。但由于面积有限，手机端首页的商品展示无法向PC端那样一行4列的展示商品，通常会以1行1列、1行2列和1行3列的形式进行展示，当以1行1列展示商品时，可以做成单图海报，其宽度为1200像素，高度为120像素-2000像素。当以1行2列或1行3列展示商品时，头部可加入Banner提升美感，Banner的宽度为1200像素，高度为376像素或591像素，支持jpg/png格式，大小不超过2兆。8.2.4商品展示设计手机端首页商品展示效果8.2.4商品展示设计

底部信息由于位于页面尾部，消费者在浏览时会容易产生视觉疲惫。因此，手机端的大部分店铺会去除底部信息。在个别保留底部信息的手机端店铺中，会将PC端首页的底部信息做元素简化或颜色变化等处理来进行设计，以减轻消费者浏览负担、吸引消费者观看兴趣。8.2.5底部信息设计

手机端店铺首页底部信息PC端店铺首页底部信息

使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具、“椭圆”工具、“多边形”工具和“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“创建剪贴蒙版”命令调整图片显示区域。8.2.6课堂案例-手机端国产护肤品店铺首页设计效果图学习使用绘图工具、文字工具制作手机端国产数码产品店铺首页。8.3课堂练习-手机端国产数码产品店铺首页设计效果图学习使用绘图工具、文字工具制作手机端新中式家具店铺首页。8.4课后习题-手机端新中式家具店铺首页设计效果图第9章PC端活动专题页设计本章介绍：PC端活动专题页设计是电商设计任务中具备一定难度的综合型工作任务，通过精心设计的PC端活动专题页能够营造出活动的欢庆氛围，提升用户的兴趣。本章针对活动专题页的基本类型、表现形式以及版块设计等基础知识进行系统讲解，并针对流行风格与典型行业的PC端活动专题页进行设计演练。通过本章的学习，读者可以对PC端活动专题页的设计有一个系统的认识，并快速掌握PC端活动专题页的设计规范和制作方法，成功塑造出色精彩的PC端活动专题页。了解活动专题页的基本类型熟悉活动专题页的表现形式熟悉活动专题页的页面设计学习目标

活动专题页是指在各种节日活动主题下，进行商品促销的电商页面。根据服务对象，活动专题页可以分为平台专题页和店铺专题页。

平台专题页通常涉及大量的类目、品牌以及产品，因此整体布局更紧凑。头部Banner常设计为高度较短、小尺寸类型，以便能在首屏展示更多信息。而店铺专题页只需要呈现单一类目或单一品牌下的少量商品，因此整体布局较为宽松。头部Banner常设计为高度较高、大尺寸类型，以便能更好地体现主题和氛围。9.1活动专题页的基本类型矩形排列场景展示9.2活动专题页的表现形式根据活动专题页的信息呈现和商品陈列，专题页通常有矩形排列和场景展示两种表现形式，这两种表现形式各有干秋，被大量应用于各类专题设计中。9.2活动专题页的表现形式矩形排列即用矩形的形式将专题页的内容按照一定规则进行排列。这种表现形式能够清晰地展示信息内容，令画面整齐舒适。根据不同的设计风格，矩形排列又可以细分为扁平化矩形和拟物化矩形，扁平化矩形是将矩形刻画成轻量化的视觉元素，从而更好地凸显商品和信息。拟物化矩形则是将矩形刻画成立体感的视觉元素，使矩形成为画面亮点，让画面颇具美感。9.2.1矩形排列矩形排列效果图场景展示即用场景化的形式呈现页面中的内容。这种表现形式能够突出主题氛围，使信息和商品巧妙地融入场景之内，设计极具连贯性与创意度。9.2.2场景展示场景展示9.3活动专题页的页面设计活动专题页的设计尺寸活动专题页的页面结构活动专题页的设计要点PC端活动专题页的设计尺寸可以参考第七章PC端店铺首页设计的尺寸进行设置。通常将宽度设置为1920像素，重要的信息和商品建议设计在1200像素以内。高度不限，可以根据商家不同需要进行组合变化。9.3.1活动专题页的设计尺寸活动专题页通常由Banner、活动促销区以及商品陈列区组成，参考1.5.3栅格系统确立好活动专题页的栅格，根据主流电商设计活动专题页的版块尺寸，可以总结出紧凑型和宽松型共7种版块。设计时建议参考图中的比例，不然容易令版块在结构上失衡。9.3.2活动专题页的页面结构紧凑型模块宽松型模块1.商品陈列（1）商品展示形式9.3.3活动专题页的设计要点摄影扁平台面（2）商品展示角度9.3.3活动专题页的设计要点平视俯视2.内容分隔（1）版块分隔版块分隔即对专题页中不同的主题专区进行区分，常见的专区有活动促销区和商品陈列区。版块区隔的设计通常有分隔栏、颜色和表现形式三种。9.3.3活动专题页的设计要点分隔栏颜色表现形式（2）模块分隔模块分隔即对专题页同一版块中的不同模块进行区分，以实现每个模块都是一个相对独立的视觉单元。根据表现形式的不同，模块分隔有矩形分隔和场景分隔。9.3.3活动专题页的设计要点矩形分隔场景分隔使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具、“椭圆”工具和“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“创建剪贴蒙版”命令调整图片显示区域。9.3.4课堂案例-品质国货家电平台专题页设计效果图学习使用绘图工具、文字工具制作初春焕新家电平台专题页。9.4课堂练习-初春焕新家电平台专题页设计效果图学习使用绘图工具、文字工具制作国潮年货坚果店铺专题页。9.5课后习题-国潮年货坚果店铺专题页设计效果图第10章手机端活动专题页设计本章介绍：手机端活动专题页较PC端活动专题页的可视范围变小，商品变得更加集中，更容易吸引用户，因此手机端活动专题页的商品销量更好。本章针对手机端活动专题页的基本类型、呈现特点以及手机端店铺活动专题页设计等基础知识进行系统讲解，并针对流行风格与典型行业的手机端活动专题页进行设计演练。通过本章的学习，读者可以对手机端活动专题页的设计有一个系统的认识，并快速掌握手机端活动专题页的设计规范和制作方法，成功塑造出色精彩的手机端活动专题页。了解手机端活动专题页的基本类型了解手机端活动专题页的呈现特点熟悉手机端活动专题页的版块设计学习目标手机端活动专题页与PC端活动专题页一样可以分为平台专题页和店铺专题页，其中手机端平台专题页Banner常设计为为横屏小尺寸，而店铺专题页则设计为竖屏大尺寸。