电商视觉设计（全彩慕课版）课件 第1--5章　初识电商视觉设计---手机端海报设计.pptx

第1章

初识电商视觉设计;熟悉电商视觉设计的基本概念

熟悉电商视觉设计师的工作内容

熟悉电商视觉设计常用的软件;熟悉电商视觉设计的项目流程

了解电商视觉设计的规范与规则;培养对电商视觉设计的兴趣

培养获取新知识的基本能力;电商是电子商务的简称，视觉设计是指利用图像、文字、颜色等视觉元素进行图文设计，可以达到信息传播的目的。电商视觉设计是指在网页设计和平面设计结合的基础之上，加入用户体验和人机交互，通过互联网传播信息，进行商品销售相关内容的设计。;电商视觉设计师的工作内容非常具有针对性，主要围绕自身服务的网店展开相关工作。与传统平面美工相比，电商视觉设计师的工作内容要求普遍较高，下面对电商视觉设计师的工作内容进行详细介绍。

1．拍摄、美化商品

2．设计促销活动

3．设计商品详情页

4．运营和推广商品;1．拍摄、美化商品

商品拍摄是开设网店的重要一步，商品拍摄通常需要由专业的摄影师完成。但随着摄影器具的普及化、大众化，很多时候设计师会直接进行商品的拍摄，并对商品图片进行设计和美化，以保证商品图片可以呈现出比较理想的视觉效果，打动消费者。;2．设计促销活动

电商平台会不定期举行各种促销活动，这就需要设计师能够根据活动主题，完成活动期间店铺首页或平台活动页的设计。;3．设计商品详情页

设计师除了需要进行商品图片的处理、促销活动的设计还应该能够设计对应商品的详情页。;4．运营推广商品

设计师还需要站在消费者角度，深入挖掘消费者的浏览习惯和点击需求，根据商品的上架情况和促销信息设计主图、直通车图、海报等促销广告。;Photoshop

Cinema4D

Premiere;电商视觉设计常用的软件可分为三类，其中视觉设计类包括平面和三维的视觉处理。;Photoshop是由Adobe公司出品的功能强大的图形图像处理软件之一，是集编辑修饰、制作处理、创意编排、图像输入输出于一体的图形图像处理软件。;Cinema4D是由德国公司Maxon开发的一款可以进行建模以及动画制作、模拟、渲染的专业软件。;Premiere是由Adobe公司开发的一款视频编辑软件。Premiere拥有强大的视频剪辑功能，可以对视频进行采集、剪切、组合、拼接等操作。;电商视觉设计的项目流程可以细分为六个步骤。

1．需求分析

2．素材收集

3．视觉设计

4．审核修改

5．完稿切图

6．上传装修;单位介绍

页面构成

栅格系统

文字规则;遵循电商视觉设计的规范与规则可以保证电商视觉设计的可行性与可用性。下面分别从单位介绍、页面结构、栅格系统和文字规则这4个方面展开讲解。;1．英寸

英寸（inch，in）是英式的长度单位，也是用于表示显示设备尺寸的单位，一般1in=2.54cm。;2．像素

像素（pixels，px）是组成屏幕画面最小的点。电商视觉设计中，像素是用于表示页面尺寸的单位。;分辨率（resolution）即屏幕中像素的数量，它等于画面水平方向的像素值×画面垂直方向的像素值。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细。;1．店铺首页的页面构成

在PC（PersonalComputer，个人计算机）端中，店铺首页通常由店招与导航、轮播海报、优惠券、分类模块、商品展示和底部信息构成。在手机端中，店铺首页除了尺寸的变化，其页面构成与PC端的几乎相同。设计部分店铺首页时，设计师可根据商家需求，自行选择加入文字标题、店铺热搜、排行榜和逛逛更多等模块。;2．商品详情页的页面构成

在PC端中，商品详情页通常由主图、左侧区域以及详情区域组成。在手机端中，商品详情页除了尺寸的变化，其页面构成与PC端相比缺少了左侧区域。;栅格系统也称为网格系统。设计师利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或单元格，再以这些单元格为基准，进行页面的布局设计，使页面布局规范、简洁、有秩序。;1.栅格系统的组成

（1）单元格

栅格系统由格子组成网，因此基本单位是单元格。栅格系统需要先定义好栅格的最小单元大小，然后再以最小单元去定义栅格系统。

;（2）列+水槽+边距

确定好单元格后，需要确定列、水槽和边距这3个元素。其中列是放置内容的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左、右边缘之间的距离。;2．栅格系统的搭建

（1）确定屏幕宽度

搭建栅格系统的第一步是确定屏幕宽度，针对不同的设计项目，屏幕宽度设置也会不同。在PC端电商视觉设计中，屏幕宽度通常设置为1920px。在手机端电商视觉设计中，电商平台屏幕宽度通常设置为750px，店铺首页屏幕宽度通常设置为1200px。;（2）确定栅格区域

确定好屏幕宽度后，接下来需要确定栅格区域。栅格区域应在结合屏幕尺寸的基础上，根据不同的布局方案进行确定。在屏幕宽度为1920px、上下布局的电商视觉设计中，栅格区域通常为屏幕