现在APP的数量越来越多,制作也越来越精美,各种APP都想在设计上能够与其他APP区别开来,从而更好的吸引用户的注意,将插画运用在APP当中,无疑是一种好的选择,在iOS 11的App Store“Today”中就用了很多的插画,给用户带来了全新的体验。
最近一段时间一直在给公司的新产品设计插画,在设计的过程中也有了一些思考,从而产生了这篇文章,文章当中主要探讨了几个问题:为什么要在APP当中使用插画?目前流行的几种插画风格;APP中哪些地方适合配插画?以及我在dribble上看到的一些好的插画分享给大家,还有一些实际的例子。最后根据我的经验,给大家在设计插画时提了几点小建议。
一. 什么要在APP当中使用插画?
增加视觉冲击感,总结为两个字“惊艳”,例如“walk up”APP,当中的每一个页面都运用了插画,而且设计得极其精美。

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

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

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

二. 目前比较流行的几类插画及其特点
扁平插画
肌理插画
手绘插画
MBE插画(dribble一位大神创作了这种风格,因此被称为MBE风格插画)
渐变插画(有时也称微光插画)
立体插画(也叫2.5D插画)
描边插画
下面分别对各种插画进行举例,所有例子均来自dribble。
扁平插画:扁平插画的特点是扁平,简洁明了,扁平插画是现在很流行、也是最常用的风格。

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

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

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

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

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

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

三. 各类插画在实际APP中的运用
扁平插画:得到、摩拜单车(用在banner、背景图)

肌理插画:百度外卖、淘宝、App Store(用在刷新、背景图、专题)


手绘插画:ofo、下厨房(用在banner、专题、弹框)


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

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

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

总结一下:插画适合用在APP当中的启动页、banner、专题、刷新、icon、弹框、背景图等等。
四. 关于APP插画的几点小建议
插画的风格要和app的整体风格搭配,例如洋葱数学的整体风格都是扁平的,如果在当中使用手绘风格的插画就不合适。
插画的内容要能够体现出主题,要和文案配合好。
插画要尽可能的有创意,虽然我知道这很难做到,但是也要体现出设计师的想法和心思在里面,最重要的是注意细节,细节决定成败。
最后,放几张我自己的肌理插画吧。

 原文地址:UI
                    情非得已
                
3个平面设计技巧学会动态字体海报2020-07-09
                    
如何设计出优秀的文字类海报排版2020-04-02
                    
7个有效提升传达率折页设计技巧2020-03-19
                    
设计师如何解决作品视觉缺少层次感2020-03-14
                    
详细解析平面设计中元素的使用技巧2020-03-13
                    
设计师必须要学习的平面设计配色技巧2020-03-11
                    
解析设计师常用的6大构图方法2020-03-11
                    
3个帮你快速掌握字体搭配思路2020-03-10
                    
设计师如何设计出中国风主题LOGO2019-10-21
                    
详解如何让板式海报设计变得简单2019-10-21
                    
4个配色技巧帮助您解决色彩问题2021-03-10
                    
设计师需要掌握的平面设计技巧2021-03-10
                    
详细解析插画类海报的绘制思路和方法2021-03-09
                    
详细解析设计师必须掌握的色彩知识2021-03-09
                    
设计师必须要学习的高级配色技法2021-03-10
                    
设计师必须要学习的几个排版小技巧2021-03-10
                    
详细解析UI设计中终极配色宝典2021-03-11
                    
详解如何把产品和背景融合到一起2021-03-11
                    
                    详细解析UI设计中终极配色宝典
                相关文章1162021-03-11
            
                    详解如何把产品和背景融合到一起
                相关文章1072021-03-11
            
                    设计师必须要学习的几个排版小技巧
                相关文章1682021-03-10
            
                    4个配色技巧帮助您解决色彩问题
                相关文章2022021-03-10
            
                    设计师需要掌握的平面设计技巧
                相关文章1882021-03-10
            
                    设计师必须要学习的高级配色技法
                相关文章1762021-03-10
            
                    详细解析设计师必须掌握的色彩知识
                相关文章1792021-03-09
            
                    详细解析插画类海报的绘制思路和方法
                相关文章1842021-03-09
            