Banner设计技巧方法之空间陈列法

作者:贤辈 来源:站酷 时间:2020-07-31

「空间陈列法」是说先构建一个空间,然后将主体元素用合适的形式陈列出来。

这是随着手机兴起而真正流行起来的一招,因为PC时代都是宽大的横屏设计,适合展现视野开阔的大场面,像大漠、海边等等,而「空间陈列」作为小场景,在PC端就显得不大气,因此使用较少;而手机端却刚好相反,瘦长竖屏就适合表现长焦特写的小场景,像微距下的花鸟鱼虫等等,这时「空间陈列」就用的恰到好处。

Banner设计技巧方法之空间陈列法

如图所示,同样的产品展示图,在PC端就显得单薄,版面空缺,整体不饱满;而在手机端则用的刚刚好,确实这种长焦特写、微距放大的陈列小场景就是手机屏的最爱,所以在手机时代,空间陈列图才会呈现井喷式增长。

其实合成、三维和摄影都可以实现「空间陈列」,但本书还是以合成为主,而合成的难点就在于如何将产品和空间进行自然融合,不能有违和感。

若想合的天衣无缝,第一步就是要做到「透视准确」,而透视作为构图中的重要知识点,可以说是无处不在,在前面的章节里也多次提及。我们只有掌握透视的变化规律,才能准确表现出元素的空间关系,如果透视不对,那空间将会失真,下面就来详细讲讲这个理性知识点——透视。

焦点透视

日常生活中,当我们看周围事物时,会有远近、高低、长短、宽窄等不同,这是由于距离、方位等差异在视觉中呈现的不同反映,这种现象就是透视。透视学的出现可以帮我们非常科学的表现各种空间感和立体感,它广泛用于绘画、建筑、环艺、设计等诸多领域,而常见的透视共3类:空气透视、散点透视和焦点透视,这3类的侧重点各有不同。

空气透视又称「色彩透视」,由于空气介质的存在(雨、雪、雾、烟等),使人们看到近处景物比远处的轮廓更清晰、色彩更饱满的视觉现象,例如下方海报中的「烟雨蒙蒙」,这种近实远虚感就是典型的空气透视,随着镜头拉远,山川也变得越来越模糊。

Banner设计技巧方法之空间陈列法

散点透视则是中国画特有的一种透视类型,例如下方的《清明上河图》就是这类透视的代表作,在这五米长的画卷中,很难找出画家的具体观察位置,好似在移动中作画,每到一处画一部分,最后拼接起来,这种视点不断移动的画法就是散点透视,散点透视适合表现景色的波澜壮阔,重在写意,体现一种气势和意境。

Banner设计技巧方法之空间陈列法

而焦点透视才是本文重点,它是透视学中的核心理论,也是西方绘画所遵循的透视原则,最早研究透视就是从这里开始,如果散点透视是「写意」,那焦点透视则「写实」,一切都以客观还原为准。

例如名画《最后的晚餐》,所有视线都汇聚一点(称为灭点),营造出一种立体空间感,这些就像自己身处画面中央所看到的逼真景象。

Banner设计技巧方法之空间陈列法

而我们在设计中常说的透视也都指「焦点透视」,这是我们需要掌握的重中之重。记得高中学习素描时,老师就说画静物要「近大远小」,其实就是对焦点透视最为形象的描述,例如草地上的奶牛,离我们越近就越大,越远则越小,正是这种近大远小的透视变化才使场景有了空间和层次。

Banner设计技巧方法之空间陈列法

观察视角

在介绍焦点透视前,我们先说说透视中一个很重要的影响因素——观察视角。视角即指人眼(称为视点)在观察事物时视线之间所形成的角度。

如下图所示,其实就是人眼观看角度的变化,常见有3种:当我们平视前方时就是「平视视角」;仰头看时则是「仰视视角」;低头看时便是「俯视视角」。

其中平视时人眼和物体形成的假想连线称为「水平视线」,这是判断视角高低的参考线。

Banner设计技巧方法之空间陈列法

当我们将产品放入空间时,就要根据陈列形式选择合适视角,从下方的示意图中能看到,三种视角给人的感受都不相同:

  • 平视有种方方正正感,给人一种非常自然的观察感受,虽然中规中矩但视觉舒服;
  • 仰视则能体现产品的高大和气势,用来烘托价值感;
  • 而俯视最接近我们日常看桌面小物品的视角,很真实也很亲切,同时还凸显了产品的立体感。

