电子商务视觉设计（第2版）PPT完整全套教学课件

电商视觉设计近年来受到了国内各大企业和知名品牌的高度重视，特别是在以淘宝天猫为代表的电商平台中，电商视觉设计理念运用得非常广泛，效果也很明显。本章将介绍一些电商视觉设计的基础知识，如视觉设计的概念、电商视觉设计前的准备和电商视觉设计的黄金构图法等。初识电商视觉设计第1章全套PPT课件什么是视觉设计1.1目录CONTENTS电商视觉设计前的准备1.2电商视觉设计的黄金构图法1.3什么是视觉设计1.1视觉设计是针对眼睛功能的表现手段，通俗地说就是通过一些设计让产品的视觉效果更加出彩。因为这些设计是针对我们眼睛的特点进行的，所以又被称为视觉设计。视觉设计大体上可分为视觉识别设计和视觉传达设计，下面将分别对其进行介绍。1.1.1视觉识别设计

视觉识别设计来源于企业形象识别系统（CorporateIdentitySystem，CIS）。企业形象识别系统一般分为三个方面：企业的理念识别（MindIdentity，MI）行为识别（BehaviorIdentity，BI）视觉识别（VisualIdentity，VI）视觉识别系统规范手册就是用来规范企业形象设计的图书，内容主要分为基本设计要素和应用设计要素两个部分：基本设计要素包括企业名称、企业标志、标准字体和标准色彩应用设计要素是基本设计要素在企业旗帜、员工制服、商品包装、名片证件等媒体上应用时的规范CIS的构成1.1.1视觉识别设计

视觉识别设计最初只是为了设计一套能够将自己与其他企业区别开来的标识系统，后来逐渐演变为企业文化的外在表现部分。宝马标志的演进1.1.2视觉传达设计视觉传达设计

视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素，利用视觉形象传达特定的信息给受众，从而对被传达对象产生影响的过程。视觉传达的作用是让人与人之间利用“看”的形式进行交流。红白装圣诞老人形象电商视觉设计前的准备1.2电商的视觉设计从形式上看都是利用视觉手段吸引消费者和提高销售的，但是目前大多数网店装修偏重于设计，核心内容是视觉展示。从大多数网店的实际运营效果来看，一味追求视觉效果的结果往往不够理想，虽然设计了足够美观的页面，销量却没有显著提升。在视觉设计前，应该进行自身分析，先对网店有一个视觉定位，并且要明确视觉规范的作用。1.2.1网店的视觉定位营销型网店的视觉定位营销型网店的视觉定位原则在于营造促销氛围。营销型网店1.2.1网店的视觉定位品牌型网店的视觉定位

品牌型网店的视觉定位原则是突出品牌优势。品牌型网店1.2.1网店的视觉定位服务关系型网店的视觉定位服务关系型网店的视觉定位原则是包装服务形象。服务关系型网店1.2.2明确视觉规范的作用视觉规范的意义统一识别

视觉规范可以确保网店在整体风格、售前售后服务和产品包装形象等方面都保持整体风格的一贯性，既有利于消费者识别和区分店铺，也可以避免消费者在浏览时出现理解困难，甚至是理解错误的现象节约资源

除了活动海报等个性模块之外，其他的页面和模块也参照规范进行设计，可以极大地减少设计时间，从而达到节约资源的目的重复利用

设计相同属性的模块或页面时，执行视觉规范有利于减少无关的信息，方便消费者的阅读和信息传递。同时，视觉规范也有利于美工人员之间的协调工作。标准化的视觉规范不仅可以节约设计时间，还可以避免出错电商视觉设计的黄金构图法1.3在现实生活与自然界中，几何图形的美几乎随处可见，简单的三角形、正方形、长方形、圆形甚至几根线条就可以组成很多有趣的图形，很符合现代审美的要求，并且适当的画面切割能给页面带来动感与节奏感。在页面中加入几根线条或几个块，就能起到意想不到的效果。构图方法大致可以分为对称切割构图法、组合切割构图法、整体场景构图法、多重切割构图法、简单切割构图法、流程构图法、放射构图法和物体轮廓构图法。1.3.1对称切割构图法

对称切割构图法的前提一般是将内容分为对立的两部分，（将整个页面一分为二），划分明确。这种设计具有视觉冲击力，可以使画面具有平衡不失重的效果。1.3.2组合切割构图法

组合切割构图法是通过集中而有规律的排列从整体上抓住人们的视觉，让整个页面设计更具有立体感。这种构图方式适合每个区块中的内容属于平级关系产品的展示，能够保持各种内容的并列关系，让布局更具创意。1.3.3整体场景构图法

整体场景构图法专题内容不多，适用于促销、节日、活动等页面。在设计这种页面时，设计人员的头脑中对专题内容要有画面感，首先搭建大的画面关系，再往里面添加细节和内容。切记场景不要抢了内容的视觉焦点，在适当的时候可以做些减法。1.3.4多重切割构图法

多重切割构图法的构图不规则，稳定而锐利，可以让单一的页面变得生动、复杂的页面变得时尚，避免画面出现生硬感，不宜产生审美疲劳。不同的形状和排列呈现出来的视觉效果也不一样。这种构图方式一般适用于体现时尚感、科技感与锋利感的专题。1.3.5简单切割构图法

简单切割构图法使用简单的线条或图案整齐地分割整个页面，使页面变得有趣、生动，使内容区域得到有效划分。这类构图方式对内容没有过多的要求，可以随意安排，具体排版可根据内容来处理。这类构图法同样具有不可忽视的视觉冲击力。1.3.6流程构图法

如果设计创意需要按照循序渐进的方式展现产品，那么不妨采用流程构图法。流程构图法能够将步骤、关系、各个节点及整体流向展示清楚，让枯燥的流程瞬间变得简洁明了、个性十足，并充满趣味性。1.3.7放射构图法

放射构图法能展示出由一个中心点向四周扩散的效果，起到导向的作用，让整体页面呈现出立体与空间感，画面冲击力强，富有动感。需要注意的是，放射状的排版不太适合文字阅读，要注意文字排版的方式。在文字数量较少的情况下可以选择这种构图。1.3.8物体轮廓构图法

物体轮廓构图法主要适用于活动、节日或新品创意等专题。我们可以根据专题的主要内容从整体上构建一个边界或外形线，形成一个大的轮廓，将内容巧妙地填充进去。需要注意的是，设计时要将形状进行轮廓化，加以强调突出，主体不需要太抽象，应舍弃一些烦琐、次要的元素，以免影响阅读。课后习题1．列举几个除宝马公司之外的企业导入视觉识别系统的案例。2．结合本章内容及其他案例说明品牌型网店与营销型网店在视觉定位上的区别。3．在淘宝上搜索皇冠店铺，分析此类店铺在视觉设计上的共性与优势。4．列举几个采用黄金构图法的电商视觉设计案例。大多数人对色彩画面的敏感度强于文字，同时色彩是通过人的印象或者联想来产生心理上的影响的，而配色设计的作用就是通过改变空间的舒适程度和环境气氛来满足人们各方面的要求。如何正确地进行视觉配色设计是电商视觉设计者必备的技能。电商网站视觉配色设计第2章网店页面的配色方案2.1目录CONTENTS网店页面的配色误区2.2网店的整体配色案例2.3网店页面的配色方案2.1想要自己的网店脱颖而出，视觉设计至关重要。在网店视觉设计中，最能吸引消费者的显性因素是色彩。不同的色彩产生的生理和心理效应不同，不同的商品也有不同的色彩特性。因此，在网店视觉设计中，只有将色彩搭配运用得恰到好处才能制作出独特的艺术效果。2.1.1色搭原则七要素

