起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識2017年圖標設計新趨勢：淺析超火的MBE風格圖標設計
在2016年，這種簡約、有趣、好看的偏移填充粗線條描邊的插畫風格，紅遍追波、站酷和國內外的設計平臺——它就是MBE風格，今天U妹帶小伙伴一起來看看火遍國內外設計平臺的MBE風格，有木有很激動啊~~
一、什么是MBE風格？
MBE風格的原創作者是法國設計師MBE于2015年年底在dribbble網站上發布，從線框型Q版卡通畫演變出來的MBE風格，設計采用了更大更粗的描邊，相比沒有描邊的扁平化風格插畫去除了里面不必要的色塊區分，更簡潔、更通用、易識別。粗線條描邊起到了對界面的絕對隔絕，突顯內容，表現清晰，化繁為簡；所有此類型的圖標和作品都被稱為MBE風格。
來自巴黎的設計師 MBE ?https://dribbble.com/Madebyelvis
二、MBE風格的特點
1. 描邊
MBE風格最明顯的特征是，簡單輕松的偏移填充粗線條描邊的插畫風格。在使用描邊線條時不但要結合色彩學還要對作品寄予情感理解的更加通透，當然也不能缺少對審美的認知。
（1）斷點式描邊
黑色線條好處是可以突出內容，壞處就是會產生壓抑感削弱內容主題使物體失去生動特性，MBE很好的用斷線的處理方法解決了這個難題,這些斷線的處理并不是根據圖形的去限定個數，它們的數量多少是跟位置有直接關系的。
來自越南的設計師Duc Tran ?
https://dribbble.com/ninjad3m0
（2）無斷點式描邊
扁平化圖形＋黑色粗線＋斷線處理是MBE風格的固定搭配，但是斷線的處理并不適合在所有的圖形上，既要保持這種新風格又要完成想表達的設計，在線條的顏色和粗線處理上就要有些不同的處理手法。
來自立陶宛的設計師Justas Galaburda?https://dribbble.com/jucha
2、形狀溢出
MBE風格除斷點式以外，還有一個最大的特征就是形狀的溢出，其含義應該是想表達物體通過光照折射出來的陰影因為通常溢出的方向都是高光的對側。MBE早期使用色塊溢出作品較多后期基本已經很難見到，原因是因為早期作品圖形都偏于簡單色塊溢出的處理可以給畫面營造質感增加對風格的印象，而后期作品復雜度提升溢出部分無論在顏色還是整理型上很難融合，讓圖形本身突兀破壞本來想傳遞設計思想。
來自北京的設計師 luking?https://dribbble.com/sss_luking
3、色彩應用
（1）單色系
分析物體包含內容是否屬于一種（材質、數量、介質）上述特性屬性唯一時，即可使用單色系搭配方法找出物體的深淺關系營造質感，畫面表達會更為完整明確。
來自烏克蘭的設計師Andrey Prokopenko?https://dribbble.com/Pro_Art
（2）鄰近色＋補色
在色系上作者MBE有時候也會用不同色系制造圖形的氛圍，顏色的基本范圍會控制在三種顏色以下，分別采用鄰近色加補色形成，以下圖形中包含的紅、黃、綠、在色環上角度分別為22.5°的兩色間，色相差為1的配色，均屬于鄰近色相配色。而藍色角度為180°左右，色相差為8的配色，稱為補色色相配色。
當想要表達的物體在一個數量以上或者物體本身某一處的材質與其它地方不同，使用顏色區分能更好的傳遞畫面所要的表現的內容，不用刻意保持色相的單一性。
（3）鄰近色＋類似色
鄰近色是指在色環上相近的兩個顏色，在色彩學中還有類似色相配色、對照色相配色，在模仿和研究MBE風格時不用墨守陳規的去遵循作者的設計元素，在找到規則之后可以靈活使用才是設計的王道。
來自杭州的設計師LEON.W ?https://dribbble.com/wuchao260
4、寫實風格
在色相的使用上，設計師會遵循色彩基礎原理來進行配色，但是在不同環境下為了能更明確的表達物體本身之間的關系，在藝術形態上會更加具象。
5、造型
MBE風格的背景圖最初只有圓形、小花瓣、加號三種也是最常用的三種圖形，它們是隨著MBE而來也這種風格標志直到今天也一直被沿用。
當然天生具有靈活思維的設計師們不會僅僅停留在這三種元素的組成，通過不同位設計師的演變它們被改變顏色、位置、大小另外也衍生了一些與扁平風格的結合，這種改變都是通過圖形本身特有的氣質而改變。
總結
MBE風格之所以能夠火遍國內外的各個設計平臺，就是因為其簡約、有趣、好看、小清新的設計風格，希望以上U妹的一些分析，可以給小伙伴們在MEB風格的設計上給予幫助，U妹和你下次再見喲~
作者：U妹，一個不要命的UI設計師，等你，來撩妹喲。微信公眾號：UI妹兒（ID：UIfaner）
本文由 @U妹兒?原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖由作者提供
??