Banner设计技巧方法之空间陈列法

而上图的仰视和俯视都属于小视角,即产品视线和水平视线的夹角较小,这是设计中的常见视角,大概就是把头微微抬起或低下时看到的场景,这时画面最自然也最舒服。反之若视角过大,即头抬的很高或压的很低时,这时产品的形变就很夸张,显得刻意、不舒服。

说完3种视角,现在正式讲解焦点透视,一般根据物体灭点的数量不同,焦点透视又分3种:平行透视(一点透视)、成角透视(两点透视)和斜角透视(三点透视),它们都有各自的透视效果和适用范围,但若铺开讲会很复杂,因此下面就结合「空间陈列」进行介绍。

1. 平行透视

用立方体简单说明,就是有一面与画面平行,这时物体的厚度边线若向内延伸,最后都会汇聚到1个点上,因此又称「一点透视」。这是最简单也最易掌握的一种透视形式,其中汇聚点称为「灭点」,而灭点所在的那条线则是「视平线」,即与人眼等高的一条水平线。

Banner设计技巧方法之空间陈列法

再来看看平行透视在生活中的场景呈现,如图所示,将各种景物进行前后连线并延伸,最后都是汇到一点才消失。平行透视适合表现场景纵深,给人一种正式感和平和感。

Banner设计技巧方法之空间陈列法

电商中的产品展示也一样,例如下方示意图中,不管哪种视角,产品和立方体都是正对观众,让人觉得摆放角度正正好。

Banner设计技巧方法之空间陈列法

总体来说平行透视只有1个灭点,变化并不多,视觉表现单一,没有太多的空间变化,基本就是从正面来表现整个场景,因此上手简单,只要确保前后连线都汇聚一点即可,这样画面各元素也会显得整齐。但有时这种正视会让画面缺少层次感,显得很平,此时可尝试俯视视角或者强化背景的空间纵深。

下面展示平行透视在3种视角下的应用案例,注意观察不同视角下的产品呈现和透视变化,虽然微妙,但每种视角确实给人不一样的视觉感受。

平行平视

当画面为平行透视和平视视角时,这时的观察位置很正。如下图所示,空间和产品都显得有些平整,虽然场景的立体感较弱,但视觉舒服协调,表现起来也相对简单。注意平视的「视平线」基本位于主体元素的中心处,即是说人眼此时正对前方物体的中心,这样才会有平视效果。

Banner设计技巧方法之空间陈列法

平行仰视

当画面为仰视时,一般视角都不会太大,微微仰视即可,这样视觉才舒服。如下图所示,其实和平视比起来,小角度仰视的透视变化并不明显,没有夸张形变,但依然能体现空间和产品的高大。此时「视平线」位于主体中心靠下的位置,这时人眼明显是从下往上看。

Banner设计技巧方法之空间陈列法

平行俯视

如果觉得画面的层次感和立体感不够,那就尝试下俯视视角,如下图所示,由于俯视时我们能同时看到物体的顶面和正面,这样就能表现物体的厚度,立体感也明显增强。而画面的「视平线」则位于主体中心靠上的位置,这时人眼就是从上往下看,但同样属于小角度俯视。

Banner设计技巧方法之空间陈列法

2. 正俯视

平行透视的俯视还有一种特殊情形——正俯视,即视角为90°的俯视,这时我们是从物体的正上方低头往下看,如下图所示,当产品平放桌面时,正俯视能清晰看到产品的全貌。

Banner设计技巧方法之空间陈列法

在空间陈列中这是一种常见视角,上手简单,展现清晰。例如下方案例中,俯视下的产品摆放非常灵活,根据构图需求可以工整 ① 也可以随意 ② ,并且产品多以正面展现为主,整体直观、舒服。

Banner设计技巧方法之空间陈列法

以上都是产品的陈列案例,其实正俯视有时也会用于场景呈现中,如下图所示,视点位于场景的正上方,有点类似无人机的俯瞰拍摄,这种看似「刁钻」的视角能给画面带来独特的戏剧效果,令人印象深刻。

Banner设计技巧方法之空间陈列法

