电商设计电子课件

第1章初识电商设计本章介绍：随着移动互联网的发展以及消费结构的升级，电子商务行业亦趋向成熟，同时行业对于电商设计从业人员的要求也产生了变化，因此想要从事电商设计行业的人员需要系统地学习与更新自己的知识体系。本章对电商设计的基本概述、电商设计师的基本概述、电商设计的发展趋势、项目流程、规范规则以及设计基础、进行系统讲解。通过本章的学习，读者可以对电商设计有一个系统的认识，有助于高效便利地进行后续的电商设计工作。熟悉电商设计的基本概述熟悉电商设计师的基本概述明确电商设计的发展趋势学习目标想要进入电商设计领域，首先要了解电商设计的基础知识。下面分别从电商设计的基本概念和主流平台这两个方面进行电商设计基本概述的讲解，为后续的设计工作奠定良好的基础。1.1电商设计的基本概述1.电商设计的基本概念电商是电子商务的简称，电商设计是在网页设计和平面设计结合的基础之上，加入用户体验和人机交互，通过互联网来传播，进行商品销售的设计。1.1.1电商设计的基本概述电商设计电商设计经过多年的发展，无论从视觉呈现还是购买流程都产生了翻天覆地的变化。在这期间还成立了多个定位不同、规模宏大、商品丰富，各方面都比较成熟的电商平台，供消费者们可以尽情进行网上购物。其中主流的电商平台有天猫、淘宝、京东、网易严选以及小米有品等。1.1.2

电商设计的主流平台电商设计的主流平台电商设计师的类型划分电商设计师的工作内容电商设计师的专业技能电商设计师的常用软件1.2电商设计师的基本概述想要成为一名专业的电商设计师，需要了解电商设计师的基础知识。下面分别从电商设计师的类型划分、工作内容和专业技能和常用软件这四个方面进行电商设计师基本概述的讲解，为后续的设计工作奠定良好的基础。1.2电商设计师的基本概述根据服务对象，可以将电商设计师分为服务平台和服务店铺这两类，平台类电商设计师是专门针对京东、淘宝和网易严选等出售各类商品的平台进行设计，此类电商设计拥有大量的类目、品牌和商品。店铺类电商设计是专门针对平台中的某一个店铺进行设计，此类电商设计通常类目和品牌都是单一性，商品也是单一品牌之下的少量商品。1.2.1电商设计师的类型划分平台类电商设计店铺类电商设计电商设计师的工作内容非常具有针对性，主要围绕自身服务的网店展开相关工作。与传统平面美工相比，电商设计师的工作内容要求普遍较高，下面对电商设计师的工作内容进行详细介绍。·拍摄美化商品·设计促销活动·设计详情页面·运营推广商品1.2.2电商设计师的工作内容（1）拍摄美化商品商品拍摄是进行网店开设的第一步，商品拍摄通常需要专业的摄影师。但随着摄影器具发展的普及化、大众化，很多时候电商设计师会直接进行商品的拍摄工作。同时拍摄出的商品图片通常是无法直接上架，因为需要电商设计师对商品图片进行设计和美化，以保证商品可以呈现出比较理想的视觉效果，打动消费者。1.2.2

电商设计师的工作内容美化商品（2）设计促销活动电商平台会不定期举行各种促销活动，这就需要电商设计师能够根据活动主题，完成促销期间店铺首页或平台活动页的设计。电商设计师通过设计各个页面，令消费者充分了解活动内容和促销力度，从而促使消费者积极地参与活动，提升商品销量。1.2.2

电商设计师的工作内容促销活动（3）设计详情页面电商设计师除了需要进行商品的图片处理，还应该能够设计对应商品的详情页面。在设计商品详情页时，需要根据消费者的需求，突出商品的卖点优势，以此达到消费者购买商品，促成交易的作用。1.2.2

电商设计师的工作内容详情页面（4）运营推广商品商家只有进行积极有效的推广，才能够令自己的网店在众多网店中脱颖而出，而电商设计师在商品的运营推广时发挥着重要的作用。电商设计师需要站在消费者角度，深入挖掘消费者的浏览习惯和点击需求，根据商品的上架情况和促销信息设计主图、直通车图、海报等促销广告。1.2.2

