下载掌阅APP，畅读海量书库
立即打开
设计一定是有法则与规律可循的。如果不清楚这些，就相当于摸着石头过河，做的东西不但没有美感，而且可能陷入频繁改稿的尴尬境地，又不能让顾客产生强烈的购买欲望。本节笔者将对电商设计需要遵循的4个原则进行讲解。
无论是实体店，还是网店，在进行装修设计之前，都要根据店铺的运营模式、产品的整体情况和用户群体的喜好情况对店铺进行明确的定位，再有针对性地进行设计。
在店铺的定位分析这块，主要可从运营模式的定位、风格的定位和受众群体的定位这3方面入手。
店铺的运营通常分为品牌型和营销型两种模式。
品牌型店铺通常将产品质量和产品服务放在第一位，致力于塑造强实力、高质量和好服务的品牌形象。在店铺视觉营销表现与设计过程中，品牌型店铺重在体现产品的价值，因此产品价格会高于同类店铺的产品，不过在产品的设计、生产工艺及售后服务等方面会优于同类店铺的产品，如图1-9所示。
图1-9
营销型店铺通常将优惠活动放在第一位，致力于塑造实惠、低价的品牌形象。在店铺视觉营销表现与设计中，营销型店铺重在打造热闹的促销氛围，以此来刺激大量消费者关注和购买，如图1-10所示。
图1-10
这里所说的“风格”主要是指买家在浏览网店页面时，店铺的氛围和品位等给买家的直观感受。在电商设计中，店铺的风格是一种无形的感觉。而对于电商设计师来说，对店铺风格的定位是比较难把控的一环。
结合日常的工作情况和经验，在这里笔者将店铺风格分为以下6类。
时尚风的特点是配色大胆，突出标题和产品模特，致力于打造时尚、大气的购买氛围，适用于女装或彩妆护肤类店铺，如图1-11所示。
图1-11
复古风的特点是运用大量的中国风元素（如书法、剪纸和水墨等），致力于打造古色古香的购买氛围，适用于茶叶店或白酒产品店等店铺，如图1-12所示。
图1-12
小清新风的特点是整体以淡色调为主，致力于打造唯美、清爽和舒适的购买氛围，适用于服装店、美容护肤用品店、家居用品店和饰品店等店铺，如图1-13所示。
图1-13
炫酷风的特点是整体以冷色调为主，致力于打造高品质、炫酷的购买氛围，适用于男士化妆品店、文体用品店、户外用品店和数码产品店等店铺，如图1-14所示。
图1-14
简约风的特点是追求极简主义，致力于打造时尚、高端的购买氛围，适用于品牌女装店、品牌珠宝店等店铺，如图1-15所示。
图1-15
扁平风的特点是摒弃阴影、透视、纹理及渐变等一切不必要的修饰元素，致力于打造干净、简洁和舒适的购买氛围，适用于母婴用品店、男装店等店铺，如图1-16所示。
图1-16
不同类型、不同层次的产品，面对的受众群体也是不一样的。在进行电商设计时，设计师需要根据产品的受众群体的定位情况，有针对性地对店铺进行装修与设计。
男士产品店铺追求有活力、健康的视觉氛围。在装修设计中，多采用绿色、蓝色和黑色等颜色，装修风格追求简洁和干净利落的效果。同时依照产品的实际情况，可以选择时尚、正式、休闲或轻松等设计元素配合设计，如图1-17所示。
图1-17
女士产品店铺追求优雅大方、青春靓丽的视觉氛围。在装修设计中，多采用紫色、粉色和红色等颜色。为了突出女性“柔美”的特点，可以多选用一些穿着时尚的模特的照片或文艺唯美的素材图配合设计，如图1-18所示。
图1-18
婴幼儿产品店铺追求可爱、天真、温馨舒适的视觉氛围，在装修设计中，多采用绿色、蓝色和黄色等偏清新的颜色进行搭配。同时为了强化可爱天真的氛围，可以多用卡通、手绘等元素配合设计，如图1-19所示。
图1-19
儿童产品店铺追求明亮、活泼的视觉氛围。在装修设计中，多采用明度比较高的蓝色、黄色、紫色、粉红色等颜色进行搭配。同时为了强化活泼的氛围，可以多用稍微夸张、充满想象力的元素配合设计，如图1-20所示。
图1-20
青少年产品店铺主要围绕“女生喜欢漂亮，男生喜欢帅气”的受众心理特征进行设计，追求宽松、新潮的视觉氛围。在设计中，多采用明度较高的红色、蓝色、黄色和绿色等颜色，同时突出放松、舒适和追求潮流的感觉，如图1-21所示。
图1-24
图1-21
上班族主要是指18~30岁的上班人群。他们对于时尚这块比较敏感，同时购买能力也较强。在设计中，需要追求时尚感，同时可以采用大量时尚语言激起他们的关注和兴趣，并引起共鸣，如图1-22所示。
图1-22
老年人产品店铺追求安全、健康和温馨的购买氛围。此外，在网店中购买中老年产品的消费者一部分是年轻子女，所以购买氛围也需迎合他们的心态才行，如图1-23所示。
图1-23
在电商设计中，各个元素信息的排版和布局是否合理直接决定着该设计是否成功。那么如何进行合理的排版和布局呢？要遵循以下4个原则。
对于设计来说，“对齐”属于一个很基本的原则。我们随手翻阅一下身边的图书、杂志或报纸等，里面几乎所有的图文都会运用到对齐。依照“对齐”原则设计的页面给人稳重、统一和工整的感觉，如图1-24所示。
在日常设计中，对齐具体划分下来有左对齐、右对齐和居中对齐3种方式。其中左对齐和右对齐相对比较容易理解，这里不过多描述，如图1-25所示。
图1-25
居中对齐这种方式主要运用在一些房地产、珠宝产品等的海报设计上，整体给人一种正式、大气和高端的感觉。在排版过程中，主要会选择将文案直接放在产品的上方位置，并利用文案对产品进行适当的遮挡处理，以营造出一前一后的层次感，最后加上一些光效，能提升整个画面的视觉影响力，如图1-26所示。
图1-26
小提示
要注意的是，居中对齐的排版方式并不适合设计新手使用，因为它对画面的布局把控有着比较高的要求。同时，在依照“对齐”原则进行排版时，注意同一张图中只能使用一种对齐方式，避免出现多种对齐方式。
在电商设计中，合理地运用好“对比”可以让页面层次分明，而且能够很好地将页面中的主要信息突显出来，增强页面的视觉效果，如图1-27所示。
图1-27
在日常生活中，对比具体划分下来有虚实对比、冷暖对比、文字大小对比和粗细对比这4种方式。
“近实远虚”是日常生活中的一种视觉现象。在电商设计中，把握好虚实对比的关系可以很好地将产品主体呈现出来，并增强画面的空间感。而想要实现这样的效果，一方面可以通过减少图像的色彩层次，降低图像的纯度来实现，另一方面可以对作为背景的图像进行适当的模糊处理，产生近实远虚的感觉，如图1-28所示。
图1-28
电商设计中的冷暖对比主要是指色彩的冷暖对比。在进行电商设计时，使用冷暖对比方式进行排版，可以让画面看起来更加活泼，而且具有较强的视觉冲击力，如图1-29所示。
图1-29
在电商设计中，通过文字大小对比方式进行排版，可以将画面中的主要信息呈现得更加清晰，同时增加画面的层次感，使其看起来更加舒服和合理，如图1-30所示。
图1-30
粗细对比即“刚”与“柔”的对比。在电商设计中，较粗的字体给人强壮、刚劲和稳重的感觉，较细的字体则给人纤细、柔弱和活泼的感觉。在电商设计中，对于主题内容信息，通常建议使用较粗的字体进行排版，而其他的则可以使用较细一些的字体，如图1-31所示。
图1-31
在电商设计中，设计师如果遇到一张产品图文案过多的情况，可以考虑对文案进行分组，将同组的文案摆放在一起，再进行排版。这样做的好处是不仅可以使整个画面富有条理，方便消费者阅读，还会让版面看上去更加美观，如图1-32所示。
图1-32
电商设计中构图有很多种方式，在这里笔者主要列举以下5种。
在日常生活中，三角形、正方形、长方形和圆形等几何图形可以组成很多有趣的图形，也很符合现代审美需求。而在电商设计中，适当加入一些几何图形，以斜切或正切的方式处理画面，会让画面看起来更加有动感和节奏感，如图1-33所示。
图1-33
在电商设计中，若是遇到刚好符合设计想法的产品元素，不妨将其制作成图形，然后放到画面当中，不仅可以起到填充画面的作用，让信息表达更明确，还能让画面看起来充满创意，而且更加有艺术感，如图1-34所示。
图1-34
在电商设计中，通过放射的方式将画面表现出来，能让画面呈现出较好的立体效果与空间感，同时让视觉焦点更明确，视觉冲击力更强，如图1-35所示。
图1-35
小提示
需要注意的是，放射状排版的文字不适合阅读，因此要特别注意文字排版，同时建议在文字数量较少的情况下使用。
此种构图方式往往是在内容不多，又要突出个性的页面设计中使用。这时，我们需要尽可能多地往画面上添加元素，同时在添加元素前，最好就定好画面整体的风格，设想并搭建一个框架来承载这些元素。这样处理出的画面不仅能够非常直观地表现出产品信息，而且充满情感，容易引起消费者的关注，如图1-36所示。
图1-36
流程化的构图方式特点是从上往下逐一展示出商品信息，看起来视觉动线非常清晰和明确，且画面生动有趣，如图1-37所示。
图1-37
小提示
在电商设计中，无论采用何种构图方式，都需要以消费者的要求为基准，同时能够简单、明了和有效地向消费者传递商品信息。
色彩搭配在电商设计中也非常重要。一个好的电商设计作品通常包含色彩、图像和文字这3个元素。而在这3个元素中，色彩可以说是较重要的一个元素，如图1-38所示。
图1-38
色彩的三要素包括色相、纯度和明度。色相即颜色的相貌，例如红色的色相即为红，绿色的色相即为绿，纯度即颜色的鲜艳程度，不同的色相明度不同，纯度也不相同，明度即色彩的明暗差别，也可以说是颜色深浅的差别，如图1-39所示。
图1-39
想要学好配色，首先需要了解配色的比例标准。日本的某位设计师曾提出一个配色的黄金比例，即70:25:5。其中，70指的是大面积使用的主色，25指的是使用的辅助色，5指的是使用的点缀色，如图1-40所示。
图1-40
在电商设计中，同一个画面的色彩不建议超过3种。画面中使用的颜色越少，就越好控制一些，最终生成的画面也会显得更简洁，如图1-41所示。
图1-41
小提示
当然，如果是一些特殊情况，例如要制作的是一张节日类的海报，要求画面呈现出热闹、有活力的氛围，这时候可以使用多种颜色进行搭配。
电商设计中有根据参考配色、根据理论配色、根据模特（产品）配色和根据印象配色这4种常见配色方式。
此种配色方式是指找到好的配色案例作为参考，然后运用到我们自己的设计中。在找参考进行配色时，不一定要只参考一些电商作品，也可以将一些好的设计作品作为参考，如图1-42和图1-43所示。
图1-42
图1-43
根据理论配色也是一种很好的色彩搭配方法。从配色理论上来讲，通常包含有邻近色、间隔色和互补色等搭配方式。
邻近色指的是色相环上位置相近的颜色，在色相环上颜色相差90°范围以内（度数仅供参考），如图1-44所示。使用此种配色方式设计出的画面视觉冲击力较弱，画面整体给人一种和谐、柔和、温馨的感觉。
图1-44
案例分析： 图1-45所示案例展示的红色+橙色的邻近色配色方案。背景主色采用了红色，场景元素搭配和文案排版上都采用了橙色，使整体画面和谐统一，视觉冲击相对较弱，给人一种舒适的感觉。
图1-45
间隔色指的是色相环中不相邻的颜色。在电商设计中，间隔色的使用是非常广泛的，它既没有互补色那么强的视觉冲击力，又比邻近色多了一些明快、活泼的感觉，如图1-46所示。
图1-46
案例分析： 图1-47所示案例展示的是蓝色+黄色的间隔色配色方案。相比上一个案例来说，这个案例的视觉冲击力会更强，且版面整体会给人一种明快、活泼的感觉。
图1-47
互补色是指在色相环中间隔180°的颜色。比较常见的互补色搭配有红色+绿色、蓝色+橙色及紫色+黄色等。在电商设计中，互补色搭配可以表现出一种力量感、起势感和活力感，视觉冲击感非常强，而且属于非常时尚现代的一种颜色搭配，如图1-48所示。
图1-48
案例分析： 图1-49所示案例展示的是紫色+黄色的互补色配色方案，构成了一冷一暖的搭配形式，让画面极具视觉冲击力，令人过目不忘，而且营造出一种力量感和气势感。
图1-49
小提示
在用互补色搭配时，要注意以下3个问题。
①控制好画面的色彩比例。由于互补色颜色对抗性较强，在搭配时通常将一个颜色作为主色，另一个颜色作为辅助色或点缀色。
②在具体搭配颜色时，可以根据实际需要，降低某个颜色的明度或饱和度，让画面产生一种明暗对比，以对颜色之间所产生的对抗性起到一定的缓冲作用。
③在具体的配色当中，在必要的情况下可以在画面中加入黑色或白色作为调和色，以进一步缓冲颜色之间的对抗性。
根据画面中要出现的产品或模特着装情况去进行颜色提取和搭配，是一种常见又快速有效的配色方式。
案例分析： 图1-50所示的文字和背景颜色来源于模特的衣服。不过在具体设置的时候，可对纯度进行调整，避免直接使用吸管吸取的颜色。
图1-50
不同的色彩可以给人不同的印象。当人们看到一种颜色时，总是会下意识地联想到生活中常见的一些事物，并将当时的心理感受植入相应的色彩，这就是色彩印象。而在电商设计中，这种植入方式同样适用。
下面为大家介绍一些常见的印象配色方式。
红色在视觉上穿透力较强，且感知度高，它容易使人们联想到太阳、火焰、热血及花卉等，给人以温暖、兴奋、活泼、热情、积极、希望、忠诚、健康、充实、饱满及幸福的感觉，但同时也象征着幼稚、原始、愤怒、威胁等。
案例分析： 图1-51所示为一张年货海报，红色历来是中国传统中喜庆的色彩，因此在春节之际，这样的颜色很适合用于电商海报，给人以喜庆、热情和积极的感觉。
图1-51
橙色与红色一样，都属于暖色调。它既有红色的热情，又有黄色的光明、活泼，给人以阳光、温暖和欢快的感受，是一种比较受人们喜爱的颜色。
案例分析： 图1-52所示为一张关于饮食的海报，采用橙色作为主色调，一方面给人以欢快、明亮的感受，另一方面也可以达到引人关注的目的。
图1-52
黄色是所有色相中明度较高的色彩，给人以光明、迅速、活泼及轻快的感觉。不过，由于黄色过于明亮而且刺眼，所以大多时候会被用来作为警示的颜色，例如室外作业的工作服、警示牌及交通信号灯等的颜色。
案例分析： 图1-53所示为一张服装海报，其针对的产品是偏少女风格的，为了让画面呈现出活泼、轻快的效果，主色调采用了黄色，同时也凸显一种高贵、大气的感觉。
图1-53
绿色象征生命、青春、和平、安详及新鲜等，在视觉上具有消除眼部疲劳的功能。其中，黄绿带给人以春天的感觉，且较受儿童及年轻人的欢迎；蓝绿色、深绿色是海洋、森林的象征，有着深远、稳重、沉着及睿智等含义，多出现在一些护肤品、环保类产品的设计中；土绿、橄榄绿、咸菜绿及墨绿等色彩给人以成熟、老练和深沉的感觉，常出现在一些比较正式的场合或一些中老年用品的设计中。
案例分析： 图1-54所示为一张关于护肤品的海报，采用绿色作为主色调，从侧面烘托出了纯天然、安全的感受。
图1-54
蓝色与红色、橙色相反，是典型的冷色，带有沉静、冷淡、理智、高深、透明、科技和现代的含义，同时又带有刻板、冷漠、悲哀及恐惧等含义。其中，浅蓝色系明朗又富有青春朝气，为年轻人所钟爱，但也给人以不够成熟的感觉；深蓝色系给人沉着、稳定的感觉，是中年人普遍喜爱的色彩。
案例分析： 蓝色代表着科技感、商务感，因此在如图1-55所示的产品海报中将蓝色作为主色调，一方面可以突出高科技的感觉，另一方面也给人一种安全的感受。
图1-55
紫色容易给人神秘、高贵、优美、庄重及奢华的感受，有时也给人孤寂、消极的感受。其中，偏暗或偏深灰的紫色容易给人以不祥、腐朽和死亡的感觉，多出现在一些复古产品的设计中；偏浅灰的红紫色或蓝紫色给人以优雅、神秘的感觉，多出现在一些时尚产品的设计中。紫色容易引起心理上的忧郁和不安，但紫色又给人以高贵、庄严的感觉，所以妇女对紫色的喜好度很高。
案例分析： 图1-56采用紫色作为主色调来凸显出一种年轻女孩子的优美的气质，同时紫色也给人一种奢华的气质，显得更有档次。
图1-56
文字是构成版面的基础模块。在电商设计中，合适的字体搭配不仅可以让消费者更加清晰地了解产品，还能将消费者的目光从众多的产品信息上转移到我们展示的产品上来。
下面，笔者给大家介绍在电商设计中比较常见的4种字体的用法。
黑体字比较偏方正，笔画给人醒目、粗壮的感觉，在电商设计中适用范围较大，可塑性也很强。其中较粗的黑体字适用于标题，较细的黑体字适用于正文。
案例分析： 图1-57所示为一张关于男装的促销海报，字体采用了粗黑体，如此可以给人一种很强的促销感，而且体现出一种力量感。
图1-57
宋体字横细竖粗，笔画末端有装饰部分，比较具备文化艺术气息，适用于女装店、女性化妆品店和护肤品店等店铺。
案例分析： 图1-58所示为一张女装海报，字体采用宋体，以凸显女性的贤淑气质。
图1-58
圆体是由黑体演变而来的，在笔画的拐角处和末端用圆弧修饰。圆体字在保留了黑体的严肃和规矩的同时，又增加了一些灵动与活泼感，适用于儿童用品店、母婴用品店和美食产品店等店铺。
案例分析： 图1-59所示为一张母婴用品海报，字体采用圆体，一方面给人以圆润的感受，同时也给画面增加了一些活泼气质。
图1-59
小提示
与宋体字形不同的是，圆体字形能更加明确地表现出柔美感，而宋体字形更倾向于表现精致且富有内涵的气质。
在书法字体中，行书的应用范围较广泛；草书偏向于装饰和艺术表现；隶书相对行书和草书来说，缺少冲击力和奔放感，使用率偏低。
在电商设计中，书法字体的使用不用看具体是哪个字体，主要看字体形态。一般来说，线条较粗的字形适合商业气息较重的店铺，如运动产品店或工业产品店等店铺，呈现的视觉冲击力较强；线条较细的字体看起来会比较精致，适用于美容用品店、化妆品店、服装店、餐饮店及文化艺术品店等店铺。
案例分析： 图1-60所示的字体为书法字体，其装饰性大于阅读性，让画面呈现出一种古色古香的气息。
图1-60