1. 兔课网
  2. 资讯
  3. UI设计教程
  4. UI图标面化效果是什么意思?如何做面化效果?

UI图标面化效果是什么意思?如何做面化效果?

3355人阅读 2020-03-17 收藏

UI图标面化效果是什么意思?如何做面化效果?在矢量软件里调整标志图形时,即使再细的一根线,我们都会把它当成一个面来调整,都需要调整围边路径,然后填色。对设计师而言,所有的点线面都是当做面一样的来调整,我们都是在调整图形的形状(面)。 我们这里的“面化效果”,不仅仅是只一个视觉符号的轮廓,剪影,还是一种将图形符号平面化(突出二维的平面效果,而忽略其三维体积空间效果)的表现方式。 还是要先回顾下面的性质《符号语构元素--面》 《如何看点线面的张力》 (点击标题链接即可)。 先举例一些面化效果的标志: 具象符号面化:

UI图标面化效果是什么意思?如何做面化效果?

抽象符号面化:

UI图标面化效果是什么意思?如何做面化效果?

具象文字符号面化:

UI图标面化效果是什么意思?如何做面化效果?

“面化” 即意味着忽略了其内部的细节,而强化其外形轮廓在视觉上的张力 ,面(形状)上的性质区别,我们可以以简单的两点来把握。

1)以轮廓线的角度弧度。面是由线围合成的,所以我们对“面”的感觉主要来自轮廓线的性质,在线的纸质里,我们讨论了如何把握线,就是通过角度和弧度,线的角度与弧度,决定了面的几何感与随机感。

2)还有就是面的虚实。“实的面(积极的面)”-- 在封闭的轮廓线内涂满颜色所得到的形是充实的面形效果,我们将其界定为积极的面的形态,这种面的产生是线的移动、点的扩张和线宽度增加形成,所产生的效果醒目肯定,是实体的面。“虚的面(消极的面)”--虚面的形态我们界定为消极的面,对其的感知往往是以细小元素的集合,如点的平面集合产生的面,线的平面集合形成的面,封闭的线所造成中空的面形,如:线的平面围绕产生的面和点的平面围绕产生的面,周围形围合成的面,周围其他形的挤压造成的面。以上这些面形态产生的方式,均受其他元素的制约,以被动的性质出现,在具体的构成设计中,还可以综合的多元化处理,以期达到主次虚实的画面效果。

提到面,大家最容易想到的是轮廓,剪影(比剪纸艺术),最容易想到的面化标志就是抽象图形,和一些具象的人物动作剪影的图形标志,比如下面的例子:

UI图标面化效果是什么意思?如何做面化效果?

这类人物标志的剪影化,看起来简单,实际上,不如意处理,忽略人物的内部的细节,通过轮廓剪影就能表现出这个人物的特质,需要我们对人物的剪影特质敏感才行,网上很多矢量剪影素材,一下几千张,很多行业人士的剪影都有,非常好的可以直接拿来做标志图形使用。这种能力可以通过一些方法训练,比如让你的朋友不动,你从每个角度观察,看那个角度的影像最能概括他的特征,并拍摄照片,然后放电脑里扣图,做成剪影效果。看一些中国的剪纸艺术品等,多看一些舞蹈,这类肢体表现性的艺术,对人物面化特征的把握都有帮助。要得到好的人物剪影并不是直白的抠图就行,很多要做错觉调整。有的需要加强特征,以便于识别,在做标志时,还要统一你扣图的轮廓线条的角度及弧度,加强统一感。比如上图中的拿着麦克风唱歌的人物使用的线条,角度感就强些。而旁边睡觉的女孩的轮廓线条,弧度就大一些,就是这些轮廓的角度与弧度决定了面的感觉。

还有一些具象事物的面化:

UI图标面化效果是什么意思?如何做面化效果?

它们面化形状的感觉塑造都是一样的,来自于轮廓线的区别。

抽象图形是最能体现面化手法的标志,你找本标志图形的书籍,可以看到成千上万的几何图形的变化,它们都是形状可能性的尝试与创新。 给我们一种感觉,好像这些基本的抽象图形的面化 已经都被试遍了,呵呵。

UI图标面化效果是什么意思?如何做面化效果?

当然,并不是真的试遍了,即使是真的试遍了,我们还可以通过加入色彩,质感,空间体积,动感,光效等来实现视觉的上变化,如下图:

UI图标面化效果是什么意思?如何做面化效果?

虽然它们去色相,去明度之后和基本几何形状分割没区别,但是,现在媒介支持复杂的技术表现,全息影像都出现了,还有什么是不可能的呢? 它们还是面化的效果,只是在构思的时候,需要多维化的想象和塑造而已。

现在还有很多标志喜欢在面填充色块,丰富了图形面化的视觉效果,已经成了一种风格。比如下面的标志:

UI图标面化效果是什么意思?如何做面化效果?

由于英文字母的结构几何化强,所以外国标志的字母面化处理例子很多,如下图。

UI图标面化效果是什么意思?如何做面化效果?

外国标志设计师喜好抽象图形的调整设计,也就见多。喜好这种几何图形抽象化的设计书法,不仅与视觉传达的原理(追求简洁)有关,更和外国人的文字符号的使用习惯有关,不过笔者还是力挺中国特色的文化与视觉符号使用习惯,不想被过多的外国“符号化”。毕竟一个国家的符号使用习惯,就代表着一个民族的文化传统。

汉字虽然叫做方块字,但是其笔画以线为主,笔画比英文来的复杂,但加粗笔画后,字怀减小,也可以体现出面化的体量感效果。

