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

第7章

PC端店铺

首页设计;了解PC端店铺首页的基本概念

熟悉PC端店铺首页的模块结构;熟悉PC端店铺首页的设计思路

掌握PC端店铺首页的制作方法;培养良好的PC端店铺首页设计的操作习惯

培养对PC端店铺首页的审美鉴赏能力

培养对PC端店铺首页的设计创意能力;7.1PC端店铺概述;7.2店招与导航栏设计;店招与导航栏位于店铺页面顶部，在PC端店铺的任何页面都可以看到。店招即店铺的招牌，主要用于展示店铺品牌、促销活动内容和特价商品等内容。好的店招会起到品牌宣传，加深消费者记忆的作用。导航栏则是对商品进行分类，用于帮助消费者定位到当前位置、完成页面之间的跳转并快速找到商品。;1.店招：以淘宝为例，店招可以分为常规店招和通栏店招两类，常规店招尺寸950像素×120像素；通栏店招包含店招、导航和背景，尺寸建议为1920像素×150像素。

2.导航栏：导航栏高度10-50像素，建议30像素；导航栏字体建议为黑体和宋体，字号建议黑体为14像素或16像素，宋体12像素或14像素；文字间距建议为20像素。;使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具绘制基本形状。;7.3轮播海报设计;7.3.1轮播海报的定义;轮播海报的设计尺寸可以依据4.1.2节中的PC端全屏海报和PC端常规海报的尺寸进行设计。其他设计规则可以依据4.2节PC端海报的版面布局和4.3节PC端海报的表现形式进行设计。;使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具、“椭圆”工具、“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“创建剪贴蒙版”命令调整图片显示区域。;7.4优惠券设计;优惠券即减价优惠，通常位于首页轮播海报下方。优惠券可以起到提高购买欲望、刺激冲动消费的作用，还能吸引消费者进行二次消费。;优惠券的数额一定要突出醒目，并在旁边设计明显的“立即领取”“马上使用”等按钮，以引导消费者采取行动。除此之外，还要明确标注出有效期和满减条件，其中有效期和满减条件建议使用黑体小字，这样在刺激消费者消费的同时也可以保证商家自身的利润。;使用“新建参考线版面”命令建立参考线，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具绘制基本形状。;7.5分类模块设计;分类模块即店铺商品的类别，通常位于店铺首页轮播海报或优惠券下方，是用于引导消费者购买商品的重要模块。优秀的分类模块设计能提升购买效率、加强消费者体验。;分类模块的设计需要符合店铺的整体装修风格。字体建议为黑体或粗宋，图标风格需要统一。关于图片，如果是进行横向分类，宽度应该控制在950像素以内，如果纵向分类，高度应该控制在150像素以内。另外图标、图片与文案应该相互呼应。

;使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”命令调整图片显示区域。;7.6商品展示设计;商品展示即商品的展示区域，通常位于店铺首页优惠券或分类模块下方，用于向消费者展示爆款商品、新品商品和推荐商品等内容。优秀的商品展示设计可以起到引导消费者购买、促进商品销售的作用。;商品展示的设计形式通常包括图形形式、图片形式或文案形式。电商视觉设计师在设计商品展示模块时，需要选择店铺中美观且有代表性的商品，除此之外，还可以选择临近下架的商品，以此获得优先展示的机会，提升网店流量。关联的素材和整体背景需要相互搭配，并且符合店铺的整体风格。;使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“椭圆”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”命令调整图片显示区域。;7.7底部信息设计;底部信息即其他信息展示，通常位于店铺首页的最下方，用于放置店铺品牌故事、购物须知和店铺公告等信息，优秀的底部信息设计可以起到补充说明、挽留消费者的作用。;底部信息的主要功能是在为消费者提供方便的同时体现店铺的服务。首页的底部信息除了放置店铺品牌故事、购物须知和店铺公告还会加入联系信息、导航链接和版权信息等内容。其整体布局应简单明确，使用简短的文字和具有代表性的图标来传递相关信息。;使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”命令调整图片显示区域。;使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添