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

第4章 店铺首页视觉营销设计 电商视觉营销设计 1 设计并制作女装店铺首页 03 2 本节将以女装店铺首页的设计与制作为例，介绍店铺首页的设计技巧与制作方法。 案例最终效果可参考本书配套素材“素材与实例”→“第 4 章”→“女装店铺首页”文件夹中的“女装店铺首页 .psd”文件。 4.3 设计并制作女装店铺首页 4.3.1 设计思路 该女装店铺当前主推春夏上市新品，且目标消费者为 25 ～ 40 岁职业女性。 这类女性偏好精致、优雅的极简风，因此店铺风格确定为干净、大气的简约风。 接下来根据店铺营销策略和目标消费者的特点，对该女装店铺首页进行视觉营销设计。 页面规划 配色方案确定 构图选择 女装店铺首页从上到下依次为七个区域，下面对这些区域进行规划和说明。 4.3.1 设计思路 1. 页面规划 5 店铺首页 店铺招牌 导航 轮播区 优惠券 商品展示区 交互区 页尾 （1）店铺招牌：选择品牌型店铺招牌，且加入店铺标志，并将其居中摆放，使其更加突显，方便消费者快速识别店铺信息。 在店铺招牌靠右位置添加搜索框和收藏店铺按钮，方便消费者搜索商品、收藏店铺。 另外，这样安排还可以让店铺招牌显得简洁大气，与店铺风格定位相符。 4.3.1 设计思路 1. 页面规划 6 （2）导航：设置通栏导航，将商品按服装类型进行分类，即导航基础内容为连衣裙、衬衫、毛衣、外套、半身裙、短裤、长裤。 考虑到新品上市的营销策略，在导航靠左位置加入上市新品导航项——新品推荐，并在该导航项的右上角添加“NEW”作为装饰，使该导航项更加突显，以引导消费者进入相应的推广页面中。 由于该女装店铺商品种类不多，因此不需要设置二级导航。导航中也无须添加任何其他元素，白底黑字的搭配可使导航文字更加突出，方便消费者快速识别信息，也与店铺招牌的风格相呼应。 4.3.1 设计思路 1. 页面规划 7 （3）轮播区：鉴于店铺当前主推春夏上市新品，选择主题活动型海报，并将主题设置为“春夏上新”，借此提醒消费者春夏来临，该换新了。 在海报中加入春夏首推新品图片，以引起消费者关注；加入“全场商品 2 件 8 折”“活动时间……”等活动信息，引导消费者参与活动、购买商品；加入一些装饰元素，如绿植，丰富画面的同时辅助主题阐述。 4.3.1 设计思路 1. 页面规划 8 （4）优惠券：在轮播海报下方安排多张风格统一的优惠券，用于吸引消费者注意，促进商品销售。 优惠券中安排面额、使用条件等内容，方便消费者查看和领取。 4.3.1 设计思路 1. 页面规划 9 （5）商品展示区：将店铺中的部分商品按照新品热卖、爆款热卖两类进行分区展示。 内容方面，新品热卖区展示重点推广的商品——春夏上市新品，并以商品自身优势作为信息传达点，以吸引消费者目光；爆款热卖区相当于“商品陈列区”，展示以往销量较高的商品，为消费者推荐优质商品，以获得消费者的好感。 设计方面，新品热卖区采用折线型陈列方式，这种排列方式符合消费者的视觉浏览路线，能给消费者带来良好的视觉感受；而爆款热卖区则采用两行三列的规范陈列方式，且在单个商品展示图中加入购物车图标，引导消费者将商品加入购物车的同时丰富商品展示图的表现。 4.3.1 设计思路 1. 页面规划 10 （6）交互区：添加店铺标志、收藏店铺按钮、客服联系方式、返回顶部按钮，方便消费者操作的同时，加深其对品牌的记忆。 4.3.1 设计思路 1. 页面规划 11 （7）页尾：添加底部导航、店铺声明等，方便消费者选购商品，提高消费者对店铺的信任度。 4.3.1 设计思路 1. 页面规划 12 （1）考虑到店铺风格定位为简约风，所以店铺首页的大部分文字使用黑色，背景以白色为主，这也方便消费者查看店铺和商品信息。 （2）考虑到店铺当前主推春夏上市新品，将海报背景、优惠券背景、页尾背景等设置为蓝色，能够给消费者以清凉之感。其中优惠券背景的蓝色比海报背景的蓝色更深，可使优惠券更加醒目，从而吸引消费者目光。 （3）对购买按钮这类重点强调的内容使用红色，使其非常显眼，以引导消费者点击。 （4）页面中的一些装饰元素使用粉色、紫色等，以丰富画面色彩。 4.3.1 设计思路 2. 配色方案确定 13 店铺首页的商品图片主要采用垂直线构图，能为画面增加延伸感；而海报一侧展示主推商品，另一侧添加文案，这种平衡式构图方式可以使画面形成视觉上的稳定。这种既具动感、又具稳定感的画面能给消费者带来良好的视觉体验。 另外，页面中的按钮使用点元素，使其成为焦点，从而吸引消费者注意；优惠券和部分图片边框等使用线元素，使画面效果更加丰富；每一幅图片都可以视为一个面元素，这些面元素面积、形状各不相同，可以形成一定的对比，使画面更具表现力。 4.3.1 设计思路 3. 构图选择 14 4.