电商视觉设计（上篇共上下2篇）

第1章初识电商视觉设计了解视觉设计的定义了解电商视觉设计前的准备工作掌握电商视觉设计黄金构图法学习目标目录什么是视觉设计1.1电商视觉设计前的准备1.2电商视觉设计黄金构图法1.31.1什么是视觉设计视觉识别设计1视觉传达设计21.1什么是视觉设计

1视觉识别设计CIS的构成:1.1什么是视觉设计

1视觉识别设计宝马标志的变革1.1什么是视觉设计

2视觉传达设计

视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素，利用视觉形象传达特定的信息给受众，从而使被传达对象产生影响的过程。1.2电商视觉设计前的准备网店的视觉定位1明确视觉规范的作用21.2电商视觉设计前的准备

1网店的视觉定位营销型网店1.2电商视觉设计前的准备

1网店的视觉定位品牌型网店1.2电商视觉设计前的准备

1网店的视觉定位服务关系型网店1.2电商视觉设计前的准备

2明确视觉规范的作用统一识别1节约资源2重复利用31.2电商视觉设计前的准备

2明确视觉规范的作用统一识别

可以确保网店在整体风格、售前售后服务和产品包装形象等方面都保持整体风格的一贯性，既有利于买家识别和区分店铺，也可以避免买家在浏览时出现理解困难，甚至是理解错误的现象。1.2电商视觉设计前的准备

2明确视觉规范的作用节约资源

除了活动海报等个性模块之外，其他的页面和模块参照规范进行设计可以极大地减少设计时间，从而达到节约资源的目的。1.2电商视觉设计前的准备

2明确视觉规范的作用重复利用

设计相同属性的模块或页面时，执行视觉规范有利于减少无关的信息，方便买家的阅读和信息传递。同时，视觉规范也有利于美工之间的协调工作。标准化的视觉规范不但可以节约设计时间，还可以避免出错。1.3电商视觉设计黄金构图法对称切割构图法01简单切割构图法05组合切割构图法02流程构图法06放射构图法07多重切割构图法04物体轮廓构图法0803整体场景构图法1.3电商视觉设计黄金构图法

1对称切割构图法1.3电商视觉设计黄金构图法

2组合切割构图法1.3电商视觉设计黄金构图法

3整体场景构图法1.3电商视觉设计黄金构图法

4多重切割构图法1.3电商视觉设计黄金构图法

5简单切割构图法1.3电商视觉设计黄金构图法

6流程构图法1.3电商视觉设计黄金构图法

7放射构图法1.3电商视觉设计黄金构图法

8物体轮廓构图法课后练习题请列举几个除宝马公司之外，其他企业导入视觉识别系统的案例。请列举几个采用黄金构图法的电商视觉设计案例。请淘宝搜索皇冠店铺，分析此类店铺在视觉设计上的共性与优势。请结合本章内容并结合实例说明品牌型网店与营销型网店在视觉定位上的区别。第2章

电商网站视觉配色设计了解掌握色搭原则七要素掌握色彩联觉现象的定义了解网店风格的几大形成要素了解网店页面常见的配色误区学习目标目录网店页面的配色方案2.1网店页面的配色误区2.2网店的整体配色案例2.32.1网店页面的配色方案色搭原则七要素1色彩的联觉聚焦图片2网店风格的形成要素32.1网店页面的配色方案

1色搭原则七要素渐进配色对比配色色调配色近似配色单重点配色分隔式配色夜配色2.1网店页面的配色方案

2色彩的联觉聚焦图片2.1网店页面的配色方案

2色彩的联觉聚焦图片主要以浅紫色为主，好像与我想要购买的零食形象色彩不搭调，这种图片应该不是我需要的。不在关注图片中的信息与内容，放弃点击主要以橙黄色为主，与我想要购买的零食形象相匹配，说不定正是零食相关的图片，我要继续了解一下。继续关注图片信息，并可能执行点击操作2.1网店页面的配色方案

3网店风格的形成要素店铺的主要风格1活动的主题气氛3店铺的包装色彩4VI配色5产品的情绪22.1网店页面的配色方案

3网店风格的形成要素店铺的主要风格1商业型店铺简约清爽型店铺2.1网店页面的配色方案

3网店风格的形成要素

主要以浅紫色为主，好像与我想要购买的零食形象色彩不搭调，这种图片应该不需要的。

