总结这3个特点后，我能把任何作品都变成MBE 风格！（附实战）

优酷土豆用户体验设计中心 - winniwang：MBE风格从线框Q版卡通画演变而来，设计采用了更大更粗的画面。与没有画面的平面风格插图相比，它去除了里面不必要的色块区分，更简单、更通用、更容易识别。粗线描述绝对隔离界面，突出内容，表现清晰，简化复杂性。

MBE风格的原创作者是2015年底在dribbble网站上发布的法国设计师MBE。它在国内外网站上很受欢迎。世界各地的设计师根据风格的特点制作了许多优秀的作品。以下是我总结的一些观点，与您分享～

MBE风格特点

任何设计都有自己的特点和与其他物质持有的共性。其特点是掌握这些独特的特点，你可以熟练地使用这项技能。

线条

MBE风格最大的特点是，比原插图更厚、更大的线条光环通常使作品的解释更加闪亮。在使用这些线条时，我们不仅要结合色彩学，而且要对作品有更透明的情感理解，当然，我们也不能缺乏对审美的认知。

有断点

黑线的优点是可以突出内容，缺点是会产生压抑感，削弱内容主题，使物体失去生动特征。MBE通过断线处理很好地解决了这个问题。这些断线的处理不是根据图形来限制数量。它们的数量与位置直接相关。

1：图中的鲸鱼和恐龙都是大型动物。大面积过度的线条使动物本身看起来有点严肃。作者在鲸鱼嘴和喷泉后部适当使用断线，结合动物本身的特点处理断线，既有效又美观。

2：宝塔和锁的处理是在密集线条的交汇处做断点，打破了画面的压抑感，使整体看起来更加透气。

3：虽然杯子和狐狸看起来都是独立的个体，但仔细观察它们都有一个共同的特点。杯子里装满了水，大狐狸抱着小狐狸。这样的设计内容是为了突出它们之间的密切关系，所以设计师只选择一个断点。这时，如果他们之间增加几个断点，就会破坏这种氛围，让画面的关系感觉分开。

无断点

扁平化图形＋黑色粗线＋断线处理是MBE风格的固定搭配，但断线处理不适合所有图形。为了保持这种新风格，完成想要表达的设计，在线条的颜色和粗线处理方面应该有一些不同的处理方法。

1：汽车的整体结构属于更精致的图形，如果使用黑色粗线必然会覆盖车身精致的结构不能表达精致跑车的视觉传输，设计师将细化线条，黑色到深灰色地面部分适当增加断线处理，突出整体精致奢华，保留独特的设计风格。

2：元宝图形的使用环境被烟花点缀包围。如果使用过多的断线处理图片，整体感觉会分散。设计师使用红色中的黄色和降低饱和度的颜色，以消除原本使用黑色线条的压抑感，这种温暖的红色会增加元宝闪闪发光的颜色。

溢出

除断线外，MBE风格最大的特点是色块的溢出。它的意思应该是表达物体通过光线反射的阴影，因为溢出的方向通常是高光的对面。MBE早期使用色块溢出作品较多，后期基本难以看到。原因是早期作品的图形偏向于简单的色块溢出处理，可以为图片创造纹理，增加对风格的印象。后期作品的复杂性提高了溢出部分，无论是颜色还是分类型都难以整合，使图形本身突然破坏，原本想要传达设计理念。

色彩

单色系

当分析物体包含的内容是否属于上述特征属性（材料、数量、介质）时，可以使用单色匹配方法找出物体的深度关系，创造纹理，图片表达将更加完整和清晰。

邻近色＋补色

在色彩系统方面，作者MBE有时会使用不同的色彩系统来创造图形的氛围。颜色的基本范围将控制在三种颜色以下，分别由相邻的颜色和补充颜色形成。以下图形中包含的红色、黄色和绿色分别从色环的角度为22.5°在两种颜色之间，色差为1的配色属于相邻的配色。蓝色角度为180°左右，色差为8的配色，称为补色配色。

