活动背景
商品陈列展示区是店铺首页的重要模块，店铺首页大部分内容由商品陈列展示构成。合理的商品陈列可以起到展示商品、提升品牌形象、营造品牌氛围、提高品牌销售的作用。作为首页全屏banner广告下方大区域的板块，促销陈列往往能直接吸引消费者的注意，如何设计制作店铺的陈列展示区？常见的模板方式又有哪些呢？我们跟小可一起来学习吧！
知识窗
在店铺首页上，除了促销广告区域，还可以有多样的模块进行宣传和促销产品，商品陈列区就是一个综合促销和展示宣传的模块。一个设计优秀的陈列区模板能够直接吸引买家点击中意的商品图片进入详情页，从而达成销售的目的。
1.商品陈列区分类
①促销区，展示店铺促销活动的商品。
②分类展示区，店铺同类商品的分类展示，增强网店购物的导购效果，使得商品陈列整洁和美观，视觉冲击力强。
2.商品陈列常用的展示方法
（1）一行多列，整齐排版。
把商品进行整齐地一排一排陈列展示，显得商品丰富、整洁、美观，很容易让消费者找到自己喜欢的款式或颜色，引导消费进一步对商品进行了解。这种是最常用的首页商品陈列展示方法之一。案例如图5.2.18所示。
图5.2.18
（2）突出主推产品，主次分明。
主推商品的画面占比大于其他商品，主次分明。其目的是主推产品能够很好地展示，提升单品的转化率。这种陈列展示的方法常用于新品上市或促销活动的陈列展示。案例如图5.2.19所示。
（3）图文对应。
在商品陈列展示中，可以进行“产品+文案”的展示方法，全方位地展示一个单品，更能提升单品的转化率。在店铺首页中，如果出售商品较少，可以用图文对应的陈列方法，如果商品较多，则最好少用，不然会操作首页屏幕数过长，也会造成顾客浏览商品速度下降。案例如图5.2.20所示。
（4）搭配关联。
在一个区域内把商品和商品之间有明显搭配关联的商品陈列展示在一起，使商品组合起到互补和延伸的作用，以便顾客在购买A商品后，顺便也购买陈列在旁边的商品B或商品C，有效地提高店铺的销售额。案例如图5.2.21所示。
图5.2.19
图5.2.20
图5.2.21
设计与制作商品陈列区
活动目标
了解商品陈列区展示方法和作用，为乐乐包袋网店设计店铺首页陈列区。
活动实施
经公司决定，乐乐包袋网店的商品陈列区使用两个模块展示产品，搭配组合优惠+新品推荐，既能展示店铺的优惠产品，又能展示新品上市，吸引新老客户。本案例内容继续在首页.psd文件中完成，配色统一，整体打造首页效果。
设计步骤参考如下：
（1）搭配组合优惠商品陈列区设计：本模块提供6组产品组合优惠信息，一列2组，共3列，整齐统一竖排版。样式配色统一，“超实惠搭配套餐”底色使用首页导航的色彩（R：1，G：129，B：121），展示区背景使用透明度为30%的白色方块。效果图如图5.2.22所示。(www.xing528.com)
（2）设计制作促销区优惠套餐展台。绘制几何色块做展台效果，使用“矩形选框工具”绘制矩形，填充白色，如图5.2.23所示；复制此矩形框，按“Ctrl+T”快捷键变换选区，并单击鼠标右键，在弹出的快捷菜单中选择“透视”，调整矩形台面的透视效果，添加渐变，效果如图5.2.24所示。
图5.2.22
图5.2.23
图5.2.24
（3）制作色块标签，突出套餐价格的优惠对比。给展台前面添加两个矩形色块，下面矩形色块颜色（#018179）是导航配色，上面矩形色块选择背景色（#02c0b4），效果如图5.2.25所示；绘制大箭头指示，填充梅红色（#d10e52），并选择自定义图形工具，选择小箭头，绘制并填充白色，效果如图5.2.26所示；接着复制大箭头和小箭头，并按“Ctrl+T”快捷键变换选区，并点击鼠标右键，在弹出的快捷菜单中选择“180°翻转”，放置在右边对称的位置。最后添加符号（+），效果如图5.2.27所示。
图5.2.25
图5.2.26
图5.2.27
（4）添加文字信息。使用文字工具，字体选择“微软雅黑”，添加文字信息，其中包括产品名称、原价、现价和组合套餐的优惠价，让顾客清晰、快速地把握促销活动的力度，吸引消费者的点击。效果如图5.2.28所示；最后打开“项目5→5.2.2素材.psd”文件，把产品的图片放置上去，调整图片大小，单一模块站台制作完毕，效果如图5.2.29所示。
图5.2.28
图5.2.29
（5）根据需求复制或删减展台模块。复制制作好的套餐模块，一列两组进行排版，套餐里的搭配产品图片可以替换，文字内容可以根据产品具体信息进行修改，也可根据展示需要删减模块。搭配组合优惠的商品陈列区制作完成，效果如图5.2.30所示。
（6）制作新品推荐商品陈列区。按照同样的方法，制作首页第二商品陈列区“潮流应季新品”，该模块是新品上市，所以选用主次分明排版，4款新产品作为主推产品，画面占比大于其他商品，其目的是主推产品能够很好地展示，提升单品的转化率，效果如图5.2.31所示。
图5.2.30
图5.2.31
活动评价
商品陈列区评分见下表：
活动拓展
为乐乐包袋网店新增一个商品陈列区“本周推荐”，要求使用“图文对应”的展示方法，主要展示产品拉杆箱，打开“项目5→素材5.2.3.jpg”文件 ，如图5.2.32所示。
图5.2.32
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