空间平行透视

除了3种视角,这里还要介绍一种平行透视的常见形式——空间平行透视,这种形式即画面的正前方有个类似方盒的纵深空间,而人物或产品就放置在空间里。

如图所示,该形式也有视角的3种变化,但为了确保视觉的自然舒服,仰视和俯视也都是小角度的上下摆动,所以产品的透视变化并不明显,场景呈现也没有很夸张。

Banner设计技巧方法之空间陈列法

为何要将该形式单独列出?因为它非常适合手机端的竖屏构图。

手机不像PC,无法通过宽屏来表现视野开阔的大场面,手机屏更适合长焦特写的小场景,但这样有时就会显得左右拥挤不透气,这时「空间平行透视」就刚好取长补短,通过「深度」刻画将狭窄空间的纵深感体现出来,最终使观者视线在前后维度上有了延伸和舒展。

该形式正是利用平行透视的纵深性,才最大程度缓解了手机屏的拥挤感。下面分视角列举案例,要注意不管平视、仰视还是俯视,空间里的所有元素最后都要汇聚一点,这样透视才合理,纵深效果也最好。

3. 空间平视

3种视角中,空间平视最常见,因为这种方方正正的空间展示最适合手机的竖屏构图,看着最舒服,上手也简单,易于搭建。在平视下,由于没有视角的高低变化,空间基本位于人眼的正前方,无任何偏移,摆放角度非常正,构图给人一种稳定感,元素也没有夸张形变,组合方便,真实自然。

对于「空间平行透视」,「深度」刻画很关键,我们要根据版面构图选择合适的深浅。例如下方案例中:① ② 的深度浅,空间相对封闭,适合展现小空间,给人温馨感和趣味性;而 ③ 的深度深,空间开阔,适合展现大空间,这样能让视线更舒展,画面更透气。

Banner设计技巧方法之空间陈列法

4. 空间仰视

在仰视下,我们是抬头向上看,这时空间显得高大,给人强烈的气势感。如下图所示,视平线贴近地面,像是我们蹲着向上看,这种仰望视角,建筑和人物都很高大,再加上强烈的纵深感,虽然空间左右依然狭窄,但上下和前后维度却变的非常开阔,画面通透。

空间仰视能渲染氛围,提升场景的戏剧效果,突出视觉冲击力,但要注意仰视视角不能太大,否则夸张的仰视效果反而给人一种压抑感。

Banner设计技巧方法之空间陈列法

5. 空间俯视

在俯视下,视平线处于空间中心的上方,类似我们站在高处往下看,如下图所示,这时空间显得立体,远近的各类元素也能得到清晰展现,层次分明。

俯视适合展现空间的全局观,也让各物体有着丰富的体积感。除非有特殊的构图需求,不然和仰视一样,俯视视角不能过大,否则俯视就变成俯瞰,会产生遥远的距离感,空间也压缩的厉害,进而导致形变和失真。

Banner设计技巧方法之空间陈列法

成角透视

还是拿立方体举例,就是物体与画面形成一定夹角,这时物体的所有边线分别向各自方向进行延伸,最后会在视平线上形成一左一右2个灭点,因此又称「两点透视」。这类透视最接近我们日常的观察角度,即是说大部分时候,我们看到的物体都属于成角透视。

Banner设计技巧方法之空间陈列法

虽然成角透视只比平行透视多了1个灭点,但2个灭点的位置却很灵活,这样空间的透视变化也更加丰富。

例如下方是我们经常看到的景象,虽然都是典型的成角透视,但 ① 是2个灭点都在画面外,这时建筑给人的感觉结构平稳,立体感强,侧重写实;而 ② 则是1个灭点在画面内,另1个在画面外,这时空间右侧的透视形变较大,产生纵深感,整个场景更有张力和冲击。

其实还有第3种情形是2个灭点都在画面内,但由于空间会产生夸张形变和失真,因此总体少见,不再举例说明。

Banner设计技巧方法之空间陈列法

再看看成角透视下的产品展示效果,如下图所示,不同于单面展示为主的平行透视,成角透视则以展示物体的两面为主,这样立体感更强,构图也更稳定。注意在成角透视中,画面所有的竖向边线都是平行,不会产生灭点。

Banner设计技巧方法之空间陈列法

