《网页美工》11-店铺首页视觉设计

店铺首页视觉设计《网店美工》CONTENTSCOURSE认识淘宝首页制作方法制作要点123认识淘宝首页

首页设计

淘宝首页是淘宝专门为淘宝店铺以及天猫店铺的卖家打造的店铺形象展示窗口。定义电脑端首页认识淘宝店铺首页1、淘宝店铺首页定义NEXTNEXT认识淘宝店铺首页2、淘宝店铺首页尺寸要求名称尺寸要求文件大小支持图片格式设计建议淘宝首页

宽度：1920像素；

天猫店铺有效区域为990像素宽度；淘宝店铺有效区域为950像素宽度。无明确规定GIF、JPG、JPEG、PNG注意有效区域，有效区域是指不同型号的显示器的卖家都能看到和点击的区域，美工作图时必须把重要的部分放置在区域内。认识淘宝店铺首页2、店铺首页尺寸图示从示意图中，我们看到重要的信息应当尽量放在990px区域内，不能超出1400px。NEXT3、首页的作用3.1线下某品牌女装门面店铺认识淘宝店铺首页门头店招品牌海报商品展示NEXT3、首页的作用3.1淘宝某女装店铺首页认识淘宝店铺首页店招与导航首页调性大海报推荐分类与优惠近期活动海报产品细分分类店内热卖单品NEXTNEXT3、首页的作用3.3客户浏览过程客户的浏览过程买家首先到达的两个地方：宝贝页面、店铺首页

关键任务：建立信任=买家停留更长时间搜索页面宝贝页面A宝贝页面B宝贝页面C

宝贝页面D购买现在要做的工作首页认识淘宝店铺首页3、首页的作用3.4总结认识淘宝店铺首页NEXT3、首页的作用3.4总结认识淘宝店铺首页客户体验是留住客户的核心竞争力。在浏览网页的用户群中，往往只有一部分人才是真正的意向客户做好首页可以消除客户的购买疑虑，增强客户的粘度。NEXTNEXT4、普通首页与优质首页对比普通首页优质首页视觉无美感排版混乱文案信息混乱画面视觉协调统一文案信息清晰认识淘宝店铺首页品牌型首页营销型首页NEXT5、首页分类5.1按运营策略分类认识淘宝店铺首页5、首页分类5.1按运营策略分类认识淘宝店铺首页其他活动/大促的单独首页设计NEXT单向型首页曲线型首页NEXT5、首页分类5.2按布局方式分类认识淘宝店铺首页6、首页需要传达的信息认识淘宝店铺首页展示形象信息1234扩散和拼贴推荐活动服务提示、

公共提醒NEXT必备模块可选模块7、首页模块7.1首页模块分类认识淘宝店铺首页NEXT7、首页模块7.2必备模块店招、导航海报宝贝陈列页尾店招导航宝贝陈列页尾海报必备模块认识淘宝店铺首页NEXT店铺标志（店标LOGO）7、首页模块7.2必备模块认识淘宝店铺首页店招NEXT7、首页模块7.2必备模块认识淘宝店铺首页导航NEXT海报宝贝陈列页尾宝贝分类品牌文化活动预告关键字搜索营销重点可选模块当季热销分类橱窗新品预售7、首页模块7.3可选模块认识淘宝店铺首页NEXT宝贝分类以及关于我们品牌文化（或品牌故事）7、首页模块7.3可选模块认识淘宝店铺首页营销重点7、首页模块7.3可选模块认识淘宝店铺首页活动预告7、首页模块7.3可选模块认识淘宝店铺首页畅销关键字/关键字搜索7、首页模块7.3可选模块认识淘宝店铺首页客服模块首页客服模块详情页下方客服模块详情页右侧客服模块7、首页模块7.3可选模块认识淘宝店铺首页立体轮播全屏海报轮播首页950海报轮播详情页海报轮播7、首页模块7.3可选模块认识淘宝店铺首页当季热销7、首页模块7.3可选模块认识淘宝店铺首页按主题分类按促销分类按功能分类按材质分类分类橱窗7、首页模块7.3可选模块认识淘宝店铺首页新品预售7、首页模块7.3可选模块认识淘宝店铺首页新品预售店铺招牌宝贝分类/导航以及关于我们、品牌文化（或品牌故事）全屏海报（高端锚点海报或大促海报）营销重点客服服务立体轮播分享有礼分类橱窗当季热销根据店铺需要全部或部分选择数据导向做模块位置的分配合理设计优先度7、首页模块7.4布局建议认识淘宝店铺首页NEXT制作方法首页设计

