淘宝店铺首页设计_互联网_IT/计算机_专业资料

淘宝店铺首页设计讲师：寇老师认 识 淘 宝 店 铺 首 页一、淘宝店铺首页构成元素? 店铺页头（页头区） ：– 店招、导航? 活动促销（内容区） ：– 全屏海报、全屏轮播、优惠券? 店铺产品（内容区） ：– 产品分类、主推产品? 店铺页尾（页尾区） ：– 客服中心、购物保障、发货须知等二、淘宝店铺首页设计思路? 店铺页头– 页头店招放什么内容，页头导航总共需要几个导航分类内容，是 否需要放品牌文案，是否需要着重表现收藏店铺，是否需要放活 动内容等等。二、淘宝店铺首页设计思路? 活动促销：– 活动主题什么，内容是什么，文案的主次顺序，是否有需要重点 展示的产品等等。二、淘宝店铺首页设计思路? 产品分类：– 店铺产品总共有几大分类，页面从上至下的摆放顺序是什么样的， 每个分类模块里面放几个产品，产品是否需要主次区分，是用方 格矩阵还是更灵活的展示方式，单个产品是否需要突出展示价格 或折扣等等。二、淘宝店铺首页设计思路? 主推产品：– 主推产品有哪些，它们有怎样的区别和定位，它们的推介顺序是 什么样的，它们的核心卖点是什么，是否需要突出价格和折扣等 等。二、淘宝店铺首页设计思路? 店铺页尾：– 页尾模块一定要符合店铺风格和主题，色彩要一致；内容上可添 加消保、7天无理由退换货等保障服务、客服联系方式、商品购物 流程等。

三、淘宝店铺店招设计技法天猫店招990PX*120PX（不含导航） 天猫店招990PX*150PX（含导航） 淘宝店招950PX*150PX（含导航）三、淘宝店铺店招设计技法（一）店招设计思路：– 以品牌宣传为主的类型：一般有着雄厚的实力， 给力的产品，想要打造自己的品牌。? 名称、LOGO、关注、收藏等– 以活动促销为主的店铺：薄利多销，店招风格 视活动主题来定，营造出一个活动氛围。店招 上适当的加入一些红包或者优惠券领取的按钮。– 以产品推广为主的店铺：增加店铺主推产品的 销量，通常在店招上放上两三款推广的产品。三、淘宝店铺店招设计技法（二）店招设计原则：– 要直观明确的告诉客户自己店铺是卖什么的， 表现形式最好是实物***– 要直观明确的告诉客户自己店铺的卖点（特点、 优势、差异化）。三、淘宝店铺店招设计技法（三）店招设计要点：– 店铺名字? 告诉客户自己是卖什么的，品牌店铺可以标榜自己 的品牌– 实物***? 直观形象的告诉客户自己店铺是卖什么的– 产品特点? 直接阐述自己店铺的产品特点，第一时间打动客户， 吸引客户– 店铺（产品）优势和差异化? 告诉我的店铺和产品的优势以及和其他的店铺的不 同，形成差异化竞争三、淘宝店铺店招设计技法（四）店招制作规范、流程：1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分? 左边或者中间放LOGO，LOGO之下放品牌词或广告词 ? 中间留空或放品牌的相关文字取名，或放其它 ? 右边放收藏店铺等相关内容 ? 之下是导航：首页，所有宝贝等3. 配色方案：? LOGO提取颜色 ? 产品本身提取颜色 ? 产品联想属性提取颜色 ? 颜色不超过3种三、淘宝店铺店招设计技法（四）店招制作规范、流程：4. 规范字体：? 一般不超过3种字体 ? 重点部分加粗突出 ? 字体大小使用得体5. PS排版：? 越是简约大气的页面，元素务必不要太多，清爽 舒适的页面多留白6. 修改定稿：三、淘宝店铺店招设计技法（四）店招制作规范、流程：7. ***切割优化：? Photoshop切片 ? Dreamweaver热区切割优化8. 上传***至淘宝***空间 9. DW添加***超链接 10. 上传网页文件 11. 发布四、淘宝店铺首页海报设计技法这是1920PX*500PX的全屏海报 这是1920PX*600PX的全屏海报四、淘宝店铺首页海报设计技法这是950PX*400PX的普通海报四、淘宝店铺首页海报设计技法（一）海报设计思路：1. 海报要与大色调统一? 在设计海报时，先观察大环境，海报设计尽量避 免与主色调产生强烈对比，必须要用对比色设计 海报时，要考虑降低纯度或明度四、淘宝店铺首页海报设计技法（一）海报设计思路：2. 观察产品亮点定背景色? 背景选择上不能单纯当海报设计，为了做出一张 比较漂亮的***，最好要做到背景与产品的呼应? 在海报设计中，大体分为两种风格：– 将拍摄的图直接用作背景，板式排列活动文案 – 将产品提取出来，背景根据产品灵活变动，再配合板式四、淘宝店铺首页海报设计技法（一）海报设计思路：3. 文案策划排版式? 要明确自己的海报是给人看的，过度使用英 文是不合适的店铺名字背景***，可将英文作为中文的辅助元素四、淘宝店铺首页海报设计技法（一）海报设计思路：4. 合理板式突出主题? 产品***展示与摄影***展示不同。

