插画的发展及在UI设计中的应用

JELLY | 插画的发展及在UI设计中的应用

概览

01· 插画的源起发展

02· 商业插画被广泛应用的原因

03· 插画在UI设计中的优势和应用场景

1-01. 插画的源起发展

将其划分为五个时间节点，分别为源起，开端，探索，发展，变化。 在漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。


插画的源起，要从公元前15000年阿尔塔米拉洞穴彩色野牛头绘画说起，其次重要的是埃及的《死者之书》，这是公元前332年发现的纸钞草绘画作品，为什么说他很重要呢？因为它是最早以插画形式完整展示的叙事性内容。

死者之书也称为“通往光明之书”。段落是依照死者生平而撰写的，对其中画面感兴趣的也可以看看最近漫威新上映的英雄剧集《月光骑士》，里面后三集的一些情节和死亡之书有契合之处～，比如男主两个人格（马克和史蒂文）的心脏再和天平秤量的时候，因心脏都不完整无法在天平上保持平衡。这一设定死者之书中也有绘制，这源于古埃及神话：当一个人去世后，为了证明自己无罪，用玛特的羽毛和死者的心脏称量，如果心脏比羽毛轻即为无罪。反之则有罪。（Ma’at玛特）【古埃及真理和正义的女神，其象征物为鸵鸟羽毛。】

1-02. 插画的开端

公元5-15世纪为插画的开端，这里主要着眼于两处，一是中国隋唐五代时期出现的为印制而雕刻成版的版画，这也是世界上发现最早的版画记录，二是欧洲，此时欧洲插画主要应用于宗教领域。呈现形式为刺绣和手抄本
.

1-03. 插画的探索

15-17世纪，插画进入了探索阶段，上图第一幅作品—火之圣母是欧洲记载最早的版画。1440年从欧洲的角度而言标志着插画艺术的真正开始，缘由为德国人古腾堡发明和建造第一台活字印刷机由此插图版画在书籍中广泛运用。

16世纪文艺复兴时期，德国画家丢勒，使得欧洲木刻达到了顶峰。

17世纪巴洛克时期的鲁本斯对于木刻进行再次探索。


1-04. 插画的发展

18-19世纪属于插画的发展阶段，这里首先提及英国18世纪的三位画家，分别是：威廉·霍加斯、托马斯·比维克、詹姆斯·吉尔雷。

第一幅《堕落过程》为霍加斯的系列作品，一共有8副，记录了伦敦社会中一位年轻绅士的腐败以及最终毁灭，讽刺当时英国贵族奢侈糜烂的生活。整个系列也被称之为叙事插画最伟大的成就之一。

第二幅为《四足动物史》，作者比维克一生都在为伊索寓言绘制插画。

最后一幅作品描绘的是英国首相威廉皮特和拿破仑瓜分全球，作者吉尔雷，他的蚀刻版画因其尖刻的政治讽刺而闻名。

比如说现在的微博大V乌合麒麟他的绘画作品也多为社论和政治讽刺，最为大家所了解的是孟晚舟女士回国这张作品,在推特和ins上能看到很多相关社论插图，以下几张。


发展阶段，纵观日本和中国仍然偏爱木版印刷，并且保持极简主义。葛饰北斋，是这一时期中最有成就的。简约清晰的线条以及全彩制图使他打破了木版绘画的局限性。代表作为《富岳三十六景》
。

此外在发展阶段必须要提及三次技术革新。

1· 一次是18世纪平版印刷机的发明，在整个印刷过程中，可以在印刷运行中单独添加色彩以获得全彩效果。

2· 第二次技术革新是摄影技术的发明，1826年尼埃普斯拍摄了现存最早的照片但实际上1839年由其合伙人达盖尔才真正发明了摄影技术（这对古典艺术，写实类肖像画产生了一定的冲击但由于最初的摄影技术只能拍摄黑白照片，所以对于彩色插图而言并有有形成太多的冲击
。