制作方法NEXT

确定店铺定位步骤1搭建首页框架步骤2确定相关元素步骤31、首页设计流程

（1）淘宝首页前必须充分了解店铺的定位（产品、价格、消费人群、消费诉求等方面）

（2）确定设计思路和设计方向定位NEXT制作方法1、确定店铺定位1.1风格

高端、大气、上档次消费人群有较强的购买力，追求群体归属感。·经济、实用、货比三家不吃亏消费群体的购买力较弱，以加个优势为主导。设计

思路NEXT制作方法设计

方向1、确定店铺定位1.2设计构思制作方法1、确定店铺定位1.3首页风格展示NEXT图章、影印斯边、炭笔水彩画纸粉笔、炭笔炭精、绘图笔网状、铭黄渐变

根据节点、主题来制定首页的色调，更具有整体色调再进行拓展相近色，而不是任意去使用色彩。

决定整体页面色调在软件中画出定好的色块放于最顶上，从明度渐变制作3-5个色块，以便随时吸色填充，也可以定义到颜色库。

补色的用处从字面上理解的话即为补充颜色、丰富颜色。色调要统一，有变化。画面中主色调占70%，30%的补色，实际情况是由画面而定。

小习惯

合理利用补色NEXT制作方法1、确定店铺定位1.4首页颜色搭配制作方法2、搭配首页框架

2.1黄金比例分割店招是150Px的高度，天猫上框架在200Px，首焦高度控制在750Px内，最大高度不

超过一屏的高度910Px。

优惠券常规的尺寸高度在150Px，可在画面风格中决定高度，尽量尝试不同排版。产品在一屏中出现两行为佳，多则乱，少则空。

NEXT制作方法NEXT设计页面时候元素多则不易，在于精。根据主题进行思维拓展，联想与页面主题相关的元素。开始的时候，可以先打个草稿，写出相关的名词，多多益善，然后结合页面设计的实际情况，进行取舍再深入刻画。3、确定相关元素制作方法以花草为元素的女装首页3、确定相关元素NEXT以中国元素为主的化妆品首页制作方法3、确定相关元素NEXT制作要点海报设计

NEXT介绍顾客通过店招的链接地址可以从内页直达首页，店招只占据店铺150像素高度，但却起到了网店的门户作用，所以不容小觑。NEXT制作要点1、店招的视觉要点1.1店招介绍1、店招的视觉要点1.2店招作用1店招可以表明商店所售物品或服务项目等；2可以传递商店的经营理念以及品牌优势等；3可以展示出店铺的特价活动以及促销方式等；制作要点NEXT1、店招的视觉要点1.3尺寸要求图片名称尺寸要求文件大小支持图片格式设计建议店铺导航

高度：32像素

宽度：950像素

不限GIF、JPG、JPEG、PNG按新旺铺要求制作要点NEXT1、店招的视觉要点1.4店招分类品牌宣传为主产品推广为主活动促销为主制作要点NEXT1、店招的视觉要点1.5店招包含元素

店铺名

店铺LOGO

店铺slogan收藏按钮

关注按钮促销产品

优惠券活动时间

基底凸现和塑料效果

搜索框

店铺公告

网址

店铺荣誉