相比平行透视,成角透视在表现上更复杂一些,一般都以2灭点在画面外的情形为主,这时透视最舒服。注意要想画面只产生2个灭点,那当中的所有元素都需排列整齐,这也是成角透视的常用做法,此时画面会显得整齐统一。下面列举3种视角下的电商案例,其中以仰视和俯视最为常见。

1. 成角平视

平视下的成角透视相对少见,因为使用成角透视就是为了凸显物体的立体感,但平视由于视角很正,恰恰就会显得立体感较弱,这时2种效果会有矛盾,影响场景的协调性。例如下方的2个案例中,产品看着就有些平整,和方形盒子以及立方体稍显冲突,但整体视觉真实平和,没有形变。

Banner设计技巧方法之空间陈列法

2. 成角仰视

仰视下的成角透视就显得刚刚好,如下图所示,所有元素均用2个立面展示,加上透视形变,这时空间的立体感强,产品和立方体也都有明显的体积感,视觉平稳、饱满,而且还能体现产品形象的高大,凸显价值感。

注意2个案例中,视平线上都只有2个灭点,这是因为产品和立方体的排列都很整齐,反之若无序排列,就会产生多个灭点,这样画面会显凌乱,视觉不舒服,所以在表现成角透视时,尽量确保所有元素都能整齐排列。

Banner设计技巧方法之空间陈列法

3. 成角俯视

在成角透视中,俯视视角最常见。因为该视角下的物体可以展现3个面,能进一步强化元素的立体感和方位感,如图所示,物体的空间关系明显,层次分明,构图也平稳。

一般成角俯视适合小场景陈列(若是大场景则垂直方向会发生严重形变,这就是后面要讲的「斜角透视」),刚好这是手机屏的擅长,小空间配上小角度俯视会给人一种亲切感,类似长焦镜头的特写画面,很好的拉近了观者的心理距离,因此属于手机端的常用构图。

Banner设计技巧方法之空间陈列法

空间成角透视

成角透视的优势在于画面立体、稳定和写实,这些优势刚好适合空间的立体呈现,如下图所示,成角透视即可用于室内塑造 ① 也可用于外形搭建 ② ,类似我们站在空间侧面看整体,此时空间立体、饱满,结构有张力。

Banner设计技巧方法之空间陈列法

但由于成角透视都是在画面两端形成灭点,所以该透视下的空间更适合横构图,但手机屏却是竖构图,对于横向拥挤的竖长屏,成角透视就会有些施展不开,左右狭窄,无法像横版那样开阔的展现空间,也没有平行透视那样看着规整,因此使用较少。

斜角透视

物体与画面存在一定夹角,并且在2点透视的基础上,再加入了高度变化,这样垂直方向的连线会向上或者向下汇聚,最终画面形成3个灭点,又称「三点透视」。相比成角透视,斜角透视其实就是让本没有交集的竖线有了交集,这样垂直方向就有了强烈的汇聚感。

Banner设计技巧方法之空间陈列法

斜角透视的形变夸张,常用于大型物体的仰视或高处俯瞰,类似广角拍摄。

如下图所示,该透视能表现出建筑或空间的宏大感,并且越宏大透视就越强烈。这时画面的夸张构图会显得观者渺小,给人一种压迫感,也让场景有着极强冲击力,同时带来了更加刺激的视觉感受。

Banner设计技巧方法之空间陈列法

其实只要观者在场景中显得很小,这时看到的画面就会产生斜角透视,例如当我们仰望高楼时,相对高楼而言,渺小的我们就会看到斜角透视。

但如果产品展示采用斜角透视时,就会有一种强烈的不真实感,因为相对产品来说,我们并不渺小,所以日常是不会看到这样的场景,这种场景更像是「昆虫视角」,如图所示,斜角透视下,虽然画面不真实,但会有种特别的戏剧效果。

Banner设计技巧方法之空间陈列法

另外斜角透视没有平视视角,因为平视物体的竖向边线依然平行,不会在垂直方向产生第3个灭点,因此仍属于成角透视。总之只有在大角度仰视或俯视大型物体时,才会看到斜角透视。

这种形变强烈的夸张透视虽然生活中相对少见,但电商中用的还真不少。还记得我们在第2章讲创意方法时提过的「独特视角」吗?其中一个方向就是使用斜角透视。

