闪购电商平台banner设计与美学原理

（武汉理工大学艺术与设计学院视觉传达设计系 430000）

网购已经不是什么新鲜的事了，打开手机，每个人都会安装几个购物APP。购物APP也是五花八门，各种产品都能找到。买日用品我会想到一号店、天猫超市；买生鲜我会想到盒马；做品牌特卖闪购的，我会想到唯品会；买奢侈品，会想到魅力惠、寺库等。当我们去浏览一个购物网站的时候，第一眼关注的一定是首页最上方位置的广告，banner位广告。

电商平台banner设计必须要遵循美学原理，通过色彩原理、节奏与韵律、对称和均衡等美学的原理去更好的体现设计作品。设计师必须学会应用美学原来来分析、鉴赏banner作品，并不断提高设计创造力。

一、 banner设计的内涵及其banner对于购物网站的意义

从字面上来说，banner直接翻译过来是横幅广告。那么在一个电商购物网站，banner就是整个网站首页最大或者最显眼的广告位置，我们往往会在banner位置设计一些大型促销活动的预告海报，或者重要的、主推品牌的预售广告等，以吸引用户对广告信息的关注，从而获得点击率。

Banner的位置经常会设计成可以翻页的形式，我们也会称为首焦轮播位，翻页形式的第一页称为首焦第一帧，第二页是首焦第二帧，以此类推。对于魅力惠这种特殊定位的奢侈品电商网站，首焦位置一般以一至二帧，特殊情况或者说偶尔大型促销才会使用三帧。为了集中流量，一般情况下会专注与一档活动。

以唯品会的banner为例，第一帧是今日特惠大牌，第二帧是美妆单品TOP榜。

对于一个购物网站来说，banner就像是主食一样，支撑着一个网站的运转，是获得大流量的重要途径之一。因此，banner位的品牌或者活动的选择都会有严格的要求，对banner的设计也会有特别的要求。

二、 banner设计遵循的美学原理

Banner设计中的色彩美学。颜色是视觉沟通语言中非常重要的元素，在banner设计中，如何用色才能吸引消费者点击，起到广而告之，吸引眼球的作用。不同品类的商品会根据产品的特点来选用相吻合的色彩去表现，譬如美妆、母婴、生活方式、服饰箱包等根据商品品类、季节、风格、定位等区别，在用色上有很大的差异。根据同一种商品，我们也可以根据品牌的风格、商品的特色再做细分。如童装，我们可以选择温和的、干净的颜色去表现，去提高儿童服装的特点，提高视觉注意力、加强对该服装童装品牌的印象、从而引起关注，给人留下深刻的印象。去传递信息的同时，给人以美的享受。

这是魅力惠PC端婴童类目童装banner设计，整个banner的设计用色很高级，灰调背景，使得红色的裙子尤其突出。

Banner设计中的形式美学。形式美主要是指banner设计中需要遵循的一些基本规律，它可以又多种的表现形式。概括来说，有以下六种表现形式。

1.同一形状的重复表现。这种形式表现视觉上非常整齐，会使banner的设计更有秩序、更有节奏感。但是这种表现形式在设计的时候需要注意，避免画面单调乏味。

2.在差异中保持一致。也可以说这是对称均衡的表现方法。具体来说，可分为对称和均衡，对称就是在外形上以假定的中轴线为基准两侧均等，有左右对称、上下对称、放射对称。这种表现形式容易让视觉表现出安静感、稳定感，比较能突出中心。但是也有需要注意的地方，在创作中需避免单调乏味。那么，均衡是指在假定的中轴线两侧的形体之间等量不等形、对等不对称的组合关系，有重力均衡和吸引力均衡之分。这样的美学形式法则更容易表现出变化，但是需避免处理不当容易松散、失衡。

3.以差异为出发点的调和对比。调和是指相近要素的组合关系，即把两种相接近的东西并列，在细微变化中给人以协调感，在差异中趋向一致。这种表现形式可以在变化中保持一致，容易突出主题。 但是需要注意在应用中避免主题不明确，给人散乱的印象。对比是指相异要素的组合关系，即把两种极不相同的东西相并列，在差异中给人一种鲜明、醒目、活跃的感觉，在差异中倾向对立。这种表现形式运用得当更易突出效果，表现热烈气氛。如果处理不当会杂乱无章。

