“无良设计师”都是如何「欺骗」客户的


在平面设计中,有很多方法都是靠欺骗我们的视觉出名的,今天要谈的矛盾空间就是其中之一。盗梦空间这部电影,相信只要是看过的同学,都会留下很深的印象。外行看热闹,内行看门道,这部电影中,作为设计师的我们,能看出什么?是里面的特效值得我们?还是说演员的演技值得我们学习?演技这个东西能学到一点当然有用的,特别是在和客户沟通的时候,人生如戏,全靠演技,不过这不是重点,这里面的重点是电影中出现了大量矛盾空间的应用,梦境本身和现实生活中的空间,就有很多矛盾的地方。矛盾空间,希望今天的内容够对你有所帮助,点击下方的视频观看教程。

既然主题是矛盾空间,把矛盾先放在一边,我们先来简单的了解一下关于空间的概念,什么是空间?

以电车轨道图片为例,空间是一种具有着高、宽、深的三次元立体空间。那么,对于处于这个空间中的物体而言,就是它在空间中实际占据的位置,这种空间的形态也叫物理空间。

不过平面构成中所谈到的空间形式,是针对人的视觉感觉而言的,它具有平面性、幻觉性和矛盾性。简单的理解就是,平面构成中的空间只是一种假象,就像一个剪影,只是三度空间在二度空间的错觉,本质上它还是平面。

像上面那些空间感很强的雕塑,也是看似立体,不理解的话你摸摸屏幕,摸哪个都行,反正都是平的。它们在屏幕中的立体感,就是利用人的视觉感觉形成的效果。了解了空间的概念,下面我们再来看看,有哪些因素能帮助我们在二维的平面中形成空间感。

投影、阴影,只要有光的地方就存在影子,由于投影本身就是空间感的一种反应,所以投影的效果,就能形成一种视觉上的空间感。

像左边的正方形,看它就是一个平面的正方形,没什么空间感。而右边的正方形加入投影,虽然立体感也不是很强,但也具有一定的空间感了。


重叠、叠加的效果。在正方形的上面,再叠加一个新的正方形,一个形象重叠到另一个形象的上面,就会产生一前一后的感觉,这也是平面的深度感。

透视效果,用三条线把重叠的两个正方形连接起来,这看起来就像一个立体的正方形了。只是看起来像而已,学过透视的同学应该知道,这个正方形没有灭点,不符合透视原理,只是在平面中的假立体。

真实空间中,一般情况下,人的眼睛只能看到物体的三个面,并且是越在前面的越大,越在后面的越小,所以透视关系可以制造空间感。


大小变化也能形成空间感,也是透视的原因,物体在人们眼中会产生近大远小、近实远虚的变化。平面形象的大小变化越大,空间的纵深感就越强。


通过面与面的连接产生空间感。在平面设计中,面的连接可以形成体,面的弯曲可以形成体,面的旋转也能形成体,而这个体就是空间中的实体,因此能形成体的面都具有视觉上的空间感。


基本形的倾斜或排列的变化,给我们的视觉带来的空间旋转的效果。包括弯曲形成的起伏变化,也会产生有深度的幻觉,从而形成空间感。平时看作品的时候可以注意,为什么别人做的东西有空间感,看看用的是不是这些因素。当然了,如果我们自己设计的东西太平了,也可以尝试在作品中应用。

空间的概念大概搞懂了,那什么是矛盾空间?矛盾空间是指设计者,利用平面的局限性以及视觉的错觉,故意违背透视原理,设计出在实际空间中无法存在的空间形式,它实际上是一种错视空间、幻觉空间。这种空间存在着不合理性,这类图形不容易被找出其矛盾所在,会增加观者的兴趣。

潘洛斯阶梯,也叫彭罗斯阶梯,就是翻译不一样,是英国著名数学物理学家潘洛斯提出的。潘洛斯阶梯有四条楼梯,四角相连,但每条楼梯都是向上的,因此他可以无限延伸发展。这种东西在三维世界中,也就是现实世界不可能出现。这种不可能出现的物体,就来自于将三维的物体,描绘在二维平面时出现的错视现象。

比如我们把楼梯的一角定为原点,插上一面旗帜作为记号。如果有一个人踏入阶梯,从原点开始走,一圈之后就又回到了原点。如果他继续在上面走也是一样的,永远走不出圈子,在现实世界是不可能出现的是吧?所以也有人把它叫做无尽的阶梯。

