在2016年，這種簡(jiǎn)約、有趣、好看的偏移填充粗線條描邊的插畫風(fēng)格，紅遍追波、站酷和國(guó)內(nèi)外的設(shè)計(jì)平臺(tái)——它就是MBE風(fēng)格，今天U妹帶小伙伴一起來看看火遍國(guó)內(nèi)外設(shè)計(jì)平臺(tái)的MBE風(fēng)格，有木有很激動(dòng)啊~~

一、什么是MBE風(fēng)格？

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

來自巴黎的設(shè)計(jì)師 MBE ?https://dribbble.com/Madebyelvis

二、MBE風(fēng)格的特點(diǎn)

1. 描邊

MBE風(fēng)格最明顯的特征是，簡(jiǎn)單輕松的偏移填充粗線條描邊的插畫風(fēng)格。在使用描邊線條時(shí)不但要結(jié)合色彩學(xué)還要對(duì)作品寄予情感理解的更加通透，當(dāng)然也不能缺少對(duì)審美的認(rèn)知。

（1）斷點(diǎn)式描邊

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

來自越南的設(shè)計(jì)師Duc Tran ?
https://dribbble.com/ninjad3m0

（2）無斷點(diǎn)式描邊

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

來自立陶宛的設(shè)計(jì)師Justas Galaburda?https://dribbble.com/jucha

2、形狀溢出

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

來自北京的設(shè)計(jì)師 luking?https://dribbble.com/sss_luking

3、色彩應(yīng)用

（1）單色系

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

來自烏克蘭的設(shè)計(jì)師Andrey Prokopenko?https://dribbble.com/Pro_Art

（2）鄰近色＋補(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ū)分能更好的傳遞畫面所要的表現(xiàn)的內(nèi)容，不用刻意保持色相的單一性。

（3）鄰近色＋類似色

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

來自杭州的設(shè)計(jì)師LEON.W ?https://dribbble.com/wuchao260

4、寫實(shí)風(fēng)格

在色相的使用上，設(shè)計(jì)師會(huì)遵循色彩基礎(chǔ)原理來進(jìn)行配色，但是在不同環(huán)境下為了能更明確的表達(dá)物體本身之間的關(guān)系，在藝術(shù)形態(tài)上會(huì)更加具象。

5、造型

MBE風(fēng)格的背景圖最初只有圓形、小花瓣、加號(hào)三種也是最常用的三種圖形，它們是隨著MBE而來也這種風(fēng)格標(biāo)志直到今天也一直被沿用。

當(dāng)然天生具有靈活思維的設(shè)計(jì)師們不會(huì)僅僅停留在這三種元素的組成，通過不同位設(shè)計(jì)師的演變它們被改變顏色、位置、大小另外也衍生了一些與扁平風(fēng)格的結(jié)合，這種改變都是通過圖形本身特有的氣質(zhì)而改變。

總結(jié)

MBE風(fēng)格之所以能夠火遍國(guó)內(nèi)外的各個(gè)設(shè)計(jì)平臺(tái)，就是因?yàn)槠浜?jiǎn)約、有趣、好看、小清新的設(shè)計(jì)風(fēng)格，希望以上U妹的一些分析，可以給小伙伴們?cè)贛EB風(fēng)格的設(shè)計(jì)上給予幫助，U妹和你下次再見喲~

作者：U妹，一個(gè)不要命的UI設(shè)計(jì)師，等你，來撩妹喲。微信公眾號(hào)：UI妹兒（ID：UIfaner）

本文由 @U妹兒?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖由作者提供