店招包含制作要点NEXT1、店招的视觉要点1.6店招制作要点视觉重点不易过多，将重点内容展示出来结合店铺现阶段情况（营销、配色、主推商品）凸显品牌特性用色简洁摒弃无意义的多元素制作要点NEXT2、导航的视觉要点2.1导航作用介绍介绍简单直观的导航不仅能提高网店的易用性，而且方便浏览者找到所需信息，有助于提高用户转化率。网店的导航是网店内容架构的体现，网店导航是否合理是网店易用性评价的重要指标之一。制作要点NEXT1、导航的视觉要点2.2导航分类图片导航按钮导航文字导航制作要点NEXT1、导航的视觉要点2.3制作要点1导航类目要明确清楚，以便卖家选择；2导航的文字与背景色要区别开；3导航与店招颜色要协调统一，不能过于花俏；制作要点NEXT2、海报的视觉要点2.1海报介绍介绍淘宝海报是淘宝专门为淘宝店铺以及天猫店铺的卖家打造的创意广告推广工具。制作要点NEXT2、海报的视觉要点2.2海报的作用NEXT客户的浏览过程买家首先到达的两个地方：宝贝页面、店铺首页

关键任务：建立信任=买家停留更长时间搜索页面宝贝页面A宝贝页面B宝贝页面C

宝贝页面D购买现在要做的工作首页制作要点2、海报的视觉要点2.3尺寸要求图片名称尺寸要求文件大小支持图片格式设计建议淘宝海报

高度：不设限但建议在600像素内。

宽度：全屏海报1920像素；

通栏海报950像素；右侧栏海报750像素无明确规定建议小于300KBGIF、JPG、JPEG、PNG促销宣传或品牌形象制作要点NEXT2、海报的视觉要点2.4海报分类产品海报促销海报制作要点NEXT2、海报的视觉要点2.5店招包含元素NEXT海报

构图文字

排版背景制作色彩协调海报组成要素制作要点2、海报的视觉要点2.6制作要点对齐让内容纵向、横向都有一条线隐形的参考线can'kao'l'x可以对齐。要么居中，要么底部。尽量确保页面上不要有一个元素，没有任何元素和它能够形成对齐的关系。亲密不要让所有内容都没有聚集地堆在一起，让那些关系比较亲密的内容聚合成一个区域，不要让一个banner上的区域超过4个。制作要点NEXT2、海报的视觉要点2.6制作要点简单质感千万不要加任何PS的滤镜、阴影、能不渐变就不渐变，因为已经不流行了，不要盲目使用各种样式。统一性如果要用图标，尽量选择样式统一，且能够保持你的优先级次序的图表。比如我们引导用户先看左边，再看右边，结果你在右边的图标里选择了一个血红的，可能用户的视线立马被吸引过来了。字体样式

不要让字体超过3种。尽量用宋体、黑体、方正黑体，不要用什么魏碑体、行楷等，一看就比较山寨。制作要点NEXT3、宝贝陈列展示区的视觉要点3.1宝贝陈列展示区介绍介绍宝贝陈列展示区是首页最重要的模块，可以帮助卖家快速地了解店铺宝贝以及影响买家的购买决策。制作要点NEXT3、宝贝陈列展示区的视觉要点3.2制作要点1商品类别明确：对同类商品进行陈列，可以使商品显得丰富、整洁、美观且视觉冲击力强。2突出产品：通过背景和商品的对比，突出产品信息。3主次分明：对于需要主推的商品或爆款商品，采用不同的排列方式或通过色彩对比，

做到重点突出，主次分明。4图文对应：对于混排的宝贝，描述和价格等文字需要对应商品，避免混淆。制作要点NEXT4、页尾的视觉要点4.1页尾介绍介绍店铺的页尾是店铺的最后一屏，这个部分的灵活性很大，但是很多卖家在装修时却忽略了也为这一重要部分。制作要点NEXT1店铺底部导航：便于用户选择。2返回顶部按钮：在页面过长的情况下，加上返回顶部链接以