电商设计师的工作内容商品推广一名优秀的电商设计师需要具备多个方面的能力，这些能力分别是：·摄影摄像能力·排版设计能力·创意合成能力·绘制插画能力·三维设计能力·动态设计能力1.2.3电商设计师的专业技能摄影摄像能力创意合成能力1.2.3电商设计师的专业技能排版设计能力绘制插画能力动态设计能力三维设计能力电商设计的常用软件包括视觉设计、代码制作、视频剪辑和3D渲染这四类。建议设计师先掌握Photoshop（简称PS）以及Dreamweaver（简称DW），有条件的话还要掌握CinemaC4D（简称C4D）。常用软件1.2.4电商设计师的常用软件电商设计发展趋势主要向扁平化、立体化以及插画风这三种风格进行，三种风格在视觉表达上都各有优势。·扁平化·立体化·插画风1.3电商设计的发展趋势1.扁平化以扁平化为主的电商设计页面通过字体、图形和色彩等不同方面的元素运用合成打造出清晰的视觉层次，使得页面具有较强的可读性。1.3电商设计的发展趋势扁平化设计2.立体化以立体化为主的电商设计页面通过运用Cinema4D与OctaneRender搭配进行建模渲染，进而呈现出别具一格的画面效果，使得页面立体生动。1.3电商设计的发展趋势立体化设计3.插画风以插画风为主的电商设计页面通过运用手绘笔触绘制出各种富有个性化的形象，使得页面丰富有趣。1.3电商设计的发展趋势插画风电商设计的项目流程可以细分为六个步骤。1.4电商设计的项目流程电商设计项目流程图1.需求分析针对项目首先要进行相关的需求分析，设计师通常会通过文案与相关主题先明确此次项目的卖点及用户，初步确定页面的风格。2.素材收集根据初步确定的页面风格，进行相关的素材收集以及整理，为接下来的视觉设计做准备。3.视觉设计使用Photoshop、Illustrator、CinemaC4D等相关软件，按照之前的分析构思进行视觉方面的整体设计。1.4电商设计的项目流程4.审核修改针对电商的设计项目，通常会用到修图、调色以及合成等方式对画面进行处理，这些设计方式通常需要进行反复调整，以达到合适的画面效果。5.完稿切图在设计稿完成后，需要使用Photoshop等相关软件对页面进行切图，并将切图整理好，以便后续在网店进行上传。6.上传投放将完稿后的切图上传到后台的素材中心，然后进行网店的装修。装修发布后便可以进行商品售卖。1.4电商设计的项目流程单位介绍页面结构栅格系统文字规则电商设计的设计基础1.5电商设计的规范规则学习电商设计的基本规范是进行电商设计工作的重要基础，遵循电商设计的规范与规则可以保证电商设计的可行性与可用性。下面分别从单位介绍、页面结构和文字规则这三个方面进行电商设计规范规则的讲解，为后续的设计工作奠定良好的基础。1.5电商设计的规范规则（1）英寸英寸（inch，in）是英式的长度单位，一般1英寸=2.54厘米，用于表示显示设备的尺寸单位。1.5.1单位介绍27英寸的iMac15.6英寸的MacBookPro（2）像素像素（pixels，px）是组成屏幕画面最小的点。电商设计中，用于表示页面的尺寸单位。像素界面1.5.1单位介绍（3）分辨率分辨率（Resolution）即屏幕中像素的数量，它等于画面水平方向的像素值×画面垂直方向的像素值。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。分辨率1.5.1单位介绍1.店铺首页的页面构成在PC端中，首页通常由店招、轮播海报、优惠券、分类导航、商品展示和底部信息组成。在手机端中，首页除了尺寸的变化，页面构成与PC端几乎相同。部分店铺会根据商家需求，可自行选择加入文字标题、店铺热搜、排行榜和逛逛更多等模块。2.商品详情页的页面构成在PC端中，商品详情页通常由主图、左侧区域以及详情区域组成。在手机端中，详情页除了尺寸的变化，页面构成与PC端相比缺少了左侧区域。1.5.2页面结构栅格系统，也称为网格系统。在电商设计中，我们利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面的布局设计，使布局规范简洁有秩序。1.5.3栅格系统栅格系统1.栅格系统的组成（1）单元格（2）列+水槽+边距2.栅格系统的搭建（1）确定屏幕宽度（2）确定栅格区域（3）确定列数、水槽、边距