在关注图片中的信息与内容，放弃点击。炫酷型店铺简约清爽型店铺2.1网店页面的配色方案

3网店风格的形成要素特色型店铺2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2韩式风格淑女风格2.1网店页面的配色方案

3网店风格的形成要素波西米亚风格嬉皮风格2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2田园风格民族风格2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2中国风格商务休闲风格2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2运动休闲风格英伦风格2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2时尚休闲风格2.1网店页面的配色方案

3网店风格的形成要素活动的主题气氛3国庆节七夕节2.1网店页面的配色方案

3网店风格的形成要素店铺的包装色彩4偏粉色系偏蓝色系2.1网店页面的配色方案

3网店风格的形成要素VI配色5单色VI双色VI多色VI2.2网店页面的配色误区色彩过多1背景和文字对比不强烈2过分强调色彩的刺激度32.2网店页面的配色误区

1色彩过多2.2网店页面的配色误区

2背景和文字对比不强烈2.2网店页面的配色误区

3过分强调色彩的刺激度2.3网店的整体配色案例选用黄色作为食品店铺的店招背景，可以刺激浏览者的食欲，引导消费者购买店铺中的产品选用黄色的商品图，与导航栏的颜色相呼应，给人一种上下统一的视觉感受选用灰色作为店铺的主色调，可以更好地凸显产品的诱人与美味2.3网店的整体配色案例店铺商品配色店铺页面辅色设计店铺页面主色设计2.3网店的整体配色案例011.店铺页面主色设计新建空白文件创建参考线2.3网店的整体配色案例021.店铺页面主色设计填充颜色填充矩形2.3网店的整体配色案例设置导航栏颜色012.店铺页面辅色设计022.店铺页面辅色设计设置店招与导航栏2.3网店的整体配色案例013.店铺商品配色导入主商品图2.3网店的整体配色案例023.店铺商品配色制作商品图2.3网店的整体配色案例033.店铺商品配色创建并填充矩形2.3网店的整体配色案例043.店铺商品配色导入图像并输入文字2.3网店的整体配色案例043.店铺商品配色制作其他部分2.3网店的整体配色案例053.店铺商品配色完成店铺页面制作课后练习题请列举几个近似配色和色调配色的设计案例。请分析色彩的联觉现象对数码类产品的影响。为男装店铺进行首页整体配色设计，效果如右图所示。请分别列举炫酷型、可爱型和特色型的店铺风格设计案例。第3章

店铺标志视觉设计了解徽标的设计要领及设计原则了解徽标的设计规范了解店标的几种设计形态掌握店标设计的七大技巧熟练掌握店标的设计流程学习目标目录徽标的设计3.1店标的设计3.23.1徽标的设计徽标的设计要领01徽标的设计标准023.1徽标的设计

1徽标的设计要领便于识别，以简为美1徽标设计要追求独特，增强记忆3徽标设计要便于运用4徽标要与客户或产品有关23.1徽标的设计

1徽标的设计要领便于识别，以简为美13.1徽标的设计

1徽标的设计要领徽标要与客户或产品有关23.1徽标的设计

1徽标的设计要领徽标设计要追求独特，增强记忆33.1徽标的设计

1徽标的设计要领徽标设计要便于运用4理想的徽标设计是缩小到2.5厘米大小都不会损失任何细节，这样的徽标才能在不同的环境下运用。特别是用于我们的网店页面时，无论是放在店标上还是店招上，尺寸都是非常小的。3.1徽标的设计

2徽标的设计标准徽标禁止侵入区3.1徽标的设计

2徽标的设计标准错误的徽标设计3.1徽标的设计

2徽标的设计标准错误的徽标设计VEROMODA品牌徽标3.2店标的设计店标的设计形态1店标的设计技巧2不同行业的店标设计3店标的设计流程43.2店标的设计

1店标的设计形态中文文字型店标1组合型店标3图形型店标4图文结合型店标5非中文型店标23.2店标的设计

1店标的设计形态中文文字型店标1

3.2店标的设计

1店标的设计形态

非中文型店标23.2店标的设计

1店标的设计形态

组合型店标33.2店标的设计

1店标的设计形态

图形型店标43.2店标的设计

1店标的设计形态

图文结合型店标53.2店标的设计

2店标的设计技巧

设计要有领导性标志设计的统一性标志的识别性标志的时代性标志的系统性标志的延伸性设计要有造型3.2店标的设计

2店标的设计技巧

设计要有领导性设计要有造型3.2店标的设计

