首页 > 网页教程 > 设计分享 > 电商设计:韩国电商BANNER的构图/配色/元素/应用分析

电商设计:韩国电商BANNER的构图/配色/元素/应用分析

时间:2016-11-08    来源:人人都是产品经理

补色系列

uisdc-banner-20146110613

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

uisdc-banner-20146110614

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

多色搭配系列

uisdc-banner-20146110615

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

纯度与明度的把握

uisdc-banner-20146110616

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

三. 辅助元素应用(分析其大规则)

uisdc-banner-20146110617

emart网站banner在辅助图形的应用上特别广泛,一来增加画面丰富性一来强化产品特性。主要是提取产品相关的元素进行图形化,有小面积的纯属强化功能或增加趣味性的添加、也有大范围的对产品纹样或特性的延展。主要还是在产品特点基础上进行提取。

uisdc-banner-20146110618

在banner标签应用的样式上也很丰富,在类似样式下所衍生出的演变很多,根据banner特点进行不同配色、时而实底、时而镂空、或黑白搭配,演绎出很多可能性。

从上面三大块的分析来看,emart在广告设计上主要特点为:

  • 构图大胆、主体突出、画面延展性很强

  • 配色活泼且有理有据

  • 辅助元素点缀很到位、丰富而强化特点

  • 关键点:开放、多元化、有自己的性格

我们该怎么做?

uisdc-banner-20146110619

这是emart上出现的大部分家电banner图,我们发现他们的颜色变化并不大,在蓝和暖灰两种之间用的比较多,一是由于产品本身以黑白色系为主,所能衍生出的颜色并不多,再者网站本身多颜色的产品和banner已经很多,穿插更为朴素的电器配色更容易被识别出来,符合产品性格。那我们在专门的自有商城网站上该如何把握配色呢?我认为是可以有所突破的。

四. 实际应用(我们该怎么做?)

uisdc-banner-20146110620

大件冰箱、长方形造型,很难完整展示,为了突出质感选择了放大上下两个面同时展示,并且配上新鲜蔬果来强化产品特点且增加画面活力。

空气炸锅,因为自身小巧,且特性明显,决定用折线跳跃式的构图方式来增加画面活跃度,而鸡翅炸物作为产品功能的强化进行点缀,背景配色和标签配色分别和产品及食物的颜色对应。

除螨仪banner配色上用到了蓝色的单边互补色黄色形成强对比,而标签则选择了蓝色的互补色,螨虫的实物图并不好看所以这里选择了把它图形化来表示增加场景化代入感。

uisdc-banner-20146110621

图一为常规摆放构图,两款产品,主要把重心集中在好看的那款产品上,加相应颜色感比较强的食物辅助。图二则是较为活泼的折线跳跃式构图,这类构图形式比较容易出效果,但是对于元素的提取和摆放需要多多斟酌下。图三则是完整展示+局部放大的方式,执行步骤其实很简单,主要看我们怎么去抓取他们的表现点,选到最适合产品性格的表现方式。

五. 总结

很难说有一个绝对的应用规范或原则,所有的设计都应该是开放的,但设计分析让我们有了更明确的思路和方法论来完善设计执行,这里分享出来和大家一起学习。

PS:文中所针对的广告图主要是作为日常宣传的以产品为主体的表现方式,大促及大型活动时候的设计不做过多参考,但在配色上的应用也是可以通用的。

作者:美的电商用户体验设计中心

来源:http://www.uisdc.com/korean-banner-design-summary

相关推荐
电商设计:5个快速进阶的电商Banner设计技巧
从人性的角度,揭露电商Banner设计背后的14个秘密
淘宝店铺banner设计简易排版参照模板图文教程简析超级实用
打造优秀网页banner广告设计的8个要点
新手教程:Flash广告设计要素分享
网页Banner设计的风格、排版以及配色经验分享
快速设计节日促销专题的经验分享
淘宝店铺广告文案排版快速设计经验分享
淘宝店铺banner广告设计技巧分享(一)
从优秀案例分析网页Banner视觉构成与创意设计
网站Banner广告设计经验谈
14个有效提高网站Banner点击率的设计技巧分享
广告图片素材设计:如何从优秀到卓越?(上篇)
广告图片素材设计:如何从优秀到卓越?(中篇)
网站Banner横幅广告设计怎样才能提高点击率?
网络广告设计必备:Banner设计从入门到精通教程
如何快速设计好Banner?6个步骤帮你速成!
网站Banner广告条怎样设计才能提高点击率?
BANNER设计的几个实用性策略
网站设计中BANNER(广告条)中的字体结构分析
网易UED分享banner广告条设计的定位与思考
网页UI之Banner广告条设计案例赏析
创建优秀的网络表单广告设计经验分享

分类导航

教程推荐

热门特效

热门教程