第七讲：网店首页设计与装修

电子商务基础（课程）项目三网店装修网店首页设计与装修第七讲一、复习次课内容1.网店信息应从哪些方面定位？2.PC端网店装修基础有哪些？3.移动端网店装修注意事项？4.移动端页面基础设置有哪些？5.移动端网店装修常用模块有哪些？应如何管理移动端模块？小测验1.中国最大的第三方品牌及零售平台是（

）。A.淘宝

B.天猫

C.拼多多

D.京东2.根据业务范围不同，B2B电子商务平台可划分为综合性B2B和垂直型B2B，以下属于垂直型B2B平台的是（）。3.淘宝网个人开店要求年满（）周岁。A.18B.12C.16D.20A.中国化工网

B.聪网

C.阿里巴巴

D.环球资源网4.商品定价要考虑的因素有（）。A.商品款式划分B.动因素C.商品成本因素D.市场竞争5.针对拼购兼社交渠道“玩家”的京喜平台，店铺类型有三种，分别是（）。A.专卖店B.专营店C.自营店D.旗舰店小测验1.中国最大的第三方品牌及零售平台是（B）。A.淘宝

B.天猫

C.拼多多

D.京东2.根据业务范围不同，B2B电子商务平台可划分为综合性B2B和垂直型B2B，以下属于垂直型B2B平台的是（A）。3.淘宝网个人开店要求年满（C）周岁。A.18B.12C.16D.20A.中国化工网

B.聪网

C.阿里巴巴

D.环球资源网4.商品定价要考虑的因素有（ABCD）。A.商品款式划分B.动因素C.商品成本因素D.市场竞争5.针对拼购兼社交渠道“玩家”的京喜平台，店铺类型有三种，分别是（ABD）。A.专卖店B.专营店C.自营店D.旗舰店网店首页的布局1.网店首页应如何布局？2.网店首页的设计方法有哪些？3.网店首页的设计过程有哪几步？4.什么是店标（Logo）？店标展现位置一般放在哪里？5.店标展现形式有哪几种？店标设计原则有哪些？6.什么是Banner？Banner的作用有哪些？7.Banner设计要点有哪些？Banner排版布局有哪几种？Banner视觉文案设计有哪几种？8.高点击率主图的呈现特点有哪些？高点击率主图优化注意事项有哪些？高点击率主图的构图方法有哪些？一、网店首页的布局

一网店首页的布局网店首页的布局可根据产品和营销不断变化，同一个网店在不同的节日也会设计不同的布局。如2021年双11期间朴西天猫旗舰店的首页，整体采用小清新颜色体系，布局了店招、海报、优惠活动、商品列表、分类、页尾模块。二、网店首页的设计方法

二网店首页的设计方法首先采用Photoshop软件对首页整体完成商品图片效果设计后，用切片工具按模块切开，利用“文件->导出->存储为web格式”功能，保存格式为“仅限图像”后生成一个名为images的文件夹，把images里面的图片上传到图片空间。打开千牛卖家后台的店铺装修里进行模板拼接设置上传。这种方法优点是在Photoshop中进行整体设计，整个首页风格统一拼接精确。1.采用Photoshop设计二网店首页的设计方法首先采用Photoshop软件对首页整体完成商品图片效果设计后，用切片工具按模块切开，利用文件菜单中的“存储为web格式”功能，保存格式为“HTML和图像”后生成一个名为images的文件夹和一个网页，把images里面的图片上传到图片空间。

其次将生成的网页在Dreamweaver软件打开，分别给不同的切片加上商品的连接，商品链接可从淘宝图片空间获取对应的图片的地址连接，完成以后直接复制代码，在千牛平台的店铺装修里进行模板拼接设置上传，将代码粘贴到网店首页模块的源代码中即可。

2.采用Photoshop编辑和Dreamweaver代码组合设计二网店首页的设计方法采用Photoshop中进行商品图片处理后，将图片上传到图片空间，在千牛平台的店铺装修里装修市场中提供了大量的设计模板可以选择使用，根据模板灵活拼接设置上传，图片和链接都在网站在线完成。利用这种方法缺点是装修模板需要按月付费，优点是操作简单，有很多现成的模板可以套用。