渐进配色是指按色相、明度、艳度三要素有序地排列。其特点是即使色调沉稳，也很醒目，尤其是色相和明度的渐进配色。渐进配色01明度的渐进配色2.1.1色搭原则七要素

对比配色是指用色相、明度或艳度的反差进行搭配，有鲜明的强弱感。对比配色02对比配色2.1.1色搭原则七要素

色调配色是指具有某种相同性质（冷暖调、明度、艳度）的色彩搭配在一起，色相越全越好，最少也要三种色相以上。色调配色03彩虹色调配色2.1.1色搭原则七要素

近似配色是指选择相邻或相近的色相进行搭配。如果是单一色相的浓淡搭配，则称为同色系配色。近似配色04近似配色2.1.1色搭原则七要素

单重点配色是指让两种颜色形成面积的大反差。其实，单重点配色也是一种对比，相当于一种颜色作底色、另一种颜色作图形。单重点配色05单重点配色2.1.1色搭原则七要素

如果两种颜色比较接近，看上去不分明，就可以将对比色加在这两种颜色之间，增加强度，整体效果会很协调。最简单的加入色是无色系的颜色和米色等中性色。分隔式配色06分隔式配色2.1.1色搭原则七要素

高明度或鲜亮的冷色与低明度的暖色配在一起称为夜配色或影配色。它的特点是神秘、遥远，充满异国情调、民族风情。夜配色07服装夜配色2.1.2色彩的联觉聚焦图片不同色彩的心理感受与联想2.1.2色彩的联觉聚焦图片零食商品的不同色调对比色彩对购买行为的影响2.1.3网店风格的形成要素常见的店铺风格有简约清爽型、商业型、炫酷型、可爱型和特色型等。店铺的主要风格01简约清爽型店铺商业型店铺炫酷型店铺可爱型店铺特色型店铺2.1.3网店风格的形成要素女装风格：可划分为韩式风格、淑女风格、嬉皮风格、波西米亚风格、田园风格和民族风格等。产品的情绪02韩式风格淑女风格嬉皮风格波西米亚风格田园风格民族风格2.1.3网店风格的形成要素产品的情绪02传统风格商务休闲风格运动休闲风格英伦风格时尚休闲风格男装风格：可分为传统风格、商务休闲风格、运动风格、英伦风格和时尚休闲风格等。2.1.3网店风格的形成要素

店铺的主题气氛主要通过店铺的配色和装饰来烘托。以国庆节为主题的店铺配色大多采用红色，然后通过灯笼和烟花等元素来体现国庆节的节日气氛。以七夕节为主题的店铺大多采用紫色、粉色等可以表达浪漫和甜蜜的色彩，然后使用鹊桥等元素来体现七夕的节日气氛。活动的主题气氛03店铺的主题气氛2.1.3网店风格的形成要素

网店主题色调应该与商品特性相符合或者与目标消费群体的特性相符合。如果网店主营18～30岁的女性时尚服饰，那么比较适合的主题色就应选偏粉色、红色的柔和浪漫色系。如果网店主营手机、相机等数码类产品，那么蓝色、黑色和灰色系往往会给消费者理智、高贵、沉稳的感觉。店铺的包装色彩04偏粉色系偏蓝色系2.1.3网店风格的形成要素VI（视觉识别）配色是指在网店配色中提取VI或包装中的主色彩，主要分为单色VI、双色VI和多色VI。如果店铺Logo为单色，那么单色VI配色方案就以该颜色作为整个店铺的主色或辅色，这样可以使整个店铺看起来上下呼应、干净利落。如果店铺Logo由两种颜色组成，那么双色VI配色方案就以其中一种颜色作为店铺的主色调、另一种颜色作为辅色。如果店铺Logo由三种及三种以上颜色组成，那么多色VI配色方案就以其中一种颜色作为店铺的主色调，其余颜色作为辅色。VI配色05网店页面的配色误区2.2店铺的装修对其销售的帮助非常大，越来越多的卖家已经认识到这一点。在店铺装修时，千万要注意颜色的运用及色彩搭配，因为不合理的色彩搭配反而会造成负面影响。下面将详细介绍常见的网店页面的配色误区。2.2.1色彩过多

有的店铺页面把尽可能多的色彩都搬了上来，同一个页面上色彩众多，多种色彩同时使用令人眼花缭乱，造成了版面复杂、混乱的视觉效果，对消费者获取和理解信息毫无帮助，反而带来了负作用。因此，在设计配色时，要有一种主色贯穿其中。主色不一定是面积最大的颜色，也可以是最重要、最能揭示和反映主题的颜色。切记，不要将所有颜色都用到，尽量将配色控制在3～5种。色彩过多2.2.2背景和文字对比不强烈

人眼识别色彩的能力有一定的限度，由于颜色的同化作用，颜色与颜色之间对比强者易于分辨，弱者难以分辨。背景与文字对比不强烈，则文字内容没法突出，且昏暗的背景令人沮丧，用花纹繁复的图案作背景更容易让人眼花缭乱。背景和文字颜色对比不强烈，容易让人看不清楚，使商品的辨识度降低。背景和文字对比不强烈2.2.3过分强调色彩的刺激度

人们上网绝不希望自己的视力受损，因此我们在页面配色时要尽量少用容易引起视觉疲劳的色调。一般来说，高明度、高纯度的颜色刺激度高，疲劳度也高。在无彩色系中，白色的明度最高，黑色的明度最低；在有彩色系中，最明亮的是黄色，最暗的是紫色。需要注意的是，刺激强度高的色彩不宜大面积使用，出现频率也不宜高。低明度色彩造成的疲劳度虽然小，但是往往会使人产生压抑感，所以也不建议将页面设计得过于暗淡。强调色彩刺激度网店的整体配色案例2.3下面设计制作一个食品店铺页面，整体页面以浅绿色为主色，以黄、褐色为辅色，给人以清新、天然的感觉。本案例制作大致分为店铺页面主色设计、店铺页面文案配色设计与店铺页面辅色设计三个步骤。食品店铺首页选用黄色作为食品店铺的热销款推荐板块背景，可以刺激浏览者的食欲，引导消费者购买店铺中的产品选用绿色作为优惠券的背景，与店长推荐板块的背景颜色相呼应，给人一种上下统一的视觉感受选用绿色作为店铺的主色调，可以更好地凸显产品的诱人与美味2.3.1店铺页面主色设计2.3.2店铺页面文案配色设计2.3.3店铺页面辅色设计课后习题1．列举几个近似配色和色调配色的设计案例。2．分析色彩的联觉现象对珠宝类产品的影响。3．分别列举炫酷型、可爱型和特色型的店铺风格设计案例。4．为男装店铺首页进行整体配色设计，效果如右图所示。暖色系男装店铺首页大到国际连锁品牌，小到零售网店都需要属于自己的独特店铺标志。店标作为一个非常重要的店铺视觉VI，有着非常重要的传播作用，这意味着店标作为一个固定标志会长期、反复地出现在各种场合，代表着店铺的形象及经营内容和更多与营销有关的信息。因此，店标的设计要尽可能地吸引消费者的眼球。店铺标志视觉设计第3章店标的设计形态3.1目录CONTENTS店标的设计技巧3.2不同行业的店标设计3.3店标的设计流程3.4店标的设计形态3.1从设计的表达形态来看，店标可以分为以下几种：（1）中文文字型店标（2）非中文型店标（3）组合型店标（4）图形型店标（5）图文结合型店标3.1.1中文文字型店标

中文文字型店标主要以文字单独构成，适用于多种传播方式，最大的优点是一目了然，消费者对中文文字的接受度最高，好辨识也好记忆。