3· 第三次革新为19世纪中叶，报纸在整个欧洲兴起。插画的叙事性为新闻增加戏剧性。由此出第一个标志性的漫画人物 Aly Sloper 【盟友斯洛珀】诞生，围绕盟友斯洛珀塑造了很多新闻事件插图，比如上图的《李鸿章参观霍根巷
》

1-05. 插画的变化

20世纪插画到了不断变化的阶段。

从两个角度去看，一是变化的主要原因，二是不同风格的原因。

接下来重点看一下有哪些插画风格在变化阶段应运而生。


·复古怀旧浪漫

主要代表人物有 拉克姆 和 杜拉克 以及浪漫的乡村主义 波特（细致的水彩插图）波特笔下的兔子后期改编为电影，就是大家所熟知的《彼得兔》


·漫画的革新

改变漫画形式为【乔治·赫里曼】。在他的创作中，线条松散。构图上运用时间和空间的概念，表现出超现实的视觉幽默。上图《疯狂的凯特》通过洞的不同方向，以及夜晚白天来表达空间和时间的变化。

到了六七十年代，比利时插画家 愛弗·米倫，他的风格更为时髦犀利
。

·战争宣传海报

一战期间，插画被应用到战争中，比如招募男性士兵、保护妇女儿童。

二战期间，插画主题多为压迫犹太人，以及美化德国的民族主义、庆祝反法西斯胜利
。

·装饰现代主义

要提及四位著名的插画师。

首先第一位新艺术运动的代表人物 穆夏，他抛弃传统装饰风格，使用大量自然元素作为装饰，优美的曲线来描绘女性。

第二位 比亚兹莱 他的画风受日本浮世绘等风格的影响，具有强烈的个人风格，尤其是对线条的出色运用和黑白画的创造性成就。


第三位 卡桑德尔，第二次工业革命以后，人民对现代性发展有了广泛的接受，卡桑德尔在他的作品中，打破了几何边界的界限，并且有较强的设计感。第四位是被誉为“发明了现代杂志设计的整个构想”的 克里斯蒂安 ，他为当时的《星期六晚邮报》制作了三百多个封面。


1967年嬉皮文化到来。由时代音乐及地下生活方式的影响而创作的色彩鲜艳的的迷幻图像（看起来像是一场对装饰艺术风格的革命），但是并没有转化为主流，到七十年代初，就几乎销声匿迹。


·极简主义美学

代表风格为萨普拉卡特风格，这种风格的先驱 霍尔温，作品中较少的几何形体、醒目的字母、形状最大简化。对极简主义美学和海报化做到了很好的探索
。

·电影和动画

真人电影和动画电影诞生于维多利亚时代晚期。

到了20年代，它们已经主宰了娱乐界，此时摄影技术还没有很完善，所以制作海报的几乎都是插画。代表作品《大都会》《爵士歌手》。展示了插画在电影海报中的妙用。

20年代，第一位动画明星【猫菲利克斯】诞生，实际上后来很多的IP动画形象都有参考其模版绘制，包括米老鼠、猫和老鼠。

1937年：迪士尼，发行了第一部彩色长篇动画《白雪公主》此时除了动画师，还有数百名的概念艺术家、角色设计师。

1938年最初创造的超人形象登场——动画也向全新的流行艺术发展。


·儿童绘本

1928年儿童插画家 万达·加格 出版的《数百万只猫》被公认为是第一本（绘本）。打破了原有图书文字排版和插图之间的关系，取而代之的是更多的由有趣的插图，文字只是为了支撑图像。但此时儿童绘本并没有被更多用户接受和理解。

一直到1963年 森达克 创作的《野生动物在哪里》强化了儿童绘本在用户心中的心智，这也是儿童绘本的里程碑。

·超现实主义幽默

第二次世界大战以后，插画师 阿兹巴舍夫，创作的图形风格惊人，拟人化、在机器上显示出明显的人为属性，有超现实的黑色幽默
。

·奇幻画派