3.采用Photoshop编辑和装修市场模板组合设计三、网店首页的设计过程

三网店首页的设计过程网店首页整体效果设计1在Photoshop软件中进行首页的设计,注意各模块要按淘宝店铺装修尺寸设计,考虑到卖家端不同的屏幕尺寸,请尽量将核心内容放在图片居中的区间内,店招、海报产品、商品要放置在页面中间950px范围内。三网店首页的设计过程网店首页整体效果设计1应用参考线工具和切片工具,对效果图进行多次切片,最终成形多个切片图,如图，将切片后的图片上传到图片空间。三网店首页的设计过程店铺后台模块上传2打开千牛后台,进入店铺装修,选择PC店铺装修中的首页,点击装修页面,在模块列表中选择布局管理功能,通过拖动左侧模块,将页面布局和首页相匹配,其中全屏海报用到的是全屏宽图模块、小海报用到的是图片轮播模块,商品展示都用自定义内容区模块。三网店首页的设计过程店铺后台模块上传2进入图片空间,找到店招图片下方的复制链接按钮,将图片在淘宝平台的存储地址粘贴到剪贴板,转换到店铺装修的页面编辑页面,选择店招模块的编辑功能,选择自定义招牌选项,点击插入图片按钮,在弹出的图片页面中,将从图片空间选择图片,确定后即完成店招设置。（1）网店首页店招设置三网店首页的设计过程店铺后台模块上传2选择页头模块,将页头背景图更换,选择横向平铺,使店招两边颜色和店招统一。选择页面模块,将页面背景色设置为#003663，并将显示功能打勾。（2）网店首页页头设置三网店首页的设计过程店铺后台模块上传2全屏海报需使用全屏宽图模块实现。点击全屏宽图模块右上角的编辑按钮,在弹出的对话框中,选择所需的图片地址和链接地址,注意图片宽要大于1920像素。（3）全屏海报设置三网店首页的设计过程店铺后台模块上传2在自定义区编辑页面中选择插入表格按钮,在弹出的页面中设置相应的行、列、宽度、边框等参数，利用表格作为图片的容器。将光标定位在单元格内,选择图片按钮,插入相应的图片,并设置相应的图片地址和链接地址,注意自定义区的显示标题设置为不显示。（4）商品展示模块设置四、店标（Logo）设计店标展现位置1店标（Logo）设计店铺Logo是识别店铺的标志，把店铺的形象与概念转化为视觉印象。代表店铺的风格、品位，起到宣传的作用。要能够配合市场对消费者进行适当的视觉刺激和吸引，更加人性化，更有针对性。华为Logo雷士照明Logo小米Logo店标（Logo）设计——店标展现位置PC端店铺店招PC端店铺搜索页店标（Logo）设计——店标展现位置移动端店铺首页移动端店铺搜索页店标展现形式2店标（Logo）设计——店标展现形式纯文字Logo纯图形Logo图文结合Logo店标设计原则3店标（Logo）设计——店标设计原则原创性统一性与店铺风格一致目标顾客群界定清晰产品和标志具备统一性适合网店风格清晰度高素材无版权纠纷店标（Logo）设计——店标设计原则易识别性合法性符合《电子商务法》符合新《广告法》遵守法律法规简单且易识别保持视觉平衡讲究线条流畅五、Banner设计Banner概述1认识BannerBanner指的是网店页面的横幅广告，也是店铺风格最直观的展现位置，对于营造氛围起着巨大的作用。淘宝、速卖通店铺中的首页焦点轮播图、促销海报、商品推荐和商品焦点图采用的都是Banner的形式。因为用途广泛，所以Banner成为了网店产品信息传播的最主要途径之一，也是店铺吸引流量和提高转化率的重要工具。Banner的作用第一视觉：吸引