如果要选择中文文字型店标作为制作的目标，特别要注意文字的精简和信息的传达。因为店标的尺寸大小有限，能够把字看清楚并且醒目是最好的，想给予太多的信息反而会让传达效果大打折扣。3.1.2非中文型店标

对于非中文的标识来说，英文和字母会给人一种很酷的感觉，能给人留下深刻的印象，但其内容是什么意思并不会第一时间让消费者理解清楚，所以我们可以把它看作是一个符号。选择非中文型店标时，特别要注意店铺出售商品的范围和商品的风格是否和店标的感觉贴近。同样，因为英文标识不好理解，所以应该以简单和强烈的视觉冲击力为主。至于颜色搭配，也多以冲击力强的对比色搭配为主，比如欧美风格较多采用黑白搭配、女性化风格较多采用黑白红搭配。3.1.3组合型店标

组合型店标让消费者有一种中西结合、和国际接轨的大牌感觉。在表达形式上，非中文的部分设计感比较强，视觉冲击力比较大，所以形式多种多样，给人的视觉感受不错。在设计组合型店标时，如果非中文的部分比较简单，那么它本身就很有视觉冲击力，可以模仿前两种店标的形式将其充分表现；如果非中文部分比较长、比较复杂，那么可以把中文部分做得比较有视觉冲击力。3.1.4图形型店标

图形型店标就是直接用图形作为店标。

在上图中，四张图片都为毛绒玩具店的店标，店标上没有什么字符，所以给人的印象不是很深刻，不配合店名一起来看就不会记得是什么店铺。因此，不建议使用单纯的图形型店标。3.1.5图文结合型店标

图文结合型店标就是图形与文字相结合的店标形式。用图形作为店标时，如果不带入店名或者品牌名，记忆力是比较有限的，带上文字信息后会让人一目了然。

这种店标既具有图形化的视觉冲击力，又能清楚地表达店铺品牌信息，所以应用非常广泛。店标的设计技巧3.2一个出色的店标设计不仅能吸引消费者的眼球，还能增加店铺的浏览量。在设计店标时，可以运用以下设计技巧。（1）设计要有造型（2）设计要有领导性（3）标志设计的统一性（4）标志的识别性（5）标志的时代性（6）标志的系统性（7）标志的延伸性3.2.1设计要有造型有造型的食品店标设计

在设计店标时，最好要有个性的造型。因为店标造型的优劣不仅决定了其传达店铺信息的效力，还会影响到消费者对商品品质的信心与店铺形象的认同。3.2.2设计要有领导性具有领导性的食品店店标设计

店标视觉设计是网店视觉传达的核心要素，也是网上店铺开展信息传达的主导力量。标志是店铺经营理念和经营活动的集中表现，贯穿了整个店铺的相关活动，不仅具有权威性，还是其他视觉要素构成的核心。因此，店标设计的前提就是要有领导性。3.2.3标志设计的统一性具有统一性的女装店标设计

标志的形象设计需要与该店铺的经营理念、文化特色，以及经营的内容和特点相统一，只有这样才能获得消费者的一致认同。3.2.4标志的识别性具有识别性的食品店标设计

识别性是店标设计的基本要求。通过独具个性的标志与其他店铺及商品进行区别是现代电子商务市场竞争的利器，因此通过整体规划和设计的视觉符号必须具有独特的个性和强烈的冲击力，才能具有较强的竞争力。在CI设计中，标志是最具视觉认知、识别信息传达功能的设计要素。3.2.5标志的时代性具有时代性的食品店标设计

面对发展迅速的电商市场以及不断变化的市场竞争形式，有必要对现有的标志形象进行改进，才能使网店标志更加与时俱进，具有鲜明的时代特征。3.2.6标志的系统性具有系统性的家纺店店标设计

标志的识别设计一旦确定，随之展开的就是标志的精致化。这其中包括标志与其他基本设计要素的组合规定，目的就是要对未来标志的应用进行规划，以达到系统化、规范化、标准化的科学管理。3.2.7标志的延伸性具有延伸性的女装店店标设计

标志的识别设计是应用最为广泛、出现频率最高的视觉传达要素，有时需要在各种传播媒体上广泛应用。标志图形要根据印刷方式、制作工艺技术、材料质地和应用项目采用多种对应性和延展性的变体设计，以产生切合、适宜的效果与表现。不同行业的店标设计3.3在设计店标时，不同的行业和类目针对不同的消费者和不同的营销目的会有一些设计上的共性和个性，下面举例说明。3.3.1表现柔美型柔美型店标设计针对女性的行业和类目，多数要表现出女性的柔美与娇媚。3.3.2表现阳刚型

针对男性的行业和类目，要重点表现男性的阳刚之美。阳刚型店标设计

针对年轻女孩和婴幼儿的行业和类目，要突出可爱、萌萌的感觉。可爱型设计3.3.3表现可爱型店标的设计流程3.4下面通过一个实际案例来介绍店标的设计流程。在设计店标前，首先要和客户或领导进行沟通，对店标设计来说沟通是极为重要的，因为这样可以大大提高工作效率。在本案例中，首先得知店铺名称是“鲜果”，主营项目是水果，希望从店标上可以体现出水果店铺的风格。课后习题1．简述一个优秀的徽标都具有哪些特点。2．分析徽标设计规范的重要性。3．淘宝搜索家居类店铺，并分析它们的店标分别属于哪一类。4．根据本章所讲内容设计一个文具类店铺店标，效果如右图所示。制作店标店铺首页在电商店铺中所起到的作用就好像实体店的店面，作为品牌的门脸，它的主要作用是向消费者做展示，通过视觉、氛围、商品和服务的综合感受让消费者对品牌有初步的了解和接触。首页设计得是否有新意直接关系到商品信息的转化率，因此在进行店铺首页视觉设计时要尽可能地让设计能够聚集消费者的注意力，提高商品信息的转化率，这才是首页视觉设计要达到的重要目的。店铺首页视觉设计第4章首页视觉水平的四大指标4.1目录CONTENTS店招视觉设计4.2首焦轮播区视觉设计4.3商品陈列区视觉设计4.4茶叶店铺首页视觉设计案例4.5首页视觉水平的

四大指标4.1判断一个店铺首页设计是否合格要从四大指标来评判：首页跳失率、首页点击率、首页人均点击次数和首页平均停留时间。4.1.1首页跳失率首页跳失率

首页跳失率是指消费者通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该入口总访问次数的比例。针对不同的店铺规模和所售商品的类型，可以参照的判断标准是：如果是心级店铺，那么跳失率在70%及以下都属于正常，不需要进行优化。如果是钻级店铺，那么跳失率在60%以上就需要考虑是否是海报设计和商品信息的问题了，需要根据具体的数据做出相应的优化与调整。4.1.2首页点击率首页点击率

首页点击率是商品在首页展现后的被点击比率，即首页点击率=首页点击量÷首页展现量。店铺的首页大致可以分为两类：店铺首页罗列出各种光彩夺目的商品，希望有一款商品能够吸引消费者。店铺首页没有单品展示，以全屏商品海报形式引导为主。两类店铺首页排版4.1.3首页人均点击次数首页人均点击次数

首页人均点击次数是指在一段时间内人均点击了多少次。人均点击次数4.1.4首页平均停留时间首页平均停留时间

