MBE風(fēng)格賞析

王娟娟

摘要：能修煉到自創(chuàng)一種風(fēng)格的人絕不簡(jiǎn)單，Dribbble大神MBE就開(kāi)創(chuàng)了一種新的視覺(jué)風(fēng)格，大家于是把這種風(fēng)格叫做MBE風(fēng)格，用這種風(fēng)格來(lái)創(chuàng)作圖標(biāo)或小型插畫(huà)，看上去簡(jiǎn)潔、圓潤(rùn)、可愛(ài)。幾乎是瞬間，這樣的風(fēng)格就風(fēng)靡了整個(gè)互聯(lián)網(wǎng)UI界。本文探討MBE風(fēng)格的特點(diǎn)及其發(fā)展。

關(guān)鍵詞：MBE;插畫(huà);UI;ICON

國(guó)產(chǎn)動(dòng)畫(huà)MBE是一名法國(guó)的設(shè)計(jì)師，他于2015年年底在dribbble網(wǎng)站上最先發(fā)布了這種風(fēng)格的作品，紅遍了全世界，所以這類風(fēng)格以MBE命名。然后世界各地的設(shè)計(jì)師根據(jù)風(fēng)格的特點(diǎn)做出了很多優(yōu)秀的作品，從線框型Q版卡通畫(huà)演變出來(lái)的MBE風(fēng)格，設(shè)計(jì)采用了更大更粗的描邊，相比沒(méi)有描邊的扁平化風(fēng)格插畫(huà)去除了里面不必要的色塊區(qū)分，更簡(jiǎn)潔、更通用、易識(shí)別。粗線條描邊起到了對(duì)界面的絕對(duì)隔絕，突顯內(nèi)容，表現(xiàn)清晰，化繁為簡(jiǎn)。以下是我總結(jié)的幾處觀點(diǎn)。

一、來(lái)源及背景

MBE風(fēng)格的原創(chuàng)作者是法國(guó)設(shè)計(jì)師MBE于2015年年底在dribbble網(wǎng)站上發(fā)布，從線框型Q版卡通畫(huà)演變出來(lái)的MBE風(fēng)格，設(shè)計(jì)采用了更大更粗的描邊，相比沒(méi)有描邊的扁平化風(fēng)格插畫(huà)去除了里面不必要的色塊區(qū)分，更簡(jiǎn)潔、更通用、易識(shí)別。粗線條描邊起到了對(duì)界面的絕對(duì)隔絕，突顯內(nèi)容，表現(xiàn)清晰，化繁為簡(jiǎn);所有此類型的圖標(biāo)和作品都被稱為MBE風(fēng)格。

現(xiàn)被各國(guó)設(shè)計(jì)師模仿，運(yùn)用廣泛，從最初的插畫(huà)及ICON到現(xiàn)在的海報(bào)，廣告，logo等，實(shí)現(xiàn)了更多的商業(yè)用途，也顯現(xiàn)出更多發(fā)展的趨勢(shì)。

MBE風(fēng)格迅速躥紅且流行全球的主要原因就是互聯(lián)網(wǎng)和移動(dòng)設(shè)備對(duì)人們生活方式的改變。人類需求更多的信息量，這很大程度上影響了人們的審美，偏愛(ài)更直觀更有趣且信息傳達(dá)明確的圖形，看起來(lái)更省力省事，也就是所謂的“不費(fèi)神”。而MBE風(fēng)格恰恰滿足了以上的需求并且容易于模仿及發(fā)展，不同的設(shè)計(jì)師都可以輕松駕馭，設(shè)計(jì)難度降低，而適用面廣，還能在基礎(chǔ)特點(diǎn)上做細(xì)微的個(gè)性變化，大大滿足了各類設(shè)計(jì)要求，如此風(fēng)靡且發(fā)展勢(shì)頭良好，是不無(wú)道理的。

MBE風(fēng)格的流行是一種必然，屬于扁平化風(fēng)格的分支。從往年iPhone盛行的擬物化風(fēng)格（如圖2），再到前兩年流行的扁平化風(fēng)格直到2008年由 Google提出了一個(gè) “Flat Design”的概念 就是現(xiàn)在扁平化設(shè)計(jì)的由來(lái)。扁平化概念的核心意義是：去除冗余、厚重和繁雜的裝飾效果。而 具體表現(xiàn)在去掉了多余的透視、紋理、漸變以及能做出3D效果的 元素，這樣可以讓“信息”本身重新作為核心被凸顯出來(lái)。同時(shí)在 設(shè)計(jì)元素上則強(qiáng)調(diào)了抽象、極簡(jiǎn)和符號(hào)化。簡(jiǎn)單的說(shuō)就是能筒單的表達(dá)就不啰嗦，能動(dòng)手的時(shí)候不要?jiǎng)幼?，因?yàn)楸馄交L(fēng)格的流行，那時(shí)候還誕生了另一種風(fēng)格 Long Shadow Design長(zhǎng)投影風(fēng)格（如圖3）。