六七十年代，摄影逐渐取代插画成为媒体视觉表达的主要方式，比如杂志的封面多为摄影拍摄，但由于摄影不能拍摄不存在的东西，所以幻想艺术蓬勃发展（科幻小说、漫画、儿童绘本）奇幻画派的先驱 弗雷泽塔 创作了很多肌肉发达的英雄，已及奇幻元素。当代游戏概念艺术都受到他的 影响。

·数字艺术

80年代个人电脑革命兴起——数字技术发展迅速。 设备也不断更新比如：手绘版、iPad。

综上所述可以发现，插画风格是多样的，而背后的原因，除了插画师本人的经历、喜好、价值观等主观原因，更多的是受时代背景、流行文化、社会环境、历史事件、以及绘画技法、等客观因素的影响。才慢慢演化为当下自由、多元、包容的插画创作氛围。


2. 商业插画被广泛应用的原因

从六个方面来看，分别是商业插画的概念、应用场景、应用背景、插画本身的优势、市场和用户需求。

艺术创作没有目的性，但是商业插画的目的性非常强。商业业插画一般承接了用户和市场的需求，深受当下的流行文化影响。


插画的应用场景有很多，归类来看分为以下六种：

从四个角度看插画的应用背景

1·商业化的发展及视觉文化传播方式的广泛应用

2·人的思维模式从语言文字为主的理性主义形式转变成以图像为主的感性主义形式

3·文化形态的传播方式从语言文字的生产、传播、消费转变成视觉图像的创作、传播和消费

4·信息时代的不断发展，电脑等电子设备已经成为时代发展的标志


插画本身的优势有一下几点

从市场需求的角度来看，市场需要通过插画广告刺激消费—提高经济效益，其次强化宣传提升品牌传达


从用户需求的角度来看，互联网信息时代，用户在接收复杂繁多的广告信息的同时，需要更好的视觉体验来提高审美，其次用户也希望从中产生一定的情感共鸣，获取到情绪价值。

3. 插画在UI设计中的优势和应用场景

优势有
以下几点：

1· 信息可读性与高记忆点

从用户角度来当前界面，可以简洁直观的通过插画get到花不同的钱可以享受到的不同服务
。

2· 叙事性激发用户交互

美国的Mailchimp，网页端用插画的方式引导用户认识产品并如何使用产品，更好的激发了用户进行交互操作。

3· 强化品牌识别

通过IP的插画设计，不断夯实品牌的用户心智


4·强化界面的美型提，升用户审美。


5·插画的定制感与独特感增强用户的分享欲望


6·建立信任

插画的表达方式更能与用户拉近距离建立信任。

插画在UI设计中的应用场景，分别有以下这些
：

1· 新手引导

比如转转知乎在新手引导时都选择插画的表现形式，提升用户对产品的好感度，已及降低对产品的学习成本
。

2·新功能提示

降低用户学习成本，拉近与用户之间的距离～


3· 品牌宣传

Goole的web端每逢节日便会有围绕goole logo来进行节日主题插画的创作，很好的强化品牌的用户心智
。

4·登录页

众多产品都在登录页使用插画的表达形式，更容易于用户产生情感连接达到品牌触达。


5·插画组件

Ant Design、自如都构建了自己的插画组件，有助于统一的视觉风格传递，提高设计效率——搭建设计资产——最后保证情感化触达


6·IP设计

这可以很好的赋予品牌生命力提升品牌的温度，更好的触达用户


7·奖励机制和榜单

在一些奖励交互动作时通过插画形式传达正向反馈，提升用户情绪价值
。

8·H5的主题分享

最近几年产品都会有年度报告，有很多都以插画的形式表现，插画的定制感与独特感增强用户的分享欲望。用户通过分享建立自己的社交货币，满足用户的社交需要。


从插画的发展、商业插画、UI设计中插画的应用三条脉络做了简单梳理。希望对您了解插画应用插画有一定的帮助。

感谢浏览～Thanks