摄影作品突 出原生态，添加文字是为了更好的突出画面。设 计作品是画面烘托文案主题的，应将主题文案放 在首位重点突出模块式编排四、淘宝店铺首页海报设计技法（二）常见海报主题方案1. 店铺活动：促销活动? 品牌团：– 官方活动聚划算，可提高品牌的曝光度? 官方季节性活动：– 双十一/双十二活动/年中大促? 店铺常规活动：换季、节日– 符合当下季节或者节日、特殊日子的相关题材? 店铺常规活动：– 周年店庆、清仓甩卖四、淘宝店铺首页海报设计技法（二）常见海报主题方案2. 单品推广? 单品聚划算、爆款– 适合店铺中推成爆款或者想要提高某款产品的转化率? 新品上市、特价促销– 适用于新品上市，并且打算全力推广的产品四、淘宝店铺首页海报设计技法（二）常见海报主题方案3. 品牌宣传? 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。四、淘宝店铺首页海报设计技法（三）海报设计原则： “3”原则– 3元素：? 背景 ? 文案：名称、卖点、价格、其他 ? 产品信息– 3段文字：主标题、副标题、附加内容 – 3种字体：不能超过3种字体? 主标题可用粗大字体，副标题略小– 3三种颜色：? 70%主色，25%辅助色， 5%点缀色– 30%以上留白：高端、大气、上档次多留白 – 0.3秒读完：四、淘宝店铺首页海报设计技法（四）海报常见构图板式：1. 左文右图： 2. 左图右文： 3. 上文下图或上图下文： 4. 多栏分布：常见两边图中间文字 5. 背景为风景图： 6. 展示多种产品： 7. 斜切式构图：四、淘宝店铺首页海报设计技法1. 左文右图： 字体上粗 下细、上 大下小， 上下主次 分明，形 成对比。

文案四四 方方架构 非常稳重， 非常平衡。四、淘宝店铺首页海报设计技法2. 左图右文： 字体上粗 下细、上 大下小， 下面的价 格打折部 分排版很 稳重丶结 实。四、淘宝店铺首页海报设计技法3. 两边图中 间文字： 一般利用 近景、远 景的*** 产生对比 和呼应 （多见模 特海报）。四、淘宝店铺首页海报设计技法4. 背景为风 景图：利 用半透明 的底框， 然后再在 里面排文 案，避免 文字模糊 与混乱。四、淘宝店铺首页海报设计技法5. 展示多种产 品：当海报 上要放置过 多的促销产 品，可以采 用这种版式。 产品平行排 版，中间利 用半透明的 框展现文案。四、淘宝店铺首页海报设计技法6. 斜切式构图： 斜切式构图 会让画面显 得时尚，动 感活跃。但 是画面平衡 感不是很好 控制。一般 文案倾斜角 度不超过30°， 文字往右上 方倾斜便于 阅读 。五、淘宝店铺页尾设计技法五、淘宝店铺页尾设计技法? 页尾的用处：让店铺页面的结构更加完整，页尾模块相对页头会少，因此利用好页尾能为店铺 起到良好的分流作用，而且页头和页尾属于共同 展示页面，无论打开哪个详情页都会显示。五、淘宝店铺页尾设计技法页尾设计一：客服联系方式。

客服联系方式 很多店铺会设置在左右两边，而设置到页 尾的目的就是页头和页尾属于共同页面， 增加展示机会，方便顾客咨询。五、淘宝店铺页尾设计技法页尾设计二：购物保障以及发货须知。目的 让顾客对店铺增加信任，而且发货须知是 一定的，淘宝店铺发货时间由店长定的，因此统一的发货时间让店长节省更多时间 。五、淘宝店铺页尾设计技法页尾设计三：返回首页、购物流程。什么叫 用户体验？这就是了！不是每一个用户都 了解网购流程店铺名字背景***，这么贴心的指引哪里能找 到。五、淘宝店铺页尾设计技法页尾设计四：友情链接。这个很好理解，什 么合作店铺，姐妹店铺，同盟之类的。五、淘宝店铺页尾设计技法页尾设计五：关于我们。讲解店铺的文化、 特色、内涵等；店铺加入哪些保障服务等 。