这种透视可以体现物体的巨大(仰视)或者场景的宏大(俯视),正是这样一种不真实也不自然的视觉感受,反倒给人一种强烈的气势和冲击,画面极具张力的构图往往能脱颖而出,并在第一时间抓人眼球,吸引注意,所以成角透视特别适合大促主题的场景搭建和氛围营造,下面分视角举例。

斜角仰视

视能让物体显得高大,而斜角仰视则让物体显得「巨大」。如图所示,2个案例中的产品都十分「巨大」,通过这样一种「刁钻」视角和夸张手法渲染出了产品气势,使产品显得分量十足,同时也提升了视觉冲击力,整个场景都变的大气。其中 ① 由于版面有限,有个灭点没有标示出来。

Banner设计技巧方法之空间陈列法

斜角俯视

当我们站在一个很高的地方俯瞰周围,或者用无人机在高空航拍,这时看到的景象就是斜角俯视。如图所示,尽管竖构图并不适合展现辽阔的大场面,但在斜角俯视的帮助下,2个案例依然体现了场景的宏大,视觉冲击强,这种居高临下感使人视野开阔。

Banner设计技巧方法之空间陈列法

平行斜角透视

斜角透视中还有一种特殊情形——平行斜角透视,就是当空间或产品的一面与画面平行时,此时不管透视多强烈,画面也只有2个灭点。

如图所示,当立方体的一面正对视点时,侧面便从2个主立面减为了1个,这时除了垂直方向的1个灭点外,原本视平线上的2个也就成了1个,虽然只剩2灭点,但本质仍属于透视强烈的斜角透视。

Banner设计技巧方法之空间陈列法

既然是与画面平行,那和平行透视有何区别?

下面看张空间对比图,能看到2者的形变差异还是相当大:左图为平行透视,像是我们在看一个小方盒,亲切、自然、真实;而右图则是平行斜角透视,更像是我们在仰望一个巨大空间的入口,充满戏剧性,并有压迫感。

Banner设计技巧方法之空间陈列法

其实对于手机端,「平行斜角透视」才是斜角透视中的常用形式,因为它的摆放角度很正,这种正面观察很适合手机端的竖屏构图,而且前后的纵深刻画也能缓解版面的左右拥挤,另外画面纵向的汇聚感还能迅速吸引注意,给人一种巨大冲击力和强烈氛围感,其中仰视比俯视更加常见。

Banner设计技巧方法之空间陈列法

平行斜角仰视

近几年这类透视越来越多见,因为它既适合竖构图,也能提升画面的形式感和表现力,非常利于促销主题的氛围打造。

如图所示,整个画面就像是我们站在宏大场景的正中央仰望时看到的景象,各元素摆放很正,虽有压迫感,但空间和产品都显得非常高大,张力十足,能让用户牢牢聚焦,同时也产生了强烈冲击力,更易在用户脑海中形成记忆。

Banner设计技巧方法之空间陈列法

平行斜角俯视

在这类透视下我们会感觉自己拥有高高在上的「上帝视角」,元素摆放同样很正,视野辽阔,场景宏大。但过大的俯视视角会对场景进行一定压缩,再加上俯瞰产生的遥远距离感,这样就显得元素有些「小气」,无法体现仰视下的高大,因此画面的刺激感没那么强烈,总体相对少见。

Banner设计技巧方法之空间陈列法

3. 小结

以上便是焦点透视的3种类型,我们再来回顾下各自的使用情形,如下图所示,这是一张3种透视的转换示意图,都是仰视视角,旁边小人则是观察者的大小示意:

  • 当立方体的一面正对观察者时,就是「平行透视」,这时除了物体厚度的边线会汇聚1点,其余边线均无交集;
  • 而当立方体旋转一个角度,任何一面都不正对观察者时,就是「成角透视」,这时横向边线会向各自方向汇聚成2点,竖向边线则无交集;
  • 此时若将立方体变的巨大,大到需要仰望,就是「斜角透视」,这时在2点基础上,本无交集的竖向边线将汇成1个新点。

希望通过这张示意图能帮大家更好理解什么时候该用哪种透视,总之小场景搭建一般以「平行透视」和「成角透视」为主,而恢弘的大场景则以「斜角透视」为主。

