版画设计语言在App插画中的应用

程谌

（武汉理工大学，武汉 430070）

一、版画与插图发展简述

插画是一门历史十分悠久的艺术，目前发现人类最早的插画是在公元前两万年的法国南部地区的“拉四格的洞窑画”。经过一段时期的发展，插画被广泛应用于印刷书籍中。目前已知最早的插画书是古埃及的《亡灵书》，这本书一共有190篇章全长9米，使用的纸张是莎草纸，里面记载着符咒、祈祷文、和赞美诗。到了14世纪，各式各样的图书馆纷纷出现，以复制世俗文本的小作坊建立起来，插图开始成为独立的手工艺术活动。这些手抄本的装饰图案和插图大量出现在宗教、植物学、医学以及百科全书中，并且插画的风格都是以细密画为主。

15世纪随着欧洲中世纪艺术、文化以及冶金的发展，中国木板印刷的流入，插图的复制技术得到了改进。这些木板印刷首先被应用到了织物装饰品上，接着大量的运用在宗教画像上，在这个时期中插图最多最丰富的书是由哈特曼·舍德尔（Hartmann Schedel）在纽伦堡出版的《纽伦堡编年史》（图1）。这是一部含有丰富插画的世界历史书籍。原稿全书共包含有645副插画。到了15世纪后半叶开始出现多色印刷法，并开始出现铜板凹版，刻板方式分为干刻法和腐蚀法，直到17世纪版画的艺术表现形式得到了极大的发展，诞生了美柔汀版画、飞尘腐蚀版画等成熟刻板技法，版画让插图显得更加生动逼人，使图像传播的信息得到了质的飞跃。

20世纪后，印刷技术的提高使得版画往多领域发展，并出现了丝网印刷、综合版画和数字版画，版画的商业性越来越小。社会发展到今天，插画被广泛地用于社会的各个领域。随着艺术的日益商品化和新的绘画材料及工具的出现，插画艺术进入商业化时代。现代插画的概念已远远超出了传统规定的范畴，插画不再局限于某一风格，它打破了以往单一使用一种材料的方式，通过广泛地运用各种现代技术手段，使插画艺术的发展获得了更为广阔的空间和无限的可能。现在，随着智能手机的普及，使用人群的扩大，插画开始大量进入手机图形用户界面设计中。

二、App插画的发展

> 图1 哈特曼·舍德尔的《纽伦堡编年史》

> 图2 Window phone7 的扁平化风格

> 图3 电商传统节日Banner

近年来，App插画普遍呈现扁平化趋势。手机界面上的扁平化，最早出现在微软发布的windows phone7的移动界面设计上。早期微软公司将这种设计风格命名为metro design，其后更名为modern ui（图2），在风格上体现为直观简单的形状，粗并且干净的字体，明亮对比的颜色，长投影以及减少复杂细节和纹理特征。从历史的渊源来看，这种风格来源于19世纪四五十年代瑞士的国际主义风格，当时主要影响层面是海报，将字体与图像结合起来被视为视觉传达交流的最有效的方式。

随着2013年苹果ios7的发布，扁平化得到了进一步发展，这也是苹果公司在设计风格上的重大转变，完全抛弃了了ios之前版本的拟物化特征。与微软的完全扁平风格相比，增加了一定的阴影和分界线，并且大量使用了半透明效果和“毛玻璃”效果来体现层级，同时用sensor制作出视差效果和大量华丽动画特效。因为涉及到很多产品，这种分割迅速在设计圈内流行开来，并逐渐出现在一些App软件配图和轮播页上。

2017年6月5日，苹果在wwdc上发布了ios11，9月20日该系统在北京正式推送。与前期相比，系统改变最大的是苹果应用商店。在苹果应用商店中增加了今日视图，并大量增加插图使用面积，软件的展示插图占了手机屏幕几乎三分之二，并且将每种软件和游戏的风格进行了细致的归类。同时在视觉风格上采用卡片加阴影的设计形式。随着苹果以插画为主导的设计思路的引领，大量的插画应用在图标、文章配图、banner图上，以实景图作为插图的风格的软件越来越少。

三、App插画风格现状

目前交互和视觉设计师们将软件视觉效果的设计重点放在了App的插画设计上。在这种背景下，更多的插画风格应运而生。近几年App插画的主流风格大致分为扁平插画、肌理插画、手绘插画、渐变插画、立体插画、描边插画、MBE插画。扁平插画是消除掉立体感将能明显表现体积的颜色过渡、纹理、阴影等元素。肌理插画则是在扁平化图像上增加纹理丰富的插画质感。手绘插画则是普通的绘画流程。渐变插画是在色块中采用同一色渐变，整体画面给人一种唯美的感受。立体插画是在二维的空间表现出三维的空间，将被绘制的物体以二分之一侧面和半俯视呈现，并消除掉空间透视。描边插画则是在运用色块的基础上添加描边，将事物进行抽象化处理。MBE插画则是在描边插画的基础上给描边轮廓有规律的作断线处理。从这些延伸而来的插画风格来看，都是在扁平插画的基础上添加一种特殊效果，以此来丰富画面的成效效果。相比较而言，版画与App插画在形式上相似，尤其是日本浮世绘套色版画。以葛饰北斋的《富岳三十六景》为例，整体画面以线为主，通过线条的穿插表现前后关系，并且走线柔美流畅，以密集的点或者线来制造灰面，增添细节。颜色上以平铺为主，通常以一种颜色为主色，其他几种颜色为辅助色，这种表现方式通过改良转变成现在我们所看的的App插画风格。两者都抛弃了诸如阴影、渐变之类的效果，纯粹用平铺的色块和线条去表现物体。同时，版画与App插画在功能属性上类似。在批量印刷之前，插图还是以手工版画印刷为主，版画所印刷出来的插图与现代App插画虽然承载物不同，但在功能上都是以阐释或补充文字为主，并通过图像来增加对读者的感观刺激。另外，版画与App插画都具有相同的人群载体和市场指向。两者针对的人群都是普通大众，版画早期主要运用在广泛传播的宗教书籍或科学图鉴上，例如《圣经》和《世界图书百科全书》。而现代社会人人都用手机APP插画，面向的也都是普通大众。批量印刷以前的版画与App插画都具有商业性，目的都是为了更好地传播与推广。

