插画在app设计中的运用

插画类的APP

随着UI设计越来越成熟，为了降低学习成本，界面设计越来越倾向于使用保守方案，各种界面组件化，成熟的UI设计师使用类似搭积木一样的办法，可以快速拼装了一个APP的界面。App设计越来越同质化，很多界面看起来非常雷同，那么有那么一类型App界面，却看起来与众不同，就是大量使用插画做为界面设计元素的APP。相比于我们常见的搭配照片的APP，插画比起图片更加能体现设计师的独特创意性，传达的氛围感更加浓厚。精心设计的插画往往比文字更具有视觉冲击力，能够有更强的感染力。那么今天竹子就为大家介绍一些不错的插画风格的APP.

Mellowme

这是一款助眠、冥想、放松身心的工具，界面大量使用了扁平噪点插画风格，显得独特有设计感。

当你一打开这个app，映入眼帘的是一幅幅可以左右滑动的优美雅致扁平插画卡片。插画内容与对应主题相关，色彩也很符合当时的场景。例如：早上是一幅清新明亮的早绿色的丛林漫步插画，有一种清爽怡人的感觉；晚上是一幅深篮紫色的酣然入梦插画，表示夜幕的降临。插画卡片后面的背景色也会随着插画的变化而变化，使得整个页面更加优美和谐。精心设计的插画往往比文字更具有视觉冲击力，能够有更强的感染力。

不同时间段打开app，会有不同的问候语和适合这个时间段的内容推荐。例如，下午的时候，它会对你说：下午好（后面还有可爱的图标），起身接一杯水，进行一次呼吸，美好的午后，尽享放松。然后下面会有一个小睡一下的内容推荐。赋予app人的身份，把它当作用户的爱人、朋友等，通过温暖的语言表示对用户的关心，能够让用户感到很温暖

探索页提供应用内所有课程的分类，相对于各种课程，竹子更感兴趣的的是个界面插画配图和优美的配乐。

由于画面中只有很小一部分在动，这是一种不打扰人的微动效。这种以动衬静的方式，会让你越是感到安静，感到就像夏日的午后一阵微风吹动婆娑的柳叶的声音一样的安静与惬意。音乐、动效配合精美的画面能够更好的营造氛围，让人渐渐融入其中。

当你开始冥想呼吸练习的时候，会有一轮白色的光圈，通过放大缩小的方式模拟呼气和吸气的效果，帮你找到正确的呼吸节奏。有了正确的指引和陪伴，用户会更好的坚持下去完成任务。

整体来看这是一款插画和界面功能高度结合的应用，把插画的优势发挥的淋漓尽致，不过这是一款付费的应用。为了让更多人看到这个优秀应用，我还是推荐一下。

同类冥想类应用推荐

苹果应用市场上还有不少类似付费的冥想类应用，我就不每个单独介绍了。功能相差不大，就是都有各自特色类的插画和应用。我推荐给大家都去下载去看下，这些应用可能没有安卓版本。

Sonus isand

Wildfulness2

Relax Meditation

Uki

Uki是一款主打陌生人社交软件。界面里大量运用了插画设计进行界面的贯穿。使用随机的文字和声音进行社交匹配。也算一种变相的兴趣陌生人社交应用。

启动页的主色调采用了比较难搭配的紫色调进行背景设计，搭配了若干个可爱的小怪物设定。最新版的Uki经过多次迭代和之前的初版有了不少差异，这里我的截图是老版本的，因为老版本的插画使用更加多，吉祥物贯穿更加完整。

登录注册页使用了大圆角的文本框，和界面的Q萌风格匹配。宽大的输入框，文字输入非常舒服。

既然是交友软件，那么就要想一个办法让互相感兴趣的人认识，UKI使用的方法是随机文字匹配。当然也有一个比较独特的地方，就是听声识人，用声音来匹配互相感兴趣的人。避免了没有好看照片无人问津的尴尬。

界面内贯穿了大量的紫色，和丑萌的怪物形象。

界面内这个设计个人专属形象的功能也比较有趣，大量使用了丑萌的小怪物形象。非常有特色，这个丑萌的形象贯穿了启动页，主界面，各种无数据页，及个人中心页。

当然各种趣味测试，分析个人性格属性之类的小功能肯定是必不可少，总体来看这是一个大量使用渐变插画，比较有少女心的一款APP。

好奇怪

好奇怪是一个分享图片的应用，每天有大量设计师上传各种创意壁纸，壁纸有各种脑洞大开的漫画，和各种优美的插画，我经常在上面DOWN各种优美的壁纸去更新我手机的图片库。

首页很轻量级，只有3个主要模块，分享漂亮的壁纸，各种创意个性的头像，还有一些耗费你时间的各种有趣文章。当然我个人最感兴趣的还是前面的2个模块。