首页平均停留时间为访问店铺首页的所有访客总的停留时长除以访客数（单位：秒），多天的平均停留时间为各天人均停留时长的日均值。行业性质不同，每个访客在不同行业店铺中停留的时间差异很大。在进行分析时，可以以一段时间内访客在店铺首页的平均停留时间作为基数，并记录下这段时间的销售量，以后再拿新数据进行对比就知道平均停留时间内销量是提高了还是下降了。店招视觉设计4.2同实体店一样，网店也有自己的店招。店招位于店铺首页的顶端，用于指示和引导消费者，展示店铺的名称、最新活动与销售内容等一系列信息。店招是店铺的灵魂所在，是消费者进入店铺后看到的第一个模块，也是打造店铺品牌、让消费者瞬间记住店铺的最好阵地，因此设计者要好好把握店招的视觉设计。4.2.1店招视觉设计规范店招高度设计规范淘宝后台的店招高度为120像素，建议设计时设定店招尺寸为950像素×120像素，加上导航条高度30像素，共150像素，可避免发布后导航不显示的问题4.2.1店招视觉设计规范店招元素设计清晰的品牌信息促销信息移动端二维码店招和导航条风格统一设计，突出店铺的品牌形象店招和导航条风格统一4.2.2店铺名称的艺术化处理

虽然有的店铺会在店招中添加设计好的店铺徽标来代替店铺名称，但是文字仍是店铺名称最主要的表现形式。因此，可以采用一种最简单、有效的方式来美化店铺名称，那就是通过不同字体和字号的组合使用赋予店铺名称一定的艺术感。用不同字体和字号的组合营造艺术感01不同字体字号的组合将店铺名称的文字放大，并使用不同于其他字体风格的手写体，让店铺名称文字的版式更加醒目、更具艺术感4.2.2店铺名称的艺术化处理

可以通过添加特效的方式来突出店铺名称的特殊性和醒目度，这些特效包括渐变色、阴影、浮雕与发光等。添加特效，突出特殊性和醒目度02为店铺名称添加特效为了将店铺名称与导航条的颜色区分开，使用渐变效果来修饰店铺名称，营造出层次感，贴合了店铺中销售的品牌手表的特点4.2.2店铺名称的艺术化处理

有时只是采用单一的文字组合、简单的修饰并不能真正表现出店铺的风格和设计的精致感，将店铺名称与合理的修饰元素进行融合设计，以完善、修饰、隐喻或暗示某种信息让店铺名称的设计更加个性化则不失为一种好方法。使用修饰元素提升观赏性03为店铺名称添加修饰元素使用长颈鹿的卡通形象来修饰店铺名称，文字与图案在外形上的契合让店铺名称更具个性和艺术感，更容易在消费者心中形成特定的印象4.2.3图层样式的应用用“渐变叠加”图层样式来表现导航条功能按钮被鼠标触碰后的状态，在视觉上形成凹陷的效果，将其与导航条中正常状态下的功能按钮区分开

图层样式的作用就是对设计元素进行修饰和美化，实现色彩、质感与光泽上的变化。当鼠标指针触碰到导航条中任意一个功能按钮时，该按钮就会呈现出不同的效果，这就是添加图层样式的效果，给人视觉上的错觉，让按钮上的文字更具层次感，更易于展示当前操作的结果首焦轮播区视觉设计4.3在店招与导航条的下方就是店铺首页的首焦轮播区，这个模块占据的面积较大，可以放入大量信息，也是整个网店首页中最醒目的部分。下面将介绍首焦轮播区的设计方法。4.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在设计店铺首页时，除了店招和首焦轮播区外，大部分店铺都会使用商品陈列区来展示商品，让消费者大致了解店铺中商品的形象、风格和价格。商品陈列区也是一个比较重要且尺寸较大的区域，下面将对商品陈列区的视觉设计进行介绍。4.4.1营造视觉动线商品陈列图4.4.1营造视觉动线F形浏览模式③失去耐心，开始进行垂直浏览。当消费者看到第三排仍然是一成不变的图片排列后，浏览的耐心就会减少，还可能会想图片怎么这么多，于是形成对左边的垂直浏览②水平浏览范围缩短。此时图片的布局没有任何变化，消费者对图片浏览的新鲜度就会降低，开始失去浏览的耐心，于是对第二排图片的水平浏览范围便会缩短①浏览初期，视线水平移动，且浏览范围最大。刚开始浏览时，消费者对商品展示图充满了新鲜感和好奇，很可能将第一排图片全部浏览完毕，并根据从上到下的浏览经验转向对第二排图片的浏览4.4.1营造视觉动线商品展示图排列设计商品海报展示图：将重点推荐的商品以单张海报的方式呈现，较为丰富的表现形式能很好地让消费者注意到商品信息两张商品展示图：非重点推荐的产品可以多张并排展示的效果呈现单张商品展示图：较为重要的商品以单张图片的形式排列，较大的展示面积更能获得消费者的瞩目单张图片：除了商品展示图片以外，还可以搭配一些与展示商品相关的商品组合图片，进一步吸引消费者的购买兴趣4.4.2商品布局艺术化

折线型布局就是将商品图片按照错位的方式进行排列。折线型布局014.4.2商品布局艺术化

随意型布局就是将商品图片随意地放置在页面中。这种随意往往需要营造出一种特定的氛围和感觉，让这些商品之间产生一种联系，否则界面中的商品会由于缺乏联系而显得突兀。随意型布局02茶叶店铺首页视觉

设计案例4.5本案例要为某茶叶店铺设计首页装修图。首页设计图标题文字设置的字号较大，利用渐变叠加和投影效果来点缀标题文字，使其更加精致文字选用不同的颜色、字号，并分成三行，显得更有层次感，并通过一些小图案对价格进行修饰和点缀，营造出一种中国风的视觉感受风格一致的文字与图像，营造出一种清新、简洁、充满文艺气息的氛围采用圆角矩形作为背景图的点缀，使商品的排列既整齐又不死板，提升其观赏性和设计感课后习题1．为家电类店铺设计一个店招，并说明自己的设计思路。2．列举几个溶图在实际店铺中应用的案例。3．简述商品陈列区在设计时要考虑的因素。4．利用提供的素材文件为某家具类店铺设计首页，效果如右图所示。家具类店铺首页商品详情页是所有营销的落地点。消费者通过搜索进入店铺后，首先进入的便是详情页；所有页面上有且仅有详情页承担着下单购买的职责；消费者在购买前要对详情页仔细看、反复看，甚至对比看，才能决定是否咨询卖家、是否下单。如果详情页不能满足消费者的需求，不能解决消费者的实际问题，那么前面的工作做得再好，都会功亏一篑。所以，无论是什么店铺，都要对商品详情页进行重点设计。商品详情页视觉设计第5章商品主图设计5.1目录CONTENTS商品细节展示区设计5.2商品功效简介区设计5.3女鞋商品详情页视觉设计案例5.4商品主图设计5.1当消费者在电商平台中搜索商品时，显示在搜索结果页面中的商品图片就是商品主图。商品主图形成了消费者对商品的第一印象，决定着消费者是否点击打开商品详情页，并对商品产生购买欲望。因此，商品主图的设计专业性与视觉吸引力直接影响着店铺的点击率和转化率。5.1.1商品主图的设计规范淘宝网商品主图尺寸要求搜索结果页面中的商品主图尺寸为220像素×220像素商品详情页中的商品主图尺寸为400像素×400像素

天猫商城的商品主图设计规范与淘宝网不同，其规定商品主图尺寸为800像素×800像素以上，自动拥有放大镜功能。5.1.2商品主图的设计形式

利用白色背景展示商品的全貌是商品主图常规的设计形式，特别是天猫商城，大多数行业都要求至少有一张白底主图。展示商品的全貌01以白色背景展示的商品主图5.1.2商品主图的设计形式

商品主图另一种常规的设计形式是通过模特展示商品，或者根据商品的特点和用途搭建生活化、场景化的环境。场景化的设计02利用场景展示的商品主图5.1.2商品主图的设计形式

拼接式设计就是将多张商品图片合成一张商品主图。拼接式设计03拼接式设计的商品主图5.1.2商品主图的设计形式