個(gè)人比較看好MBE風(fēng)格的繼續(xù)發(fā)展，因?yàn)镸BE本人也一直從未停歇的作出新的嘗試和改變，因此使得這類風(fēng)格也擁有了更多的發(fā)展方向，如循環(huán)小動(dòng)畫(huà)和海報(bào)等等。

三、風(fēng)格及特點(diǎn)

MBE風(fēng)格最明顯的特征是，簡(jiǎn)單輕松的偏移填充粗線條描邊的插畫(huà)風(fēng)格。在使用描邊線條時(shí)不但要結(jié)合色彩學(xué)還要對(duì)作品寄予情感理解的更加通透，當(dāng)然也不能缺少對(duì)審美的認(rèn)知。根據(jù)顏色粗細(xì)有度，斷點(diǎn)位置與形狀結(jié)合，斷點(diǎn)多少與氣氛相結(jié)合，一般外粗內(nèi)窄，斷線收?qǐng)A角。

黑色線條好處是可以突出內(nèi)容，壞處就是會(huì)產(chǎn)生壓抑感削弱內(nèi)容主題使物體失去生動(dòng)特性，MBE很好的用斷線的處理方法解決了這個(gè)難題，這些斷線的處理并不是根據(jù)圖形的去限定個(gè)數(shù)，它們的數(shù)量多少是跟位置有直接關(guān)系的。

扁平化圖形+黑色粗線+斷線處理是MBE風(fēng)格的固定搭配，但是斷線的處理并不適合在所有的圖形上，既要保持這種新風(fēng)格又要完成想表達(dá)的設(shè)計(jì)，在線條的顏色和粗線處理上就要有些不同的處理手法。

2.色彩

①單色系

分析物體包含內(nèi)容是否屬于一種材質(zhì)、數(shù)量、介質(zhì)等特性屬性唯一時(shí)，即可使用單色系搭配方法找出物體的深淺關(guān)系營(yíng)造質(zhì)感，畫(huà)面表達(dá)會(huì)更為完整明確。多運(yùn)用于app的次級(jí)頁(yè)面icon（如圖6）。

②鄰近色+補(bǔ)色

在色系上作者M(jìn)BE有時(shí)候也會(huì)用不同色系制造圖形的氛圍，顏色的基本范圍會(huì)控制在三種顏色以下，分別采用鄰近色加補(bǔ)色形成，以下圖形中包含的紅、黃、綠、在色環(huán)上角度分別為22.5°的兩色間，色相差為1的配色，均屬于鄰近色相配色。而藍(lán)色角度為180°左右，色相差為8的配色，稱為補(bǔ)色色相配色。

當(dāng)想要表達(dá)的物體在一個(gè)數(shù)量以上或者物體本身某一處的材質(zhì)與其它地方不同，使用顏色區(qū)分能更好的傳遞畫(huà)面所要的表現(xiàn)的內(nèi)容，不用刻意保持色相的單一性（如圖7）。

③鄰近色+類似色

鄰近色是指在色環(huán)上相近的兩個(gè)顏色，在色彩學(xué)中還有類似色相配色、對(duì)照色相配色，在模仿和研究MBE風(fēng)格時(shí)不用墨守陳規(guī)的去遵循作者的設(shè)計(jì)元素，在找到規(guī)則之后可以靈活使用才是設(shè)計(jì)的王道。

中國(guó)設(shè)計(jì)師SA 9527這組的設(shè)計(jì)中使用了另外一組鄰近色加上類似色的使用（紅、粉、橘、黃）更好的表達(dá)了一種新年的氣氛（如圖8）。

④寫(xiě)實(shí)派

在色相的使用上，設(shè)計(jì)師會(huì)遵循色彩基礎(chǔ)原理來(lái)進(jìn)行配色，但是在不同環(huán)境下為了能更明確的表達(dá)物體本身之間的關(guān)系，在藝術(shù)形態(tài)上會(huì)更加具象。立陶宛的設(shè)計(jì)師Justas Galaburda在表現(xiàn)形式上更加貼近現(xiàn)實(shí)，藍(lán)天、白云、國(guó)旗、漢堡和薯?xiàng)l中的配色均采用現(xiàn)實(shí)中的物體顏色做為填充（如圖9）。

3.溢出

MBE風(fēng)格除斷線以外最大的特別就是色塊的溢出，其含義應(yīng)該是想表達(dá)物體通過(guò)光照折射出來(lái)的陰影因?yàn)橥ǔＲ绯龅姆较蚨际歉吖獾膶?duì)側(cè)。MBE早期使用色塊溢出作品較多后期基本已經(jīng)很難見(jiàn)到，原因是因?yàn)樵缙谧髌穲D形都偏于簡(jiǎn)單色塊溢出的處理可以給畫(huà)面營(yíng)造質(zhì)感增加對(duì)風(fēng)格的印象，而后期作品復(fù)雜度提升溢出部分無(wú)論在顏色還是整理型上很難融合，讓圖形本身突兀破壞本來(lái)想傳遞設(shè)計(jì)思想（如圖10）。

