设计美学

来源:互联网 发布:mac磁盘分区合并 编辑:程序博客网 时间:2024/06/10 06:04

“低面建模”设计美学-20140726早读课

时间: 2014-07-26 / 编辑:早读课 / 分类:交互体验,产品分析,产品设计,用户研究 / 642 人看过 / 暂无评论 发表评论

dmjmsjmx-20140724-banaer

经常浏览Dribbble和Behance的朋友可能会注意到,最近“低面建模”设计风格异常火爆,这种设计风格的特点是低细节,面大而粗犷,高度渲染,经常配以柔光效果。网页图形设计和动效设计,现实中的杂志、电视中这种风格多有体现。其实,这种设计风格在早期计算机建模和动效中就被广泛采用,在快要被遗忘之时,突然又流行了一把。

dmjmsjmx-20140724-1

《寂寞星球》 by 雷老虎

本文将着重探索这种低面建模设计风格的外观,展示一些低面建模设计案例。

 

一、3D建模和低面建模的前世今生

所有的3D建模都需要借力多边形。模型的多边形越多,模型越具细节。通常会柔化多边形的边缘,面与面之间的过渡更加柔和,物体的外观看起来更加圆润。

低面建模设计不同,建模阶段使用的多边形较少,成品会呈现一种简洁、抽象的效果。注重渲染,弱化多边形衔接过渡。打造一种封闭、冷硬的感觉。

然而,上述讲的这些并不意味着低面建模的作品分辨率低。低面建模设计使用了精致的渲染技术、光照效果、隐形效果,能够将简单的物体的实体性质高度还原。(只不过外形上有所欠缺)结果便使得低面建模设计有点像现实生活中的手工艺品,感觉很复古。

dmjmsjmx-20140724-2

低面建模设计代表人物是Timothy J.Reynolds。以及Jeremiah Shaw和Danny Jones的Tumblr站点Geo A Day,他们都极力推崇低面建模设计美学。

Timothy J.Reynolds作品赏析:

dmjmsjmx-20140724-3

Geo A Day,作品赏析:

dmjmsjmx-20140724-4

用Jeremy Kool的The Paper Fox来形容这种设计风格,再贴切不过了(下图)。这个作品成为iOS上的一款交互性极高的应用。Jeremy Kool模拟了折纸风格。加入了褶皱的纸质感,而边缘非常的纤细。

dmjmsjmx-20140724-5

而在Kristina Macurova的作品中,你可以感受到景深,提高了模型的实体感。可以在镜头设置中调整景深,也可以后期用PS调整。

 

二、低面建模设计的崛起

dmjmsjmx-20140724-6

喜欢低面建模设计的设计师似乎很不欣赏计算机仿真建模,因为计算机仿真建模有点太完美了,太客观了,毫无瑕疵。而现在的流行的3D仿真建模让人感觉太过圆润,他们追求那种粗糙的质感,因为设计师知道,再怎么模拟现实,设计出来的作品依然和现实差那么一“点”儿,他们觉得应该用设计去捕捉物体的本质,而不是努力的追求外观的模仿。繁荣发展的数字艺术,经历了一代又一代对“逼真”风格的无限追求,可他们永远无法做到逼真,因为他们进行的是模拟。终于,有人厌倦了模拟,他们开始追求抽象化的表达。

艺术并不需要精确:艺术表达的是一种飘忽不定的感觉,而不是外观的完美再现。

 

三、手把手教你进行低面建模设计

提供了一份简单教程,能够帮助快速实现低面建模风格(软件:Cinema4D)

  1. 使用简单的实体创建对象,比如说球形、锥形。不必非常细腻,简单即可。

2.Segment属性,勾选每段细分选项“Subdivision per Segment”,段数越多,物体的面越多,相对表面就越平滑。

  1. 设置Phong属性——决定了物体的圆滑度,在Cinema4D中,可以删掉Phone标签,或者将Phone角度设置为0
  2. 为了打造多边形效果,可以给模型加入变形,可以手动设置(通过拖移节点),也可以使用Displacer这种变形器。使用Noise shader给每个顶点进行随机添加。可以增加或者减少变形量。
  3. 给物体加入材质,定义材质时,可以加入隆起的映射,提供更棒的表面细节。也可以通过特殊的高光来打造。
  4. 添加背景,添加天空
  5. 添加光,微妙的光会让作品更带感。
  6. 渲染对象,使用Global Illumination渲染设置,打造柔和光,添加Ambient Occlusion添加深度感和阴影。

dmjmsjmx-20140724-7

这就是完成后的结果。你自己钻研一下,创建自己的风格吧。

 

四、实际案例

1.平面设计中的低面建模风格

即使你不会使用3D建模软件来设计低面建模,依然可以通过平面软件如AI、PS等来创造二维的低面建模风格。设计原则和三维大致相同。形状务求简单,确定好光源位置,添加遮蔽效果,添加深度感,从而打造一种多面的外观。也可以适当添加一些材质效果和光照效果。

看看Matthew Lyons的作品,他使用了简单的几何图形,粗糙的材质,很有氛围的光。他的作品有一种中世纪的设计感,刻画出一种复古未来派风格。——未来看起来跟过去一样的有泛黄的质感。

dmjmsjmx-20140724-8

2.3D网页设计

dmjmsjmx-20140724-9

这是Mr.Doob上最近的一个项目

低面建模设计也可以用来传递3D内容。低面建模设计,正如其名,使用了较少的多边形,因此建模、渲染、动效制作起来稍微能轻松一点,有助于实现在线实时3D效果。有很多在线3D渲染技术,比如WebGl,WebGL通过OpenGL和JS的绑定,实现3D内容的渲染。还有很多JS框架也能实现,比如three.js。

还有一种办法是使用插件,例如Unity 和Flash,Flash可用的引擎很多,比如Away 3D以及Flare 3D。尽管目前Flash和Unity的渲染效果更好,但是WebGL会很快追赶上。

有兴趣的可以看看three.js开发者Mr.Doob的作品,观赏一下WebGL的效果。

dmjmsjmx-20140724-10

3 dreams of black,这个采用WebGL的网站,打造了一种交互性极强的影音体验,再加上低面建模风格的动效,感染力极强。这是个开源项目,你可以下载下来,然后重做代码。当3D 和网页设计遭遇,结果会怎样?我们都想知道结果,我们相信低面建模设计将是网页设计3D化的有力推手。

3.图标设计

dmjmsjmx-20140724-12 dmjmsjmx-20140724-13 dmjmsjmx-20140724-14 dmjmsjmx-20140724-15 dmjmsjmx-20140724-16

 

五、复古未来派美学(retro-futuristic )

dmjmsjmx-20140724-17

这是一幅复古未来派作品

个人认为低面建模设计师一种复古未来派风格设计(它本身也可以称之为新唯美设计The New Aesthetic),又回到过去,又回到未来,在摇摆不定中寻找美学的平衡。

目前来说,低面建模设计非常符合现在的设计趋势,至于未来如何,我们将一一见证。

你认为低面建模设计是一种视觉泛滥,抑或是过时的趋势?你认为它符合现在的设计趋势吗?欢迎加入讨论。

 

原文地址:http://www.webdesignerdepot.com/2013/09/how-to-get-the-low-poly-look/

原文作者:Webdesignerdepot

译文来源:UI中国

译文作者:MartinRGB

译文地址:http://www.ui.cn/project.php?id=20845

0 0
原创粉丝点击