第二视觉：告诉受众“这是什么”第三视觉：怎么找我Banner设计要点2Banner设计要点图像清晰风格统一定位精准主题明确首先要根据推广目的确定主题，推广的目的不同，Banner的表现形式也就不同网店装修的所有元素都要服务于页面的整体视觉风格，配色和字体也要遵守视觉识别规范主要是对于消费群体和价格的定位有关视觉设计的一切图片质量都必须保证是高品质的Banner排版布局3Banner排版布局采用左图右文或右图左文的两栏结构进行布局。布局方式结构稳重、平衡，商品展示与文案宣传并重，容易让浏览者产生视觉焦点，界面效果强烈且突出两栏结构上下结构属于两栏结构布局的一种，这种布局方式结构稳定，而且可以形成一个明确的视觉焦点，比较容易突出主题上下结构Banner排版布局更具层次感，服饰、鞋包类需要模特展示的商品适合使用三栏式结构，这种布局方式通常是将文案放在中间，用一侧的近景模特与另一侧的远景模特产生对比和呼应三栏结构组合式结构是常规三栏结构的一种变化，这种布局方式减少了文案的占用面积，用更多的篇幅展示商品，相对来说，更适合用于促销活动海报组合结构Banner排版布局倾斜结构斜切结构的布局会让画面显得时尚且具有动感。有的时候我们需要让画面平衡，而其他一些时候我们需要破坏平衡来吸引消费者的注意Banner视觉文案设计4Banner视觉文案设计一张优秀的Banner需要一个出色的标题，如果主标题不能吸引消费者的眼球，消费者就会失去继续访问页面的意愿，从而离开页面，增加店铺的跳失率标题抓住商品鲜明的特点，置于广告画面的主要视觉部位，使消费者在接触画面的瞬间立即感受到其独特性，引起消费者的视觉兴趣，达到刺激消费者购买欲望的目的文案创意Banner视觉文案设计网店Banner往往占据网店的核心位置，为了吸引消费者的注意，通常会与社会流行的热点话题、热门影视剧等相联系。热点话题高点击率主图的呈现特点六、高点击率主图的构图技巧高点击率主图优化注意事项高点击率主图的构图技巧

2

1

3知识目标了解高点击率主图的重要性；了解高点击率主图的优化注意事项；能力目标掌握高点击率主图的特点；掌握高点击率主图的构图技巧；高点击率主图的呈现特点

一高点击率主图的呈现特点这种图只呈现商品完整外观、细节或者附带一些赠品等，以商品本身为主体。能快速引起买家的注意，让买家直观的看到商品款式，颜色，卖相等信息，适用于买家对于外观有追求的类目，比如服饰，首饰、玩具等类目。1.以商品本身为主体，呈现商品属性一高点击率主图的呈现特点这种图不仅会呈现商品本身，还会出现环境的图片信息，来配合商品本身。把商品放在具体的使用场景中，能够让买家产生联想，拉进买家与商品的距离，刺激买家进行点击，比如家居用品、母婴用品等。2.通过环境配合，呈现商品使用场景一高点击率主图的呈现特点这种图会展示商品使用后的效果图或对比图等，突出商品的功效、特性、卖点，引起买家心里共鸣，激起买家购买欲望。如为了展现置物架的承重特性，图片设计成好几个成年人趴在上面；瓷砖清洁剂图片的设计让买家能够感受到迅速的去污功效。3.通过效果展示，凸显商品功能或特性一高点击率主图的呈现特点图片设计成通过展示买家秀或者买家的好评，提升顾客对产品的使用信心；或者设计成明星代言，吸引买家的注意，引导买家进行点击。4.通过使用者的评价，提升买家对商品的信任度高点击率主图优化注意事项

二高点击率主图优化注意事项大多数顾客都会被高质量的图片吸引，进而点击并且进入店铺浏览并购买，因此主图一定要清晰和精美。1.主图的质量一定要高2.主图中要体现出商品关键信息主图的作用不仅仅只是美观，更多的是在于体现出商品关键信息，即商品的主要关键词（进店流量最大的关键词），它直接影响主图的点击率。二高点击率主图优化注意事项

主图上面覆盖大量的文字，使得产品变得很难识别，而且整幅图看起来杂乱不堪，就像墙上贴满了小广告，这类主图形式就被称之为牛皮癣主图。3.拒绝牛皮癣主图高点击率主图的构图技巧

三高点击率主图的构图技巧左右构图法1

左右构图是文字与图片相结合的一种方式，一般文字放在左侧，图片放在右侧，文字与图片的比例为1：2。这种构图方法的优点是卖