2店标的设计技巧

标志设计的统一性标志的识别性3.2店标的设计

2店标的设计技巧

标志的时代性标志的系统性3.2店标的设计

2店标的设计技巧

标志的延伸性3.2店标的设计

3不同行业的店标设计

表现柔美型表现阳刚型表现可爱型3.2店标的设计

3不同行业的店标设计

表现柔美型3.2店标的设计

3不同行业的店标设计

表现阳刚型3.2店标的设计

3不同行业的店标设计

表现可爱型3.2店标的设计

4店标的设计流程

01卡通素材图形02新建空白文件3.2店标的设计

4店标的设计流程

03导入卡通素材图像选中素材图像把素材图像拖入文件窗口3.2店标的设计

4店标的设计流程

04文字变形处理05添加文字及修饰图案3.2店标的设计

4店标的设计流程

06添加图层效果3.2店标的设计

4店标的设计流程

07添加文字课后练习题简述一个优秀的徽标都具有哪些特点。分析徽标设计规范的重要性。请根据本章所讲内容设计一个玩具类店铺店标，效果如右图所示。淘宝搜索家居类店铺，并分析它们的店标分别属于哪一类。第4章

店铺首页视觉设计了解首页视觉水平的四大指标掌握店招的设计规范及技巧掌握首焦轮播区的设计技巧了解商品陈列区的布局方式掌握商品陈列区的布局技巧学习目标目录首页视觉水平的四大指标4.1店招视觉设计4.2首焦轮播区视觉设计4.3商品陈列区视觉设计4.4化妆品店铺首页视觉设计案例4.54.1首页视觉水平的四大指标首页跳失率1首页点击率2首页人均点击次数3首页平均停留时间44.1首页视觉水平的四大指标

1首页跳失率

首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该入口总访问次数的比例。进入店铺首页的渠道4.1首页视觉水平的四大指标

2首页点击率

首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点击量÷首页展现量）。两类店铺首页排版4.1首页视觉水平的四大指标

3首页人均点击次数

首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为600次，那么首页人均点击次数为：600次÷150人=4次/人。人均点击次数4.1首页视觉水平的四大指标

4首页平均停留时间

首页平均停留时间=访店铺首页的所有访客总的停留时长÷访客数（单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是否能留住访客。4.2店招视觉设计店招视觉设计规范01店铺名称的艺术化处理02图层样式的应用034.2店招视觉设计

1店招视觉设计规范店招高度设计规范淘宝后台的店招高度为120像素，建议设计时设定店招尺寸为950×120像素，加上导航条高度30像素，共150像素，可避免发布后导航不显示的问题4.2店招视觉设计

1店招视觉设计规范店招元素设计品牌宣传语移动端二维码清晰的店铺名称4.2店招视觉设计

1店招视觉设计规范店招和导航条风格统一风格的统一及修饰元素的设

计，突出店铺的品牌形象4.2店招视觉设计

2店铺名称的艺术化处理添加特效突出特殊性和醒目度2用不同字体和字号的组合营造艺术感1使用修饰元素提升观赏性34.2店招视觉设计

2店铺名称的艺术化处理用不同字体和字号的组合营造艺术感1不同字体字号的组合将店铺名称的首个英文字母放大，并使用不同于其他字体风格的手写体，让店铺名称文字的版式更加醒目、更具艺术感4.2店招视觉设计2店铺名称的艺术化处理添加特效突出特殊性和醒目度2为了将店铺名称与导航条的颜色区分开，使用了发光效果来修饰店铺名称，营造出的层次感，也贴合了店铺中销售的照明设备的特点4.2店招视觉设计

2店铺名称的艺术化处理为店铺名称添加修饰元素使用修饰元素提升观赏性3使用帽子的图案来修饰店铺名称，文字与图案在外形上的契合让店铺名称更具个性和艺术感，更容易在消费者心中形成特定的印象4.2店招视觉设计

3图层样式的应用

图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也发挥着重要的作用。用“渐变叠加”图层样式来表现导航条功能按钮被鼠标触碰后的状态，在视觉上形成凹陷的效果，将其与导航条中正常状态下的功能按钮区分开4.2店招视觉设计

3图层样式的应用当鼠标指针触碰到导航条中任意一个功能按钮时，该按钮就会呈现出不同的效果，这就是添加图层样式的效果，给人视觉上的错觉，让按钮上的文字更具层次感，更易于展示当前操作的结果4.3首焦轮播区视觉设计设计聚焦消费者视线1构建设计图三要素2溶图的应用范围34.3首焦轮播区视觉设计