Banner设计技巧方法之空间陈列法

当然现实里的透视远不会这么单一,根据物体不同的摆放位置以及不同的观测距离,很多时候同一画面也会存在多种透视,例如平行透视和成角透视就经常组合出现。

电商设计也一样,例如下方案例中,整个空间是平行透视,而里面的盒子则是成角透视,这时视平线上会有3个灭点,其实若产品的摆放再凌乱些,还会出现更多灭点,但这种无序组合会让空间塑造变的复杂,看着也不规整,因此并不推荐。

但要注意不管画面的透视多复杂,当中的视平线却只能有1条,并且无论水平方向有多少个灭点,最后也都会落在视平线上。

Banner设计技巧方法之空间陈列法

除了以上3种透视外,其实还有4点透视(超广角透视)、5点透视(鱼眼透视)等等,但都过于复杂,用的也很少,这里就不做展开。对于电商里的「空间陈列」,3种透视已够用,它是我们塑造空间的基础,如果一开始的透视错了,即便配色、光影做的再出彩那也无用。

总有人说透视难掌握,其实只要我们在生活中多观察、多留意身边物体的透视变化和规律,及时总结,那这种理性还原就不难做到。当然设计终归还是理性与感性的双重表达,所以透视虽要遵循,但切忌生搬硬套,视觉协调即可。

讲完了焦点透视,我们知道了空间塑造的基本原则,下面就来说说都有哪些陈列场景。

陈列场景

相对PC来说,手机端受屏幕所限,陈列场景其实没那么复杂,核心是要先构建一个空间,然后让产品以合适的视角及透视在空间里呈现出来,而这个空间场景则要和主题氛围、产品气质都高度匹配。

一般来说,手机端常用的陈列场景有4类:盒子陈列、台面陈列、自然陈列以及舞台陈列,选择哪类则要看哪个场景对产品的烘托效果最好。

1. 产品组合

在介绍每个场景前,我先说说关于产品组合的2原则,因为很多时候在空间摆放的产品数量较多,这时它们的组合形式就变的尤其重要,稍不注意就会显得画面杂乱无章,不够协调,而且凌乱的摆放也会降低产品的品质感,缺少吸引力。关于组合原则,核心有2点:大小合理以及三角构图。

大小合理

如果将多个产品摆一起,则要确保它们之间的相对大小符合现实中的真实差异,现实中尺寸大的产品就要相对大些,而尺寸小的产品就要相对小一点,这样才会真实并经得起推敲。

而有些设计师在组合产品时,也不管大小的真实差异,放进版面后就很随意的放大或缩小,最后出来的组合要不就大小一样,要不就比例失真,这些都会给用户一种强烈的不协调感和不真实感。

下面再看一组对比图,明显大小一样的左图会有不适感,也缺少层次;而大小合理的右图则更有美感也更舒服。

Banner设计技巧方法之空间陈列法

其实大小合理的最终目的是希望整体结构错落有致,就像右图一样,这种有高有低的组合才能体现韵律感和结构美。所以如果可以选择,那我们就选择一些尺寸差异较大的产品,尽量避免出现大小差不多的情况。

当然如果必须陈列大小一样的产品,那也可以通过透视或者辅助元素来改善,例如空间里的近大远小、立方体加高都能改变高度一样的情形。

三角构图

当我们选好不同大小的产品后,就要注意它们的组合形式,千万不能乱堆一气,不同的摆放会形成不同结构,而每种结构又会给人不同感受。我们在「图形分割」中讲过「正三角」具有很强的稳定性,因此当产品采用正三角构图时,会让人觉得版面平稳、视觉舒服。

如图所示,所谓三角构图,其实就是将尺寸大的产品放中间,而尺寸小的产品放两边,这样不但构图稳定,而且画面也有节奏和变化。可以说「三角构图」就是空间陈列里最常用的构图方式,而本节展示的所有案例中,大部分也都是三角构图。

Banner设计技巧方法之空间陈列法

明确了产品的组合原则,知道了如何陈列才舒服,下面就正式讲讲空间陈列的4类场景。

2. 场景

盒子陈列