品牌商品都会在主图的一角放置品牌的Logo，这种方式可以有效地让消费者识别品牌，唤醒老客户的消费记忆，吸引新客户的关注和消费。突出商品卖点04突出卖点的商品主图5.1.3添加文案提高主图点击率添加主图文案添加售后信息，以激发消费者的购买欲望，提高点击率添加商品的卖点简介，提升商品形象，让消费者了解更多商品信息5.1.3添加文案提高主图点击率添加品牌徽标添加品牌信息在添加主图文案时，需要注意以下两点。（1）文案说明信息的表达形式要简洁明了，要有引发消费者产生点击冲动的诱惑力。（2）文案说明信息不能遮挡商品主体。商品细节展示区设计5.2在商品详情页中，为了让消费者能够完整而清晰地了解商品的细节和特点，设计人员会设计相应的模块（商品细节展示区）来对商品进行全方位的展示。下面将详细介绍商品细节展示区的表现形式及其通用的设计方式。5.2.1商品细节展示区的表现形式

指示型表现形式就是先将商品完整地展示出来，再把商品需要突出展示的局部细节图片以类似放大镜的形式排布在完整商品图的四周，并利用线条、箭头等设计元素将细节图片与完整的商品图连接起来，有时还会用简单的说明性语言来对细节进行解说。非常适合体积较小、部件较多的商品或家具等外形特大商品的细节展示。指示型表现形式015.2.1商品细节展示区的表现形式

局部图解型表现形式的设计更简单，只需将商品的局部细节放大即可，不需对细节位置进行指示。比较适合于外观简单、部件少的商品及日常用品的细节展示。局部图解型表现形式025.2.2商品细节展示区的通用设计方式利用文字对细节进行说明01标题文字：对该细节图的内容进行概括和归纳，应用画龙点睛的关键词进行文案设计段落说明文字：详细阐述该细节图的内容，对标题文字进行展开说明使用文字对细节进行说明5.2.2商品细节展示区的通用设计方式利用文字对细节进行说明01系统介绍商品信息对童鞋细节参数进行系统介绍，让消费者一目了然5.2.2商品细节展示区的通用设计方式素材让细节展示更直观02使用两种素材展示商品细节箭头能将商品整体外观图与细节图联系起来，具有引导视线的作用聊天气泡用于修饰细节图、说明文字的边框，使文字和图片能一一对应，以便准确传递商品信息5.2.2商品细节展示区的通用设计方式素材让细节展示更直观02矩形与圆形素材的使用方框规范了文字的显示范围圆形素材的使用让图像之间产生一定的联系商品功效简介区设计5.3商品功效简介区用于对商品的功能或作用进行详尽、透彻的分析和解说。功效简介区的位置在整个商品详情页中算是比较靠后的，消费者能坚持浏览到这里说明他对商品产生了很大的兴趣。将功效简介区设计得有特色可以进一步提升消费者对商品的好感，从而促成消费者下单。5.3.1商品功效简介区的设计规范电商平台商品详情页设计尺寸规范淘宝网详情页左侧边栏宽190像素，中间空10像素，右侧边栏宽750像素，加起来总宽度为950像素。如果关闭左侧边栏，就可以显示950像素宽，否则只显示750像素宽天猫商城详情页布局与淘宝类似，不同之处在于天猫商城新版页面的宽度由750像素变为790像素京东详情页的整体宽度不超过740像素淘宝、天猫和京东的商品详情页

设计尺寸规范商品功效简介区设计将商品的功效分为几个不同的关键点进行介绍5.3.2修饰元素在设计中的重要性

在设计商品功效简介区时，为了将商品功效表述得更加直观、形象，店主可以使用多种修饰元素来丰富画面的内容，例如用图片来代替某些文字或者使用素材来突出某些文字。使用图表对商品的某些功效进行具象表现，利用数据、比例上的优势来增强说服力，提升商品功效简介的可信度5.3.2修饰元素在设计中的重要性

在设计商品功效简介区时，为了将商品功效表述得更加直观、形象，店主可以使用多种修饰元素来丰富画面的内容，例如用图片来代替某些文字或者使用素材来突出某些文字。复选框素材的使用，加强了对商品功效的肯定作用聊天气泡具有一定的指引视线和修饰作用将洗衣液的功效用对比图的方式表现出来，提升功效的可信性女鞋商品详情页

视觉设计案例5.4下面将结合前面所讲的内容为一款女鞋设计商品详情页，设计内容包括商品主图、商品介绍等，要求设计的页面要能清晰、准确地展示与说明女鞋的特点。女鞋商品详情页课后习题1．简述如何设计商品主图才能提高点击率。2．找出五个不同类目的店铺，分析它们的商品细节展示区有何异同。3．找出两家卖同一类商品的店铺，思考消费者会选择购买哪一家的商品，并说明购买原因。4．利用提供的素材文件为某水果店铺设计一个商品详情页，效果如右图所示。果冻甜橙商品详情页图片是电商营销的基础与灵魂，尤其是推广图片，其设计的重要性不言而喻。可以说优质的推广图片是吸引流量、促进点击、提高转化率的必需品，也是视觉设计的关键点。本章将以直通车图、钻展图、直播封面图、聚划算主图为例来介绍如何设计出有吸引力和高点击率的推广图片。高点击率

推广图片视觉设计第6章推广图片构图法则6.1目录CONTENTS直通车图片设计6.2钻展图设计6.3直播封面图设计6.4聚划算主图设计6.5推广图片构图法则6.1在图片设计中，构图有着自己独特的形式规律。一幅成功的推广图片在进行布局构图时是十分讲究的，需要符合人们的心理和视觉习惯。下面将就构图问题进行探讨。6.1.1变化式构图变化式构图

变化式构图又称留白式构图。设计者将商品图安排在某一角落或某一边，同时留出大部分空白。6.1.2对角线构图对角线构图

对角线构图就是把商品图安排在对角线上，利用画面对角线来整体统一画面元素，同时也能使陪体与主体区分明显。6.1.3对称式构图

对称式构图给人一种画面平衡、稳定、商品突出的感觉，缺点是画面比较呆板、缺少变化。6.1.4平衡式构图

平衡式构图给人一种祥和、平静的感觉，缺点是缺乏创新，没有新意。平衡式构图不像对称式构图那样老气、呆板，所以很多电商设计者都会选择这种构图方法。6.1.5紧凑式构图紧凑式构图

紧凑式构图就是将商品以特写的形式加以放大，布满画面，具有紧凑、细腻、微观等特点。6.1.6X形构图X形构图X形构图是对角线构图的升级版，也称放射式构图。它是将视觉焦点放置在画面的中央位置，让每一条放射线的中点都位于视觉焦点之上。直通车图片设计6.2直通车图片的视觉效果不容忽视。消费者通过搜索关键词进入页面，最先从直通车展示位看到的就是图片和标题，并且图片占了绝大部分位置，所以极大地影响了点击率。优秀的直通车图片能够吸引消费者进行点击，有点击才可能有转化，从而提升直通车推广的效果。6.2.1图片整体风格设计

在制作促销图片之前，第一步要做的就是根据文案或商品等因素来进行风格定位。我们可以根据直通车的投放计划确定自身直通车商品推广所投放的位置（第几页，第几个商品），以便对周边商品进行分析，从而在设计上更为突出，以引起消费者的注意。直通车图片应用案例6.2.1图片整体风格设计

设计时，要确定推广的商品所针对的消费群体，同时分析他们的喜好，以确定设计风格及颜色；分析他们的消费能力，以确定什么样的促销方式是其最容易接受的；分析他们的生活习惯，合理调整投放时间和策略，与竞争对手形成差异，以提高投放效率。针对年轻消费群体的直通车图针对商务群体的直通车图6.2.1图片整体风格设计

