恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
插画在APP当中的运用
0.0°
2017-09-13 原创文章 经验/观点 举报 17107 1022 1573 45


写在前面:

现在APP的数量越来越多,制作也越来越精美,各种APP都想在设计上能够与其他APP区别开来,从而更好的吸引用户的注意,将插画运用在APP当中,无疑是一种好的选择,在IOS 11的App Store“Today”中就用了很多的插画,给用户带来了全新的体验。


最近一段时间一直在给公司的新产品设计插画,在设计的过程中也有了一些思考,从而产生了这篇文章,文章当中主要探讨了几个问题:为什么要在APP当中使用插画?目前流行的几种插画风格;APP中哪些地方适合配插画?以及我在dribble上看到的一些好的插画分享给大家,还有一些实际的例子。最后根据我的经验,给大家在设计插画时提了几点小建议。


有任何问题和不正确的地方,都欢迎大家交流指正。


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

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

Image title

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

Image title


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

Image title



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

Image title


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

1、扁平插画

2、肌理插画

3、手绘插画

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

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

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

7、描边插画


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


扁平插画  特点:扁平插画的特点当然是扁平啦,哈哈哈,不要打我,扁平插画是现在很流行、也是最常用的风格,特点是简洁明了。

Image title

Image title

Image title

Image title


肌理插画:我觉得肌理插画也属于扁平插画的一种,但是在最后要增加颗粒感,肌理插画的最明显的特点应该就是有质感,光影关系表现的比较好。我有一篇关于肌理插画的教程,欢迎大家去围观http://www.ui.cn/detail/278783.html

Image title

Image title

Image title

Image title


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

Image title

Image title

Image title

Image title

MBE插画:简洁、圆润、可爱Image title

Image title

Image title

Image title


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

Image title

Image title

Image title

Image title


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

Image title

Image title

Image title

Image title


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

Image title

Image title

Image title


三、各类插画在实际的APP中的运用


扁平插画:得到、摩拜单车(用在banner、背景图)

Image title

Image title

Image title


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


Image title

Image title

Image title


Image title

Image title



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

Image title

Image title

Image title

Image title


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


Image title


渐变插画和立体插画:拉勾。把这两种放到一起来讲,是因为很多时候一幅插画是包

含这两种风格的。(用在banner、专题)


Image title

Image title


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


Image title


Image title


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


四:关于APP插画的几点小建议


1、插画的风格要和app的整体风格搭配,例如洋葱数学的整体风格都是扁平的,如果在当中用手绘风格的插画就不合适。

Image title


2、插画的内容要能够体现出主题,要和文案配合好


3、插画尽可能的要有创意,虽然我知道这很难做到,但是也要体现出设计师的想法和心思在里面,最重要的是注意细节,细节决定成败。


最最最后,放几张我自己的肌理插画吧。Image title

Image title

Image title

Image title


哇,你已经看到最后啦,不如动动手指点个赞啊。

更新:2017-09-13

收藏

1022人已收藏

MaryDesign

求职、视觉、坐标北京

  • 20

    作品

  • 3883

    粉丝

  • 137

    关注

  • ofo《我们看过的世界杯》H5
  • 2017插画作品集
  • 怎么画一个萌萌哒的手绘头像?(视频+图文教程)
  • 如何使用Sketch绘制肌理插画?
相关标签
经验设计ui

    猜你喜欢

      2017-09-13 原创文章 经验/观点 举报 17107 1022 1573 45

      插画在APP当中的运用

      0.0°

      你确定要举报插画在APP当中的运用

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年09月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1573
      1022
      45

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录