「盒子陈列」就是在盒子里面放产品,而盒子多以礼盒为主,使用场景和主题相对单一,基本用于送礼之意的专题页。创意虽然普通,但却不易出错,是种相对安全的表现方式。当然若能在盒里加些小心思,画面也会很出彩,像我之前看过一个新年Banner,就是礼盒里装着一个大家庭在吃年夜饭的温馨场景,这样的新组合便让人眼前一亮。

另外若能提升礼盒刻画的精致度,那画面也会有不错的设计感。而盒子外形也不只有方形,常用的还有圆形和异形。观察视角则以小角度俯视居多,因为这个视角最接近我们日常看礼盒的真实情形,盒内产品在俯视下能看的一清二楚,展现也立体。

盒子陈列的难点在于当盒内要摆放很多产品时,如何能让产品真实、自然的呈现,这需要我们既注意摆放的合理性,也能准确表现透视,还要刻画出产品的明暗变化,总之只有把握好产品的空间感、立体感以及光影感,画面才会舒服协调。

方形盒是最常用的盒子类型,毕竟也是生活中最常用的礼盒外形,结构感强而且易表现。如下图所示,礼盒都是成角透视,且左右灭点都在画面之外,这样结构最稳定,立体感也强。注意盒里的产品呈现,特别是俯视视角下,产品越多越要注意它们是否协调统一,透视、光影等细节一个都不能少,把控不到位就会显得凌乱,画面别扭。

Banner设计技巧方法之空间陈列法

圆形盒比较少见,因为和立方体比起来,圆柱体的透视没那么强烈,结构感偏弱,但圆润的外形能使画面变的柔和,给人一种亲和力和温馨感,如图所示,由于圆形盒没有明显块面,所以不管透视还是光影,刻画起来都相对简单。

Banner设计技巧方法之空间陈列法

异形盒是指外形为不规则形状的盒子,总体也很少见,但易出彩。形状用的好便能打破「盒子陈列」的常规感,使画面变的新颖有创意。

例如下方案例中,不管是心形、猫头轮廓还是圣诞树,都能成为画面焦点并引人注意。另外盒子呈现均用了「正俯视」视角,其实除了小角度俯视外,这种视角也很常见,因为该视角下的产品陈列清晰完整,盒子外形也能直观显示,最大程度的展现了其外形的特别之处。

Banner设计技巧方法之空间陈列法

台面陈列

在空间陈列的4类场景中,「台面陈列」用的最多,适用范围也最广,可以说电商中的大部分主题和产品都能使用,算是一种真正白搭的表现方式。

「台面陈列」就是在空间里搭建一个「台面」,然后在上面放置相关产品。由于该手法还是以放大特写的小场景为主,元素形变不能太大,因此画面常用平行透视和成角透视,视角则很灵活,跟着构图走,3种(平视、俯视、仰视)都有。「台面陈列」上手简单,场景多变,其中的关键元素——台面需要根据主题、场景进行灵活变化,常见有2类:桌面和几何体。

桌面很好理解,就是桌子顶部的陈列面,所有产品都放置其上。由于桌子是家里常见家具之一,因此桌面陈列往往能传递一种「家」的温暖和温馨。

可能有人觉得「桌面」形式有些单一,其实远没那么简单,我们不要固化思维,要能灵活变化桌子的样式和装饰,例如方桌还是圆桌?木桌还是大理石桌?光面还是铺桌布?这些都是可变量,再加上视角和周围环境的变化,总之形式可以很丰富。

如图所示,桌面陈列尤其适合各类美食的组合呈现,这时整个场景贴近生活,颇有带入感。

Banner设计技巧方法之空间陈列法

就是将各种几何形体作为陈列产品的台面,几何体相对抽象,表现场景更多元,因此比具象「桌面」更加常用。

如图所示,几何体一般都是组合出现,特别适合多产品陈列,简约大方,能烘托出产品的品质感。同时通过高高低低的大小排列也能表现出画面的结构美以及层次感,总之是一种 「上手简单、易出效果」的表现方式。

Banner设计技巧方法之空间陈列法

常用几何体有「立方体」和「圆柱体」,它们适合陈列,高度调节方便,使用灵活。

如下图所示,整体表现并不复杂,就是将各种产品放在几何体上。但作为画面的核心元素,这时几何体的形态、排列、视角和透视就变的非常重要,我们要根据创意需求和产品气质选择最合适的展现方式,而这些展现本身就有不错的形式感。

