聊聊平面构成点线面中面的风格和玩法

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:ifeiwu   作者:飞屋睿UIdesign

关键词

设计里,点线面中的「面」,也许是我们最常使用的构成元素了。有时候我们也把面称为“形”。形的丰富多样,虚实变换就能让你玩出各种不同风格的视觉效果。本篇主要介绍平面设计面的风格及视觉感受,面的作用以及玩法。

一、面也是一种轨迹

当我们说点是线的移动轨迹的同时,其实面也是线的移动轨迹。面拥有二维成像的特征,只有长度、宽度等,没有厚度。

直线的平行移动为方形,直线回旋移动成圆形,直线和弧线结合运动形成不规则形。

聊聊平面构成点线面中面的风格和玩法

二维平面也可以产生出三维的视觉效果,是我们利用了光线和透视的原理,也就是玩了一场小把戏。下面这个人物,其实就是由许多直线形的面所构成的。利用色彩来模拟光照,我们就能获得一种三维的立体效果。

聊聊平面构成点线面中面的风格和玩法

二、感性与理性

用线封闭成形且填充后就能成为一块面,这块面会有一种充实感,让你实际体会到它的存在。一块面与另一块面的区别就在于它的轮廓外形。

直线围绕而成的形,如方形、三角形、平行四边形等会给人一种踏实、平稳的感受,当然也会有城市建筑感。在这两年,直线型的插画设计非常流行,它提炼了事物的外形,获得一种抽象的理性美感。

聊聊平面构成点线面中面的风格和玩法

虽然是曲线形的面,但它必须为尺规数理所约束,也同样拥有直线形的面所有的理性和秩序。比较常见的是圆形,它与直线形有机联合,共同创造的形象,并非一丝不苟,而又充分演绎了这样一种理性审美风。

聊聊平面构成点线面中面的风格和玩法

就像曲线能表达出某种自由浪漫,曲线形也同样适用于所有类似的题材,例如女性、儿童等柔和活泼的主题。

聊聊平面构成点线面中面的风格和玩法

最后一类是不规则的形,它完全没有曲直的规律,似乎只是偶然形成,比如水纹、火苗、大理石纹理等,天下没有完全相同的两片叶子,同样解释也就是所有自然所形成的偶然形都不完全相同,因此它即使形成了纹理,也是有机纹理,运用偶然形就能设计出自然生机。通常这类形像是以群集的方式出现,,比如下图中公鸡的羽毛。

聊聊平面构成点线面中面的风格和玩法

因此,我们可以这样说,如果这个世界上的氛围可以简化为理性和感性,把它们设定为两个极端,那么我们就有了这个认识。

聊聊平面构成点线面中面的风格和玩法

设计时,你就能参考这个滑块,根据设计的题材选用不同的形态来表现不同的氛围。比如你的题材涉及到男性,那么你所考虑选用的形就靠左,女性题材则设计时就以曲线居多。左边象征理性,右边象征感性,这也和我们左右脑的分工是一致的。

但是,我的个人体验就是纯感性或纯理性都不太理想,应该是相互杂糅在一起,有机结合,才能阴阳协调。

三、面与面

一个设计中往往只出现一个面的几率很小,通常我们会运用多个面来创建图形,而面与面之间会发生关系,概括起来,面与面会发生八种关系

聊聊平面构成点线面中面的风格和玩法

这八种关系并非单一发生,也有可能是组合在一起共同发生,形成错综复杂的关系,共同营造整个平面的设计氛围。但是在实际操作中,如果面与面所发生关系过多,会让观众产生视觉判断的疲劳,从而放弃对设计的理解,因此我们要针对不同的目的进行关系编排。

也是利用面的关系,我们在矢量图形中进行创作时,就能利用不同图形间的关系进行编排创作。

四、虚实空间

除了面与面之间的关系,面与空间也有一定的关系,什么是空间呢?简单说,就是你的焦点图形外的背景。背景其实也是一块面,只是它的视觉影响力稍弱,处于退后的位置。于是,我们把一个画面简单概括为正负形,也有的称为前后景。背景其实是负形空间,正负形关系相互影响。

比如我曾经在文章《网页设计中的极简风格—无的力量》中提到,负空间其实也是设计的元素。现代的设计非常重视留白,是因为我们大量从正形的意义出发,最后导致正形占据压倒性的关注,然而这并不利于焦点的突出。

比较有趣的关系是让大家注意到负形,因此,我们可以利用正负形共同创作。例如下图中就是背景融入到前景中的一种最为简单的创作方式。

聊聊平面构成点线面中面的风格和玩法

五、正负形插画实例:不小心很容易玩坏一个妹子

正负形都参与了主动造型的设计看起来非常奇妙,我们要学的并不是这个结果,而是如何思考正负形。

从摄影照片里找出正负形的关系来创建构图,非常重要的一个不可见的步骤是简化视觉。将高光阴影的关系精简到只剩下唯一线索。然后在软件中用钢笔工具勾画出主要的轮廓形。这里是将原图细节都模糊处理,全部提炼为扁平的形。采用曲线造型突出女性的柔和。

在AI中是用面的关系在组合你的图像,前期一定要认真分析清楚面面关系。不思考就开工,你真的很容易玩坏一个妹子。

聊聊平面构成点线面中面的风格和玩法

经过精炼后,你可以从正形中再考虑用哪一个形状去“融合”负形。因为这张图的负形其实很简单,就是白色背景。因此,最后面对的问题就是,你的背景色与哪一个负形的色彩相同?只要两个色块相互接触,其实就能发生融合的作用。

让我们先用头发试试。

聊聊平面构成点线面中面的风格和玩法

看上去感觉整个画面都是她的头发,这时,如果头发上没有任何的装饰,其实看上去略枯燥。因为你只是将头发隐藏在背景中了,只剩下脸。

再换成肤色,让脖子以下的部分融入负形。这里可以适当换一下配色。

聊聊平面构成点线面中面的风格和玩法

这个模特的形象依然是非常清晰的,因为有阴影的参与,我们仍然仿佛可以看到她的脖子。脑补成功出一个完整的人像。

最后试试采用衣服的颜色。

聊聊平面构成点线面中面的风格和玩法

衣服的粉色非常饱满突出。整个画面冲击力较强。

一个简单的矢量人像插画采用了三种负形融入正形,色彩作为其融合的手段,在此发挥了非常大的作用。

聊聊平面构成点线面中面的风格和玩法

但其实这幅插画看上去仍然显得呆板,因为太中规中矩,缺乏趣味性。这时,你也可以通过这样的方式增加插画的趣味性。

1、增加配饰

给衣服增加一些负形的花纹,再给一对耳环。看上去细节更丰富了。

聊聊平面构成点线面中面的风格和玩法

2、重调构图

稍微调整对象的大小并改变聚焦的位置,残缺似乎更具有想象力。

聊聊平面构成点线面中面的风格和玩法

好了,既然大家都有兴趣继续玩下去,还等什么?找张不错的参考照片开始操作吧。

 收藏