1设计聚焦消费者视线

在店铺首页的商品图片展示版块中，在其开端位置放置单张海报图片可以在一定程度上聚焦消费者的视线，让其有继续浏览页面的兴趣。首焦位置：由于该位置所占面积较大，所以成为最能吸引消费者眼球的位置4.3首焦轮播区视觉设计

1设计聚焦消费者视线

下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。首焦位置4.3首焦轮播区视觉设计

1设计聚焦消费者视线

首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。有趣的图片展示，能让消费者通过视觉获得较为愉悦的体验

文案信息告知了消费者店铺中的优惠活动，因为店铺的优惠活动信息对于大部分消费者而言都是极具吸引力的。同时，简洁的文字与图形装饰的结合让消费者能够轻松地获取相关信息4.3首焦轮播区视觉设计

2构建设计图三要素首焦轮播区设计三要素背景商品广告文字4.3首焦轮播区视觉设计

2构建设计图三要素不同主题的背景图以七夕节为主题的背景以“双11”活动为主题的背景4.3首焦轮播区视觉设计

2构建设计图三要素处理前后的商品形象对比处理前色彩灰暗，画质朦胧，画面层次不清晰，背景色调不理想处理后色彩纯净，画面清晰，画面层次感强，商品形象更突出4.3首焦轮播区视觉设计

2构建设计图三要素

如下图所示，为几种风格的首焦轮播图文字编排效果，从中可以看出文字的字体与字号、色彩的变化等是设计中最为关键的环节。文字元素的设计4.3首焦轮播区视觉设计

3溶图的应用规范溶图

溶图是用两张或两张以上的图片拼合起来的一张图片，讲究构图严谨，细节处理得当。4.4商品陈列区视觉设计营造视觉动线1商品布局艺术化24.4商品陈列区视觉设计

1营造视觉动线商品陈列图4.4商品陈列区视觉设计

1营造视觉动线①浏览初期，视线水平移动，且浏览范围最大。刚开始浏览时，消费者对商品展示图充满了新鲜感和好奇，很可能将第一排图片全部浏览完毕，并根据从上到下的浏览经验，转向对第二排图片的浏览。②水平浏览范围缩短。此时图片的布局没有任何变化，消费者对于图片浏览的新鲜度就会降低，开始失去浏览的耐心，于是对第二排图片的水平浏览范围便会缩短。③失去耐心，开始进行垂直浏览。当消费者看到第三排仍然是一成不变的图片排列后，浏览的耐心就会减少，还可能会想图片怎么这么多，大概地往下看看吧，于是形成对左边的垂直浏览。F形浏览模式4.4商品陈列区视觉设计

1营造视觉动线商品海报展示图：将重点推荐的商品以单张海报的方式呈现，较为丰富的表现形式能很好地让消费者注意到商品信息。单张商品展示图：较为重要的商品以单张图片形式排列，较大的展示面积更能获得消费者的瞩目。三张商品展示图：非重点推荐的产品可以三张并排展示的效果呈现。单张图片：除了商品展示图片以外，还可以搭配一些与展示商品相关的商品组合图片，进一步吸引消费者的购买兴趣。4.4商品陈列区视觉设计

2商品布局艺术化折线型布局随意型布局4.4商品陈列区视觉设计

2商品布局艺术化折线型布局4.4商品陈列区视觉设计

2商品布局艺术化随意型布局4.5化妆品店铺首页视觉设计案例

标题文字设置的字号较大，利用斜面和浮雕、投影等效果来点缀标题文字，使其更加精致文字选用不同的颜色、字号，并分成两行，显得更有层次感，并通过一些小图案对价格进行修饰和点缀，营造出一种清新的视觉感受风格一致的文字与图像，营造出一种清新、简洁、充满文艺气息的氛围