4.漂浮元素

MBE風(fēng)格的背景圖最初只有圓形、小花瓣、加號(hào)三種也是最常用的三種圖形，它們是隨著MBE而來(lái)也這種風(fēng)格標(biāo)志直到今天也一直被沿用。當(dāng)然天生具有靈活思維的設(shè)計(jì)師們不會(huì)僅僅停留在這三種元素的組成，通過(guò)不同位設(shè)計(jì)師的演變它們被改變顏色、位置、大小另外也衍生了一些與扁平風(fēng)格的結(jié)合，這種改變都是通過(guò)圖形本身特有的氣質(zhì)而改變。例如（如圖11）：

①鯨魚(yú)的背景圖形重新組成之后是不是有噴出水花的感覺(jué)。

②小蜜蜂飛舞的足跡結(jié)合扁平的漸變色加上漫天飛舞的小星星真的很有feel。

③茶壺中間的葉子很好的區(qū)分的茶具之間靠色的問(wèn)題，并給畫(huà)面增加了茶水很新鮮的意味。

④山體中間的云也是自然恰到好處。

⑤太陽(yáng)會(huì)因日出而東日落而西，太陽(yáng)的動(dòng)態(tài)氣氛給畫(huà)面增加了幾分活力。

⑥仙女棒五彩繽紛的氣氛，光照出來(lái)的時(shí)候會(huì)閃閃發(fā)光。

四、MBE風(fēng)格的發(fā)展及應(yīng)用

MBE風(fēng)格的發(fā)展及應(yīng)用主要在以下四個(gè)方面：

①互聯(lián)網(wǎng)、icon：也是MBE風(fēng)格早期就實(shí)現(xiàn)功能的經(jīng)典類型。簡(jiǎn)潔清晰的概括形象，功能表準(zhǔn)確，MBE一開(kāi)始的運(yùn)用就指向了icon。類型眾多，應(yīng)用廣泛，但變化較大，多棄漂浮裝飾，更注重功能的傳達(dá)，且多以單色或單線出現(xiàn)（如圖12）。

②插畫(huà)：MBE本人一直堅(jiān)持致力于插畫(huà)創(chuàng)作，也是本類風(fēng)格一直創(chuàng)新的根基。且MBE本人從未停歇進(jìn)步和更新，出現(xiàn)了新的卡片化特點(diǎn)（如圖13）。

③小動(dòng)畫(huà)：因其可愛(ài)有趣生動(dòng)的形象，加以開(kāi)放式圓潤(rùn)的線條，非常合適做加載循環(huán)小動(dòng)畫(huà)，在交互設(shè)計(jì)中產(chǎn)生了重要影響。

④廣告、形象類：現(xiàn)在市場(chǎng)上已經(jīng)出現(xiàn)的新趨勢(shì)，如電商廣告，H5，app的植入，logo等等（如圖14）。

五、結(jié)語(yǔ)

MBE自從出現(xiàn)以后，受到全球設(shè)計(jì)師的喜愛(ài)和效仿，迅速成為一種風(fēng)格蔓延開(kāi)來(lái)，在各個(gè)地區(qū)都有自己的發(fā)展和融合;這很大程度取決于這類作品即是去掉一兩種特征，也有很高的辨識(shí)度，且設(shè)計(jì)過(guò)程容易掌握。

風(fēng)格本身具有強(qiáng)烈的趣味性，色彩鮮明，并且可以廣泛運(yùn)用于視覺(jué)傳達(dá)設(shè)計(jì)的各個(gè)分支，也能很好的與其它形象和風(fēng)格相融合，更利于概括表達(dá)對(duì)象的特征，從而更好的實(shí)現(xiàn)功能的傳達(dá)。圓潤(rùn)可愛(ài)的線條和塊面與開(kāi)放式線條的結(jié)合富有層次感和韻律感，讓人覺(jué)得靈動(dòng)不沉悶，與漂浮的結(jié)合更是適合于動(dòng)畫(huà)和商業(yè)頁(yè)面的表達(dá)，漂浮元素自成體系也可適用于其它的商業(yè)風(fēng)格。

MBE本人也在不斷突破自我，但是可以從其作品看出，對(duì)之前的否定，逐漸從扁平偏向立體，減少了線條和統(tǒng)一了漂浮，這點(diǎn)有利有弊，雖然能引領(lǐng)新的發(fā)展趨勢(shì)，但一定程度上模糊了自己的特征?？赡芷渥陨硪蚕Ｍ玫姆?wù)于市場(chǎng)。個(gè)人還是欣賞其對(duì)于ICON，小動(dòng)畫(huà)和交互的貢獻(xiàn)，不喜歡其作為商用的大面積電商廣告，容易顯得雜亂。

（作者單位：新疆藝術(shù)學(xué)院）