4.层次比例的表现形式。层次是指形式美要素之间构成关系的秩序性，有横的层次、纵的层次、空间的层次、时间的层次、广度的层次、深度的层次等。层次的表现可以让作品显得多而不乱、繁而不杂。但是，如果处理不当会显得杂乱无章、呆板单调。比例是指整体和局部、局部与局部之间的构成关系要合乎比例。比例处理得当使画面更有美感，如果比例失调会造成畸形，或者形象失真。

5.节奏韵律的表现形式。节奏是设计要素之间和整体构成在运动中的强弱变化的有规律、有秩序地连续性反复。构成节奏的要素有时间关系、力度关系。韵律是指在形象的排列组合中赋予一定情感色彩的节奏。节奏韵律的合理安排会使作品繁杂归于秩序、更富有层次感。需要注意的是，处理不当会使设计繁杂散乱。

6.多样统一的和谐美。让多种设计元素在变化中求和谐，在参差中求整齐，局部从属于整体、对比手法的运用。这种表现形式处理得当，会使设计丰富而不杂乱，统一而不单调。处理不当会使主题杂乱，各自为政。

上图是一个洗护类产品的预售活动banner设计，在这个banner设计中用到了上面提到的多种形式美法则，如在差异中表现一致，产品差异，手的动作差异等。也应用到了多样统一的和谐美表现形式，让多种元素在变化中表现出和谐的美。所以，这是一个成功的banner设计。

三、 奢侈品电商banner设计与其他电商平台banner设计的区别（以奢侈品闪购电商魅力惠、品牌闪购电商唯品会的对比为例）

人们对美的追求是不断深入的，闪购电商平台的banner设计同样如此。Banner把品牌的信息以快捷、便利的方式传递给浏览者，在banner设计中，并不是把各种内容信息放上去，能看就行，我们需要考虑如何让设计更美观，又能使浏览者能够更愿意点击、更有效的提高点击率。

普通的电商banner设计，会把尽量多的信息放在banner上，如品牌名称、活动主题、活动时间、优惠信息等，会尽可能的希望通过banner把各种可能吸引浏览者点击的信息都设计在banner里。这种类型的banner设计会因为素材多，会经常用到层次比例的表现、多样统一的和谐、以及节奏韵律的表现这几种美学表现形式。

下面是唯品会（vip.com）首页banner和美妆类目banner的设计，设计的形式上是一致的，这样的方式，便于唯品会对banner设计的管理，以及全站的统一。在B2C闪购平台中，唯品会是一个非常成功的案例。

唯品会首页“时尚出游记“banner设计

唯品会美妆the face shop品牌banner

奢侈品平台banner设计，整体更简洁、高冷色调、较少出现活动信息、凸显品牌及商品风格。让整个banner设计上保持奢侈品的高端大气，视觉上追求简洁。和普通定位的平台存在很大的差异，奢侈品电商更喜欢用到对称均衡的表现方法，让视觉表现出安静感、稳定感，更能突出中心，这也就是在差异中保持一致的美学形式。除此之外，也经常会用到同一形状的重复出现、节奏韵律的表现形式等。

下面是奢侈品电商魅力惠（mei.com）首页banner设计和美妆类目banner设计。从上面唯品会的banner图片对比来看，两个平台对banner设计是有非常大的区别的，整体风格不同，设计基础要素不同、表现形式上奢侈品电商会很少用到多元素统一的方式。

魅力惠首页“Aubade品牌banner设计

魅力惠美妆类目“KERASTASE”品牌banner设计

四、 banner设计优劣对比

从唯品会和魅力惠两个电商平台来看，除了两者之间的差异之外，它们之间也存在共同点， 视觉上的全站统一，以及通过好的banner设计，获得尽量多的浏览量，这也是banner设计的最终目的。同时，在banner设计过程中，我们所需要遵循美学的意义也是在最终的浏览量数据中，会有最终的体现。

五、总结

在奢侈品电商的banner设计中，遵循美学原理是一个比较广泛的话题，了解并掌握这些美学原理，对于banner设计来说是至关重要的，可以帮助设计师更好的把握设计中的理论基础和规范。因此，设计师要学会应用美学原理来分析、鉴赏banner设计作品，并不断提高设计创造力。