确定图片风格定位以后，就可以进行直通车图的制作了。在制作直通车图时，可以参考以下技巧。

在设计直通车图时，可以：选择合适的背景颜色，或者在拍摄时选择使用与商品本身色彩差异较大的背景颜色。同时，注意背景的颜色切勿太杂太乱，否则会影响商品在图片中的主导地位。也可以把图片的背景进行适当的模糊处理，以突出商品形象。运用适当的背景01背景模糊处理6.2.1图片整体风格设计

确定图片风格定位以后，就可以进行直通车图的制作了。在制作直通车图时，可以参考以下技巧。

在进行图片设计时，较暗的图片可以用色阶调亮，模糊的图片可以适当锐化。在缩放商品图片时，商品会相应地变模糊，因此在缩小商品后适当锐化一次（不可超过两次），这样商品看上去更有质感。需要注意的是，缩小了的图片切勿放大，如果觉得商品缩放得太小了，就用高精度原图重新缩放。保证图片清晰度02用色阶调亮背景6.2.1图片整体风格设计

确定图片风格定位以后，就可以进行直通车图的制作了。在制作直通车图时，可以参考以下技巧。

商品不能被任何素材及文字覆盖，要保证图片与素材或文字的间距至少为10像素。对于展示文案的具体内容，店主必须分析商品及消费群体，提炼出精髓予以展示。精简文字，去除“牛皮癣”03突出促销价格6.2.1图片整体风格设计

确定图片风格定位以后，就可以进行直通车图的制作了。在制作直通车图时，可以参考以下技巧。

在做商品展示和拍摄时，可以找一些“配角”进行搭配，但要注意它们的主次关系。消费者会自动根据图片中的比例关系来区分商品，因此主角要占约2/3的位置，以避免给消费者带来误解。巧用素材搭配04素材搭配6.2.2突出商品卖点的设计

在店铺推广直通车主图中可以放置更多的内容来展示店铺信息，利益点的说明也可以偏向于整体店铺的利益点。突出利益点的直通车主图不仅有针对所展示单品的利益点信息说明，也通过“顺丰包邮”表明了店铺的利益点钻展图设计6.3考察钻展图投放性价比的关键在于点击率。在同样成本支出与展现量的情况下，钻展图的点击率越高，其所起到的引流效果就越明显。要想提高钻展图的点击率，就离不开让图片更有吸引力的视觉处理。6.3.1博取眼球的创意设计从不同角度拍摄的商品图片正面与侧面相结合的拍摄角度，尤其是正面角度给人以迎面冲来的视觉感受，富有视觉冲击力侧面拍摄角度是较为常规的拍摄角度，少了几分新鲜感与吸引力6.3.1博取眼球的创意设计不同造型商品摆设6.3.2统一图片设计风格

通过图片背景的设计可以烘托出图片的整体氛围与设计风格。钻展图背景的设计主要有两种方式：一种是通过拍摄道具构建出背景，从而营造图片的气氛；另一种是合成背景。简约风格图片整体的设计风格非常大方，选择粉色为主的背景彰显了其简洁的设计风格。通过对元素颜色的控制，突出“免费送”的宣传主题，激发消费者潜在的购买欲望不同的图片背景设计风格典雅风格家具的摆放富有情景感，背景使用了与家具相近的颜色，图片整体体现出典雅的风格。图片突出了商品“家具”，文案又突出了“1元抢”，主题明确，能够激发消费者的点击冲动6.3.3确定重点表现元素重点突出优惠价格元素实惠的价格是图片重点突出的对象，能够迅速吸引消费者的眼球，因此该元素色彩明亮、尺寸较大直播封面图设计6.4封面图是直播的门面，可以提升观众的观看欲望，因此封面图成为直播间流量高低的直接关联因素。这就要求直播封面图要足够吸引人。据相关统计表明，精心设计了封面图的直播间，其流量要比使用默认头像的直播间大得多。6.4.1直播封面图尺寸要求

直播封面图不宜过大也不能太小，做到清晰、美观很重要。以淘宝直播封面图为例：它没有固定的尺寸，只要是正方形即可，一般为750像素×750像素，最小不能低于500像素×500像素。6.4.2直播封面图设计原则符合直播主题01童鞋店直播封面图男装店直播封面图6.4.2直播封面图设计原则符合直播主题01封面图要美观、清晰02童鞋店直播封面图女包店直播封面图6.4.2直播封面图设计原则符合直播主题01封面图要美观、清晰02色彩要适当03带有“牛皮癣”的直播封面图6.4.2直播封面图设计原则符合直播主题01封面图要美观、清晰02色彩要适当03不要妨碍重要内容的展现04禁用合成图05采用合成图的直播封面图6.4.2直播封面图设计原则符合直播主题01封面图要美观、清晰02色彩要适当03不要妨碍重要内容的展现04禁用合成图05拒绝不当信息06封面图不要雷同07聚划算主图设计6.5聚划算是目前互联网上最大的团购平台，是淘宝内部优质流量的汇合处。对于卖家来说，聚划算用得好不仅可以为自家店铺与商品带来丰富的真实流量，还能打造爆款、提升店铺销售额。因此，聚划算主图的设计就显得尤为重要，只有设计出有吸引力的聚划算主图，才能吸引消费者进行点击。6.5.1聚划算主图设计思路

拍摄角度不限，建议选用商品最大展示面积的角度进行拍摄，以保证主题商品明确，商品在画面中能够完整显示。注意，商品图片应该像素清晰、色彩准确，白色或浅色商品可以考虑在深色背景下进行拍摄。商品拍摄016.5.1聚划算主图设计思路

建议图片背景只选择真实拍摄的实景，或者单色背景中的一种（包括同一色调的渐变）。不建议使用多色或者多个实拍背景，也不建议出现水印。背景的选择应该是为了衬托主题商品，建议运用虚化背景、突出主题的方式，或者使用同一色系或渐变色背景。商品背景026.5.1聚划算主图设计思路

多色商品展示尽量使用实拍图，没有实拍图时也可以使用色卡。尽量在主图展示上不出现细节图，否则只会喧宾夺主。如果选用模特，那么同一画面中的模特不要多于两位，要把商品和模特放在统一场景中进行拍摄，尽量不出现拼图现象。商品构图036.5.2聚划算主图设计案例

下面将结合前面所讲的内容为一款化妆品设计聚划算主图。在制作过程中使用渐变的背景进行修饰，添加“全国包邮”、“送”促销方案，以及简单的广告词来突出产品优势。化妆品聚划算主图课后习题1．为六种推广图片构图法则各举一个实例。2．在淘宝上找出直通车做得好的店铺，并分析其直通车图片的优势。3．列举几张有设计感的钻展图，并说明它们好在哪里。4．利用提供的素材文件设计一张数码类的聚划算主图，效果如右图所示。聚划算主图促销活动几乎是网店运营中最常见、最重要的内容，可以说一个成功的店铺是离不开各种各样的促销活动的。能让促销活动得到直接体现的手段就是视觉，促销活动的内容也只有通过视觉的表现才能更好地传递给消费者。本章将着重介绍网店促销广告的设计方法与技巧。网店促销活动页

视觉设计第7章促销广告的黄金设计要素7.1目录CONTENTS不同发展阶段的促销广告设计7.2促销广告的黄金

设计要素7.1网店促销的形式多种多样，然而不论是哪种促销方式，都需要先让消费者知道店铺中有促销活动，再让他们参与其中。告知消费者的最直接的方式就是促销广告。有了吸引人的促销活动，就要以吸引人的广告设计方式表现出来，这样才能体现出促销的价值与意义。7.1.1保证设计的基本美感

