2017年圖標設(shè)計新趨勢:淺析超火的MBE風格圖標設(shè)計

UI嚴選
2 評論 24890 瀏覽 84 收藏 8 分鐘

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

一、什么是MBE風格?

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

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

二、MBE風格的特點

1. 描邊

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

(1)斷點式描邊

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

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

(2)無斷點式描邊

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

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

2、形狀溢出

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

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

3、色彩應用

(1)單色系

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

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

(2)鄰近色+補色

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

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

(3)鄰近色+類似色

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

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

4、寫實風格

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

5、造型

MBE風格的背景圖最初只有圓形、小花瓣、加號三種也是最常用的三種圖形,它們是隨著MBE而來也這種風格標志直到今天也一直被沿用。

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

總結(jié)

MBE風格之所以能夠火遍國內(nèi)外的各個設(shè)計平臺,就是因為其簡約、有趣、好看、小清新的設(shè)計風格,希望以上U妹的一些分析,可以給小伙伴們在MEB風格的設(shè)計上給予幫助,U妹和你下次再見喲~

 

作者:U妹,一個不要命的UI設(shè)計師,等你,來撩妹喲。微信公眾號:UI妹兒(ID:UIfaner)

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

題圖由作者提供

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

    來自上海 回復
专题
16963人已学习14篇文章
图标是用户页面不可缺少的元素,本专题的文章分享了图标设计指南。
专题
18023人已学习15篇文章
促销的规则多样,对提高客单价和客单量有很大帮助。本专题的文章提供了促销系统设计指南。
专题
12471人已学习13篇文章
发票是财务中必不可少的物品,那发票系统该如何设计呢?本专题的文章分享了发票系统设计指南。
专题
76515人已学习25篇文章
APP设计是一位优秀产品经理的基本功。
专题
12641人已学习12篇文章
运营分很多类,流量运营、用户运营、内容运营…每一个环节都有特别关注的数据和指标。本专题的文章分享了互联网运营,应该分析哪些数据和指标。
专题
35722人已学习18篇文章
好的数据分析可以使我们的产品不断优化,而做好数据分析的第一步就是做好数据埋点。