020-29815005
预约专线时间:09:00-23:59

UI设计培训分享:Banner设计技巧方法之空间陈列法

新闻来源:本站 日期:2022-03-03
「空间陈列法」是说先构建一个空间,然后将主体元素用合适的形式陈列出来。这是随着手机兴起而真正流行起来的一招,因为PC时代都是宽大的横屏设计,适合展现视野开阔的大场面,像大漠、海边等等,而「空间陈列」作为小场景,在PC端就显得不大气,因此使用较少;而手机端却…

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


UI设计培训分享:Banner设计技巧方法之空间陈列法


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

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

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

  焦点透视

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

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

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

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

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

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

  观察视角

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

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

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

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

  平视有种方方正正感,给人一种非常自然的观察感受,虽然中规中矩但视觉舒服;

  仰视则能体现产品的高大和气势,用来烘托价值感;

  而俯视最接近我们日常看桌面小物品的视角,很真实也很亲切,同时还凸显了产品的立体感。

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

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

  平行透视

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

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

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

  以上就是优漫教育小编为大家介绍的“【UI设计培训分享】:Banner设计技巧方法之空间陈列法”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解 !