《网店美工 第2版》 课件 6任务二 商品分类区设计与制作

项目六

任务二食品网店商品分类区设计与制作任务介绍本任务是为一家进口零食商城设计制作网店商品分类区，让买家可以在众多商品中快速查找到自己需要的商品。在设计制作过程中需要充分考虑店铺的整体装修情况及产品的特点，通过利用合理的颜色搭配及构图技巧制作出具有吸引力的商品分类区域，要求在制作过程中熟练“文字”“形状”“图层样式”等工具的使用。任务描述“食尚物语”是一家专营进口零食的商城，为了迎接年中大促，商城首页要进行全新的装修设计，现要求对商城商品分类区域针对活动的特点进行设计及制作。要求:①配色符合零食店特点，突出活动气息:②突出网店活动力度，并根据商品的属性进行分类，做出相应的设计。“食尚物语”网店客户需求信息项目客户反馈消费人群15-35岁青少年分类方式包含活动分类及产品属性分类两种分类方式版面设计突出活动信息及相应活动分类模块分类区域尺寸宽为750px，高度1000px文案简短，突出活动及产品特点任务实施宝贝分类能让用户快速找到自己想要的商品，提高了用户体验度。在电商平台上，一个好的宝贝分类不仅可以提高用户购物的体验，也可以有效提高转化率和销售额的。在商城中对于商品分类，可以按照网店的整体色调进行设计，好的商品分类可以让买家一目了然，常见的分类区如图所示。任务实施第一步设计思路分析设计师针对客户需求信息进行设计思路分析:（1）商品分类区结合店铺的经营类目、商城活动信息及总体特色等几个方面进行设计，突出商城的活动信息，让顾客可以快速的找到相应的活动产品及对应的类别的商品，激发顾客的购买欲望。（2）在风格上要考虑零食为快消产品，要表现出明快的特点，并且考虑到促销要求，整体配色上，可以选择红色、黄色系为主色，蓝色为点睛色，整体配色显眼突出。（3）突出商城活动产品的分类区域，提升营销导向性，提升商城的活动营销效果。（4）采用圆角矩形等形状简洁柔和的图形元素，提升整体版面的协调性。（5）整体文案设计简短，突出活动、品牌、商品属性等核心信息。任务实施第二步操作实施1.活动商品分类区设计（1）启动PhotoshopCC2018，新建一个750px*760px的空白文档，名称为“食品类商品分类区”，背景填充白色，调出标尺并新建参考线做好区域布局划分；使用工具箱中的“圆角矩形”工具，设置圆角半径为20像素，绘制一个圆角矩形选区，并进行渐变填充，颜色为:#f9ebbb--#f3edd5；继续新建图层，绘制圆角矩形路径，并在路径上添加锚点，进行形状修改，并作渐变填充，颜色为:#ef2128--#e4020e新建文件及活动区域绘制任务实施（2）新建组，命名为“活动分区1”，新建图层，绘制圆角矩形，并进行渐变填充，颜色为:#f9ebbb--#f3edd5，输入文案，设置字体为微软雅黑，颜色为#e10216，#bc635b，新建图层绘制圆角矩形填充白色，设置投影如图所示，继续绘制圆角矩形填充#0544c4，输入文案“抢鲜”，并插入素材，效果如图所示。

投影设置活动分区效果任务实施（3）重复步骤2，复制组“活动分区1”，重命名为“活动分区2”、“活动分区3”、“活动分区4”，并修改文案，及替换图片素材，完成活动分类区域设计，效果如图所示。

活动分类区域设计任务实施2.商品类别分类区（1）新建图层，设置圆角半径为20像素，绘制圆角矩形，并填充颜色为:#e4020e，效果如图所示。

商品类别分区任务实施2.商品类别分类区（2）新建组，命名为“商品分区1”，新建图层，按住shift键，绘制正圆角矩形，并填充颜色为:#e4020e，设置图层样式为描边，填充类型为渐变，如图6-32所示，继续新建图层，绘制圆角矩形，并进行渐变填充，颜色为:#f9ebbb--#f3edd5，并作同上图层描边设置，输入文案“解腻果干”，并插入素材，效果如图所示。

图层描边设置商品分区1设计任务实施（3）重复步骤2，复制组“商品分区1”，重命名为“商品分区2”、“商品分区3”、“商品分区4”，并修改文案，及替换图片素材，完成商品分类区域设计，效果如图所示。

商品分类区域设计任务实施（4）新建图层，绘制圆角矩形，并复制选区，对图层进行修剪，制作不规则滑块，并进行渐变填充，颜色为:#f9ebbb--#f3edd5，设置图层样式为投影；继续新建图层，按住shift键，绘制正圆及箭头图像，输入文本“向左滑动”，效果如图所示。

商品分类区域滑块设计任务实施（5）新建图层，输入文本“限时礼遇”，并运用加深、减淡工具对整体效果进行修饰调整，效果最终效果如图所示。

最终效果图举一反三小雪新开了一家网店“口口香”，主营各种类型的零食。现在小雪想为自己的网店制作商品分类区域，让进店的用户能第一时间找到需求的商品。具体要求见表项目客户反馈消费人群15-35岁青少年分类方式采用活动分类或产品属性分类等分类方式均可版面设计分类清晰明了，具有营销导向分类区域尺寸宽为750px，高度不限文案简短，突出活动或产品特