2017年圖標(biāo)設(shè)計(jì)新趨勢(shì):淺析超火的MBE風(fēng)格圖標(biāo)設(shè)計(jì)

2 評(píng)論 24755 瀏覽 84 收藏 8 分鐘

在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)橥ǔR绯龅姆较蚨际歉吖獾膶?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)載。

題圖由作者提供

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. ??

    來自上海 回復(fù)