Banner设计这3种构图形式

构图设计种类丰富，为什么 Banner 的构图形式确趋向于单一？现在我们最常用的 3种构图形式分别是对称式构图、局中构图、左右构图，今天我们就分享一下为什么 Banner 的构图形式趋向于这三种构图。

目录

1. 最常见的三种构图形式

2. Banner 区域变小

3. 自身优势

4. 为什么其它构图不合适

5. 总结

1. 最常见的三种构图形式

我们最常见的三种构图方式：对称式构图、居中式构图、左右构图。

我们可以仔细观察现在线上 app 中的 banner 设计，多数采用这三种构图形式。我们以网易云音乐首页一些系列的 Banner 为例：

大家可能费解，在平面视觉设计中构图方式多种多样，为什么在 banner 设计的时候就剩下这三种？其他的为什么不适用？

2. Banner 区域变小

导致构图形式可选范围缩小的最直接原因就是：banner区域变小！

由于产品结构的变化，业务的成熟与增多，首页第一屏需要呈现更多的“业务”，所以我们不得到不缩小“Banner”的面积，以节省出更大的空间来服务其他业务的使用。

Banner 设计尺寸由原来通用的 4：3 的比例大小逐渐缩小至 5：3 或 5：4 的比例尺寸大小（均四舍五入选取近似值） 。

我们以线上产品为例进行分析测量，如美团、转转、淘宝、网易云音乐的 Banner比例：

以上我们均采用四舍五入取近似值的方式，我们可以发现 Banner 区域不同程度的缩小，在页面中所占的比例较少，节省出更多的空间以便其他业务模块的使用。

Banner变小的原因主要有两点：

1. 首先是产品结构的日益成熟，业务增多或者结构变更，需要在首页第一屏展示更多内容。

2. 视觉上有助于保持页面平衡，缩小 Banner 有效的避免了头重脚轻的情况发生。

3. 自身优势

a. 构图简单

这三种构图的最大优点就是：构图简单！接下来我们逐一对三种构图形式进行分析：

对称式构图：通过对画面的平均分割能够保证画面的平衡，对称式构图给人简洁、有力、稳固的视觉感受。

居中式构图：居中式构图是将主体放置画面的中心进行构图。这种构图方式这种构图方式的最大优点就在于主体突出、明确，而且画面容易取得左右平衡的效果。

左右式构图：左右构图一般参考黄金比例分割线的原理，并根据实际状况进行调整，将文字标题元素和主体物按照比例分割进行位置安排。

b. 空间利用率高

这三种构图形式对空间的利用比较高，无论是对称式构图、居中式构图还是左右式构图都采用了 X、Y 轴的直线排布，尽量避免了斜线线或曲线构图的方式。

直线排布可以有效的节省空间，避免产生多余的空间缝隙；而斜线排布或者曲线排布无可避免的会产生多余的空间缝隙，无法充分使用。

c. 能够快速复用

构图简单，易于修改，我们通过修改主体物和标题信息，可以快速复用到其他运营活动中，大大节省了设计成本，提高工作效率。例如网易云音乐和斗鱼 Banner 系列：

通过图例，我们可以发现三种构图形式均可以快速复用到其他运营互动中，这样做大大节省了设计成本，提高了工作效率。

4. 其它的构图形式为什么不适合

a. 空间小，不适合结构复杂的构图

由于空间小，在排版的时候我们更多的要考虑到用户对标题信息的识别度，采用直线排布的构图可以节省空间，能够尽可能的放大字体；如果采用斜线或曲线排布的构图会产生多余的空间缝隙，会导致标题文字压缩减小，降低信息识别度。

例如对角线构图和曲线构图，在小面积的情况下很难适用，因为我们需要让用户尽可能的获取信息，所以我们需要将信息在 banner 中尽可能放大，这样一来很难形成对角线和曲线动势，所以不适用于这类对空间要求成本高的构图。

b. 不符合用户的阅读习惯

由于 Banner 面积小，选用直线排布符合用户自左到右、自上而下的阅读习惯，能够帮助用户快速获得信息。而曲线排布和斜线排布需要用户耗费一定的精力去识别信息，学习成本高，不适合小面积的构图。

一、营销新构思

“妆装节”是京东突破了以往的营销思路，将美妆和服装两个看似不同的品类，却是女性购买力最强的领域巧妙结合在一起的营销活动。此次活动是承载了节庆促销、品牌推广、营销产品等等信息的页面，形式与内容也是多种多样。同时也满足广大女性用户多纬度的购买需求，通过品牌促销、抢神券、新品折扣促进转化率，有效的将用户引导分流至各个类目活动，提升订单量和销售额。

二、视觉新构思

视觉推导是整套设计的灵魂，清晰的思路能很好的指导分会场、模版、相关素材的设计扩展。确保整套设计的完整度、统一性。尤其是大型活动，设计会有几个团队来分工设计，视觉规范模版越详细，设计的还原度就越高。