UI图标面化效果是什么意思?如何做面化效果?

面化里还有一种用光影来表现事物的手法比较有意思,如下图中的人物:

UI图标面化效果是什么意思?如何做面化效果?

他们虽然没有忽略人像的内部细节,但是这种只区分高光和阴影的表现手法,还是面化简化的思维方式。这种表现方式,就像PS里的阈值工具,一线劈开亮和暗,记得小时候美术课本里有一个“雷锋头像”剪影剪纸手工作业,当时就觉得很有意思。这种手法使用的很多,练习的话,先找出人物(或事物)的明暗分界线,然后勾勒出轮廓,在做细节的调整。

以上都是实面(积极的面)的标志,当然还有虚面(消极的面)。、

中国绘画讲虚实,有实形,就是虚形,那些国画里的留白处就是无形的面,这些无形的面产生的张力,是通过有形的笔触暗示出来,再结合人的心理联想产生的。在标志图形里,这些手法一样适用,下图中的水墨和虚化的暗示都极具中国写意留白的韵味:

UI图标面化效果是什么意思?如何做面化效果?

有时候,我们看到的(或者调整的)是线条,但这个图形却是在表现面和体的量感,也就是负形的量感。

除了水墨留白的虚形面化,还有正负形的面化,正负形是设计上的说法,国外埃舍尔是正负形手法的大师,和上面的虚形不同的是,负形的形态还是很明确的。比如下面的标志:

UI图标面化效果是什么意思?如何做面化效果?

外国人在形态的意韵上,也就是图形模糊审美阶段的思考,没中国人来的深,中国的审美哲学,可以“打太极”,可以变化运动,可以包容兼并,是活的,是似像非像的,是不确定的,但是老外的审美就偏理性,一定要确定的,不要模棱两可的,要准确的,不要含糊的,所以,中国讲虚实,外国讲正负。这两种手法都是面化的思维表现方式。当然正负形更好练些,因为形态是固定的,但是中国水墨韵味的虚形留白,就需要多年的美术功底,很多人觉得国外的标志才算是国际化的标志,也喜欢模仿着做,其实,这和中国艺术表现能力的训练需要更长是时间不无关系。国外设计艺术的讲求理性分析科学教学,所以比较好教好学好掌握,但是中国传统的艺术设计,就难了。

还有一种虚面面化的处理,可以算在面的质感里,就是说使面的质感产生变化,加入图案肌理,或者通过点化,线化,色彩透明度等手法将面处理成虚面,如下图:

UI图标面化效果是什么意思?如何做面化效果?

这些手法,增加了面的表现效果,为标志图形增加了更多的触感。

上说的面化多是轮廓面化,下面说说“平面化”的表现手法,就是文章最开始说的突出视觉符号的二维效果,忽略符号三维的体积空间感的表现方法。

将复杂的符号图形平面化,可以充实画面的二维空间,强化视觉张力,增加冲击力,中国传统的绘画,透视感不强,在表现空间上,上部来表达远处,下部来表现近处,但是远近的大小变化不大(不太注重透视的近大远小)所以画面看起来“平”, 很多现代的装饰画,艺术流派里的立体派,野兽派,包括康定斯基的抽象主义绘画都是平面化的代表。如下图平面化艺术作品举例:

UI图标面化效果是什么意思?如何做面化效果?

这类的手法的标志在很多自然景色标志符号里比较常见,如下图:

UI图标面化效果是什么意思?如何做面化效果?

和很多平面化是艺术流派一样,这些标志做成装饰画的效果,它们虽然也能表现出一定的三维空间感,但是它们更强调图形画面的二维化的视觉张力,突出平面化的美感,一些风景绘画手法,可以通过PS滤镜先处理下,比如滤镜制作油画效果,水彩效果,然后再做修饰,处理成标志图形,在我的博客中分享的一些房地产的标志源文件(房地产标志多使用这种面化手法),大家可以下载后,用软件打开看看别人是如何处理这些复杂的风景图形的。

下图的具象事物标志也是平面化的手法:

UI图标面化效果是什么意思?如何做面化效果?

左边第一个鹦鹉和花里,每个形状都有一个整体色块填充,忽略了空间感,虽然由于鹦鹉对后面的花的遮挡也能产生空间感,但是这里强调的还是平面化,第二个就更加明确突出面化,整齐的形状,分布于圆形平面里,群化而可爱的平面化效果。第三个人脸和鸟的组合,块面化的表现,使图像产生了二维的感觉。最后的皇冠,在重叠部分,使用了黄色,这个黄色并不是用来塑造前后关系,而是丰富了其二维平面上的视觉效果。

相关文章推荐

UI界面设计中的MBE风格是指什么
UI和PS的区别是什么?,学UI除了ps还需要学什么?
UI设计该学些什么,这个行业前景如何?,想做UI设计在大学应学什么专业?
标志设计表现形式有几种
UI与前端课程区别大不大?
UI设计学完能做什么?学习完设计能做什么工作?
UI知识,UI设计和交互的区别,UI设计和交互的区别?
UI设计可以自学吗?,目前UI交互设计常用的软件有哪些?UI处理软件有哪些?
UI设计适合女生吗?无学历女生做什么工作工资高
UI设计前景怎么样?

特别推荐

上一篇>> 如何快速掌握图标设计技巧

下一篇>> UI图标绘制需要注意哪些细节

新人大礼包

1
咨询客服

交流Q群

微信公众号
返回顶部