几何体陈列既能营造空间关系和简约气质,也能让用户聚焦产品本身,因为它的外形简单,不抢产品,不像一些复杂元素或场景,虽然视觉丰富但最后却让产品淹没其中,这样就本末倒置。

Banner设计技巧方法之空间陈列法

自然陈列

「自然陈列」需要先创建一个合适的自然环境,然后再将产品以合适方式融入其中。相对其他场景,自然环境显然复杂一些,呈现手法常以「合成」和「插画」为主。因为产品都是实物拍摄,为了风格统一,自然环境会偏向写实风格,这样2者结合才协调。

从下方案例能看到,「自然陈列」常用于季节感受或者产地溯源等主题,画面通过「自然场景」营造出天然健康的绿色氛围。而场景中的元素繁多,呈现复杂,这就需要我们具备优秀的整合能力。

对于「自然」塑造,视角以平视和小角度俯视居多,但画面由于没有太多的几何型物体,所以透视没那么严谨,核心是注意近、中、远景的层次区分,还有光影的合理添加。如果这些把控不到位,就很可能出现场景杂乱、缺少层次、没有带入感的粗糙画面,最终沦为各种素材的乱堆一气。

Banner设计技巧方法之空间陈列法

以上列举的都是以花草树木为主的自然环境,确实绿色场景在「自然陈列」中用的也是最多,但除了绿色场景外,有时也会用到其他环境。如下图所示,像海底 ① 、沙滩 ② 、海面 ③ 、冰山 ④ 也是适合陈列的自然场景,特别是夏季主题会经常用到。

Banner设计技巧方法之空间陈列法

舞台陈列

最后一类「舞台陈列」常用于大促主题的气氛营造,这类场景不挑类目,任何产品放在「舞台」上,灯光一打,色彩再斑斓些,都能营造出热闹的促销氛围。

如图所示,舞台外形以圆形居多,因为圆形的透视感较弱,构图灵活,而且也符合大家对舞台的第一印象。舞台视角则很灵活,3种均很常见,核心是和产品视角保持一致。

Banner设计技巧方法之空间陈列法

关于「舞台」塑造,还有2处需要注意的地方:

舞台外形除了最常用的「圆形」外,还有半圆形、方形和六边形等等;舞台造型也可以很丰富,并不局限于常规的表演舞台,各种造型都可尝试,例如上方左四图就是现代感十足的三维舞台,总之我们要根据创意和风格塑造相匹配的陈列舞台。

另外就是灯光运用,可以说这是「舞台陈列」和其他场景的最大区别,但灯光也不是越多越好,太多反而显得眼花缭乱,其实能渲染出绚烂气氛即可。而有光就有影,在灯光照射下,产品一定要有准确的光影呼应,这样才不会显得突兀。例如上方案例中,仔细观察灯光下的产品呈现,能看到产品表面都产生了被灯光照射后的色彩、明暗等变化,这些细节刻画才让画面更真实,融合更自然。

3. 实战案例

本次案例会用胶原蛋白口服液作主体元素,然后用这4类场景(盒子、台面、自然、舞台)来设计4张不同视角、不同风格的Banner,让大家看看在不同场景下,如何将产品融入其中。先展示案例会用到的3种产品视角, 下方案例会根据不同的场景视角选择对应素材。

Banner设计技巧方法之空间陈列法

Banner设计技巧方法之空间陈列法

总结

「空间陈列法」的内容量挺大,主要分成了「焦点透视」和「陈列场景」2大部分来介绍,其中焦点透视是立体「空间」的塑造基础;而陈列场景则是产品「陈列」的具体环境。

常用场景有4类:盒子陈列、台面陈列、自然陈列和舞台陈列,每种陈列都有各自适用的主题和氛围:「盒子」常用于温馨的送礼主题;「台面」则能根据不同主题灵活应变,属于百搭场景;而「自然」则适合季节或者溯源主题,体现天然清新感;最后的「舞台」则用于氛围浓烈的大促主题。不管哪种场景,都要确保产品和空间的视角、透视相一致,这样场景才会真实协调。另外多产品陈列时,还要注意它们之间的大小比例以及摆放结构,其中三角结构最常用。总之在手机时代,「空间陈列」是一种真正适合小屏竖构图的表现方式。

 

原文:站酷