• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超全面!为什么越来越多的移动App 使用插画设计?

超全面!为什么越来越多的移动App 使用插画设计?

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含产品设计,插画设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

MaryDesign?:现在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体验更优异》
  • 《学会这个教程,可以把任何一张人物照都变成插画风格》

原文地址:UI

================明星栏目推荐================

优优教程网: UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 网站产品设计参考的几条原则
  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 怎么做私单才能又快又赚钱?来看老司机的私藏流程!
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 为什么不要再问用户「你们到底想要什么」?
  • 这10个不好用的微信设计,有哪些深层次的产品逻辑?
  • 基础小科普!浅谈「列表视图」与「网格视图」的用法

相关文章

  • 2017-08-06CSS样式表高效使用技巧充分利用样式表的强大性
  • 2017-08-06网页中使用任意字体之实际操作附演示
  • 2018-08-23从设计默认值开始,让你的产品体验更优秀
  • 2018-08-23亚马逊语音交互设计规范(一)设计流程
  • 2018-08-23设计道理谁都懂,为什么换自己就不会?
  • 2018-08-23你与产品经理的意见不一致,该怎么办?
  • 2018-08-23实例教学!25个帮你运用好极简风格的设计方法
  • 2018-08-23产品迭代中,如何做到视觉设计的继承和升级
  • 2018-08-23上亿人使用的唱吧APP V8.6 改版设计过程揭秘
  • 2018-08-23需求分析:我走过最长的路,就是需求的套路

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 解锁构图新姿势!让平面作品变得高大上的3个构图技巧
    • 想让产品更受欢迎?来看这5个增加设计趣味性的方法
    • 用户体验是一种过程,而不是结果
    • 深邃神秘的网页!当深色系配色遭遇微妙的动效的时候
    • 2018年了,梳理一下语音交互界面的核心知识点
    • 平面设计中,如何通过“抄袭”优秀的作品成为高手?
    • 让一个网站看起来高大上且更有设计感的方法介绍
    • 高手的经验总结!如何自学平面设计?
    • 3 步提升文案转化率,写出叫好又叫座的文案
    • 想为iPhone X设计UI?给你这11个设计小贴士

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有