6.2设计并制作女装店铺专题页（课件）《电商视觉营销设计》（上海交通大学出版社）

第6章 专题页视觉营销设计 电商视觉营销设计 1 设计并制作 女装店铺专题页 03 2 6.3 设计并制作女装店铺专题页 本节将以女装店铺专题页的设计与制作为例，介绍专题页的设计技巧与制作方法。 案例最终效果可参考本书配套素材“素材与实例”→“第 6 章”→“女装店铺专题页”文件夹中的“女装店铺专题页 .psd”文件。 6.3.1 设计思路 为了“促活”（让消费者活跃起来），该女装店铺计划举办促销活动。考虑到当前为春季，故将活动主题确定为“春夏焕新”。接下来对以“春夏焕新”为活动主题的专题页进行视觉营销设计。 6.3.1 设计思路 1. 页面规划 专题页从上到下依次为首屏海报、促销优惠区、商品展示区。下面对这些区域进行规划和说明。 5 6.3.1 设计思路 1. 页面规划 （1）首屏海报：安排活动主题、活动时间、活动优惠等内容，以帮助消费者了解活动。 根据活动目的和活动主题，将首屏海报主题文案设计成“春夏新品 钜惠放送”，借助“钜惠”一词表现活动价值，引发消费者对活动的兴趣。将辅助文案设计成“焕新周 | 5.1—5.6”，再次点明主题，同时说明活动时间，提醒消费者不要错过活动；以文案“全场 2 件 8 折 领券下单更优惠”说明优惠力度，刺激消费者参与活动。 鉴于此次营销活动为春夏新品促销，画面中除了加入主推商品图片外，还加入花草、青山等元素，以营造活动氛围。 另外，将“夏季新品 钜惠放送”主题文案放大显示，以使其突显，引发消费者关注。 6.3.1 设计思路 1. 页面规划 （2）促销优惠区：采用满减促销方式，并且为了确保消费者能以优惠的价格购买商品，特在促销优惠区展示购物攻略。不仅如此，购物中涉及的需要消费者领取的优惠券都罗列在此，方便消费者领取。 另外，考虑到店铺优惠券面额较大，会将其突出显示，以吸引消费者目光，激发消费者的购买欲望。 6.3.1 设计思路 1. 页面规划 （3）商品展示区：分成两个区域，一个是新品专区，一个是爆款专区。其中，新品专区展示少量春夏主推新品，爆款专区展示以往销售较好的少量爆款商品，以引发消费者对商品的兴趣。 在每个区域的底部加入“查看更多……”按钮，点击即可进入相应分类的商品展示页面，方便消费者选购。 另外，在每幅商品展示图中都加入“立即购买”按钮，以引导消费者点击购买商品 6.3.1 设计思路 2. 配色方案确定 考虑到此次营销活动主要针对的商品为春夏新品，故将页面背景、优惠券、部分文案等都设置成蓝色，给消费者以清爽、轻松的感觉； 对于一些重要信息，如“立即领取”按钮，使用红色将其突显，以引导消费者点击或查看；将一些辅助信息设置成黑色，可以让画面更显沉稳，以表现职场女性的沉着、干练。 不仅如此，这些色彩结合使用，可以与店铺首页风格保持统一，以强化品牌在消费者心中的印象。 6.3.1 设计思路 3. 构图选择 首屏海报采用中心构图，将活动信息居中摆放，左右两侧对称摆放商品模特图片，不仅能突出主体——促销活动信息，还能给消费者以和谐、稳定的感觉。 促销优惠区采用折线型陈列方式，为其增添趣味性和氛围感。商品展示区中的两个区域都添加首推商品展示图，并对其进行精心设计，以使整个商品展示区给消费者带来美感和新鲜感。 6.3.2 制作过程 11 制作首屏海报 制作促销优惠区 制作商品展示区 步骤 1　新建一个名为“女装店铺专题页”、宽度为 1920 像素、高度为 7000 像素、分辨率为 72 像素 / 英寸、颜色模式为 RGB 的文档，然后在垂直 485 像素处和垂直 1435 像素处各新建一条参考线。 6.3.2 制作过程 1. 制作首屏海报 由于活动期间通常将专题页作为店铺首页，因此专题页的尺寸可参考店铺首页的尺寸，宽度通常为 1920 像素，高度则根据页面内容的多少而定。 为了保证专题页在不同显示器中都能够正常显示，活动信息应尽量放置在中间（950 像素以内）。 6.3.2 制作过程 1. 制作首屏海报 小提示 6.3.2 制作过程 1. 制作首屏海报 步骤 2　将前景色设置为浅蓝色（#c8e4f2），并按“Alt+Delete”组合键为“背景”图层填充前景色，然后置入素材“背景 .png”文件，并将其顶端移至与页面顶端对齐。 14 步骤 3　置入素材“花草 1.png”“花草 2.png”“花草 3.png”文件，并将它们移至合适位置； 然后复制花草 3 素材，按“Ctrl+T”组合键调出变换框并右击，从弹出的快捷菜单中选择“水平翻转”项； 接着将其移至合适位置，最后按“Enter”键确认。 6.3.2 制作过程 1. 制作首屏海报 15 步骤 4　在背景素材中间合适位置添加文本和装饰图形，其中装饰图形需添加投影图层样式。 6.3.2 制作过程 1. 制