资源简介

(共57张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
基础篇
第 1 章
认识网店美工与店铺装修
1.1　初识网店美工
1.3　店铺装修规划
1.2　速识店铺装修
1.4　店铺装修赏析
章 | 前 | 导 | 读
随着电子商务的不断发展，网上购物已经成为人们常用的购物方式之一。对于消费者而言，在浏览网店时，合理的店铺布局、协调的色彩搭配、与商品属性相符的店铺风格等能为其提供良好的浏览体验，进而刺激其购买欲望，迅速达成交易。由此可见店铺装修至关重要。
为了帮助大家更好地认识网店美工和学习店铺装修，本章将介绍网店美工的能力要求与岗位职责，店铺装修的作用、基本原则和基本流程，以及店铺装修规划。
知 | 识 | 目 | 标
了解网店美工的能力要求与岗位职责。
了解店铺装修的作用、基本原则和基本流程。
掌握店铺的典型布局、配色技巧和常见的装修风格。
技 | 能 | 目 | 标
能够搜集并分析不同旺铺的布局、配色方案和装修风格。
能够独立搜索并了解网店美工的发展前景。
素 | 质 | 目 | 标
增强自主学习、探究学习的意识。
通过旺铺装修赏析，提升观察事物的能力和审美能力。
提高网络素养，学会利用网络搜集信息、整理信息。
增强爱国意识，厚植家国情怀。
1.1　初识网店美工
1.1.1　网店美工简介
1.1.2　网店美工的能力要求与岗位职责
1.1.1　网店美工简介
网店美工是随着电商企业的发展而兴起的职业，负责网店的整体布局规划，店铺首页、商品详情页等页面的设计、制作与展示，以及商品图片处理等工作。其工作能有效提升店铺和商品的美观度、观赏性，从而吸引消费者的关注，进而提高商品点击率和成交转化率。
1.1.2　网店美工的能力要求与岗位职责
1．能力要求
一名合格的网店美工要具有艺术表现能力和适应消费者的能力。
艺术表现能力体现在两个方面：一是艺术功底；二是艺术创作的能力。
适应消费者的能力是指通过网店页面准确地向消费者传达商品的特点并挖掘消费者真实需求的能力。其具体表现为：通过图片、文字和色彩搭配等，表达出商品的独特性； 从运营的角度去思考，提升商品点击率和成交转化率等。
2．岗位职责
1.1.2　网店美工的能力要求与岗位职责
（1）装修店铺。
（2）美化商品图片。
（3）设计促销活动页面。
（4）处理网店页面图片的减色、切片与压缩。
课堂小结
1.2　速识店铺装修
1.2.1　店铺装修的作用
1.2.2　店铺装修的基本原则
1.2.3　店铺装修的基本流程
1.2.1　店铺装修的作用
（1）激发消费欲望，提高成交率。
（2）提升品牌形象。
1.2.2　店铺装修的基本原则
（1）符合商品的属性及行业特征。店铺装修前，一定要明确商品的属性（如尺寸、大小、颜色、功能等）及行业特征，在此基础上选择店铺装修时所用的色彩、插图等。
图 1-1　五金制品店铺中的海报
1.2.2　店铺装修的基本原则
（2）布局合理。店铺布局一定要主次分明，确保各模块之间搭配协调，以获得视觉舒适的页面效果。
1.2.2　店铺装修的基本原则
（3）色彩搭配协调。协调的色彩搭配能给人赏心悦目的感觉。通常，在店铺装修时，避免采用纯度过高的单一色彩，否则容易造成视觉疲劳；一旦确定主色，其他颜色的应用都必须与主色高度协调，以获得和谐统一的页面效果
（4）商品分类明确。明确的商品分类能帮助消费者快速找到需要的商品，大大提升消费者的购物体验。
图 1-2　配色杂乱的店铺首页（局部）
图 1-3　配色协调的店铺首页（局部）
1.2.2　店铺装修的基本原则
1.2.3　店铺装修的基本流程
为了让大家快速了解店铺装修，本节简单介绍一下店铺装修的基本流程，如图 1-4所示。要注意的是，店铺装修的流程不是固定的，应结合实际情况做出合理的调整。
图 1-4　店铺装修的基本流程
1.2.3　店铺装修的基本流程
（1）店铺装修的前期准备。
（2）店铺装修规划。
（3）店铺装修。
课堂小结
1.3　店铺装修规划
1.3.1　店铺布局
1.3.2　店铺配色方案
1.3.3　店铺风格
1.3.1　店铺布局
店铺装修中涉及的页面类型较多，每类页面都有各自的功能和设计要求，其中最关键的就是店铺首页和商品详情页，它们在商品销售过程中发挥着重要作用。
1.3.1　店铺布局
（1）店铺首页。店铺首页是店铺的门面，代表着店铺的形象，它的装修效果会影响消费者对店铺的第一印象。店铺首页一般由页头、页中和页尾 3 个部分组成。
页头：是指店铺的最顶端，包括店铺招牌和导航。
页中：是指店铺首页的中间部分，包括店铺海报、优惠券、商品展示区等。
页尾：是指店铺的底部，内容包括店铺声明、宣传语、品牌授权认证等，目的在于提高消费者对店铺的信任度。
1.3.1　店铺布局
（2）商品详情页。商品详情页以图片、文字、短视频的方式向消费者展示商品的规格、材质、颜色、产地、卖点等，让消费者全面了解商品，从而产生消费欲望。商品详情页一般由商品基础信息和商品描述信息两部分组成。
商品基础信息：主要包括商品主图和商品属性信息。
商品描述信息：包括商品销售信息、商品信息描述等。
提示
通常，店铺首页的布局是可以改变的，而商品详情页的布局是不可以改变的。因此，用户仅可以对店铺首页进行布局规划。另外，商品信息描述区虽然是商品详情页的一部分，但多被称为“商品详情页”（详解请参考第 4 章）。
1.3.2　店铺配色方案
色彩是影响视觉效果的重要因素，店铺配色方案对于店铺的整体装修效果是至关重要的。不同的色彩组合能够获得不同的视觉效果，要想得到满意的色彩搭配效果，就需要了解色彩的基础知识及传递的情感，掌握色彩搭配的技巧。
1.3.2　店铺配色方案
1．色彩基础知识
1）色彩分类
无彩色系：是指金色、银色、黑色、白色及黑白两色按不同比例混合所得到的深浅 各异的灰色系列。
有彩色系：是指可见光谱中的红色、橙色、黄色、绿色、青色、蓝色、紫色 7 种基本色和它们之间的混合色，以及基本色与无彩色之间的混合色。
无彩色系中的黑白灰
有彩色系中的基本色
在有彩色系中，任何一种颜色都具有色相、纯度、明度这 3 个基本属性，它们被称为色彩三要素。
1.3.2　店铺配色方案
2）色彩三要素
色相：是指色彩的相貌，它是色彩的首要特征，用于区别不同的颜色，如红色、橙色、黄色、绿色、蓝色、紫色等。
色相
纯度：是指色彩的纯净程度，也称饱和度、彩度或艳度。色彩纯度的高低取决于该色彩中主色和杂色的比例。主色比例越大，纯度越高，色彩越鲜艳；反之，纯度越低，色彩越暗淡。
纯度
1.3.2　店铺配色方案
明度：是指色彩的明暗程度，也称亮度或深浅度。色彩的明度有两种情况，一是同一色相的不同明度，如在同一种颜色中加入不同比例的黑色后产生不同的明暗层次，二是各种色相之间的明度差别，如在同样的纯度下，黄色的明度最高，紫色的明度最低。
纯度
1.3.2　店铺配色方案
1.3.2　店铺配色方案
综上所述，有彩色的色相、纯度、明度这 3 个基本属性是不可分割的。只有色相而无纯度和明度的色彩是不存在的；反之，只有纯度和明度而无色相的色彩也是不存在的。因此，在认识和应用色彩时，必须同时考虑这三要素。
1.3.2　店铺配色方案
2．色彩的视觉效应
色彩本没有具体的意象，但人们却能感受到色彩传递的情感，这是因为人们在这个五彩缤纷的世界中积累了许多关于色彩的视觉经验，当这些经验与外来色彩产生一定的呼应时，就会在人们的心理上引发某种情绪，这就是色彩带给人的视觉效应。因此，在店铺装修配色时，应根据商品的属性，恰当地使用色彩。
1.3.2　店铺配色方案
（1）红色系。红色易使人联想到太阳、节日、火焰、血液等，象征着喜悦、热情、自信、活泼、积极等，同时也容易令人产生恐惧、愤怒等心理感觉。
（2）黄色系。黄色是有彩色系中明度最高、最活跃的颜色，象征着活力、轻快、开朗、辉煌、希望等，常用于童装类、食品类等网店页面中。
1.3.2　店铺配色方案
（3）绿色系。绿色象征着健康、自然、清新、安全，是所有色彩中最能让人放松的颜色，它对人的精神有镇静和恢复的作用，常用于化妆品类、药品类等网店页面中。
（4）蓝色系。蓝色易让人联想到高远的天空、广阔的海洋、深邃的宇宙等，象征着静谧、深邃、理智、深沉、现代等，常用于数码类、生活电器类等网店页面中。
1.3.2　店铺配色方案
黄色系童装店铺海报
1.3.2　店铺配色方案
（5）紫色系。紫色是由温暖的红色和静谧的蓝色混合而成的颜色，其视觉效应比较复杂，明度不同，表现出的情感截然不同。
1.3.2　店铺配色方案
金色和银色是最华丽的颜色之一，恰当地使用这两种颜色有利于提升商品的品质与档次。白色象征着纯洁、神圣、干净、雅致，一些文艺、高雅的商品中，常使用白色作为画面主色，从而突显商品格调。黑色象征着深沉、庄重、严肃，属于百搭色，与其他颜色结合使用，能表现出丰富多变的效果。在店铺装修配色中，无彩色系常用于数码类、高档饰品类等网店页面中。
无彩色系运动耳机详情页（局部）
（1）色相对比的搭配。色相环上颜色间的距离决定了色相对比的强弱。距离愈近，对比愈弱；距离愈远，对比愈强，这就是色相对比的规律。
同类色对比：色相环上相距 15° 左右的色彩称为同类色。
1.3.2　店铺配色方案
3．色彩搭配技巧
近似色对比：色相环上相距 30° 左右的色彩称为近似色。运用近似色对比的画面色调和谐统一，具有雅致、柔和的特性。
1.3.2　店铺配色方案
邻近色对比：色相环上相距 60° 左右的色彩称为邻近色。邻近色对比拥有近似色对比的特性，又较近似色对比显得更加丰富、活泼。
1.3.2　店铺配色方案
对比色对比：色相环上相距 120° 左右的色彩称为对比色。运用对比色对比的画面具有醒目、饱满、动感等视觉效果。但对比色在色相环上的跨度较大，容易使人产生视觉及精神上的疲劳感，因此适当改变对比色的纯度与明度，可为画面增添和谐之感。
1.3.2　店铺配色方案
互补色对比：色相环上相距 180° 的色彩称为互补色。互补色对比是色相对比中最强烈的色彩搭配，因此运用互补色对比的画面具有极强的视觉冲击力。
1.3.2　店铺配色方案
1.3.2　店铺配色方案
（2）冷暖对比的搭配。色彩的冷暖对比是指因色彩感觉的冷暖差异而形成的对比，色相是影响色彩冷暖的主要因素。红色、橙色、黄色为暖色，蓝紫色、蓝色、蓝绿色为冷色。此外，绿色、紫色为中性色。
1.3.2　店铺配色方案
对比性暖色调：是指画面中面积最大、作用最强的色彩属于暖色调，只辅以小面积的冷色调。
对比性冷色调：是指画面中面积最大、作用最强的色彩属于冷色调，只辅以小面积的暖色调。
中性色调：是指画面中面积最大、作用最强的色彩属于中性色，只辅以小面积的冷、暖色调。
1.3.3　店铺风格
（1）中国风。中国风是在中国优秀传统文化的基础上设计出的页面效果，其中蕴含大量中国元素，尽可能地为消费者展现古风古韵。这种风格在古玩、旗袍、中式家具、地方特产等类目的店铺中应用较多。
1.3.3　店铺风格
（2）简约风。这种风格的店铺页面排版简约，没有过于复杂的装饰和设计，在简单、舒适处体现出页面的精致，可以使消费者更加直观地从中获取信息。简约风可以应用到各个类目的店铺中，它能满足消费者对页面简洁、易操作的需求。
1.3.3　店铺风格
（4）可爱风。可爱风在食品、儿童用品、母婴用品、家居用品等类目的店铺中应用较多，这种风格充满活力，同时给人无比甜蜜、无比幸福的感觉。
1.3.3　店铺风格
（5）手绘风。手绘一直是页面设计中流行的时尚元素。手绘风在食品、母婴用品、宠物用品、儿童用品等类目的店铺中应用较多，页面主要以手绘元素为主，为消费者带来浓浓的趣味。
1.3.3　店铺风格
（6）小清新风。小清新风在服装、化妆品、饰品等类目的店铺中应用较多，塑造了一种区别于形式主义的另类页面潮流，为消费者展示了随性、舒服、自然的风格。
课堂小结
1.4　店铺装修赏析
1.4　店铺装修赏析
下面以京东商城鸿星尔克官方旗舰店首页为例赏析店铺装修。
2
3
1
店铺布局
店铺配色
店铺风格
图片及内容详见教材
培根铸魂
2021年7月，河南省遭遇特大暴雨灾情。一方有难，八方支援，众多企业以捐款、捐物等多种形式驰援河南。运动服饰品牌鸿星尔克在自身举步维艰之时，低调捐赠 5000万元物资。在这次事件中，中国人的家国情怀得到了充分的展现和诠释。
本章实训 ——了解网店美工的发展前景
了解网店美工的发展前景
请参照如下提示搜集资料，了解网店美工的发展前景。
（1）查找国家为扶持电子商务发展出台的政策、举办的会议（如中国电子商务大会），分析网店美工的发展前景。
（2）借助一些网站的资讯、报告了解电子商务行业情况，如全国电子商务公共服务网（https://dzswgf.mofcom.），分析网店美工的发展前景。
（3）阅读一些关于电子商务行业深度调研及前景预测的书籍，分析网店美工的发展前景。
（4）调研网店美工相关岗位的薪资及涨幅情况，分析网店美工的发展前景。
作业布置
请总结归纳网店美工岗位需要具备什么基本技能？针对这些技能，自己打算如何进行提升？
谢谢观看

展开更多......

收起↑