从韩国电商网站学设计（上）

今天跟大家分享一下来自TODO-余闲大神的经验分享——怎样从韩国电商学设计。

首先跟大家普及一下，韩国是继中国、日本之后的亚太地区第三大电商市场，它拥有全球最快的互联网速度，电商覆盖率极高。今天我们从设计的角度谈谈他们的电商广告设计。

本文以韩国大型生活超市emart网站的广告设计为例进行分析，内容主要分为四大块：

一、构图分析（总结构图的四大类型）

二、配色分析（从配色基础原理出发分析）

三、辅助元素应用（分析其大规则）

四、实际应用（以美的电商为例）

一、构图

构图1：中心集中式

图1

画面由一个主要元素撑满，主标题作为次要元素配合画面平衡，根据画面需求添加小标签装饰。整体视觉冲击力强、张力十足，适用于单个产品以及细节较为丰富的产品。多个物体集中式结构和此方法同理。（案例如下图）

图2

构图2：杠杆式构图

图3

画面由主体物和次主体斜面对称而形成的的杠杆关系，与主标题之间形成稳固的三角构造关系，此构图方式画面很饱满、稳固。适合两种产品或一个产品两面展示时使用。（案例如下图）

图4

构图3：顶视角分散式构图

图5

顶视角度，以一个中心点向外发散，适用于产品展示比较多的情况。对于发散过程中的节奏以及气韵走向的把握很重要，画面出彩但比较难掌控，因此在广告的应用中不常用。（案例如下图）

图6

构图4：折线跳跃式

图7

产品悬浮在画面中，上下可跨出画面，加以恰当的文字排版和辅助装饰，整体画面效果很活跃，延展性很强，是一种能快速达到视觉表现的展现方式。此构图方式应用广泛。（案例如下图）

图8

二、配色

1.色彩理论基础

图9

色环其实就是将彩色光谱中的长条色彩序列首尾连在一起，通常会看到不同版本的色环（光学色环、物理色环之分），色相之间略有偏差，但掌握好公式原理就不会出现偏差了。上图为参考示意色环。

图10

我们常见的配色方式有同色系、相似色、互补色、对比色搭配，这里在互补色里面划分出了补色分割（与互补色相邻的两边的颜色）以及单边补色分割，此配色方式的目的是为了让配色在形成鲜明对比的情况下又能有较高的融入度，较互补色而言柔和很多，补色分割在emart广告里面用的很多。而矩形分割、广场分割则是在多色搭配情况下出现的配色方式，下面我们单独举例说明每个配色方式：

2、单色/同色系

图11

同色系搭配比较适合产品本身颜色比较统一的情况下，通过吸取产品较近的周边颜色而成，再通过添加合适的辅助元素使画面变得统一而丰富。

3、类似色

图12

类似色相对于单色系可变化的范畴会大很多，但也是在主色调明确的情况下辅助添加类似色，这类配色方式在banner应用中还比较常见。是一种比较好掌控的配色方式。

4、补色系列

图13

这里把互补色、单边补色分割、补色分割三种情况一同来说，因为三者在大范畴内上下浮动，效果也颇为相似，并无特别明显的区分。emart在补色上的应用比较广泛和娴熟。主要还是因为整个网站调性很活泼，加之产品都属于色彩明快的快消品类，色彩上的愉悦感更容易激起点击欲望。

图14

我们发现emart直接用互补色设计的案例并不多见，主要还是在补色分割范围内的应用变化，这样既能达到很好的视觉对比效果又能使画面融合度较高。这里挑选了几个补色系里面比较有代表性的搭配方式，整个画面视觉配色上相当活跃，主产品很突出，是一种很赞的传达方式。

5、多色搭配系列

图15

这里把对比色、矩形分割、广场分隔多颜色的搭配归为一类来说。这三种跨度较大的配色方式，相对来说应用的比较少，不是很容易掌控，一般比较适合小面积的应用起到装饰平衡作用。

6、纯度与明度的把握

图16

纯度和明度的把握主要还看我们希望传达出的整体视觉效果是怎样的，根据产品调性、画面效果来实际匹配才好。