經(jīng)常瀏覽Dribbble和Behance的朋友可能會注意到，最近“低面建?！痹O(shè)計風(fēng)格異?；鸨３司W(wǎng)上的圖形設(shè)計和動效設(shè)計，現(xiàn)實中的雜志、電視中這種風(fēng)格也多有體現(xiàn)。這種設(shè)計風(fēng)格的特點是低細(xì)節(jié)，面又多又小，高度渲染，經(jīng)常配以柔光效果。

寂寞星球 by 雷老虎

其實，這種設(shè)計風(fēng)格在早期計算機(jī)建模和動效中就被廣泛采用，在快要被遺忘之時，突然又流行了一把。

本文將著重探索這種低面建模設(shè)計風(fēng)格的外觀，展示一些低面建模設(shè)計案例。

3D建模？低面建模？

所有的3D建模都需要借力多邊形。模型的多邊形越多，模型越具細(xì)節(jié)。通常會柔化多邊形的領(lǐng)教，讓物體的外觀看起來更和諧。

低面建模設(shè)計不同，建模階段使用的多邊形較少，這樣最后便會呈現(xiàn)一種簡潔、抽象的效果。更注重渲染，而不是更注重柔化多邊形。打造一種封閉、冷硬的感覺。

然而，上述講的這些并不意味著低面建模建模的作品分辨率低。低面建模設(shè)計使用了精致的渲染技術(shù)、光照效果、隱形效果，能夠?qū)⒑唵蔚奈矬w的實體性質(zhì)高度還原。（只不過外形上有所欠缺）結(jié)果便是，低面建模設(shè)計有點像現(xiàn)實生活中的手工藝品，感覺很復(fù)古。

低面建模設(shè)計代表人物是Timothy J.Reynolds。以及Jeremiah Shaw和Danny Jones的Tumblr站點Geo A Day,他們都極力推崇低面建模設(shè)計美學(xué)。

Timothy J.Reynolds作品賞析：

Geo A Day,作品賞析：

用Jeremy Kool的The Paper Fox來形容這種設(shè)計風(fēng)格，再貼切不過了（下圖）。這個作品成為iOS上的一款交互性極高的應(yīng)用。Jeremy Kool模擬了折紙風(fēng)格。加入了褶皺的紙質(zhì)感，而邊緣非常的纖細(xì)。

而在Kristina Macurova的作品中，你可以感受到景深，提高了模型的實體感。可以在鏡頭設(shè)置中調(diào)整景深，也可以后期用PS調(diào)整。

為什么低面建模設(shè)計火了？

喜歡低面建模設(shè)計的設(shè)計師似乎很不欣賞計算機(jī)建模，因為計算機(jī)建模有點太完美了，太客觀了，毫無瑕疵。而現(xiàn)在的3D建模讓人感覺太圓潤了，他們追求那種粗糙的質(zhì)感，因為設(shè)計師知道，再怎么模擬現(xiàn)實，設(shè)計出來的作品依然和現(xiàn)實差那么一“點”兒，他們覺得應(yīng)該用設(shè)計去捕捉物體的本質(zhì)，而不是努力的追求外觀的模仿。

當(dāng)20世紀(jì)攝影出現(xiàn)時，有人覺得攝影應(yīng)該去精確的抓取現(xiàn)實瞬間，這才是攝影追求的高度。但是藝術(shù)并不需要精確:藝術(shù)表達(dá)的是一種飄忽不定的感覺，而不是外觀的完美再現(xiàn)。

繁榮發(fā)展的數(shù)字藝術(shù)，經(jīng)歷了一代又一代對“逼真”風(fēng)格的無限追求，可他們永遠(yuǎn)無法做到逼真，因為他們進(jìn)行的是模擬，此時，有人厭倦了模擬，他們開始追求抽象化的表達(dá)。

怎樣進(jìn)行低面建模設(shè)計？

