淘宝天猫美工 第6章 淘宝店铺首页设计.pptx

第6章淘宝店铺首页设计;6. 1完整的店铺首页布局;6.1.1 店铺首页的设计要点 1. 店铺定位 店铺首页布局，必须以店铺定位为中心，统一设计风格, 然后在风格上突出店铺的主题和活动促销信息等。 2. 必备模块;3.产品视觉布局 若店铺的首页放置的商品图片很多，在设计时可以考虑 对产品进行层次划分，如主推商品、热销商品、新品上市等， 让顾客在浏览首页时能很快找到商品，避免视线繁杂引起购 物疲劳。常见的首页布局包括单向型和曲线型。;单向型：该布局是通过竖向、横向和斜向的引导，将信息 传达给顾客。竖向型的布局可以使页面产生稳定感且条理 分明，如图6-1所示；横向型的布局符合人们的阅读习 惯；斜向型的布局可以使画面产生层次感，增强视觉吸引 力。 曲线型：曲线型在淘宝店铺中是较为常见的一种布局方式, 以一定的曲线排列商品，可以使页面产生韵律感，引导顾 客视线随曲线移动，如图6-2所示。;图6-1;4.美观;6.1.2 熟悉店铺首页构成模块 以旺铺专业版为例，一个正常营业的店铺首页主要包括 店招、导航、海报、产品分类、客服旺旺、产品展示、店铺 页尾、店铺背景等，如图6-3所示。;店招;在进行店铺首页布局前，先了解首页上重要模块的功能。;悬浮活动导航：除了店招下的导 航栏外，有的店铺在页面中会设 置活动导航，随着顾客浏览的位 置的变化，活动导航将始终显示 在页面的侧方。如图6-5所示。;海报/轮播图：首页海报可以给人震撼的视觉效果，所以 可以通过在海报中进行视觉设计来表现店铺的活动；轮播 图是多张海报滚动播放组合，为了避免错过其他海报的信 息，建立轮播海报不超过3张。如图6-6所示。;新一代 HUAWEI MateBook 直降咼达600兀 享6期免息;优惠券和产品分类：优惠券的设置的可以带动部分顾客为 了 “满减”活动购买多件商品，提升连带率。而产品分类 则可以让顾客快速找到自己想要的商品，如图6-7所示。 产品展示：店铺首页对于产品的展示也是很有必要的，可 以将热销商品、主推商品和应季商品放在最上方，如果有 促销活动也可以将活动商品排在最上方，如图6-8所示。;图6-7;客服中心：店铺的客服组所占的高度不多，有些店铺将客 服组设置在店??上，有的则放在首页页面的最后。如果店 铺首页特别长，那一定要把客服组放在最显眼的位置，让 顾客一看就能看到，这样才能在顾客需要帮助时发挥作用。 店铺页尾：在PC端的店铺页尾模块，通常会放置“商品 分类〃 “回到顶部”以及“购物须知”等信息，如图6-9 所示。;2 试衣间 ikfe 巨^ 连衣裙 短裤］ 衬衫/雷纺衫仔棋休 打造你的专属衣柜;6. 2制作淘宝店铺店招;店招可以根据店铺销售的商品和店铺风格进行设计，可 以是文字也可以是图文组合。一般的店招包括店铺名称、店 铺logo、收藏和关注等。下面通过Photoshop制作零食店 铺的店招来具体介绍店招的制作，最终效果如图6-10所示。;【设计要点］ 店招是顾客进入店铺首页时，首先映入顾客视线的界面， 利用店招进行信息传达是店铺视觉设计的重要步骤之一，店 招的视觉表现主要分为以下几个方面。 店招风格：店招的风格要和店铺整体统一，同时也要和店 铺产品的风格有一定的关联性。 店招背景：店招左右两侧为店招的背景区域，在设计店招 后还需要对店招的背景进行相应设计。;＞店铺log。：好的店铺logo更能深入人心，并逐渐形成 品牌文化。 收藏和关注图标：在店招中加入店铺收藏和关注图标的链 接，可以留着更多潜在客户。 其他： 在店招中还可以添加优惠券、热卖商品、活动公告 和关键字搜索等。 告;6. 2. 1 绘制店招形状和添加文字 默认店招模块的尺寸为950X 120像素，下面通过实例来介 绍如何制作店招，其具体操作步骤如下。 ? STEP1新建一个尺寸为950X 120像素、分辨率为72像素 /英寸的的空白文件。 ? STEP 2将背景填充为淡黄色(RGB:251,242,169), 然后 将素材文件“logo.png”拖到到图像文件中，按【Ctrl+T】 组合键等比例缩放大小，将logo放在店招左侧，如图6-11 所示。;吃袋铺子;? STEP 3选择工具箱中的直线工具绘制竖线，设置填充颜 色为logo中文字的颜色（利用吸管工具吸取颜色），如 图6- 12所示。 ? STEP 4选择工具箱中的横排文字工具，在竖线右侧输出 文字，并设置字体为“微软雅黑”，颜色同为之前的红色, 按【Ctrl+T】 组合键缩放文字大小，如图6-13所示。;? STEP 5选择工具箱中的圆角矩形工具，在其工具属性栏 上设置半径为“20”像素，然后在文字下方绘制一个圆角 矩形。选择工具箱中的自定形状工具，选择心形形状并在 圆角矩形上绘