具有视觉营销力的促销广告需要具备基本的设计美感与清晰度。例如，设计时考虑文字的易读性、色彩搭配的协调性、图形图像元素运用的美观性等。错误的促销广告示例1．色彩搭配不明显，找不出重点商品在哪里2．修饰元素太多，容易让消费者眼花缭乱7.1.1保证设计的基本美感

如果想使促销广告图片更富吸引力与协调感，就要特别注意以下四个方面。

促销广告图片中的平衡取决于各个元素的“视觉重量”。平衡01横向拍摄促销广告图片尺寸较窄，此时如果展示商品侧面角度，就无法很好地展示透气性好这一卖点，采用横向拍摄的方式在均衡构图的同时，也起到了一定的视觉引导作用7.1.1保证设计的基本美感

如果想使促销广告图片更富吸引力与协调感，就要特别注意以下四个方面。

这里所讲的势能是指在设计促销广告时可以利用视觉元素制造出对消费者视觉的牵引力，以博取消费者更多的注意力，并引导他们对促销广告图片进行浏览。势能可以分为动态势能与静态势能两种类型。势能02动态势能：随着图片中模特转身舞动的动势，消费者的视线会逐渐转移到男鞋上，且会一并将图中内容浏览完毕，这种构图方式富有明显的动态指向效果7.1.1保证设计的基本美感

如果想使促销广告图片更富吸引力与协调感，就要特别注意以下四个方面。

这里所讲的势能是指在设计促销广告时可以利用视觉元素制造出对消费者视觉的牵引力，以博取消费者更多的注意力，并引导他们对促销广告图片进行浏览。势能可以分为动态势能与静态势能两种类型。势能02静态势能：添加相对较为“安静”的元素来引导消费者的目光。图中右侧模特朝向画面中间，这在某种程度上引导消费者将视线集中到画面中央7.1.1保证设计的基本美感

如果想使促销广告图片更富吸引力与协调感，就要特别注意以下四个方面。

人们在感知事物时习惯把位置相近的事物看作一体，所以在进行促销广告图片的设计时可以将关联性高的信息与元素组合在一起形成集群，便于消费者接收信息，避免主要信息布局分散的情况发生。集群03有很多的促销文案信息，而且分布较为散乱，不能让消费者集中注意力，很容易形成阅读的遗漏7.1.1保证设计的基本美感如果想使促销广告图片更富吸引力与协调感，就要特别注意以下四个方面。

人们在感知事物时习惯把位置相近的事物看作一体，所以在进行促销广告图片的设计时可以将关联性高的信息与元素组合在一起形成集群，便于消费者接收信息，避免主要信息布局分散的情况发生。集群03文案信息较为集中，集群的构图方式更利于信息的传达7.1.1保证设计的基本美感

如果想使促销广告图片更富吸引力与协调感，就要特别注意以下四个方面。

利用适当的图形元素来分割促销广告图片既能丰富画面的构图形式，也能让画面整体看起来更具装饰意味。这些图形像是被贴在画面中的标签，因此我们将这种构图方式称为标签分割。标签分割04利用圆形分割画面，让画面色彩得到协调，同时使文案信息更为突出7.1.1保证设计的基本美感

如果想使促销广告图片更富吸引力与协调感，就要特别注意以下四个方面。

利用适当的图形元素来分割促销广告图片既能丰富画面的构图形式，也能让画面整体看起来更具装饰意味。这些图形像是被贴在画面中的标签，因此我们将这种构图方式称为标签分割。标签分割04利用菱形分割画面，突出促销文案信息，使画面变得更富装饰感7.1.2营造促销氛围添加引导标签01按钮与箭头起到了引导标签的作用，促使消费者进行点击操作7.1.2营造促销氛围添加限制提示02时间限制说明，营造紧张感数量限制说明，营造紧张感7.1.3促销广告图片的设计原则

商品或店铺品牌等信息获取并不是促销广告图片中需要重点展开描述的对象，相反，为了迎合促销广告的“促销”性质，价格折扣、包邮等促销内容本身则成为需要重点突出的内容，需要被放在图片视觉焦点的位置上，让消费者能够明确地感受到促销的氛围。主题突出01促销活动主题被放在广告图片的左侧中心位置，且选用了对比明显的颜色，使其看起来更为突出促销活动主题突出7.1.3促销广告图片的设计原则

与钻展图设计方法类似，促销广告图片也需要保持视觉设计元素的风格统一。风格统一027.1.3促销广告图片的设计原则

当促销广告图有明确的适用人群时，广告中模特的选择和文字、色彩等其他视觉元素都要迎合这些人群的特点。目标明确03选择少女作为模特，同时在用色方面大面积使用了具有甜美感的粉色系色彩，所选择的字体造型也并非一板一眼，这都凸显了少女的青春气息，也与少女服饰商品的气质形象相匹配7.1.3促销广告图片的设计原则

当促销广告图有明确的适用人群时，广告中模特的选择和文字、色彩等其他视觉元素都要迎合这些人群的特点。目标明确03采用具有怀旧倾向的黄褐色作为主色调，同时文字也选择了较为庄重和具有书法感的字体，文字色彩选择了具有稳重感的黑色与红色，以此来凸显老年人的庄严与大气，同时也很好地衬托出了服饰的特点不同发展阶段的

促销广告设计7.2促销活动可以更具意义与目的地展开，其中的一条思路便是根据店铺发展的不同阶段来安排相应的促销活动。促销活动需要在一定程度上迎合店铺发展的具体情况来进行更富针对性的策划，只有与店铺发展情况相结合，促销广告的投放才更具规划性、更有价值。7.2.1发展初期——为打造爆款而促销

打造爆款除了需要做好基本的商品定位、质量评估、定价等之外，在店铺发展的初级阶段，打造爆款、投放促销广告的推广行为也是很有必要的。单品促销广告设计单品卖点说明促销内容说明单品展示7.2.1发展初期——为打造爆款而促销

卖家也可以通过增加一些秒杀活动来吸引消费者参与到单品的促销活动中，同时“秒杀”字样也能营造出一种紧张的购物气氛，将其明确地表现在促销广告图片之中，能够增添一种争分夺秒的抢购感。秒杀活动设计醒目的秒杀说明设计7.2.1发展初期——为打造爆款而促销

当单品有了一定的销量之后，销量数据便成为促销广告的另一利器。在广告图片中，给商品贴上“爆款”标签，这样消费者可以更为明确地感受到这种商品有着不错的销量。贴上“爆款”标签“爆款”标签给消费者留下商品高销量的印象，增强其信任感用销量数据来说服消费者7.2.2发展中期——为品牌而促销

在设计促销广告图片时，可以明确地提出是为了品牌宣传而进行的促销活动。品牌促销活动为提升品牌知名度开展的促销活动7.2.2发展中期——为品牌而促销

在为打造品牌店铺设计促销广告图片时，图片展示标准的建立能够很好地展示店铺中不同的商品，而且统一的表现形式也能让消费者形成对品牌的联想。展示标准包括商品摄影、构图与字体使用等。统一品牌形象两张图片为同一品牌的促销广告，图片整体的设计风格、商品的拍摄风格、字体的选择等元素都进行了统一与规范7.2.3发展成熟期——为客户而促销

