资源简介

(共42张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
应用篇
第 9 章
PC端电子产品店铺装修
9.1　电子产品 PC 端店铺首页的设计与制作
9.3　设计与制作平板主图视频
9.2　设计与制作平板详情页
9.4　电子产品PC端店铺装修
9.4　电子产品 PC 端店铺装修
9.4.1　店铺素材管理
9.4.2　店铺布局管理
9.4.3　装修店铺
步骤 1　打开淘宝网官方网站，然后单击该网站页面右上角的“卖家中心”文字超链接，进入登录页面，接着在该页面中输入店铺账号，进入“千牛卖家工作台”页面。
9.4.1　店铺素材管理
“千牛卖家工作台”页面
步骤 2　单击“千牛卖家工作台”页面左侧列表中的“商品”，然后在其下拉列表中选择“图片空间”文字超链接进入“素材中心”页面。
9.4.1　店铺素材管理
“素材中心”页面
步骤 3　单击“素材中心”页面右上角的“新建文件夹”按钮，在打开的“新建文件夹”对话框“分组名称”编辑框中输入“首页”，单击“确定”按钮新建“首页”文件夹。
双击“首页”文件夹将其打开，单击页面右上角的“上传”按钮，然后在打开的“上传图片”对话框中单击“上传”文字超链接，接着在打开的“打开”对话框中选择“images”文件中的首页素材（9.1 节的切片），单击“打开”按钮上传图片，最后单击“确定”按钮，首页素材上传完成
9.4.1　店铺素材管理
9.4.1　店铺素材管理
单击“上传”文字超链接
上传首页素材
步骤 4　采用上述方法新建“商品详情页”文件夹并上传 9.2 节的切片。
9.4.1　店铺素材管理
新建“商品详情页”文件夹
步骤 5　单击“素材中心”页面左侧列表中的“视频”按钮，然后单击页面右上角的“上传”按钮，接着在打开的“上传视频”对话框“上传到”下拉列表中选择“PC 电脑端视频库”项后单击“上传”按钮，最后在打开的“打开”对话框中选择 9.3 节制作完成的平板主图视频，并设置视频标题和封面图后单击“确认”按钮，上传视频。
9.4.1　店铺素材管理
步骤 6　至此，店铺部分素材上传完成。
9.4.1　店铺素材管理
设置视频标题与封面图
步骤 1　回到“千牛卖家工作台”页面，单击左侧列表中的“店铺”，然后在其下级列表中选择“PC 店铺装修”文字超链接进入“基础页”设置页面。
9.4.2　店铺布局管理
“基础页”页面
步骤 2　单击“基础页”设置页面中“首页”右侧的“装修页面”文字超链接进入首页的“页面编辑”页面，然后单击“布局管理”按钮，进入“布局管理”页面。
9.4.2　店铺布局管理
“布局管理”页面
步骤 3　将“基础模块”中的“全屏轮播”模块拖入布局单元中。
9.4.2　店铺布局管理
将“全屏轮播”模块拖入布局单元中
步骤 4　单击“添加布局单元”文字超链接，从弹出的“布局管理”对话框中选择相应的布局样式，添加布局单元，然后将“自定义区”模块拖入其中。
9.4.2　店铺布局管理
添加布局单元并添加模块
步骤 5　采用上述方法继续添加布局单元并添加模块。
9.4.2　店铺布局管理
店铺布局效果
步骤 6　将光标移至“布局管理”页面右上角的“发布站点”按钮上，并在其下拉列表中选择“立即发布”项，然后在打开的“发布”对话框中单击“确认发布”按钮，确定店铺布局。
9.4.2　店铺布局管理
发布店铺布局
步骤 1　单击“布局管理”按钮左侧的“页面编辑”按钮，进入首页“页面编辑”页面，此时页面效果如图所示。
9.4.3　装修店铺
首页“页面编辑”页面
1．页头模块展示
步骤 2　将光标移至店铺招牌位置，然后单击其右上角的“编辑”按钮，并在打开的“店铺招牌”对话框中选中“自定义招牌”单选钮，进入“自定义招牌”设置区。
“店铺招牌”对话框“自定义招牌”设置区
9.4.3　装修店铺
步骤 3　单击“店铺招牌”对话框中的“插入图片空间图片”按钮 ，然后在打开的下拉面板中选择图片空间中的店铺招牌图片，接着依次单击“插入”和“完成”按钮，插入店铺招牌素材，最后单击“保存”按钮，此时店铺招牌将在首页中展示。
插入店铺招牌素材　
9.4.3　装修店铺
店铺招牌在首页中的展示效果
步骤 4　单击页面左侧列表中的“页头”按钮，然后在打开的设置面板中设置页头背景颜色。
设置页头背景颜色
9.4.3　装修店铺
步骤 5　单击“导航条”右上角的“编辑”按钮，打开“导航”对话框，然后单击其中的“添加”按钮，打开“添加导航内容”对话框，单击其中的“管理分类”文字超链接，打开“分类管理”页面，单击页面左上角的“添加手工分类”按钮，并在激活的条目编辑框中设置导航分类名称。
“添加导航内容”对话框
9.4.3　装修店铺
设置导航分类名称
步骤 6　设置导航分类名称后单击页面右上角的“保存更改”按钮，回到“添加导航内容”对话框。勾选导航分类名称左侧的复选框，单击“确定”按钮返回到“导航”对话框，最后调整导航分类的排列顺序。
添加导航内容并调整其顺序
9.4.3　装修店铺
步骤 7　单击“导航”对话框中的“显示设置”按钮，然后在其编辑框中输入代码，最后单击“确定”按钮，将导航展示到首页中。
输入代码
9.4.3　装修店铺
导航内容在首页中的展示效果
步骤 1　在“页面编辑”页面中单击“全屏轮播”右上角的“编辑”按钮，然后在打开的“全屏轮播”对话框中单击 按钮，从弹出的下拉面板中选择图片空间中的店铺海报图片（要注意的是，该模块至少要添加两幅全屏海报），最后单击“保存”按钮将店铺海报展示到店铺中。
添加布局单元并添加模块
9.4.3　装修店铺
2．全屏轮播模块与自定义模块展示
步骤 2　单击“自定义区域”右上角的“编辑”按钮，在打开的“自定义内容区”对话框中选中左上角的“不显示”单选钮，然后选择图片空间中的新品上市标题图片，接着单击“确定”按钮，将新品上市标题展示到首页中。
将新品上市标题展示到首页中
9.4.3　装修店铺
步骤 1　要想在“宝贝推荐”模块中展示商品，需要先发布宝贝。首先回到“千牛卖家工作台”页面，然后单击该页面左侧列表中的“商品”，接着在其下拉列表中选择“发布宝贝”文字超链接，进入“淘宝网商品发布”页面。
“淘宝网商品发布”页面
9.4.3　装修店铺
3．宝贝推荐模块展示
步骤 2　在“上传商品主图”设置区单击“商品主图”中的 图标，然后在打开的下拉面板中选择图片空间中的商品主图图片。
上传商品主图
9.4.3　装修店铺
步骤 3　在“确认商品类目”设置区设置商品发布类目，然后单击“下一步，完善商品信息”按钮，进入“完善商品信息”设置页面。
确认商品类目
9.4.3　装修店铺
步骤 4　在商品“基础信息”设置区如实填写商品基本信息。要注意的是，加“*”编辑框为必填框，只有正确填写后，商品才能成功发布。
填写商品基本信息
9.4.3　装修店铺
步骤 5　采用上述方法在商品“销售信息”“支付信息”“物流信息”设置区如实填写商品相关信息。
9.4.3　装修店铺
上传主图视频
9.4.3　装修店铺
步骤 6　在“图文描述”设置区单击“主图多视频”中的 图标，页面右侧会弹出“选择视频”设置面板，单击其中的“主图视频”
图标，从打开的对话框中选择平板主图视频，最后单击“确认”按钮上传主图视频。
上传平板详情页图片
9.4.3　装修店铺
步骤 7　单击“详情描述”中的 图标，然后从打开的“图片空间”对话框中选择平板详情页相关图片，接着单击“确认”按钮返回到“淘宝网商品发布”页面，最后单击页面底部的“发布”按钮发布商品。
步骤 8　回到首页“页面编辑”页面，单击“宝贝推荐”右上角的“编辑”按钮，然后从打开的“宝贝推荐”对话框中设置商品展示属性，最后单击“保存”按钮将商品展示到首页中。
设置商品展示属性
9.4.3　装修店铺
步骤 9　采用上述方法，将优惠券、分类导航和页尾等展示到店铺首页中，最后将光标移至页面右上角的“发布站点”按钮上，并在其下拉列表中选择“立即发布”项，发布店铺，店铺首页效果如图所示。采用上述方法发布其他商品。
电子产品 PC 端店铺首页装修后的效果
9.4.3　装修店铺
课堂小结
本章实训 ——装修家居用品 PC 端店铺
本实训以家居用品店铺首页设计、制作与装修为例，练习与巩固 PC 端店铺装修的方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch9”文件夹中的“家居用品 PC 端店铺首页 .psd”文件。
装修家居用品 PC 端店铺
家居用品 PC 端店铺首页效果图
（1）店铺布局规划。
（3）店铺风格定位。
1．店铺装修规划
（2）店铺配色方案确定。
装修家居用品 PC 端店铺
（1）根据布局规划制作店铺首页，并根据首页风格和商品的属性制作商品详情页、商品短视频等，然后将店铺首页、商品详情页进行切片。
装修家居用品 PC 端店铺
2．店铺装修
（2）将制作完成的素材上传到店铺后台，然后根据效果图对店铺进行布局，最后将制作的店铺首页、商品详情页、商品短视频展示到店铺中。
装修家居用品 PC 端店铺
作业布置
PC端和移动端商品详情页设计的区别有哪些？
谢谢观看

展开更多......

收起↑