这款梯子在盗梦空间的梦境中同样出现过,除了潘洛斯阶梯,盗梦空间这部电影里还出现了许多我们现实世界中不会出现的场景,没看过的同学可以去看看,边学习、边放松也是不错的。

矛盾空间的设计原理是利用人类视线不断转换与交替的特点,随着视线改变而显现出矛盾的形体关系,会和我们正常的视觉冲突,是一种不合常规的表现形式。

前面说过这种图形没有灭点,不符合透视原理,我们就叫它假立体或者2.5D的图形就可以。做合成的时候一定要考虑透视,不过这里就没必要了,原因也提到过,矛盾空间他本身就是矛盾的。一个人站在上面,他既然能出现在那个位置,这个矩形的顶部一定是空心的对吧?类似一个阳台的结构。

左图的人换了位置,现在我们用他来推测这个立体矩形,它可能和前面的一样是个阳台,人站在了阳台的边缘;也可能顶部不是空心的,他站在了一个周围没有保护的天台上。顶部是空心还是实心,是两种完全不同的猜测和理解,也决定了这个立体的矩形如果出现在现实中,到底应该是什么样的。如果这个人是站在右图的位置,处在这个矩形的空间里,看起来也合情合理。

其实把参照物去掉,这种视线的转换仍然存在,只不过不那么清晰而已。现实中可没有这种模棱两可的东西,这些人是不可能出现在一起的。这就是一种视错觉,利用了人类视线不断的转换与交替的特点,景象是模棱两可的,可以来回交替。


01 容易引起兴趣,引人联想

这是因为矛盾空间存在不合理性和变化性,而且这里面的矛盾,有时候并不容易找出来,我们在观察矛盾空间的作品的时候,就更容易被这些特性吸引,思维也会被调动起来。

02 独特性强,容易设计出新的造型形式

这点和之前讲过的正负形和异形同构很像,都属于在我们生活中不常见的表现形式,在设计的过程中使用这些形式也就更容易设计出所谓独特的、新的形式。

03 将矛盾空间本身的特质赋予品牌

不管是它的形式、历史、概念还是从单纯的词义解释,这种形式本身就附着了很多清晰的含义。比如空间、哲学、梦幻、矛盾、艺术、逻辑、循环等等,如果你正在做的项目是和这些概念有关的,或者说涉及到这些特质,尝试使用这种表现形式,就可以将这些特质直接赋予到我们的作品中。



这些画都有一个共同特征,就是看似合理,但描绘的都是除了在我们做梦,现实世界是不会出现这样的场景的。全是埃舍尔的作品,这个名字如果你看过正负形的那篇教程应该会有印象。提到正负形或者矛盾空间基本都绕不开他,属于这些领域的鼻祖级的人物。他是20世纪绘画领域中独树一帜的艺术家,由于他绘画风格的特殊性,美术史学家都很难把他归类到哪个艺术领域里,说他是抽象派、印象派、立体派、野兽派,达达主义,还是超现实主义。超现实主义从字面上来理解好像更接近一些,总之他很厉害。

埃舍尔《瀑布》,水流的连接方式成了不断循环的整体。如果说这种形式的建筑能够实现,瀑布是一个封闭的系统,通过水车的旋转,形成了永动机。但注意的是,永动机是违反能量守恒定律的,很多人都尝式过制造永动机,但现在为止还没有哪一个机构或者个人能成功的把它制造出来。所以说矛盾空间和永动机都一样,都是现实世界里不存在的。

像纪念碑谷这款小游戏,也借鉴了埃舍尔的作品,里面使用了大量的矛盾空间。埃舍尔的瀑布,上面的那幅画也在里面。

如果这种类似的形式出现在现实空间中,其实也能做出来。不过前面反复强调过矛盾空间在现实中是不可能出现的,这种东西你换个角度观察,看到的肯定是不一样的状态。

之所以能在现实空间中出现,原理和旁边的这些场景图片差不多,都是欺骗了我们的眼睛,利用视错觉形成的效果。

莫比乌斯环,如果我们用一张纸条扭转180°,再把两头再粘起来,就能做出来。它是看似矛盾,但实际上能出现在现实世界,并且我们已经利用它的原理做出了很多东,比如立交桥、传送带、过山车等等。这种可以在现实世界出现的东西,就算不上是矛盾空间了。

构成方法,也就是矛盾空间的形式是如何形成的。主要的方法两种,共用面积和矛盾连接。

利用共用面积,所谓的共用是将两个不同视点的立体型,用一个共用的面积联系在一起,构成那种视觉上既是仰视又是俯视的空间结构,让两种空间的感觉,同时出现在一个物体上。

