• 总结这3个特点后,我能把任何作品都变成MBE 风格!(附实战) - 优设网 - UISDC

    总结这3个特点后,我能把任何作品都变成MBE 风格!(附实战)

    2017/02/28 68907评论区

    优酷土豆用户体验设计中心 – winniwang:从线框型Q版卡通画演变出来的MBE风格,设计采用了更大更粗的描边,相比没有描边的扁平化风格插画去除了里面不必要的色块区分,更简洁、更通用、?#36164;?#21035;。粗线条描边起到了对界面的绝对隔绝,突?#38405;?#23481;,表?#26234;?#26224;,化繁为简。

    MBE风格的原创作者是法国设计师MBE于2015年年底在dribbble网站上发布,红遍国内国外网站,世界各地的设计师根据风格的特点做出了很多优秀的作品,以下是我总结的几处观点,与大家分享~

    MBE风格特点

    任何设计都有其自身的特点,也?#22411;?#20854;它物质所持有的共性,特点就是与众不同掌握这些与众不同的特性,就可以娴熟的使用出这项技能。

    线条

    MBE风格最大的特点就是,比原本插画更粗更大的线条光环一般把作品诠释的更加?#28872;?#22312;使用的这些线条的时不但要结合色彩学还要对作品寄予情感理解的更加通透,?#27604;?#20063;不能缺少对审美的?#29616;?/p>

    有断点

    黑色线条好处?#24378;?#20197;突出内容,坏处就是会产生压抑感削弱内容主题使物体失去生动特性,MBE很好的用断线的处理方法解决了这个难题,这些断线的处理并不是根据图形的去限定个数,它们的数量多少是跟位置有直接关系的。

    1:图中的鲸鱼和恐龙都是体积比较庞大的动物,大面积过度的线条让动物本身显得有点严肃,作者在鲸鱼的嘴部、喷泉的尾后部分都?#23454;?#20351;用了断线结合动物本身的特点处理出来断点的既能起到效果又不失美观。

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

    3:杯子和狐狸的看起来虽然都是独立的个体,但是仔细观察他们都有一个围绕的共同特性,杯子里面?#30333;?#27700;大狐狸抱着小狐狸这样的设计内容是要更突出他们之间的紧密关联所以设计师们只选择一处做断点,此?#27604;?#26524;在他们之间多加几处断点就会?#33529;?#36825;?#21046;?#27675;使画面的关系产生被分离的感觉。

    无断点

    扁平化图形+黑色粗线+断线处理是MBE风格的固定搭配,但是断线的处理并不适合在所有的图形上,既要保持这?#20013;?#39118;格又要完成想表达的设计,在线条的颜色和粗线处理上就要有些不同的处理?#22336;ā?/p>

    1:汽车的整体构造属于比较精致细腻的图形,如果使用黑色粗线势必会遮盖住车体细腻的结构无法表达出一辆精致跑车的视觉传递,设计师将描边线条调细并把黑色改为深灰色在地面部分?#23454;?#22686;加断线处理,既突出整体的精致奢华?#30452;?#30041;的设计独有风格。

    2:元宝图形的使用环境是在烟花点缀的簇拥之中如果使用过多的断线处理画面整体就会感觉被散开,设计师使用了红色中偏黄并降低饱?#25237;?#30340;颜色很好的消除原本使用黑色线条的压抑感,并且这?#21046;?#26262;的红色会更加增加元宝金光?#28872;?#30340;色泽。

    溢出

    MBE风格除断线以外最大的特别就?#24039;?#22359;的溢出,其含义应该是想表达物体通过光照折射出来的阴影因为通常溢出的方向都是高光的对侧。MBE早期使用色块溢出作品较多后期基本已经很难见到,原因是因为早期作品图形?#35745;?#20110;简单色块溢出的处理可以给画面营造质感增加对风格的印象,而后期作品复杂度提升溢出部分无论在颜色还是整理型上很难融合,让图形本身突兀?#33529;?#26412;来想传递设计思想。

    色彩

    单色系

    分析物体包含内容是否属于一种(材质、数量、介质)上述特性属性唯一时,即可使用单色系搭配方法找出物体的深浅关系营造质感,画面表达会更为完整明确。

    邻近色+补色

    在色系上作者MBE有时候?#19981;?#29992;不同色系制造图形的氛围,颜色的基本范围会控制在三种颜色以下,分别采用邻近色加补色形成,以下图形中包含的红、黄、绿、在色环上角度分别为22.5°的两色间,色相差为1的配色,均属于邻近色相配色。而蓝色角?#20219;?80°左右,色相差为8的配色,称为补色色相配色。

    当想要表达的物体在一个数量以上或者物体本身某一处的材?#35270;?#20854;它地方不同,使用颜色区分能更好的传递画面所要的表现的内容,不用刻意保持色相的单一性。

    邻近色+类似色

    邻近色是指在色环上相近的两个颜色,在色彩学中还有类似色相配色、对照色相配色,在模仿和研究MBE风格时不用墨守陈规的去遵循作者的设计元素,在找到规则之后可以灵活使用才?#24039;?#35745;的王?#39304;?/p>

    中国设计师SA 9527这组的设计中使用了另外一组邻近色加上类似色的使用(红、粉、橘、?#30130;?#26356;好的表达了一?#20013;?#24180;的气氛。

    写实派

    在色相的使用上,设计师会遵循色彩基础原理来进行配色,但是在不同环境下为了能更明确的表达物体本身之间的关系,在艺术形态上会更加具象。

    立陶宛的设计师Justas Galaburda在表?#20013;?#24335;上更加贴近现实,蓝天、?#33258;啤?#22269;旗、汉堡和薯条中的配色均采用现实中的物体颜色做为填充。

    图形

    MBE风格的背景图最初只有圆形、小花瓣、加号三种?#24425;?#26368;常用的三种图形,它们是随着MBE而来也这种风格标志直到今天也一直被沿用。

    ?#27604;?#22825;生具有灵活思维的设计师们不会仅仅停留在这三种元素的组成,通过不同位设计师的演变它们被改变颜色、位置、大小另外也衍生了一些与扁平风格的结合,这种改变都是通过图形本身特有的气?#35782;?#25913;变。

    1:鲸鱼的背景图形重新组成之后是不是有喷出水花的感觉。

    2:小蜜蜂飞舞的足迹结合扁平的渐变色加上漫天飞舞的小星星真的很有feel。

    3:茶壶中间的叶子很好的区分的茶具之间靠色的问题,并给画面增加了茶水很新鲜的意味。

    4:山体中间的云?#24425;?#33258;然恰到好处。

    5:太阳会因日出而东?#31456;?#32780;西,太阳的动态气氛给画面增加了几分活力。

    6?#21512;?#22899;棒五彩?#22836;?#30340;气氛,光照出来的时候会闪闪发光。

    MBE风格看似简单但是其中好的作品总结出来的经验?#24425;?#36890;过设计师们的实践经验得来的,有了这些设计理论在设计的时候对我们最终达成的效果的会有着很大的帮助。

    以上总结观点希望能对大家的设计有一些些的帮助,?#38431;?#22823;家留言讨论更多设计风格的研究。

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

    1:画一个圆,选中两端的锚点各缩进4px,?#31895;普程?#36825;个圆去掉填充色选择描边颜色设置描边10x,用?#30452;使?#20855;在描边上增加几个锚点,选择中间锚点删除就可以形式一个圆的断点。

    2?#33322;?#22635;充色改为粉色,?#31895;屏?#27425;使用路经查找器切割出一个圆的一小部做为圆的阴影,再用同样的方法做出一个高光。

    3:?#31895;屏?#27425;圆,将其中一个?#33756;?#23567;摆放到合适的位置使用路径查找器切割出(这是小优的眼镜)眼镜的位置,然后填充为蓝色,?#31895;?#30524;镜关闭填充色设置描边10px,再?#31895;?#30524;镜?#22303;?#37096;高光使用路径查找器切割出眼镜高光的部分设置色值

    4:使用上面相同的方法做出一朵花和眼镜?#20064;?#33394;高光,一个小优的头部就做好了

    想看最具体的教程,移步:《PS热门教程!教你5分钟快速绘制超火的MBE风格图标》

    实战效果:

     

    ?#38431;?#20851;注优酷土豆用户体验设计中心的微信公众号:

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

    1. UX设计丨《2017年即将流行的9大UX设计趋势》
    2. 前端技术丨《腾?#35910;?#31243;师:2017年前端领域可能迎来的6个发展趋势》
    3. UI设计丨《趋势丨8个你需要知道的2017年UI设计流行趋势》
    4. 硅谷设计师的预言丨《2017年,这五条设计趋?#24179;?#24778;艳整个设计圈》
    5. 为什么你不适合看趋势文丨《自学丨从零基础新手到高级UI/UX设计师的阶段心路分享》

    【优设网 原创文章 投稿邮箱:[email protected]

    ================关于优设网================
    “优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
    【特色推荐】
    设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
    设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,?#38431;?#20851;注获取网页设计资源、下载顶尖设计素材。
    设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

    优设大课堂

    非特殊?#24471;鰨?#26412;文版权归原作者所有,转载请注明出处
    本文地址:http://www.caxp.icu/mbe-style-everywhere

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    设计师 版式设计 扁平化设计 交互设计师 界面设计 排版布局 优设专访 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立?#20004;瘢?#19968;直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

    017期神七是特码
  • 新加坡乐合天天彩开奖号码 重庆时时杀码方法 11选5前三组选最佳组合 云南时时的台子 买高频彩票的技巧 腾讯分分彩计划标准版 新疆时时自由的百科 北京pc28蛋蛋最快开奖 体彩福建36选7开奖时间 时时缩水app苹果 好运十倍黑10 大乐透骗局求证实 北京时时平台刷反水 全民麻将内购破解版下载 黑龙江时时查询 快乐三分彩怎么下载