四、版画设计语言在App插画中的体现

版画设计语言能很好的运用在商业banner图上，尤其是与传统节日相关。首先版画相对于实景图更具有趣味性和艺术性，能够增加其视觉冲击度。主流App软件在各种传统节日中会替换与节日气息相近的banner图。（图3）

版画设计语言也能运用在App的启动页上。本身启动页就是为掩饰一些启动时需要花很多时间进行初始化的应用，避免展示一个空的页面给用户。后来开发者意识到这一小块空白时间可以被利用得更加充分，比如像微信一样加入一些品牌展示的插图，或者是加入节假日营销插图给用户亲近感。现在启动页已成为表达品牌调性、产品定位的一块重要区域。各种产品经理都想尽量将启动页这块做得更具有趣味性。产品的理念通过插画的方式浓缩在三到四张启动页中。在站酷这款App产品中，启动页使用了黑白版画的形式表现了站酷App（图4）以“设计”“原创”“交流”为中心的产品定位，并在画面中添加类似摇点刀的散点作为肌理，颜色上采用最为简单的黄黑双色。

版画的设计语言很适合运用在一些面向儿童的App（图5）中。在儿童教育App“Lake涂色书”中，精选全球知名艺术家的高质量插画线稿，lake涂色书中的插画大多数都是平涂式插画。通过用户的再上色完成属于自己的插画作品。涂色过程犹如版画中的套色，选中调色盘的颜色点击被线稿分割的空白色块完成上色。用户仅通过选色点击就能完成接近于原作的效果，特别能缓解焦虑并给用户更多成就感。

> 图4 站酷App启动页面

> 图5 Lake涂色书中的平面插画

> 图6 WWDC获奖的5款游戏应用

版画设计语言在游戏设计中也表现良好。苹果的年度设计大奖已延长21年，越来越多地突出高质量的原创应用，并将界面的美感与用户体验相结合。设计师经常会在设计奖项列表中了解Apple所重视的应用程序设计风格。其中，获奖的有5个高品质的游戏，在图形、音乐和情节上都比较出彩（图6）：

《佛罗伦萨》一款互动故事书手机游戏，于2018年情人节推出，由纪念碑谷的首席设计师推出。讲述一个女孩的第一个爱情故事和令人心碎的低谷的高潮。虽然游戏故事和内容都比较简单，但在艺术风格上赢得了很多玩家的喜爱。

《INSIDE》是丹麦 Playdead工作室继《Limbo》后的又一力作。可以说，INSIDE有资格在画面、声音、情节、内涵和精神方面代表独立游戏的最高成就。自推出以来，已经斩获无数奖项，包括E32016奖最佳独立游戏、TGA2016最佳艺术指导、最佳独立游戏奖、GDC最佳视觉效果、最佳音效奖等等。

《阿尔托的奥德赛》，游戏中充满了艺术的气息。相对于前作增加了各种游戏玩法，同时保留了内核的横向版本。你的角色是一个滑雪者，翱翔在微风轻拂的沙丘之上，穿过令人兴奋的峡谷，探索神秘的寺庙和城市，远离家乡。

《FROST》引导粉碎的颗粒找到生命的和谐，这是令人赏心悦目的，通过一些简单的旋律和粒子融合的游戏，美丽的色彩让你无需了解就能沉浸其中。

《奥德玛》是一款出色的平台冒险游戏。全手绘水平滚动场景使其看起来不想像一个游戏，更像是电影或动态漫画。

从获奖名单中的这五款游戏的艺术风格上来看，不难发现其中掺有版画艺术的影子，手机游戏不再是以真实的画面为切入点，而是退回到二维，着重丰富艺术效果，抽象化物体，强调色彩与光影效果。

可以预见，App中的插画配图形式，今后还会延续插画的潮流。各种风格的插画可以完美搭配各种App的使用场景以及用户群体的特点，使得App呈现出不同个性化的使用体验，它可以更符合当前追求个性化定制体验的年轻用户社区的需求。版画设计语言在遵守界面设计的功能性和有效性的的基础上，App应用可以在很大程度上丰富现有的App插画形式。■

图片来源：

图1：https://www.bostonathenaeum.org/about/publications/selectionsacquired-tastes/liber-chronicarum-nuremberg-1493

图2：http://www.zcool.com.cn/article/ZNTI5NjIw.html?switchPage=on

图3：http://www.zcool.com.cn/work/ZMTk4NzY1NjQ=.html

图4：https://www.zcool.com.cn/work/ZMTMwOTc1ODA=.html