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，小动画和交互的贡献，不喜欢其作为商用的大面积电商广告，容易显得杂乱。

（作者单位：新疆艺术学院）