网店美工教学课件Chapter06店铺收藏及客服区的设计.ppt

淘宝美工教程 Chapter 06 店铺收藏及客服区的设计 Chapter 06 店铺收藏及客服区的设计 [情境导入] 小丽自己在家经营了一个服装网店，为了提高店铺的收藏量和客服区的醒目度，小丽需要对网店首页的店铺收藏区和客服区进行重新的设计，以此来增加店铺的访问量和服务机会，此时，店铺收藏及客服区的设计和创作就显得非常重要了。 [技能要求] 客服区和店铺收藏中都会包含必要的文字，在“字符”面板中调整设置来改变文字的外观，使其更加的独特，并使用形状工具来制作画面中的修饰形状，通过图层样式进行美化。 根据店铺的风格，或者设计画面的尺寸来对店铺收藏和客服区进行合理的布局，接着使用风格和色彩一致的修饰元素进行点缀。 [效果展示] Chapter 06 店铺收藏及客服区的设计 古典风格收藏区设计 冷酷风格客服区设计 6.1 了解店铺收藏及客服区 6.1.1 店铺收藏及客服区的概述 店铺收藏就是顾客将感兴趣的店铺添加到收藏夹中，以便在再次访问时可以轻松的找到相应的商品。店铺收藏的设计较为灵活，它可以直接设计在网店的店招中，也可以单独的显示在首页的某个区域，如图6-1和6-2所示。 Chapter 06 店铺收藏及客服区的设计 为了吸引顾客的注意，也会将一些宝贝图片、素材图片等添加到其中，达到推销商品和提高收藏量的双重目的。还可以使用GIF格式的图片，即使用帧动画制作的动态图片，这种闪烁的图片效果可以使其更容易引起顾客的注意，提高网店的收藏数量。 网店中的客服与实体店中的售货员具有相同的作用，但是在网店中如何快速的寻找到客服并进行询问，是客服区位置摆放和设计的关键。默认情况下，网店的客服与商品分类相邻，如图6-3所示，而随着网店装修的不断提升，越来越多的商家将客服放在了网店首页的中间或者底部位置，如图6-4所示。因为当顾客对网店首页浏览到一定程度时，客服区的及时显示会增加顾客询问的概率，从而提高网店的销售量。 Chapter 06 店铺收藏及客服区的设计 在客服区的设计中，商家会直接使用网店的聊天图标作为客服头像的图片，或者为了让客服区的设计与整个店铺的风格一致，会使用一些卡通的头像，或者真实的人物头像来对客服的形象进行美化，提高顾客对客服交流的兴趣，如图6-5和6-6所示分别为使用聊天图标和卡通头像作为客服图片的设计效果。 Chapter 06 店铺收藏及客服区的设计 在对网店的店铺收藏和客服区进行设计的时候，大多数会将这两个部分结合起来，因为店铺收藏和客服都会对网店的日后成交量产生较大的影响，这样的设计会向顾客展示出网店的完善售前售后服务，增强顾客对店铺的信心和认可度，如图6-7和6-8所示。 Chapter 06 店铺收藏及客服区的设计 图6-7 图6-8 6.1.2 赏析店铺收藏及客服区 店铺收藏的设计要清爽简单，能够吸引顾客的注意即可，而客服区的设计中有一点很重要，就是清晰的罗列出客服的图标，让顾客可以快速地点击并进行咨询，如图6-9和6-11所示为店铺收藏区和客服区的设计效果。 Chapter 06 店铺收藏及客服区的设计 6.2 古典风格收藏区设计 本案例是为服装店铺所设计收藏区，在如图6-13所示中可以看到画面使用了棕色、暗红色和米色作为主要的色彩，营造出一种古典怀旧的视觉效果。 Chapter 06 店铺收藏及客服区的设计 Chapter 06 店铺收藏及客服区的设计 [设计理念] 色彩搭配上使用了较为复古的米色和棕色，采用暗红色对重要元素进行突出表现； 使用米字格来对“收藏”两个字进行修饰，带来一定的历史感，能提高顾客对店铺的信任； 使用暗红色的服装剪影放在画左侧，能够直观的表现出店铺的商品信息。 [工具使用] 使用“图案叠加”、“颜色叠加”和“描边”样式修饰设计元素； 利用“横排文字工具”添加文字，并通过“字符”面板设置文字的属性； 通过“魔棒工具”创建选区，为选区创建颜色填充图层，由此改变图片的色彩。 Chapter 06 店铺收藏及客服区的设计 [主要操作步骤] 一、新建文档，双击“背景”图层对其进行解锁，接着为该图层添加上“颜色叠加”和“图案叠加”样式。 二、选择工具箱中的“矩形工具”，绘制出所需的线条。 三、添加文字。 Chapter 06 店铺收藏及客服区的设计 四、使用“圆角矩形工具”绘制形状，再对“描边”样式和“填充”选项进行编辑。 六、最后添加所需素材。 6.3 冷酷风格客服区设计 本案例是为某服饰设计的客服区，根据店铺名称“潮衣”将店铺风格定义为时尚、潮流的风格。使用了色调较暗的黑色和暗蓝色作为主色调进行创作，如图6-33所示可以看