当要表达的物体在一个数量以上或物体本身的某个地方的材料与其他地方不同时，使用颜色区分可以更好地传达图片所需的性能内容，而不是故意保持色调的单一性。

邻近色＋类似色

相邻颜色是指颜色环上相似的两种颜色。在色彩学中，也有类似的颜色匹配和对比色匹配。在模仿和研究MBE风格时，不需要遵循作者的设计元素。找到规则后灵活使用是设计之王。

SA，中国设计师 在9527组的设计中，使用了另一组相邻的颜色和类似的颜色(红、粉、橙、黄)来更好地表达新年的气氛。

写实派

在色调的使用上，设计师会遵循色调的基本原理，但在不同的环境下，为了更清晰地表达物体本身之间的关系，在艺术形式上会更加具体。

Justastas，立陶宛设计师 Galaburda在表现形式上更贴近现实，蓝天、白云、国旗、汉堡和薯条的配色都是用现实中的物体颜色填充的。

图形

MBE风格的背景图最初只有三种最常用的图形：圆形、小花瓣和加号。它们来自MBE，这种风格标志直到今天才被使用。

当然，天生思维灵活的设计师不会只停留在这三个元素的组成上。通过不同设计师的演变，他们改变了颜色、位置和大小。此外，他们还衍生出一些与扁平风格的结合。这种变化是通过图形本身独特的气质来改变的。

1：鲸鱼的背景图形重组后是否有喷水的感觉。

2：蜜蜂飞行的足迹，结合平坦的渐变色和漫天飞舞的小星星，真的很有感觉。

3：茶壶中间的叶子很好地区分了茶具之间的颜色问题，并增加了茶的新鲜度。

4：山中的云自然恰到好处。

5：太阳会因日出而东日落而西，太阳的动态氛围给画面增添了一点活力。

6：仙女棒五彩缤纷的气氛，光线出来时会闪闪发光。

MBE风格看似简单，但好作品总结的经验也是通过设计师的实践经验获得的。有了这些设计理论，对我们在设计中最终达到的效果会有很大的帮助。

希望以上总结能对大家的设计有所帮助，欢迎大家留言讨论更多关于设计风格的研究。

MBE 优酷引导页教程风格制作

1：画一个圆，选择两端的锚点，缩入4px，复制粘贴圆，去除填充颜色，选择描述颜色设置描述10x，用钢笔工具在描述边缘添加几个锚点，选择中间锚点删除可以形成圆断点。

2：将填充颜色改为粉红色，复制两次，用路经搜索器切割一个圆的一小部分作为圆的阴影，然后用同样的方法制作高光。

3：复制两次圆，将其中一个圆缩小到合适的位置，用路径搜索器切割（这是小优眼镜）眼镜，然后填充蓝色，复制眼镜关闭填充颜色设置10px，然后复制眼镜和面部亮点使用路径搜索器切割眼镜亮点设置颜色值

4：用上面同样的方法在眼镜上做一朵花和白色高光，一个小优的头就做好了

想看最具体的教程，移动:PS热门教程！教你5分钟快速绘制超热MBE风格图标

实战效果：

欢迎关注优酷土豆用户体验设计中心微信微信官方账号:

「学习流行风格，关注新趋势」

UX设计前端技术《2017年即将到来的9大UX设计趋势》、《腾讯工程师:2017年前端领域可能迎来的6大发展趋势》、《2017年UI设计趋势》、《2017年UI设计趋势》、《2017年这五大设计趋势将惊艳整个设计圈》为什么不适合看趋势文？

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================优设网==============.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书：历史上最完整的设计师图书导航：http://hao.uisdc.com/book/.设计微博:拥有190万粉丝的人气微博@优秀网页设计 ，欢迎来到网页设计资源，下载顶级设计资料。设计导航：世界顶级设计网站推荐，设计师必备导航：http://hao.uisdc.com