MBE風格賞析

王娟娟

摘要：能修煉到自創一種風格的人絕不簡單，Dribbble大神MBE就開創了一種新的視覺風格，大家于是把這種風格叫做MBE風格，用這種風格來創作圖標或小型插畫，看上去簡潔、圓潤、可愛。幾乎是瞬間，這樣的風格就風靡了整個互聯網UI界。本文探討MBE風格的特點及其發展。

關鍵詞：MBE;插畫;UI;ICON

國產動畫MBE是一名法國的設計師，他于2015年年底在dribbble網站上最先發布了這種風格的作品，紅遍了全世界，所以這類風格以MBE命名。然后世界各地的設計師根據風格的特點做出了很多優秀的作品，從線框型Q版卡通畫演變出來的MBE風格，設計采用了更大更粗的描邊，相比沒有描邊的扁平化風格插畫去除了里面不必要的色塊區分，更簡潔、更通用、易識別。粗線條描邊起到了對界面的絕對隔絕，突顯內容，表現清晰，化繁為簡。以下是我總結的幾處觀點。

一、來源及背景

MBE風格的原創作者是法國設計師MBE于2015年年底在dribbble網站上發布，從線框型Q版卡通畫演變出來的MBE風格，設計采用了更大更粗的描邊，相比沒有描邊的扁平化風格插畫去除了里面不必要的色塊區分，更簡潔、更通用、易識別。粗線條描邊起到了對界面的絕對隔絕，突顯內容，表現清晰，化繁為簡;所有此類型的圖標和作品都被稱為MBE風格。

現被各國設計師模仿，運用廣泛，從最初的插畫及ICON到現在的海報，廣告，logo等，實現了更多的商業用途，也顯現出更多發展的趨勢。

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

MBE風格的流行是一種必然，屬于扁平化風格的分支。從往年iPhone盛行的擬物化風格（如圖2），再到前兩年流行的扁平化風格直到2008年由 Google提出了一個 “Flat Design”的概念 就是現在扁平化設計的由來。扁平化概念的核心意義是：去除冗余、厚重和繁雜的裝飾效果。而 具體表現在去掉了多余的透視、紋理、漸變以及能做出3D效果的 元素，這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在 設計元素上則強調了抽象、極簡和符號化。簡單的說就是能筒單的表達就不啰嗦，能動手的時候不要動嘴，因為扁平化風格的流行，那時候還誕生了另一種風格 Long Shadow Design長投影風格（如圖3）。

個人比較看好MBE風格的繼續發展，因為MBE本人也一直從未停歇的作出新的嘗試和改變，因此使得這類風格也擁有了更多的發展方向，如循環小動畫和海報等等。

三、風格及特點

MBE風格最明顯的特征是，簡單輕松的偏移填充粗線條描邊的插畫風格。在使用描邊線條時不但要結合色彩學還要對作品寄予情感理解的更加通透，當然也不能缺少對審美的認知。根據顏色粗細有度，斷點位置與形狀結合，斷點多少與氣氛相結合，一般外粗內窄，斷線收圓角。

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

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

2.色彩

①單色系

分析物體包含內容是否屬于一種材質、數量、介質等特性屬性唯一時，即可使用單色系搭配方法找出物體的深淺關系營造質感，畫面表達會更為完整明確。多運用于app的次級頁面icon（如圖6）。

②鄰近色+補色

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

當想要表達的物體在一個數量以上或者物體本身某一處的材質與其它地方不同，使用顏色區分能更好的傳遞畫面所要的表現的內容，不用刻意保持色相的單一性（如圖7）。

③鄰近色+類似色

鄰近色是指在色環上相近的兩個顏色，在色彩學中還有類似色相配色、對照色相配色，在模仿和研究MBE風格時不用墨守陳規的去遵循作者的設計元素，在找到規則之后可以靈活使用才是設計的王道。

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

④寫實派

在色相的使用上，設計師會遵循色彩基礎原理來進行配色，但是在不同環境下為了能更明確的表達物體本身之間的關系，在藝術形態上會更加具象。立陶宛的設計師Justas Galaburda在表現形式上更加貼近現實，藍天、白云、國旗、漢堡和薯條中的配色均采用現實中的物體顏色做為填充（如圖9）。

3.溢出

MBE風格除斷線以外最大的特別就是色塊的溢出，其含義應該是想表達物體通過光照折射出來的陰影因為通常溢出的方向都是高光的對側。MBE早期使用色塊溢出作品較多后期基本已經很難見到，原因是因為早期作品圖形都偏于簡單色塊溢出的處理可以給畫面營造質感增加對風格的印象，而后期作品復雜度提升溢出部分無論在顏色還是整理型上很難融合，讓圖形本身突兀破壞本來想傳遞設計思想（如圖10）。

4.漂浮元素

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

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

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

③茶壺中間的葉子很好的區分的茶具之間靠色的問題，并給畫面增加了茶水很新鮮的意味。

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

⑤太陽會因日出而東日落而西，太陽的動態氣氛給畫面增加了幾分活力。

⑥仙女棒五彩繽紛的氣氛，光照出來的時候會閃閃發光。

四、MBE風格的發展及應用

MBE風格的發展及應用主要在以下四個方面：

①互聯網、icon：也是MBE風格早期就實現功能的經典類型。簡潔清晰的概括形象，功能表準確，MBE一開始的運用就指向了icon。類型眾多，應用廣泛，但變化較大，多棄漂浮裝飾，更注重功能的傳達，且多以單色或單線出現（如圖12）。

②插畫：MBE本人一直堅持致力于插畫創作，也是本類風格一直創新的根基。且MBE本人從未停歇進步和更新，出現了新的卡片化特點（如圖13）。

③小動畫：因其可愛有趣生動的形象，加以開放式圓潤的線條，非常合適做加載循環小動畫，在交互設計中產生了重要影響。

④廣告、形象類：現在市場上已經出現的新趨勢，如電商廣告，H5，app的植入，logo等等（如圖14）。

五、結語

MBE自從出現以后，受到全球設計師的喜愛和效仿，迅速成為一種風格蔓延開來，在各個地區都有自己的發展和融合;這很大程度取決于這類作品即是去掉一兩種特征，也有很高的辨識度，且設計過程容易掌握。

風格本身具有強烈的趣味性，色彩鮮明，并且可以廣泛運用于視覺傳達設計的各個分支，也能很好的與其它形象和風格相融合，更利于概括表達對象的特征，從而更好的實現功能的傳達。圓潤可愛的線條和塊面與開放式線條的結合富有層次感和韻律感，讓人覺得靈動不沉悶，與漂浮的結合更是適合于動畫和商業頁面的表達，漂浮元素自成體系也可適用于其它的商業風格。

MBE本人也在不斷突破自我，但是可以從其作品看出，對之前的否定，逐漸從扁平偏向立體，減少了線條和統一了漂浮，這點有利有弊，雖然能引領新的發展趨勢，但一定程度上模糊了自己的特征?？赡芷渥陨硪蚕Ｍ玫姆沼谑袌?。個人還是欣賞其對于ICON，小動畫和交互的貢獻，不喜歡其作為商用的大面積電商廣告，容易顯得雜亂。

（作者單位：新疆藝術學院）