电商视觉营销（中篇，共上中下3篇）.pptxVIP

第4章

店铺首页视觉营销电商视觉营销（全彩微课版）

目录CONTENTS4.1规划店铺首页4.2设计店招与导航4.3设计全屏海报4.4?设计优惠活动区4.5设计商品分类区4.6设计商品促销展示区4.7?设计页尾4.8?设计移动端店铺首页4.9?课堂实训——设计家纺店铺首页

4.1.1店铺首页的主要结构3清晰的首页结构布局有利于提高消费者的体验，帮助消费者在首页上快速找到所需的商品，降低首页的跳出率，从而促进商品销售。首页一般包括页头、页中和页尾3个部分，页头和页中又包含若干个不同的功能板块，如图所示，具体的板块内容可根据店铺的实际需要进行安排。

4.1.1店铺首页的主要结构41．页头页头位于首页的最顶端，可以在店铺各个页面中进行展现，是视觉设计和营销的重点区域之一。导航店招

4.1.1店铺首页的主要结构52．页中页中是展示商品的区域。全屏海报优惠活动区商品分类区商品促销展示4.1.1店铺首页的主要结构63．页尾页尾位于首页的末尾，可根据店铺实际需要进行添加，常用于展示店铺网址、二维码、品牌形象、店铺服务和温馨提示等内容，目的在于提高消费者对店铺的信任度、好感度，以及加深其对品牌的印象，也可根据需要添加“返回顶部”按钮，方便消费者从头进行浏览。

4.1.2店铺首页的布局方式7店铺首页的合理布局有利于规划重点，明确信息表现的先后顺序，帮助消费者快速建立与页面的视觉联系，使消费者能够在第一时间找到页面的重点信息。常见的页面布局方式如下。1．平衡式布局平衡式布局是指合理安排和分配页面内容和空白空间，使得整个页面在视觉上呈现出均衡、稳定的感觉。从视觉感受上来说，平衡的页面布局十分符合人们的视觉习惯，可以带给人平稳、舒适的视觉体验。

4.1.2店铺首页的布局方式82．规律式布局规律式布局是指按照一定的规律对各种布局元素进行排列组合，使其呈现出规律性变化，从而使整体页面具有统一的、连贯的、舒适的视觉体验。在规律式布局中，商家进行商品排布时需要注意节奏感，使排布方式，有一定的疏密、大小或曲直的区分。

4.1.1店铺首页的主要结构93．流程式布局流程式布局是指以流程图的方式展示页面信息和商品，可以有序引导消费者的视线，让枯燥的信息展示变得个性十足，消费者浏览起来更简单明了，充满趣味性。4．轮廓式布局轮廓式布局是指将页面设计成一个完整的轮廓，构建一个边界或轮廓线，然后将视觉内容巧妙地填充进去。这种处理方式能够让消费者迅速注意到轮廓内的主要信息，同时可以让页面更有设计感。

4.1.1店铺首页的主要结构105．切割式布局切割式布局是指按照一定的方式将页面切割为不同的形状，如切割为三角形、矩形、圆形、菱形或其他不规则形状，让页面整体更具几何设计感与节奏感，从而提高页面的生动性。。6．留白式布局留白式布局是指为了使整个页面更加简洁、大气、协调，而有意留下一定的空白。留白区域不局限于白色背景，一般来说，某一区域无额外元素、无装饰、处于空白的状态等，皆可称作留白。

目录CONTENTS4.1规划店铺首页4.2设计店招与导航4.3设计全屏海报4.4?设计优惠活动区4.5设计商品分类区4.6设计商品促销展示区4.7?设计页尾4.8?设计移动端店铺首页4.9?课堂实训——设计家纺店铺首页

4.2.1店招的设计要点12店招即店铺的招牌，它在很大程度上构成了消费者对店铺的第一印象。鲜明、有特色的店招对于店铺品牌和商品定位有着不可替代的作用。店招中可以包含文字、图片、形状等视觉设计元素，通过这些元素的巧妙组合，可以形成诸如品牌Logo、店铺广告语、促销商品、优惠信息、活动信息等常见的内容，除此之外，也可根据需要添加关注或收藏按钮、店铺公告及联系方式等内容。

4.2.2导航的设计要点131．导航的类型导航主要分为横排导航与竖排导航两种类型，其中横排导航最为常见，也是大多数商家所选择的一种展示类型，如图所示。横排导航内容安排与店招一致，要将主要信息放置在中间的“安全区域”内。竖排导航一般与首屏的全屏海报高度一致。

4.2.2导航的设计要点142．导航的内容规划导航的内容规划即将店铺中所有的商品按照一定的标准进行分类，方便消费者了解和查找店铺内所有商品，也可按照店铺当前经营目标和推广目标对导航内容进行规划，配合主推商品的销售，将消费者引入相应的推广页面。

4.2.2导航的设计要点153．导航的设计原则导航一般包括店铺首页和其他分类栏目的导入链接，清晰地反映了店铺的核心经营内容，可以帮助消费者快速了解店铺的定位和主营业务。商家在进行店铺导航的设计时，可遵循以下几个原则。导航要与店招的风格和颜色相互呼应，保证视觉效果的统一。（1）导航的长度有限，每个导航栏目的内容要简洁，内容不能太多，否则容