电商视觉设计课件 第7章 PC端店铺首页设计

第7章PC端店铺首页设计本章介绍：PC端店铺首页设计是电商视觉设计任务中的综合型工作任务，精心设计的PC端店铺首页能够向用户传达品牌感和信任感。本章针对PC端店铺首页的基本概念以及模块结构等基础知识进行系统讲解，并针对流行风格与典型行业的PC端店铺首页进行设计演练。通过本章的学习，读者可以对PC端店铺首页的设计有一个系统的认识，并快速掌握PC端店铺首页的设计规范和制作方法，成功塑造具有品牌影响力的PC端店铺首页。了解PC端店铺首页的基本概念熟悉PC端店铺首页的模块结构知识目标熟悉PC端店铺首页的设计思路掌握PC端店铺首页的制作方法能力目标培养良好的PC端店铺首页设计的操作习惯培养对PC端店铺首页的审美鉴赏能力培养对PC端店铺首页的设计创意能力素质目标7.1PC端店铺概述店铺首页是消费者进入店铺的第一个展示页面，具有展现品牌气质、承担流量分发的功能。视觉精美的首页，不但可以提升消费者对店铺的好感，还可以提高商品转化率，因此需要电商视觉设计师用心设计。PC端店铺首页的宽度为1920像素，高度不限，其设计可以根据商家不同需要和后台装修模块进行组合变化。首页的核心模块通常由店招与导航栏、轮播海报、优惠券、分类导航、商品展示和底部信息构成。PC端首页7.2店招与导航栏设计店招与导航栏的定义店招与导航栏的设计规则应用案例——设计简约家具PC端店铺店招与导航栏店招与导航栏位于店铺页面顶部，在PC端店铺的任何页面都可以看到。店招即店铺的招牌，主要用于展示店铺品牌、促销活动内容和特价商品等内容。好的店招会起到品牌宣传，加深消费者记忆的作用。导航栏则是对商品进行分类，用于帮助消费者定位到当前位置、完成页面之间的跳转并快速找到商品。店招导航效果图7.2.1店招与导航栏的定义1.店招：以淘宝为例，店招可以分为常规店招和通栏店招两类，常规店招尺寸950像素×120像素；通栏店招包含店招、导航和背景，尺寸建议为1920像素×150像素。2.导航栏：导航栏高度10-50像素，建议30像素；导航栏字体建议为黑体和宋体，字号建议黑体为14像素或16像素，宋体12像素或14像素；文字间距建议为20像素。7.2.2店招与导航栏的设计规则使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具绘制基本形状。7.2.3应用案例——设计简约家具PC端店铺店招与导航栏效果图7.3轮播海报设计轮播海报的定义轮播海报的设计规则应用案例——设计简约家具PC端店铺轮播海报7.3.1轮播海报的定义轮播海报即多张海报循环播放，通常位于店铺首页店招与导航栏下方，主要用于展示商品宣传和活动促销等内容。优秀的电商视觉设计师会对每张海报的主题、构图和配色等因素进行综合考虑和设计，轮播海报可分为左右布局和上下布局两种。左右布局轮播海报

上下布局轮播海报轮播海报的设计尺寸可以依据4.1.2节中的PC端全屏海报和PC端常规海报的尺寸进行设计。其他设计规则可以依据4.2节PC端海报的版面布局和4.3节PC端海报的表现形式进行设计。7.3.2轮播海报的设计规则使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具、“椭圆”工具、“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“创建剪贴蒙版”命令调整图片显示区域。7.3.3

应用案例——设计简约家具PC端店铺轮播海报效果图7.4优惠券设计优惠券的定义优惠券的设计规则应用案例——设计简约家具PC端店铺优惠券优惠券即减价优惠，通常位于首页轮播海报下方。优惠券可以起到提高购买欲望、刺激冲动消费的作用，还能吸引消费者进行二次消费。横向优惠券7.4.1优惠券的定义纵向优惠券综合型优惠券优惠券的数额一定要突出醒目，并在旁边设计明显的“立即领取”“马上使用”等按钮，以引导消费者采取行动。除此之外，还要明确标注出有效期和满减条件，其中有效期和满减条件建议使用黑体小字，这样在刺激消费者消费的同时也可以保证商家自身的利润。7.4.2优惠券的设计规则使用“新建参考线版面”命令建立参考线，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具绘制基本形状。7.4.3应用案例——设计简约家具PC端店铺优惠券效果图7.5分类模块设计分类模块的定义分类模块的设计规则应用案例——设计简约家具PC端店铺分类模块分类模块即店铺商品的类别，通常位于店铺首页轮播海报或优惠券下方，是用于引导消费者购买商品的重要模块。优秀的分类模块设计能提升购买效率、加强消费者体验。7.5.1分类模块的定义分类模块展示效果图分类模块的设计需要符合店铺的整体装修风格。字体建议为黑体或粗宋，图标风格需要统一。关于图片，如果是进行横向分类，宽度应该控制在950像素以内，如果纵向分类，高度应该控制在150像素以内。另外图标、图片与文案应该相互呼应。7.5.2分类模块的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”命令调整图片显示区域。7.5.3应用案例——设计简约家具PC端店铺分类模块效果图7.6商品展示设计商品展示的定义商品展示的设计规则应用案例——设计简约家具PC端店铺商品展示商品展示即商品的展示区域，通常位于店铺首页优惠券或分类模块下方，用于向消费者展示爆款商品、新品商品和推荐商品等内容。优秀的商品展示设计可以起到引导消费者购买、促进商品销售的作用。7.6.1商品展示的定义商品展示商品展示的设计形式通常包括图形形式、图片形式或文案形式。电商视觉设计师在设计商品展示模块时，需要选择店铺中美观且有代表性的商品，除此之外，还可以选择临近下架的商品，以此获得优先展示的机会，提升网店流量。关联的素材和整体背景需要相互搭配，并且符合店铺的整体风格。7.6.2商品展示的设计规则展示标题设计使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“椭圆”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”命令调整图片显示区域。7.6.3应用案例——设计简约家具PC端店铺商品展示效果图7.7底部信息设计底部信息的定义底部信息的设计规则应用案例——设计简约家具PC端店铺底部信息底部信息即其他信息展示，通常位于店铺首页的最下方，用于放置店铺品牌故事、购物须知和店铺公告等信息，优秀的底部信息设计可以起到补充说明、挽留消费者的作用。7.7.1底部信息的定义底部信息展示底部信息的主要功能是在为消费者提供方便的同时体现店铺的服务。首页的底部信息除了放置店铺品牌故事、购物须知和店铺公告还会加入联系信息、导航链接和版权信息等内容。其整体布局应简单明确，使用简短的文字和具有代表性的图标来传递相关信息。7.7.2底部信息的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”命令调整图片显示区域。7.7.3 应用案例——设计简约家具PC端店铺底部信息效果图使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”“圆角矩形”工具绘制基本形状，使用“添加图层