采用不规则图形作为背景图的点缀，使商品的排列既整齐又不死板，提升其观赏性和设计感4.5化妆品店铺首页视觉设计案例01填充背景色4.5化妆品店铺首页视觉设计案例02设置文字属性4.5化妆品店铺首页视觉设计案例03添加商品图及优惠券4.5化妆品店铺首页视觉设计案例04绘制导航条背景4.5化妆品店铺首页视觉设计案例05为导航条添加文字4.5化妆品店铺首页视觉设计案例06添加文字并设置图层样式4.5化妆品店铺首页视觉设计案例06添加文字并设置图层样式4.5化妆品店铺首页视觉设计案例07添加图像素材4.5化妆品店铺首页视觉设计案例08添加商品图4.5化妆品店铺首页视觉设计案例09绘制背景图形10添加模特素材图像4.5化妆品店铺首页视觉设计案例11添加文字及修饰图案4.5化妆品店铺首页视觉设计案例12添加商品图4.5化妆品店铺首页视觉设计案例13制作店铺热销推荐标题4.5化妆品店铺首页视觉设计案例14添加商品图及文字4.5化妆品店铺首页视觉设计案例15添加商品图4.5化妆品店铺首页视觉设计案例16绘制图形4.5化妆品店铺首页视觉设计案例17制作店长热荐标题4.5化妆品店铺首页视觉设计案例18制作单品展示效果4.5化妆品店铺首页视觉设计案例19店长推荐专区4.5化妆品店铺首页视觉设计案例20纯正护肤专区4.5化妆品店铺首页视觉设计案例21输入文字22添加地图图案4.5化妆品店铺首页视觉设计案例23绘制图形并输入文字课后练习题请为家电类店铺设计一个店招，并说明自己的设计思路。请列举几个溶图在实际店铺中应用的案例。请为家具类店铺设计制作首页，效果如右图所示。简述商品陈列区在设计时要考虑的因素。第5章

商品详情页视觉设计了解商品主图的设计规范掌握商品主图的设计形式掌握商品细节展示区设计技巧了解修饰元素在设计中的重要性熟练掌握商品详情页各元素的设计方法学习目标目录商品主图设计5.1商品细节展示区设计5.2商品功效简介区设计5.3女鞋商品详情页视觉设计案例5.45.1商品主图设计商品主图的设计规范1商品主图的设计形式2添加文案提高主图点击率35.1商品主图设计

1商品主图的设计规范商品主图尺寸要求搜索结果页面中的商品主图尺寸为220像素×220像素商品详情页中的商品主图尺寸为400像素×400像素5.1商品主图设计

2商品主图的设计形式展示商品的全貌1拼接式设计3突出商品卖点4场景化的设计25.1商品主图设计

2商品主图的设计形式展示商品的全貌1白色背景商品主图5.1商品主图设计

2商品主图的设计形式场景化的设计2场景展示商品主图5.1商品主图设计

2商品主图的设计形式拼接式设计35.1商品主图设计

2商品主图的设计形式突出商品卖点45.1商品主图设计

3添加文案提高主图点击率添加主图文案添加价格信息，以激发消费者的购买欲望，提高点击率添加商品的材质简介，提升商品形象，让消费者了解更多商品信息5.1商品主图设计

3添加文案提高主图点击率添加品牌徽标5.1商品主图设计

3添加文案提高主图点击率添加品牌信息5.2商品细节展示区设计商品细节展示区的表现形式1商品细节展示区通用设计方式25.2商品细节展示区设计

1商品细节展示区的表现形式指示型表现形式局部图解型表现形式5.2商品细节展示区设计

1商品细节展示区的表现形式完整的商品形象展示用实线连接放大的局部细节指示型表现形式5.2商品细节展示区设计

1商品细节展示区的表现形式局部图解型表现形式5.2商品细节展示区设计

2商品细节展示区通用设计方式利用文字对细节进行说明素材让细节展示更直观5.2商品细节展示区设计

2商品细节展示区通用设计方式标题文字：对该细节图的内容进行概括和归纳，应用画龙点睛的关键词进行文案设计段落说明文字：详细阐述该细节图的内容，对标题文字进行展开说明利用文字对细节进行说明5.2商品细节展示区设计

2商品细节展示区通用设计方式利用文字对细节进行说明系统介绍商品信息对女鞋细节参数进行系统介绍，让消费者一目了然了解商品信息5.2商品细节展示区设计

2商品细节展示区通用设计方式素材让细节展示更直观箭头能将商品整体外观图与细节图联系起来，具有引导视线的作用聊天气泡用于修饰细节图、说明文字的边框，使文字和图片能一一对应，准确传递商品信息5.2商品细节展示区设计

2商品细节展示区通用设计方式素材让细节展示更直观方框规范了文字的显示范围圆形素材的使用让图像之间产生一定的联系矩形与圆形素材的使用5.3商品功效简介区设计商品功效简介区