1.5.3栅格系统1.字号制作PC端电商设计时，以14px字号为默认字体，并运用不同的字号和字重体现设计中的视觉信息层次，需要注意的是，字号多采用偶数，因为奇数无法对齐像素。制作移动端电商设计时，可以参考iOS和MaterialDesign提供的字号规范，其中最小字号建议在20px以上。1.5.4文字规则2.间距·字间距标题的字间距通常建议为字号的1/5以内，如标题文字字号是60pt时，字间距通常设置在-50～-20之间。内容文字由于字号较小，字间距需要适当加大，建议为字号的1/5以上。如内容字号是24pt时，字间距通常设置为20～50。·行间距行间距让字与字之间有了可呼吸的空间，行间距对文章的易读性有很大影响。行间距需要大于字间距，建议为字号的1/3～2/3。当排版标题文字时，行间距建议为字号的1/3，当排版内容文字时，行间距建议为字号的2/3。·段间距段间距能够保持页面的节奏，它的设置与字号和行间距又着密切联系。段间距的设置建议是2～3个字号高度。1.5电商设计的规范规则基础元素色彩搭配字体表现版式设计1.6电商设计的设计基础当电商设计师掌握了电商设计的相关基础知识之后，还要掌握电商设计的基础，这样设计出的效果才能突出。下面分别从基础元素、色彩搭配、文字设计和版式构图这四个方面进行电商设计的设计基础讲解。1.6电商设计的设计基础1.点点是构成一切形态的基础，是最基本的视觉单位，具有凝聚视觉的作用。点的形状多种多样，整体分为圆点、方点、角点等规则点和自由随意、任何形态的不规则点两类。通过改变点的大小、形状和位置可以在画面中产生不一样的效果。1.6.1基础元素规则点的应用不规则点的应用的应用2.线线是点移动的轨迹，是一切面的边缘，具有分割画面和处理界限的作用。线的形状多种多样，总的来说，可以分为直线和曲线。通过改变线的粗细、形状、长短和角度可以在画面中产生不一样的效果。直线的应用曲线的应用1.6.1基础元素3.面面是线移动的轨迹，可以拆分为点型的面和线型的面以及两者结合的面。面的形状多种多样，针对网店设计，常用的形状为方形、三角形以及圆形的几何形和墨迹、泥点以及撕纸的偶然形。通过改变面的形状可以在画面中产生不一样的效果。几何形面的应用偶然形面的应用1.6.1基础元素1.主色主色是画面中面积最大、最为醒目的色彩，它决定了整个画面的颜色调性。电商设计师人员在选择主色时，因综合考虑商品风格、消费人群等因素。2.辅助色辅助色是用于付托主色的颜色，其占用面积仅次于主色。使用辅助色可以是画面色彩更加丰富美观。3.点缀色点缀色是画面中面积最小但较为醒目的颜色。合理使用点缀色可以起到锦上添花的作用。1.6.2色彩搭配1.宋体宋体笔画有粗细变化，通常是横细竖粗，末端有装饰部分，点、撇、捺、钩等笔画有尖端，属于衬线字体（serif）。宋体字有着纤细优雅、文艺时尚的特点，常用于珠宝首饰、美妆护肤等以女性消费者为主的电商内容中。1.6.3字体表现宋体表现形式2.黑体黑体又称方体或等线体，笔画横平竖直，粗细一样，没有衬线装饰。黑体字有着方正粗旷、朴素简洁的特点，常用于商品促销、电子数码和家用电器等电商内容中。黑体表现形式1.6.3字体表现3.圆体圆体是由黑体演变而来的字体，在基于黑体的字形结构将拐角处和笔画末端变为圆弧状。圆体有着圆润、柔和的特点，常用于儿童、少女、甜蜜等电商内容中。圆体表现形式1.6.3字体表现4.手写体（1）书法体书法体是指传统书写字体，可分为篆、隶、草、行、楷五大类书体。书法体有着自由多变、苍劲有力的特点，常用于茶酒等需要表达传统古典风格的电商内容中。书法体表现形式1.6.3字体表现（2）钢笔体钢笔体是指使用硬质材料笔尖的书写字体，钢笔体粗细变化较小，注重字形结构和线条走势。钢笔体有着清新文艺、轻松活泼的特点，常用于清新活泼的电商内容中。钢笔体表现形式1.6.3字体表现5