我的手机不太喜欢放风景之类的壁纸，毕竟我是设计师。我还是希望的我的手机更加个性不一样点。里面有大量的矢量插画，线条不复杂，这样对于做背景来说也不会太干扰我前景的图标。

另外好奇怪还有一个特别有意思的功能设计，就是可以对你壁纸进行个性化编辑，有大概30多种造型模块，各种创意的小刘海。

好奇怪里面第2个我特别喜欢的功能就是这个头像了，设计师也需要有各种创意头像，千篇一律的真实人物头像真的撞车很多。这种矢量插画式的人物头像就有创意的多了。据说每个星期都会更新新的个性头像。

对于设计师的个人品牌这件事情我是一直很强调的，我给学生做视觉创意训练的第一课就是训练设计自己的个人个性头像。所以做为设计师的你，也需要在这块多多重视。

想看更多我的学生作业图形logo的可以移步《竹笋集60 图形LOGO》

https://www.zcool.com.cn/work/ZMzU3MzM5MjA=.html

Peace

这是一个专注冥想，帮助睡眠的应用。这也是一款基于蓝紫色调的应用。

主页是一个很简单的图形界面构成，上面是日期的图形界面，下半截是各种课程的推荐。

是一个收费应用，所以默认提供了一个基础课程的试听，毕竟竹子是来看设计的，所以就不付费听更高级的课程了，如果大家有兴趣也可以付费支持一下。

冥想就是一个课程分类页，里面提供了大量各有特色的课程。竹子更加关注是列表页里面的配图插画，这些插画风格非常统一，使用了大量暖色系的插画，而且构图比较饱满，基本上采用的构图是一个半截人物和相应的背景。这些画面内容聚焦，且不会因为插画的大量细节对文字阅读进行干扰。

这些插画的配图风格统一，如果有设计师想借鉴这种手法，我们需要注意画面不要过于复杂。色调保持稳定统一。如果有吉祥物也可以直接贯穿在画面中替换人物形象。

睡眠的应用比较舒缓，适合夜晚睡前使用，为了配合使用的场景，使用了暗色系的界面，当然暗色系更加适合表达微渐变的插画。所以视觉效果更加突出。

PEACE还直接提供了一些自然声音的播放，我个人是比较喜欢听雨声的，声音舒缓，滴答滴答的雨声很容易让自己的心情平复下来。

有道口语

这是一个打卡学习英语的应用，采用的是扁平插画式设计，我们知道学习和体育锻炼都非常枯燥，而且比较艰苦。所以天然适合运用插画融入其中，使枯燥的学习过程更加有趣味性。

有道英语分别设计了一个男女人物形象。这个形象贯穿整个界面设计中。我们在自定义性别的时候可以分别看到这个人物形象的初始设定。

一个统一的形象贯穿可以给界面带来独特性，同时使冰冷的界面融入了更多的情感化设计元素

因为有了这个形象的存在，界面内的各种无数据页面也可以运用这个人物形象。

涂手

涂手是一个鼓励大家随意涂鸦方式的绘制，不是那么正式，想到什么画什么。几乎是一种零门槛的表达情绪或者内容的方式。

引导页是非常有涂鸦风格的配图，而且微动效做的非常有意思。第4张的进入按钮也没有使用规则的圆角矩形，而是非常有涂鸦风格的不规则形状。

图题就是出一个题目，大家一起画，你看这依然不是一个容易的事情。普通人很难参与其中呀。

消息列表和个人中心没有采用通常的圆形图标，而是不规则的涂鸦形状。整个界面的表现手法和内容都和应用的气质高度一致，是一款非常有风格的应用。

设计总结

1、插画是一个设计的重要手段

无论各种网站、APP界面、专题设计，还是线下各种的物料设计，各种有独特风格的插画做为一个重要的设计手段，可以让你的设计与众不同，脱颖而出。

2、插画具有较强的视觉冲击力

相对于泛滥普通的照片图，插画更加具有的独特的视觉魅力，插画的内容更加可控，可根据设计师的愿意自由表达图片的内容。

3、界面的插画

不同于一般意义的插画，界面上用的插画以扁平和渐变插画为主。因为这类插画的画面风格比较简洁。没有太多繁复的的细节。不影响界面文本信息的表达。

4、品牌视觉的辨识

因为插画具有独特性，所以可以让界面风格明显不同于竞品，插画中的吉祥物运用，品牌元素的搭配，可以更加突出表达设计的品牌性。

本期分享到此，下期接着分享一些风格独特的APP，中秋节没有出门，在家专心编辑这篇文章了。记得给竹子点个赞。如果想看更多原创设计文章，可以去我的站酷主页关注公众号《聊设计》

Booui.zoool.com.cn

点赞的人最可爱