這里提供了一份簡單教程，能夠幫助快速實現(xiàn)低面建模風(fēng)格，使用的軟件是Cinema4D

1.使用簡單的實體創(chuàng)建對象，比如說球形、錐形。不必非常細(xì)膩，簡單即可。

2.Segment屬性，勾選每段細(xì)分選項“Subdivision per Segment”，段數(shù)越多，物體的面越多。

3.設(shè)置Phong屬性——決定了物體的圓滑度，在Cinema4D中，可以刪掉Phone標(biāo)簽，或者將Phone角度設(shè)置為0

4.為了打造多邊形效果，可以給模型加入變形，可以手動設(shè)置（通過拖移節(jié)點），也可以使用Displacer這種變形器。使用Noise shader給每個頂點進(jìn)行隨機(jī)添加?？梢栽黾踊蛘邷p少變形量。

5.給物體加入材質(zhì)，定義材質(zhì)時，可以加入隆起的映射，提供更棒的表面細(xì)節(jié)。也可以通過特殊的高光來打造。

6.添加背景，添加天空

7.添加光，微妙的光會讓作品更帶感。

8.渲染對象，使用Global Illumination渲染設(shè)置，打造柔和光，添加Ambient Occlusion添加深度感和陰影。

這就是完成后的結(jié)果。你自己鉆研一下，創(chuàng)建自己的風(fēng)格吧。

實際案例

1.平面設(shè)計中的低面建模風(fēng)格

即使你不會使用3D建模軟件來設(shè)計低面建模，依然可以通過平面軟件如AI、PS等來創(chuàng)造二維的低面建模風(fēng)格。設(shè)計原則和三維大致相同。形狀務(wù)求簡單，確定好光源位置，添加遮蔽效果，添加深度感，從而打造一種多面的外觀。也可以適當(dāng)添加一些材質(zhì)效果和光照效果。

看看Matthew Lyons的作品，他使用了簡單的幾何圖形，粗糙的材質(zhì)，很有氛圍的光。他的作品有一種中世紀(jì)的設(shè)計感，刻畫出一種復(fù)古未來派風(fēng)格。——未來看起來跟過去一樣的有泛黃的質(zhì)感。

2.3D網(wǎng)頁設(shè)計

這是Mr.Doob上最近的一個項目

低面建模設(shè)計也可以用來傳遞3D內(nèi)容。低面建模設(shè)計，正如其名，使用了較少的多邊形，因此建模、渲染、動效制作起來稍微能輕松一點，有助于實現(xiàn)在線實時3D效果。有很多在線3D渲染技術(shù)，比如WebGl，WebGL通過OpenGL和JS的綁定，實現(xiàn)3D內(nèi)容的渲染。還有很多JS框架也能實現(xiàn)，比如three.js。

還有一種辦法是使用插件，例如Unity 和Flash，F(xiàn)lash可用的引擎很多，比如Away 3D以及Flare 3D。盡管目前Flash和Unity的渲染效果更好，但是WebGL會很快追趕上。

有興趣的可以看看three.js開發(fā)者M(jìn)r.Doob的作品，觀賞一下WebGL的效果。

3 dreams of black，這個采用WebGL的網(wǎng)站，打造了一種交互性極強(qiáng)的影音體驗，再加上低面建模風(fēng)格的動效，感染力極強(qiáng)。這是個開源項目，你可以下載下來，然后重做代碼。當(dāng)3D 和網(wǎng)頁設(shè)計遭遇，結(jié)果會怎樣？我們都想知道結(jié)果，我們知道低多變設(shè)計將是網(wǎng)頁設(shè)計3D化的有力推手。

3.圖標(biāo)設(shè)計

復(fù)古未來派美學(xué)（retro-futuristic ）

這是一幅復(fù)古未來派作品

個人認(rèn)為低面建模設(shè)計師一種復(fù)古未來派風(fēng)格設(shè)計（它本身也可以稱之為新唯美設(shè)計The New Aesthetic)，又回到過去，又回到未來，在搖擺不定中尋找美學(xué)的平衡。