概念有些抽象,我们还用平面的正方形做演示,把它做成假立体的矩形。现在的这个矩形,从下面看是仰视;从上面看就是俯视的立体矩形,两个视点合二为一,这款图形就是用一个共用面构成。共用面是中间的正方形,是它将两个不同视点的立体型用一个共用的面积联系在一起。

其实这种多视点的手法,同样被艺术家应用在了立体主义的绘画中,把形体不同侧面同时观察和表现,视觉中的形体就消失了,空间和形式,都被分割成了不具有固定视点的基本形状。

以毕加索的亚威农少女为例,我们可以仔细观察一下画面中的女性,除了抽象一些、穿的少了点以外,还有什么明显和现实世界中女性不一样的地方?

注意左边女人的眼睛,是把正面的眼睛拿到人的侧脸了;而右边,眼睛的问题不大,但是鼻子是用侧脸的。这就是立体主义把形体的不同侧面,同时观察和表现的结果,手法和矛盾空间中将两个不同视点放在一起是一样的。

过气网红小猪佩奇,社会人的精神领袖。现在看他的表现形式,看眼睛,和少女作比较,是不是和立体主义的表现形式一样?以后可别觉得小猪佩奇长得的不好看,它也算的上是对立体主义的致敬了,成功绝非偶然。

这幅作品里的图形用到共用面,其本身就是一个具有多视点的矛盾体。其实把它简化再看,图形和上面我们拿来做演示的假立体图形没什么区别?两种空间结构同时出现在了这上面。

如果我们在尝试设计矛盾空间的时候,想做复杂的图形,就可以利用这种逻辑,把基础的框架绘制出来,再根据框架细化里面复杂的部分,和画画的时候要先打草稿没什么区别。都是一个形式,一个简单,一个复杂而已,算是一个应用的小技巧了。

矛盾连接是利用直线、曲线、折线在平面空间中,方向的不确定性,使矛盾的形体连接在了一起,把原本正确的图形结构进行了错位,看个例子。

上下两个立体图形,在正常情况下,上面的图形是符合逻辑的,不会出现下面图形的情况。下面的图形就是两个矛盾的形体,连接在一起的。

正常状态下,左边的图形只能是右边两种形态中的一种,不过我们通过矛盾连接的方式,还是能把他们组合在一起,构成矛盾空间的图形。这个新的图形是不是很有意思,看似合理,实际上不可能实现的。

共用面积和矛盾连接,都是构成矛盾空间的常用方法,并且在大部分复杂的矛盾空间图形中,都是混用的。很多矛盾空间的作品,都是由许多简单的矛盾图形构成的。

像潘洛斯三角形,之前纪念碑谷里也见过一个,它是由三个长方体组合成的三角形。正常直角三角形的夹角应该是60度的,不过这里面两个长方体之间的夹角,看起来又像是90度的直角,典型的矛盾空间图形,把它和埃舍尔的瀑布放到一起。

实际上,这个瀑布就是由两个拉长的潘洛斯三角形构成的。水最后形成的瀑布,是两个潘洛斯三角共用的边缘,这种复杂的矛盾空间,就同时使用了共用面和矛盾连接。

再看一些矛盾空间的海报,这些海报大部分都是大师福田繁雄设计的,也不难看出那两种方式的影子。

适用范围,矛盾空间适合用在哪些地方?什么样的项目里用它比较合适?用和它有关的关键字进行推导就能找到。

与这些关键字有联系的项目,都可以尝试使用矛盾空间这种设计形式,在实际应用中,这种形式可以囊括的范围可能会更广。

案例演示,下面我们一起来设计几款简单的矛盾空间图形,通过这些案例,来重新梳理一下前面学到的内容。

画完草稿以后,用网格重新规范图形,把图形填充进来就可以了。我说他是矛盾空间的图形,这个图形哪里是矛盾的?注意,你觉得它左右那两块类似心形的面积,在空间上哪块离你最近?

估计看到右面是凸起来的人会多一些,不过要是把右面的面积隐藏,就是左面凸出;如果隐藏的是左面的面积,那凸出的就是右面,凸出来的这块应该离我们最近对吧?哪个离我们最近?都是,也都不是,这就是矛盾空间。

利用这个基本形,把里面的这两个立体的心形拿出来就能延展出新的矛盾空间图形。很简单的方法,可以做一些类似的尝试。

用上一个基础的图形继续延展,把右边心形的位置向上移动一格,上面缺少的面积补齐,一款新的图形又出现了。

