电商设计电子课件

第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底部信息的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具和“圆角矩形”工具绘制基本形状，使用“创建剪贴蒙版”