在这次开启整体的视觉推导之前，我们想先跳离出电商各种冲击感的惯用思路，搜集更多灵感，思路是如何找到并结合年轻人喜爱的风格和元素，再运用电商的手法把氛围融入其中。最后，我们选用网络搜集并去走访一些上海的网红店，了解他们在设计中采取的构思，再提炼出可被应用的风格素材。

比如，我们发现：格子元素、高大的绿植、大面积的粉色、倒满小球和泡沫的泳池、造型感的荧光灯、西方神话的石膏像等等，都是时下网红店铺陈列中常用的装饰素材，且这些素材的混搭也深受年轻人的喜爱。

搜集了这些灵感之后，结合目标女性用户，从关键词“年轻”、“潮流”、”活力“、”未来“、”独立”、“简练”、“空间感”等来挖掘表现形式，并结合前面网红店的思路扩展，来塑造妆装节视觉语言，从两个方面着眼：

1、未来感

“未来主义”、“空间感”在概念化设计盛行的今天，时装也不断在探索空间感带来的释放、自由、不受约束。首先是造型上，大量采用未来感的几何图形，给人一种标新立异、有活力的感觉。其次就是在质感上，通过具有刺激视觉感官的色彩和带有科幻色彩的材质，带给人前卫奇幻的印象，如镭射质感等。

2、少女粉

相信多数女性都有一颗粉红的少女心，其实，粉色不单单是年轻少女的专属，甜美之余却又透露着女性的温婉与韵味。时下潮流网红店非常善于把握这种流行趋势，将粉色与非常活跃的元素：前卫几何、幻变的时空、灵动霓虹、火烈鸟、仙人掌、泳池等结合，深受大家喜爱。

设计元素探索与提炼

那么，从视觉元素来总结，主要有三大元素：

色调设定

色彩表现：根据此次的需求定位，颜色上要表现出年轻活力，特立独行的感觉，通过撞色设计， 对比色的冲突感，刺激消费者的视觉感官，突出大胆的主题。

最终主KV

当以上这些元素与女装、美妆品类的商品相结合以后，就形成了“妆装节”的主视觉画面。以具有神秘色彩的时空隧道作为页面背景，主题文案与有个性有棱角的三角相结合，突出作为视觉中心的模特，以及所穿戴装饰物品的品质感，体现出年轻人大胆追求潮流的鲜明个性。

三、视觉拓展

一个好的视觉推导，需要有很好的应用性，这不仅体现在主会场页面的设计，又能够发散延展至其他分会场的时候具有很强的感染力。在视觉传达层面，给用户渲染身临其境的氛围，让消费者置身其中体验真实的存在的场景，引入更多情景化的新选择，构建更具带入感的场景。

1、分会场头图的视觉拓展

根据用户对服饰美妆不同的需求，将用户导流至各个分会场。因此，分会场的设计应与主会场的视觉风格存在着延续性，保持妆装节整个活动统一的品牌感。保留主KV背景的时空元素，再根据不同商品属性，做各个分会场个性化的渐变色区分，从而达到在同一品类下不同属性商品的分会场又存在着差异化的体验。

2、特色楼层的拓展

首先营造一个氛围是必须的，这个氛围要很有视觉张力，很吸睛。越是富有意境的图形越能抓住用户的视线并快速传递所携信息。文字是直白的，将推导出的视觉元素进行组合和拓展，构建出不同的氛围场景来烘托主题。我们要把这个分会场、产品推广出去，根据各个分会场的主题营造相对应的场景，就如同我们在给用户秒述一个生动的故事，情节生动才会引人入胜。

四、项目周期及活动成果

妆装节项目从9月8日设计启动，10月5日站内、站外正式开始预热、17日24时正式结束。

妆装节活动期间，全站整体拉新用户数 490多万 ，日均拉新对比9月增长11%。美妆事业部和时尚事业部销售同比增长都有大幅提升。

五、反思小结

1、面对任何一次运营专题时，设计师一定要明确活动需求的方向和目标，不能因为单纯的视觉效果而做出与整个活动背景无关的设计产出。从分析需求出发，了解活动的目标，明确各个部分的权重，并做出正确的取舍。

2、由于妆装节项目属于跨地域跨部门的合作，沟通成本比较高昂，时间紧，内容多，任务重，因此在设计前期的风格沟通阶段，把控好时间，掌握好进度，不能让评审方多变的想法而影响自己的时间规划。

3、页面背景的设计应当注意：第一屏和第二屏的背景元素以及气氛烘托可适当丰富，不仅提升页面加载速度，也更利于后期楼层数量或内容的拓展，同时还减轻了用户浏览时的视觉负担，延长用户在页面的停留时长。

4、模板规范的制定与执行：规范应尽量严谨，可以规范到背景字体字号，设计元素尽量简洁统一。这样不仅便于事业部同学快速输出素材，又能在风格上保持高度的统一，也不会给页面造成过重的视觉负担。反之，设计元素复杂，不易套用，难拓展，大大降低了素材制作的效率。