这回我们不看左右两边的心形面积,看中间的楼梯,把它拆开看更方便。这个楼梯我们想走上来再走下去,只有原路返回一种方式吗?

原路返回可以,走另一条路也没有问题,一样能回到原点。矛盾空间,创造出了正反两个世界,从不同的视点去观察,它们的存在都是合理的。

我们把中间的楼梯拿出来,复制出来三个,把连接的地方做一下处理,又能做出来一个类似潘洛斯阶梯的新图形。

两个心形组合在一起,又一个新图形,这个图形有什么特别?特别之处还是在楼梯上。虽然中间的楼梯被挡住了,不过给我们的感觉是这个人,从下面还可以走到上面的,这也是一种矛盾。

矛盾空间图形还有一个好处,同一个矛盾空间的图形,什么变化都不做,单纯的旋转角度,图形呈现出来的感觉,也都完全不一样。其他图形也一样,换个颜色,不放在一起的话都不容易看出来,可以做备选方案。

我们选最后这个图形,给它放到海报上看看效果。底板用我们之前看过的那组海报,看看刚才自己做的图形,能不能混进他们的队伍。添加一些颜色和肌理对比一下,毫无违和感。

通过今天的学习,我们了解了什么是矛盾空间;他的原理概念是什么;有什么优势与作用;需要注意的地方有哪些;什么类型的项目适合使用这种形式,还有他的两种常见的构成方法。就到这里,期待你的进步,下期再见。

研习社(公众号)

作者:研习社K先生

(0)

相关推荐

  • 免费的商用字体,90%的设计师都不知道!

    免费可商用字体,一直是设计师心中永远的痛(尤其是中文字体),今天,我们带大家来看一波免费可商用字体. 首先是中文 中文字体的版权,有三个字可以形容:有点乱! 对于不同的字体厂商来说,不同用途,不同收费 ...

  • 工作五年以上的UI设计师都在干什么

    入行两三年,继续深造.转行还是回家乡?何去何从,不妨听前辈们聊聊他们的现状吧.今天这篇问答,既有奋战一线的华为.腾讯资深设计师,也有图安逸在三线城市工作的,既有设计科班生,也有26岁才入行的非科班生, ...

  • 连BAT设计师都在使用的视觉动线技巧(下)

    上篇文章<连BAT设计师都在使用的视觉动线技巧(上)>和大家分享了视觉动线和Z型布局的详解,不知道大家还记得吗?我们的互联网用户希望高效阅读页面,这意味着人们会经常跳跃式的阅读页面,从而在 ...

  • 优秀的网页设计师都是如何修炼的?

    操作方法 01 现在网页设计师成为人们跨向IT领域的阶梯,随着网络化的发展,了解世界,掌握更多的发展机遇,都使这门职业及发展成为许多人需要跨越信息的屏障.下面就让达内数字艺术学院深圳网页设计培训的刘老 ...

  • 无良卖家恶意不发货或虚假发货怎么办

    对于无良卖家我们是又气又恼,还好淘宝可以维权,下面小编教大家遇到无良卖家恶意不发货或虚假发货的时候直接维权就好了. 操作方法 01 在"搜狗浏览器"中,打开淘宝,登录到淘宝账户,如 ...

  • 「海平面」50张精美图文设计案例解析(二)

    设计师通过应用文字.颜色.图像和其他图形功能来为观众讲故事.就像作家在讲故事时一样,设计师也有一些特别的方法和技巧,来确保语气语调的正确性及信息的真实性. "设计提供了一个继续讲述故事的机会 ...

  • 40个使用「混合模式」与「不透明度」来设计的 LOGO 作品

    小编:哈喽小伙伴们,今天给大家分享一篇漂亮的LOGO作品,出自俄罗斯设计师  iliasc 之手.作者使用AI软件中「混合模式」与「不透明度」2个简单的功能使得所有的LOGO颜色都非常通透美丽,有兴趣 ...

  • 20个简单易上手堪称「神器」的可视化工具

    国外的可视化行业发展得相当成熟,这催生了不少在线信息图表制作工具,介绍比较好用的几个,利用它们,五分钟你就可以做出一张超屌的信息图表: 1]infogr.am 这是较早的一个在线制作工具,亮点是支持实 ...

  • 「案例」让房东在 Airbnb 上展示他们的热情好客

    如何才能让房东准确的描述自己的房源,如何才能让房东充分的展示自己的房源.Airbnb 在这次更新里尝试去解决了这两个问题,让我们跟随作者的文笔去了解一下整个项目的经过. 关于本文 原文作者:Cecil ...