针对会员而展开的促销活动能在一定程度上让消费者感受到消费特权，也能为维系客户起到强大的推动作用。会员促销活动会员促销页广告语并不具备煽动性，这样的文案非常常见，不具备感染力，只起到了告知作用，并没有考虑到消费者的需求，因此不能起到说服消费者的营销作用整体版面文字过多，显得较为教条：对于消费者而言，购物是一个愉快的放松过程，在这一过程中，他们更希望感受到轻松与愉悦，而图中过多的文字显得繁复而拥挤，这会让消费者失去阅读的耐心会员制度页面采用图文结合的表现形式，简洁、直观，更便于阅读与浏览统计图表、装饰效果等表现形式在一定程度上减轻了文字阅读的枯燥感会员促销页面信息课后习题1．列举几张添加了限制提示的促销广告，并说明其优势。2．举例说明势能对消费者的影响。3．如果你是店铺卖家，在店铺发展初期应该如何设计促销广告图片？移动端网店可以看作PC端的延续，在设计时更需要把握“用户体验”这一关键点。手机移动端网店是依附于智能手机这一平台的，而智能手机又让人与机器之间有了更加亲密的接触与互动，因此与手机移动端中其他应用软件或App一样，在设计手机移动端店铺页面时要结合智能手机平台的特色设计出更加注重交互体验与友好度的页面，只有这样才能博得消费者的欢心。移动端网店

用户体验设计第8章移动端网店的设计标准8.1目录CONTENTS移动端网店视觉设计8.2移动端网店的设计标准8.1现在手机应用的界面设计风格普遍倾向于简洁、清爽的扁平化设计，这是因为去除冗余和繁杂的装饰后，手机应用的界面会变得更加干净、整齐，可以更直接地将重要的信息展示出来，在给消费者带来更好的操作体验的同时有效地减少了认知障碍的产生。作为一款手机应用，移动端网店的页面装修也应该遵循这样的设计理念，下面将以手机淘宝为例进行详细介绍。8.1.1移动端网店店标设计

手机淘宝的店标设计思路与PC的网店完全不同，手机淘宝的店标直接出现在店铺头上，并在店标右侧显示店铺名称。手机淘宝的店标适合采用图形或字母组合的形式。店标图片8.1.1移动端网店店标设计

利用朋友圈进行小范围营销的店铺或销售母婴用品等特定商品的店铺，也可以使用头像作为店标，这样有助于拉近店铺与特定类型消费者的心理距离，但是不要使用公众人物的头像。移动端网店还可以使用商品的实物照片作为店标，让人一眼就能明白店铺销售的主营商品。头像店标图片和实物店标图片8.1.2移动端网店图片尺寸标准

每个详情页可以增加一个音频，时长不超过30秒，大小不超过200KB，格式为MP3。每个图片、音频的大小不得超过1.5MB。图片尺寸标准需在图片上添加文字时，中文字号≥30磅，英文和阿拉伯数字字号≥20磅高度≤960像素（建议高度不超过600像素），图片格式支持JPG、GIF、PNG首页和详情页图片宽度为480像素~620像素（建议不超过608像素）8.1.3移动端网店框架结构安排需要注意在已有的框架结构中添加能够促进消费者购买的内容。根据框架结构层面给所添加的内容设置相应的商品或活动链接也尤为重要。移动端网店首页界面店铺框架结构红色框出部分为淘宝平台自动生成的板块，其中将店铺首页划分成了“店铺首页”

“全部商品”“店铺动态”“宝贝分类”

“店铺会员”等固定板块，卖家只需在不同区域添加对应的店铺内容即可移动端商品详情页界面图中出现的“收藏”

“立即购买”等图标是不需要自己设计的，并且在详情页的第一屏都会出现商品图片、价格、名称等信息展示，卖家可以不考虑这些框架结构的布置，需要设计的是图片、名称等信息内容8.1.3移动端网店框架结构安排需要注意在已有的框架结构中添加能够促进消费者购买的内容。根据框架结构层面给所添加的内容设置相应的商品或活动链接也尤为重要。图片对应的链接移动端店铺首页中的轮播图片对应移动端网店视觉设计8.2手机移动端店铺视觉设计与PC端的设计思路基本是一致的，都是为了展示商品，展示店铺与品牌，促进消费与店铺的持续发展，然而PC端页面的全部内容却不能简单地一键导入手机移动端，否则会出现PC端内容无法适应手机端的情况。在进行手机移动端店铺装修的视觉设计时，要考虑到手机端的特点与属性，并进行相应的变化与调整。8.2.1信息内容简洁，便于快速传播对信息进行必要的精简化处理是让消费者快速浏览与接收信息的关键。移动端与PC端对比手机移动端商品详情界面简化版PC端图文详情8.2.1信息内容简洁，便于快速传播控制文字信息的篇幅及文字尺寸的大小也是让信息在手机移动端清晰展示的方法之一。PC端与手机移动端展示的文字信息比较手机移动端的展示文字信息较为模糊，虽然界面整体设计感较强，显得较为精致，但是消费者不能很好地阅读界面中的文字信息，其营销效果也会削弱。因此，不能一味地追求视觉的美观，还要通过文字内容的精简与尺寸的变化保证信息能被消费者快速接收PC端的展示文字信息清晰可见8.2.1信息内容简洁，便于快速传播手机移动端的文字信息可以尽量简化，要多利用图片来表现信息。大量的文字信息相比于纯文字的形式，图文结合的方式能让消费者在接收信息时更省心图文结合8.2.2简单方便的操作与交互

在进行手机移动端的店铺视觉设计时，有的店铺会直接套用PC端的设计。界面的缩放设计滑动屏幕后，界面放大，消费者能够比较清晰地看清界面中的信息未缩放，正常显示尺寸的商品详情界面。受手机尺寸的限制，界面中的信息较小，不能清晰地展示在消费者面前放大界面后，受手机屏幕尺寸的限制，界面中的信息不能在纵向或横向空间中完整地展示，消费者还需要左右上下拖动界面才能完整地浏览这部分信息当消费者想要完整且清晰地阅读详情页文字信息时，在未缩放的情况下，无须拖动界面，便可以展示该部分信息

在进行手机移动端的店铺视觉设计时，要简化一切不必要的设计，让消费者不必因为多余的操作而忘记了购买的初衷，这也是促进手机移动端店铺销量增加的有效手段之一。操作步骤较多为了能够更清晰地阅读界面上的文字信息，就需要消费者点击图片，然后滑动屏幕，放大界面8.2.3整体设计风格首尾呼应

店铺整体的装修与设计风格需要做到首尾呼应，否则就不利于店铺完整设计风格的塑造。苏宁易购手机店铺8.2.4保持色彩与文字的鲜明感

在进行手机移动端店铺的视觉设计时，最好采用较为鲜亮的色彩，因为这样既能给消费者带来较好的浏览体验，同时也能与淘宝平台所提供的背景相融合，让店铺的整体设计风格更加统一与完整。首页装修界面店铺笼罩在蓝色色调之中白色底图片手机淘宝所提供的灰色背景图片8.2.4保持色彩与文字的鲜明感

在进行手机移动端店铺的视觉设计时，最好采用较为鲜亮的色彩，因为这样既能给消费者带来较好的浏览体验，同时也能与淘宝平台所提供的背景相融合，让店铺的整体设计风格更加统一与完整。两种色调对比深色调显得较为沉闷与压抑，不能给人带来轻松感明亮的色彩给消费者带来豁然开朗感，惹眼而又具有活力8.2.4保持色彩与文字的鲜明感

在进行手机移动端店铺的视觉设计时，最好采用较为鲜亮的色彩，因为这样既能给消费者带来较好的浏览体验，同时也能与淘宝平台所提供的背景相融合，让店铺的整体设计风格更加统一与完整。大面积采用高纯度色彩，界面整体显得活泼，能给人带来愉悦的视觉感受没有采用高纯度色彩，却被高明度色调所覆盖，界面整体呈现出鲜明与淡雅感高纯度色彩与高明度色调8.2.5保持常换常新

手机移动端的视觉设计保持常换常新的状态，不仅能够满足这部分消费群体对新奇事物的追求，也不会让店铺看起来像是一个无人看管的空店。当然，这一切也是需要