目前來說，低面建模設(shè)計非常符合現(xiàn)在的設(shè)計趨勢，至于未來如何，我們將一一見證。

你認(rèn)為低面建模設(shè)計是一種視覺泛濫，抑或是過時的趨勢？你認(rèn)為它符合現(xiàn)在的設(shè)計趨勢嗎？求討論。

原文地址：http://www.webdesignerdepot.com/2013/09/how-to-get-the-low-poly-look/
原文作者：Webdesignerdepot
譯文來源：UI中國
譯文作者：MartinRGB
譯文地址：http://www.ui.cn/project.php?id=20845
原標(biāo)題：Low-Poly設(shè)計風(fēng)格

有沒有看到看到效果高大上的圖片，覺得離自己很遠(yuǎn)，望而生畏？今天給大家介紹一種名為LOW-POLY的風(fēng)格圖片，讓所有人都一起來LOW-POLY一把，高大上一把！

感謝新浪微博朋友@創(chuàng)意農(nóng)民 授權(quán)分享。本文提到的下載地址（長按文字可以復(fù)制）

神器下載:http://vdisk.weibo.com/s/CcdgCyAPRyDGW
lowpoly風(fēng)格的背景圖片下載：http://matthew.wagerfield.com/flat-surface-shader/

首先讓我們一起來感受下LOW-POLY風(fēng)格帶給我們的沖擊吧！

制作LOW-POLY風(fēng)格圖片的步驟，我們分為七步，如下：

第一步：下載神器

下載神器請直接拉到文章末尾！

第二步：解壓神器并打開

解壓，打開index.html文件（注意，由于默認(rèn)瀏覽器不一樣，圖標(biāo)不一樣，用自己的瀏覽器打開即可）

第三步：打開后是這個樣子的

第四步：拖進(jìn)來是這樣子的

第五步：帶你的差不多就可以了

第六步：點擊轉(zhuǎn)化后， 多了一個按鈕

第七步：下載，結(jié)束

第八步：小結(jié)

1.頭像

先從封面的頭像說起吧，這個，這個頭像不是我做的，是抄襲的，因為這個用“神奇”做不出來，只能用ai一個一個的畫，比較耗時間，繁瑣，且需要一定的繪畫和抽象的功底。

2.用途

關(guān)于這個效果我個人第一眼看到就覺得很是高大上，很是適合做背景，后來一想，做圖表也可以啊，用這個圖形的圖片填充就OK。

3.分形

Low poly效果可以追溯為“分形”這一概念。Low poly來講就是把一個圖片分成四個三角形填充，把每個三角形分成四個小三角形，不停迭代就出來了。神器就是基于某種算法來實現(xiàn)的，不過由于用網(wǎng)頁代碼編寫的處理能力不夠細(xì)致。 最后一句Low poly分格的圖片大都是用C4D做的，一款優(yōu)秀的3D建模軟件，所以我等PS,PPT黨借鑒一下就好了。不要強(qiáng)求太多。（從PPT中看出，大都是3D作品）

4.技巧

• low poly分格對色彩要求比較高，不要試用到飽和度、高亮度的配色
• 關(guān)于Low poly風(fēng)格的背景圖片，你可以去這個網(wǎng)站下載：http://matthew.wagerfield.com/flat-surface-shader/

5.字體

還有大神出品一種PS做Low poly分格字體的教程，效果圖如PPT（其實我覺得直接用Low poly分格的圖片填充文字就OK）

6.案例

還是沒有忍住，發(fā)一張自己的頭像吧，先用“神奇”做了大致， 后來導(dǎo)入ai中修改的，做的不好歡迎大家吐槽。最后，謝謝關(guān)注啦，如果你喜歡，就@創(chuàng)意農(nóng)民 啦！

Low-poly神器——I?△ 演示教程