mbe风格插画教程-插画在APP设计中的应用

自从扁平风流行过后,很少看到让人眼前一亮的风格了。

不过前段时间流行的MBE风格着实让人喜欢

让我们先来认识一下什么是MBE风格

MBE风格的由来很简单,就是 Dribbble 上一位设计师 叫做MBE,他的萌萌哒的作品风格被设计行业称为“MBE风格”。

下面来看看MBE大神的作品

这种风格的特点用一个字可以形容,就是萌

但萌同时也有一个缺点,就是没有普适性,在我们的工作中一般也用不上这种风格

但是这么萌的风格,着实令人喜欢,万一哪天就用上了呢?比如撩个妹

所以在认识MBE风格后,我们如何来快速制作呢

其实这个风格一般用AI软件来制作,专业的软件做专业的事

当然如果你对AI不熟悉,那么PPT总会用吧,用PPT我们也能做出MBE的风格

下面我介绍两种用PPT制作的方法

方法一、编辑顶点法

这个方法来自菲菲老师,公众号(大猫菲菲)

方法二、简单粗暴法

第一步、选择一个ICON,复制两个

其中一个填充颜色,另一个只保留轮廓,轮廓可以稍微粗一些

2.把两个形状重叠,并且不对齐,可以适当调整大小,留出小部分白色的区域

3.用一个和轮廓粗细相同的小矩形进行切割

4.加点装饰

这样一个简单的MBE风格的图形就做出来了。

是不是很简单?如果你要做一些卡通风格的PPT,就可以用MBE风格来搭配

关于Icon,推荐一个ICON网站Iconfont,是阿里旗下的图标库,很强大

现在APP的数量越来越多,制作也越来越精美,各种APP都想在设计上能够与其他APP区别开来,从而更好的吸引用户的注意,将插画运用在APP当中,无疑是一种好的选择,在iOS

11的App Store“Today”中就用了很多的插画,给用户带来了全新的体验。

一. 什么要在APP当中使用插画?

增加视觉冲击感,总结为两个字“惊艳”,例如“walk up”APP,当中的每一个页面都运用了插画,而且设计得极其精美。

增添趣味性,使页面不显得单调、乏味,一个明显的例子就是APP当中的空页面和错误页面,例如淘宝在无网状态下,显示一幅可爱的插画要比单纯的显示文字要给人的感觉好得多,也可以尽可能的减轻用户的焦虑。

承载更多的信息量,更加的直观,这一点在图标上显示的比较明显了,例如百度糯米的分类图标,采用了写实的风格,给人的感觉就更加的直观了。

满足用户的情感需求,情感化设计,这一点在keep当中得到了很好的体现,在刚刚过去的七夕节,keep把跑步路线变成了粉红色,还配上了一条狗,七夕节还在跑步的人,很有可能是单身狗啊,意思不言而喻。

二. 目前比较流行的几类插画及其特点

扁平插画

肌理插画

手绘插画

MBE插画(dribble一位大神创作了这种风格,因此被称为MBE风格插画)

渐变插画(有时也称微光插画)

立体插画(也叫2.5D插画)

描边插画

下面分别对各种插画进行举例,所有例子均来自dribble。

扁平插画:扁平插画的特点是扁平,简洁明了,扁平插画是现在很流行、也是最常用的风格

肌理插画:我觉得肌理插画也属于扁平插画的一种,但是在最后要增加颗粒感,肌理插画最明显的特点应该就是有质感,光影关系表现得比较好。

手绘插画:我认为这是难度最高的一种,也是对设计师的美术功底要求最高的。手绘风格的应用比较广,可以展现的东西很多。下面这位设计师的作品富有童趣,像梦境一样美好。

MBE插画:简洁、圆润、可爱。

渐变插画:一种很唯美的风格,在颜色的运用上一般采取近似色,颜色的种类不要过多。

立体插画:从名字就可以看出,这类插画最大的特点就是立体了,能够在二维的空间里表现出三维的事物。

描边插画:除了运用形状,还要运用描边,可以很好的对事物进行抽象化处理。

MBE插画:下厨房当中的图标,MBE风格很适合用来制作icon

渐变插画和立体插画:拉勾。把这两种放到一起来讲,是因为很多时候一幅插画是包含这两种风格的。(用在banner、专题)

描边插画:拼多多、网易云音乐(用在icon、启动页)

总结一下:插画适合用在APP当中的启动页、banner、专题、刷新、icon、弹框、背景图等等。

我不知道你是不是说错了,不是MEB,是MBE风格,UI设计中最近流行的设计风格,风格特点是色彩明亮跳跃,有深色的大的描边,描边有断点,色彩溢出,周围可能有一些装饰等。最近配合微渐变整体更加精致。MBE是一位法国设计师最先使用的,然后国内外纷纷效仿。如下图,MBE设计风格的图标。